前言：
HTML介绍分为3部分，第一部分是HTML简介及历史，第二部分是HTML元素，第三部分是实战及学习笔记。
以下是第三部分，主要介绍工具的使用，如Vscode, Chrome的使用以及针对部分重要元素进行实战。
参考emmet
工具使用
推荐使用带Emmet功能的编辑器，如Vscode，其能极大地提高前端开发的效率。
以下是emmet的实例
Emmet是MIT License开源的plug-ins，其独立于编辑器，尽管很多编辑器都支持，主要用缩写来高速对HTML,CSS,XML等文件进行编辑。
简要介绍下其语法：
- >: Child, 用于nest elements
示例--div>ul>li- +: Sibling, 将元素同级放置
- ^: Climb-up, climb one level up the tree
示例--div+div>p>span+em^^^bq
climb- *: Multiplication
示例:ul>li*5- (): Grouping
示例：(div>dl>(dt+dd)*3)+footer>>p
group- Attribute 操作符
ID和类：
div#header+div.page+div#footer.class1.class2.class3
Attribute
Item numbering: $
ul>li.item$$$*5
item numbering
此外，还可以通过@操作符来改变计数的方向以及开始的基。
示例: @-*5将从5到1
@
Text: { }可用作添加Text到元素中
示例：a{Click me}等于
<a href="">Click me</a>
注意p>{Click }+a{here}+{ to continue}与p{Click }+a{here}+{ to continue}的区别，第一个所有的都会是p的child
*缩写并不是一个模板语言，他们不必可读，但他们需要快速拓展和可移除。
*有时不必写一个很复杂的缩写，快和少出错才是重要的
*文件开头输入!或html:5，回车或TAB键，将自动生成HTML文档初始结构
*仿页面首先观察可能使用了哪些元素，列表/段落/标题/导航/标签等，分为哪些横向及纵向区块，这些区块是如何组合在一起的
元素
- <dl><dt><dd>可以组成描述列表
其中在dl中可以添加div - <footer>作为离它最近的section或根section的页脚，主要用来包含作者信息，copyright,相关链接等
- <button>其通常与form一起使用。可适用的属性为disabled, form, name, type(submit, reset, button), value(initial value)
- <img>作为可替换元素，默认是inline属性，其长宽是由图像原始尺寸决定，若是没有在img属性指定其height, width；另外可通过css设置其border, border-radius, padding/margin, display(block)等属性。img可嵌套在a里，作为图像链接。
<a href="https://developer.mozilla.org">
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="Visit the MDN site">
</a>
*自带宽高的是可替换元素，如img, input, video等
<em>表示语气上的强烈，<strong>表示内容的重要
<div>基本都是要带class使用的
<a> 以下是对a的属性进行详细介绍：
<a href="test.html" download="Test" target="_blank">Test.html</a>
download表示点击会默认下载，其值为下载文件名。
href包含一个URL，网址#前的即为URL片段，设置href="#top"或"#"将是页面跳转到页面开头,将href设置为#, href="javascript:;"或href="javascript:void(0);"可以用来防止点击页面刷新，但通常更建议使用button;此外其值还可以是http/https, ftp,文件, tel, mailto等地址以及#id(当前页面另一个section)。
target指定在哪里显示链接的URL, 可以是一个浏览器标签, 窗口或<iframe>里，常见的有_self(当前, 是默认的行为), _blank(新标签打开), _parent(父级), _top(顶级)<form>
enctype: 若method是POST类型，其编码方式是MIME type, 编码方式的默认值为application/x-www-form-urlencoded
method: 若是POST请求的话，表单数据将会包括在form data送到服务器，若是GET请求的话，表单数据将会被附加到动作属性的URL后，以?作为分割，仅在表单没有副作用并且只包含ASCII编码时使用
*以上的enctype及method均可能被button, input属性里的formenctype和formmethod覆盖
name: 其值应该Unique
*若form里只有一个button，其会自动升级为submit
*可以设置表单onsubmit属性为false阻止表单进行提交<input>
用于在在表单里创建交互控制，以便从用户接收数据
type属性：有button, checkbox, color, date, email, file, hidden(不显示但值会被送到服务器), image, month, number, password,radio, range, reset, search, submit, tel, text, time, url, week。
*注意，传输用户名密码最好使用HTTPS协议
*checked, 可适用于radio, checkbox属性。
*placeholder: 提示文本
*input通常与label一起用，laber for="input id"
input button submit区别
<input type="button"> -- 单纯的按钮，常用于连接JavaScript为AJAX应用的一部分
<input type="submit"> --变成一个默认type为submit的按钮，显示的值为其value值
<button type="button">使用于IE浏览器兼容，表示仅仅只是一个按钮，不会提交
<button type="submit">
小结：
建议使用button[type=submit]进行表单提交，而不是input;
input用作输入控件；
单行文本控件时，回车也会引发表单提交。
更多对比
<select>
通常通过id属性与label一起使用，类似input。
每个可选项<option value="">,value不可少，即使为空；另外可以加上selected使选项默认被选中。
其他的属性，包括multiple-运行多个选项被选中，还有常见的required, disabled, autofocus等属性<table>
table中可包含：
<tr> table row-表格中一行
<td>table data-表格中数据
<thead> header section of the table - 表格的开头
<tfoot> 表格的foot
<th> row/column headings
- <th> 与 <thead> 区别:
thead是块级元素，一般只出现一次，th可以出现多次且可出现在thead/tbody/tfoot里。
此外还可以设置列的格式，通过在<table>标签后加入<colgroup span="数字"></colgroup>
或者如下所示：
<table>
<colgroup>
<col style="background-color: #0f0">
<col span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
