HTML 知识扫盲

写在前面

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>中使用。