写在前面
HTML 是一门超文本标记语言，不管你听没听说过 HTML，但在网上冲浪的途中你无时不刻都在与它接触，他遍布在每个你看得到的互联网的角落。其实对于笔者而言，我已经断断续续地学习过这门语言，经过时间的磋磨，所剩知识也是寥寥无几，这次借此机会复盘并总结一下 HTML，当然在这里我不会将 HTML 语言的细节全盘拖出，只是总结笔者认为的重点，与诸君共勉。最后再补充一句，知识的广度使你我力所不能及，但是我们身处当下的互联网盛世，适应时代改变学习思维，已成必然。
（本篇文章不刨根问底，且概概而谈）
常见标签
标签是HTML中的一个重要概念，但是html标签很多，对于不专注于前端开发的来说，记得下面一些常见标签即可，如遇场景需要使用其他陌生标签，再去查阅文档即可，这里推荐 菜鸟教程：
<!-- 注释标签 -->
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
<p>段落标签</p>
换行单标签 <br/>
格式化标签 <strong>加粗标签</strong> <b>b 加粗标签</b> <em>倾斜标签</em> <i>倾斜标签</i> <del>删除线标签</del> <s>删除线标签</s> <ins>下划线标签</ins> <u>下划线标签</u>
图片标签 <img src="图片地址" alt="替换文本" title="提示文本" width="图片宽度" height="图片高度" border="边框">
超链接标签 1.添加链接 <a href="http://www.baidu.com">百度</a> 2.添加锚点（点击跳转） <a href="#one">第一集</a> . . . <p id="one"> 第一集剧情 <br/> 第一集剧情 <br/> ... </p>
列表标签 <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"表示跨列合并
表单标签
表单标签经常用在用户输入的各种场景下，下面同样以一个例子进行详细介绍：
<!-- 表单 --> <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不独占一行, 是一个小盒子。
