复习HtmL(超文本标记语言)制作网页
程序员文章站
2024-02-26 18:02:10
...
1.我的第一个网页
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
<!--keywords 关键字-->
<meta name="keywords" content="提供关键字查询">
<!--description 描述-->
<meta name="description" content="描述这个是用来做什么的"
</head>
<body>
Hello world
</body>
</html>
2.标题标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签-->
<p>125648496</p>
<p>125648496</p>
<!--换行标签-->
<br>
<!--水平线标签-->
<hr/>
<!--粗体斜体-->
<strong>2313</strong>
<em>5165</em>
<!--特殊符号-->
空 格
</body>
</html>
3.图片链接
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的图片</title>
</head>
<body>
<img src="../resources/img/1.jpg" alt="加载失败" title="图片有毒" width="100" height="100">
<a href="4.链接标签.html#down">跳转到4</a>
</body>
</html>
4.连接标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><a href="3.图片标签.html">点击我跳转</a></p>
<p><a href="https:www.baidu.com">百度</a></p>
<br>
<p><a href="1.我的第一个网页.html"><img src="../resources/img/1.jpg" alt="加载失败" title="图片有毒" width="100" height="100">
</a></p>
<a href="dwon">dwon</a>
<br>
<!--功能链接-->
<a href="mailto:aaa@qq.com">发送邮件</a>
</body>
</html>
5.列表标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--有序0-->
<ol>
<li>svf</li>
</ol>
<!--无序-->
<ul>
<li>dsfv</li>
</ul>
<!--自定义-->
<dl>
<dt>svf</dt>
<dd>fvs</dd>
</dl>
</body>
</html>
6.表格
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<!--rowspan 跨列-->
<td rowspan="2">1</td>
<!--colspan 跨行-->
<td colspan="2">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
7.视频音频
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--video-->
<video src="../resources/video/2.mp4"controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls></audio>
</body>
</html>
8.页面结构
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
<h1>头部</h1>
</header>
<section>
<h1>主体部分</h1>
</section>
<footer>
<h1>
脚部
</h1>
</footer>
<nav>
<h1>导航类辅助内容</h1>
</nav>
</body>
</html>
9.内联框架
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="//player.bilibili.com/player.html?aid=55631961&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>"
<iframe src="" name="hello" height="800px" width="1000px"></iframe>
<!--通过a标签可以在iframe里加东西-->
<a href="https://baidu.com" target="hello"></a>
</body>
</html>
10.表单
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="1.我的第一个网页.html" method="post">
<!--readonly只能读不可修改
value="readonly 关键字只能读不可修改" readonly
-->
<p>名字:<input type="text" name="name" placeholder="请输入用户名" required></p>
<p>密码:<input type="password" name="pass"></p>
<!--单选框disabled禁用 checked 默认的-->
<p>性别:
<input type="radio" value="boy" name="sex" checked disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
<input type="submit" name="Button">
<input type="reset" name="reset">
</p>
<hr/>
<!--多选框 checked默认选中-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby" checked/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<!--按钮-->
<p>按钮:
<input type="button" name="byn1" value="点击变长"/>
<input type="image" src="../resources/img/1.jpg" height="100" width="60"/>
</p>
</form>
</body>
</html>
11.下拉框
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="1.我的第一个网页.html" method="get">
<!--下拉框 select 列表框option 默认selected-->
<p>下拉框:
<select name="列表名字">
<option value="china" selected>中国</option>
<option value="us">美国</option>
<option value="选着值">厦5</option>
</select>
</p>
<hr>
<!--文本域-->
<p>反馈
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload"/>
</p>
<p>
<input type="submit" name="Button">
</p>
</form>
</body>
</html>
12.简单的验证搜索
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="1.我的第一个网页.html" method="post">
<!--邮件-->
<p>邮箱:
<input type="email" name="email">
</p>
<p>网址url:
<input type="url" name="url">
</p>
<p>数字:
<input type="number" name="bum" max="100" min="0" step="10">
</p>
<p>滑块:
<input type="range" name="voice" min="0" max="100" />
</p>
<p>搜索框:
<input type="search" name="search" id="mark">
</p>
<p>
<!--增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text" >
</p>
<p>自定义邮箱:
<input type="email" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"/>
</p>
<p>
<input type="submit" name="button" >
</p>
</form>
</body>
</html>
文件的位置
上一篇: JMM和JVM内存区域及硬件内存架构
推荐阅读
-
复习HtmL(超文本标记语言)制作网页
-
HTML表单标记教程(5):文字域标记_HTML/Xhtml_网页制作
-
XHTML标记要合理使用_HTML/Xhtml_网页制作
-
《HTML、CSS、Javascript网页制作,从入门到精通》——第一章 HTML基础,第二章HTML基本标记
-
标记语言——图片替换_HTML/Xhtml_网页制作
-
HTML表单标记教程(2):_HTML/Xhtml_网页制作
-
HTML表单标记教程(5):文字域标记_HTML/Xhtml_网页制作
-
HTML表单标记教程(3):输入标记_HTML/Xhtml_网页制作
-
HTML表单标记教程(2):_HTML/Xhtml_网页制作
-
标记语言——标题_HTML/Xhtml_网页制作