写在前面
HTML 是一门超文本标记语言，不管你听没听说过 HTML，但在网上冲浪的途中你无时不刻都在与它接触，他遍布在每个你看得到的互联网的角落。其实对于笔者而言，我已经断断续续地学习过这门语言，经过时间的磋磨，所剩知识也是寥寥无几，这次借此机会复盘并总结一下 HTML，当然在这里我不会将 HTML 语言的细节全盘拖出，只是总结笔者认为的重点，与诸君共勉。最后再补充一句，知识的广度使你我力所不能及，但是我们身处当下的互联网盛世，适应时代改变学习思维，已成必然。
（本篇文章不刨根问底，且概概而谈）
常见标签
标签是HTML中的一个重要概念，但是html标签很多，对于不专注于前端开发的来说，记得下面一些常见标签即可，如遇场景需要使用其他陌生标签，再去查阅文档即可，这里推荐 菜鸟教程：
html
<!-- 注释标签 -->
html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
html
<p>段落标签</p>
html
换行单标签
<br/>
html
格式化标签
<strong>加粗标签</strong>
<b>b 加粗标签</b>
<em>倾斜标签</em>
<i>倾斜标签</i>
<del>删除线标签</del>
<s>删除线标签</s>
<ins>下划线标签</ins>
<u>下划线标签</u>
html
图片标签
<img src="图片地址" alt="替换文本" title="提示文本" width="图片宽度" height="图片高度" border="边框">
html
超链接标签
1.添加链接
<a href="http://www.baidu.com">百度</a>
2.添加锚点（点击跳转）
<a href="#one">第一集</a>
.
.
.
<p id="one">
第一集剧情 <br/>
第一集剧情 <br/>
...
</p>
html
列表标签
<h3>无序列表</h3>
<ul>
<li>吃饭</li>
<li>学习</li>
<li>敲代码</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>吃饭</li>
<li>学习</li>
<li>敲代码</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>我的一天</dt>
<dd>吃饭</dd>
<dd>学习</dd>
<dd>敲代码</dd>
</dl>特殊字符
对于html中的特殊字符，是一些在HTML中具有特殊含义或被保留的字符。这些字符在HTML中具有特殊用途，如果直接在HTML文档中使用它们，可能会导致解析错误或被错误地解释。想要正确地在HTML文档中显示必须使用特定的语法格式，下面列出几种常见的特殊字符及对应的语法格式，端末附有完整对照表：
<：小于号（用于起始标签）。对应实体字符：<
>：大于号（用于结束标签）。对应实体字符：>
&：和号（用于表示特殊字符的开始）。对应实体字符：&
"：双引号（用于属性值的引号）。对应实体字符："
'：单引号（用于属性值的引号）。对应实体字符：'
：空格。对应实体字符：
©：版权符号。对应实体字符：©
表格标签
表格是HTML中一个很重要的组件，实际操作中也经常遇得到，下面就以一个"成绩表"的例子详细地说一说：
html
<!-- 表格 -->
<table border="1px" cellspacing="0" align="center" width="350px" height="200px">
<tr>
<th colspan="2">成绩</th>
</tr>
<tr align="center">
<td rowspan="2">语文</td>
<td>100</td>
</tr>
<tr align="center">
<td>95</td>
</tr>
</table>呈现效果：
注释：
- 首先使用表格，必须要先写出
<table></table>标签。- table 标签中的：
align是表格相对于周围元素的对齐方式，border表示边框，cellpadding内容距离边框的距离，cellspacing单元格之间的距离，width / height: 设置尺寸。- 其中
tr表示表格的一行，th表示表头单元格（内部文字会加粗居中），td表示普通单元格tr必须嵌套到table标签中，th、td必须嵌套到tr标签中rowspan="n"表示跨行合并，colspan="n"表示跨列合并
表单标签
表单标签经常用在用户输入的各种场景下，下面同样以一个例子进行详细介绍：
html
<!-- 表单 -->
<form action="#" method="post">
<table>
<tr>
<td>用户名:</td>
<td colspan="3"><input type="text" name="username" placeholder="用户名"/></td>
</tr>
<tr>
<td>密码:</td>
<td colspan="3"><input type="password" name="userpassword" placeholder="密码"/> </td>
</tr>
<tr>
<td>性别:</td>
<td ><input type="radio" name="sex" value="男" />男</td>
<td><input type="radio" name="sex" value="女" />女</td>
</tr>
<tr>
<td>兴趣:</td>
<td><input type="checkbox" name="interest" value="编程"/>编程</td>
<td><input type="checkbox" name="interest" value="书法"/>书法</td>
<td><input type="checkbox" name="interest" value="音乐" checked/>音乐</td>
</tr>
<tr>
<td>协议:</td>
<td colspan="3">
<textarea rows="5" cols="50" name="messege" placeholder="请在这里键入附注"></textarea>
</td>
</tr>
<tr>
<td>老家:</td>
<td colspan="3">
<select name="location">
<option value ="北京">北京</option>
<option value ="河南" selected>河南</option>
<option value ="广东">广东</option>
</select>
</td>
</tr>
<tr>
<td>生日:</td>
<td colspan="3"><input name="birthday" type="date"/></td>
</tr>
<tr>
<td >体重:</td>
<td colspan="3"><input name="weight" type="number" min = "30" max="150" placeholder="30~150"></td>
</tr>
<tr>
<td>上传附件:</td>
<td colspan="3"><input type="file" id="fileUpload" name="fileUpload"></td>
</tr>
<tr>
<td><input type="submit" name="注册" value="注册"></td>
<td colspan="3"><input type="reset" name="重置" value = "重置"></td>
</tr>
</table>
</form>呈现效果：
注释：
- 各种输入控件必须放到
<form></form>标签中才有实际效果。- input 标签表示各种输入控件，其中
type属性(必须有)，取值种类很多,checkbox(多选框),text(文本框), file(上传文件),password(密码框),radio(单选框)
,data(日期),number(数字域)等。- 其中
type还提供了三种按钮，分别是button(普通按钮)、submit(提交按钮)、reset(清空按钮)。placeholder是一个用于在表单字段中显示提示性文本的属性。name表示给input起了个名字，尤其是对于radio单选按钮, 具有相同的name才能多选一。value属性input中的默认值，一般text文本框和password密码框，不设置value值。checked默认被选中。(用于单选按钮和多选按钮)- select 标签表示下拉框，
<option></option>内填写下拉内容，option中定义selected表示默认选中。- textarea 标签表示文本域。
- 一般表单为了对齐美观，通常嵌套进表格标签
<table></table>中使用 。
无语义标签
在实际开发中我们通常会使用到两种无语义标签<div></div>和<span></span>。虽然无语义，但它们提供了一种有效的方式将内容与样式和布局分离，同时增强了代码的可读性、灵活性和可扩展性。
<div></div>和<span></span>就是两个盒子，用于网页布局，其中：
div是独占一行的, 是一个大盒子。span不独占一行, 是一个小盒子。