目录
一、标签
HTML是一种标记性语言，主要通过各种标签来呈现页面，不同标签有不同的语义和效果。注意：效果并不重要，标签最重要的是语义，所有的效果都可以通过css进行修改，主要是为了方便爬虫、盲人阅读器等等的读取。
二、常用标签
1.排版标签
排版标签主要是h1~h6标签，p标签，div标签。h1到h6分别代表一级标题，二级标题······六级标题。p标签表示段落。
div标签没有语义，在代码中通常用来包裹，打包代码块。
2.文本标签
em标签语义：要着重阅读的地方；
strong标签语义：十分重要的内容（语气比em强）；
span标签语义：没有没有语义，用来包裹代码片段。
另外还有很多不常用的文本标签，比如cite，del，sub等等很多，感兴趣的可以在W3C官网上查看。
3.图片标签img
该标签同过src属性来访问图片，src内部可以直接引入（相对路径：'./'表示当前文件下，‘../’表示往上跳一级），可以是在线地址（绝对路径），alt值代表图片的名字，便于搜索时可以搜到该图片。
另外可以通过width和height属性调整图片的宽和高。
4.超链接 a标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#Wechat">看微信头像</a>
<!-- 超链接跳转页面 -->
<a href="https://search.jd.com/Search?keyword=%E6%89%8B%E6%9C%BA&enc=utf-8&wq=%E6%89%8B%E6%9C%BA&pvid=8858151673f941e9b1a4d2c7214b2b52"
target="_blank"> 京东手机</a>
<!-- 超链接跳转文件 -->
<a href="./facivon.jpg" target="_blank">看图标</a>
<!-- 超链接跳转锚点 -->
<div>
<img src="./facivon.jpg" alt="">
<img src="./facivon.jpg" alt="">
<img src="./facivon.jpg" alt="">
<img src="./facivon.jpg" alt="">
<img src="./facivon.jpg" alt="">
<img src="./facivon.jpg" alt="">
<!-- <a name="Wechat"></a> -->
<p id="Wechat">这是一个微信头像</p>
<img width="200" src="../facivon.ico" alt="">
</div>
<!-- <a href="../facivon.ico" target="_blank">微信头像</a> -->
<p>本节完了</p>
<a href="#">回到顶部</a>
<!-- 超链接唤起指定应用 -->
<div>
<!-- 电话 -->
<a href="tel:10086">电话联系</a>
<!-- 邮件 -->
<a href="mailto:Rocket@4399.com">邮件联系</a>
<!-- 短信 -->
<a href="sms:10086">短信联系</a>
</div>
</body>
</html>超链接用来实现页面的跳转，通过href属性控制跳转的页面，里面可以是一个在线地址，也可以是一个锚点，通过锚点跳转页面的位置。
另外href里面还可以是电话，邮件，短信等等，用来唤起指定应用。
4.列表
列表分为有序列表ul，无序列表ol和自定义列表dl。
（1）有序列表
有序列表用ul表示，其中的每一步用li表示。
（2）无序列表
无序列表用ol表示，其中的每一条用li表示
（3）自定义列表
自定义列表用dl表示，每一条用dt表示，dd用来解释dt。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<div>
<h2>把大象放进冰箱分几步？</h2>
<ol>
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
</div>
<!-- 无序列表 -->
<div>
<h2>我想去的几个城市</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>拉萨</li>
</ul>
</div>
<!-- 自定义列表 -->
<div>
<h2>如何学习</h2>
<dl>
<dt>预习</dt>
<dd>提前准备</dd>
<dt>做笔记</dt>
<dd>后期复习的帮手</dd>
<dt>多实操</dt>
<dd>自己写下的代码才是自己的</dd>
</dl>
</div>
</body>
</html>
注意：列表带有默认的样式，但是这并不重要，因为后期都是可以用css除去的。
5.表格
相关标签：table:表格；caption：表格标题；thead：表格头部；tbody：表格主体；tfoot：表格脚注。表格头部的列用th表示，表格主体和脚注的列用td表示，行都是用tr表示。行合并用rowspan="n"属性，列合并用colspan="n"。下面是示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<div>
<table border="1" width="500" height="300" cellspacing="0">
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead height="50" align="center" valign="middle">
<tr height="100" align="center" valign="middle">
<th width="50" height="100" align="right" valign="bottom">姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody height="520" align="center" valign="middle">
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot height="50" align="center" valign="middle">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</div>
<div>
<table border="1" width="500" height="300" cellspacing="0">
<caption>课程表</caption>
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="5">上午</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
<td>2-6</td>
<td>2-7</td>
<td rowspan="5">休息</td>
</tr>
<tr>]
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
</tr>
<tr>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
</tr>
<tr>]
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
<td>5-6</td>
<td>5-7</td>
</tr>
<tr>]
<td>6-2</td>
<td>6-3</td>
<td>6-4</td>
<td>6-5</td>
<td>6-6</td>
<td>6-7</td>
</tr>
<tr>]
<td rowspan="2">下午</td>
<td>7-2</td>
<td>7-3</td>
<td>7-4</td>
<td>7-5</td>
<td>7-6</td>
<td>7-7</td>
<td rowspan="2">休息</td>
</tr>
<tr>]
<td>8-2</td>
<td>8-3</td>
<td>8-4</td>
<td>8-5</td>
<td>8-6</td>
<td>8-7</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>6.表单
表单标签是form，表单包括的标签有很多，比如文本框，密码框，单选框，复选框，隐藏域，文本域，下拉框，按钮等等。
值得注意的是：隐藏域主要用来保护网页，防攻击。按钮又分为普通按钮（检测账户是否被注册），确认按钮，重置按钮，通过属性type来控制。
注意表单的value值，只是提交的内容，后期用来确认账户。
表单禁用控价：disabled，该属性可以禁用表单。
具体使用代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<div>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>搜索</button>
<hr>
</form>
<form action="https://search.jd.com/search" target="_blank">
<input type="text" name="keyword">
<button>搜索</button>
</form>
</div>
<form action="https://search.jd.com/search" target="_blank">
<!-- 文本输入框 -->
账户：<input type="text" ,name="account" value="张三" maxlength="10"><br>
<!-- 密码输入框 -->
密码：<input type="password" ,name="pwd" value="123" maxlength="10"><br>
<!-- 单选框 -->
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女<br>
<!-- 多选框 -->
爱好：
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头<br>
<!-- 隐藏域 -->
<input type="hidden" name="abc" value="123"><br>
<!-- 文本域 -->
其他：
<textarea name="other" cols="30" rows="3"></textarea><br>
<!-- 下拉框 -->
籍贯：
<select name="place">
<option value="黔">贵州</option>
<option value="云">云南</option>
<option value="川">四川</option>
<option value="粤">广东</option>
</select><br>
<!-- 确认（button和submit两种）与重置 -->
<input type="submit" value="确认">
<!-- <button>确认</button> -->
<!-- <button type="reset">重置</button> -->
<input type="reset">
<!-- 普通按钮 -->
<button type="button">检测账户是否被注册</button>
</form>
<form action="http://search.jd.com/search">
<!-- 表单禁用控件 -->
账户：<input disabled type="text" name="account" value="zahngsan" maxlength="10">
</form>
</body>
</html>7.框架标签iframe
之前的a标签跳转是跳转到新的页面，而使用框架标签可以让跳转的网页在当前页面显示。
具体代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<body>
<!-- <iframe src="http://www.baidu.com" width="900" height="300" frameboeder="1"></iframe> -->
<a href="http://www.baidu.com" target="tt">点我看百度</a>
<a href="http://www.taobao.com" target="tt">点我看淘宝</a><br>
<iframe name="tt" frameborder="0" width="900" height="300"></iframe>
</body>
</html>值得注意的是，有的网页是不能这样跳转的，比如百度不能，淘宝可以。
三、总结
本节介绍了HTML4的一些常用标签，更多标签可以在W3C上查看，这部分是HTML的十分基础的东西，下一节将介绍HTML的全局属性，字符实体以及meta元信息。
标签：第二章,表格,标签,语义,表单,HTML,跳转,列表 From： https://blog.csdn.net/2401_88004140/article/details/145093334