目录概览：
- HTML文档结构
- head元素
- 字符实体
- 路径指南
- <a>元素
- <img>元素
- table元素
- 表单元素
- 代码管理
一、HTML文档结构
1.<!DOCTYPE html>声明文档类型。
2.<html></html> 它包裹了整个完整的页面，是一个根元素。
3.<head></head> 它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。
4.<body></body> 它包含你访问页面时所有显示在页面上的内容。
参考资料：
二、head元素
它里面的子元素主要分为三类，描述网页基本信息的、指向渲染网页所需要的其他文件链接及各大厂商根据自己需要定制的。
参考资料：
三、字符实体
字符实体.png
参考资料：
四、路径指南
本地路径方面，如在磁盘里面访问，Windows 约定使用反斜线 () 作为路径中的分隔符，如"E:\娱乐\音乐\蓝莲花.mp3"；而UNIX 系统使用正斜线 (/)，如“/users/marvin/music/蓝莲花.mp3”。
五、<a>元素
1.页面间的跳转
当其用于页面之间的跳转时主要有三个常用属性，分别为：
- title：指链接标题，一般与内容文字一样。鼠标滑过时暂停一会，会有个title提示效果。
- href：指定链接的目标地址（如果暂时不能确定目标地址可先用#表示）。
- target：定义打开窗口方式，默认是当前窗口打开，有四种取值，分别为：
- _self：当前窗口打开，此值为默认值。
- _blank：新窗口打开（该值是使用最多的）。
- _parent：表示在当前框架的父框架打开（一般用于iframe中，先不用了解，以后再说）。
- _top：表示顶层框架打开（一般用于iframe中，先不用了解，以后再说）。
2.页面内的跳转
当<a>元素用于页面内的锚点跳转时，应该先为该页面设置一些锚点，而定义锚点有两种办法：
通过<a>元素的name属性来定义，如：<a name="anchor-name">name属性的值就是锚点的名称</a>
通过其他元素的id属性来定义，如：<div id="anchor-name">id属性值可以作为锚点的名称</div>
设置好了锚点之外，就可以通过<a>元素链接到该锚点位置，其href取值为“# + 锚点名称”，示例如下:
<a href="#anchor1">锚点链接一</a>
<a href="#anchor2">锚点链接二</a>
<div>
<div>我这里有很多内容...</div>
<!-- 使用a的name属性定义锚点 -->
<a name="anchor1">点击锚点链接一，会跳到我这里</a>
<div>我这里有很多内容...</div>
<!-- 使用元素的id属性定义锚点 -->
<p id="anchor2">点击锚点链接二，会跳转到我这里</p>
</div>
3.电子邮件
当其用于邮件链接时，href属性的值为“mailto: + 邮件地址”，示例如下：
<a href="mailto:xuyc_brother@foxmail.com”>发送邮件给我</a>
六、<img>元素
首先<img>元素没有闭合标签，这点一定要记得。
除此之外，<img>元素还有几个重要属性如下：
- src：必备属性，表示图片地址
- alt：必备属性，如果图片加载失败将会显示该内容
- width：可选属性，用于设置图片的宽度，如width="400"
- height：可选属性，跟width类似，用于设置图片的高度，如height="300"
七、<table>元素
例子:
<table>
<caption>五险一金缴纳</caption> <!-- table 标题，table里面第一个元素 -->
<thead> <!-- 使用 thead 包裹表头行 -->
<tr>
<th>缴纳项目</th>
<th>个人缴纳</th>
<th>单位缴纳</th>
</tr>
</thead>
<tbody> <!-- 使用 tbody 包裹内容 -->
<tr>
<td>养老</td>
<td>8%</td>
<td>14%</td>
</tr>
<tr>
<td>医疗</td>
<td>2%</td>
<td>6.2%</td>
</tr>
<tr>
<td>失业</td>
<td>1%</td>
<td>2%</td>
</tr>
<tr>
<td>工伤</td>
<td>0%</td>
<td>0.4%</td>
</tr>
<tr>
<td>生育</td>
<td>0%</td>
<td>0.5%</td>
</tr>
<tr>
<td>公积金</td>
<td>14%</td>
<td>14%</td>
</tr>
</tbody>
</table>
八、表单元素
<form>元素主要有两个属性：
- action：表示表单数据所提交到的处理地址（如果不知道处理地址，可先用#表示）
- method：表示提交内容的方式，默认取值为 get，可以设置为 post
表单元素一般有以下几种通用属性：
- name：表示字段名称
- value：表示字段值（最后提交的表单数据就是所有的字段值）
- disabled：表示字段是否禁用，该属性可以不用设置值，加上该属性即表示禁用
- readonly：表示字段是否只读，该属性可以不用设置值，加上该属性即表示只读
<input>元素跟<img>元素一样，不需要闭合标签。除了上面说到的通用属性外，其常见属性如下：
- type：必备属性，常见取值如下：
- text：文本输入框
- password：密码输入框
- search：搜索框
- number：数字输入框
- radio：单选按钮
- checkbox：复选框
- hidden：隐藏域（页面不可见，用来保存数据等）
- file： 上传文件
- button：普通按钮
- submit：提交按钮
- reset：重置按钮
- placeholder：如为输入框时，可设置该属性，在输入框中灰色显示提示信息
简单示例如下:
<!-- 文本输入框 -->
<input type="text" name="username">
<!-- 文本输入框提示信息 -->
<input type="text" name="username" placeholder="用户名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 数字输入框 -->
<input type="number" name="age" placeholder="只能输入数字">
<!-- 密码输入框 -->
<input type="password" name="pwd" placeholder="密码">
<!-- 单选框 -->
<input type="radio" name="sex" value="man">男
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="music">音乐
<!-- 隐藏域 -->
<input type="hidden" name="other-data" value="用户不可见数据">
<!-- 上传文件 -->
<input type="file" name="file">
<!-- 普通按钮 -->
<input type="button" name="button" value="普通按钮">
<!-- 提交按钮 -->
<input type="submit" name="submit" value="立即加入">
<!-- 重置按钮 -->
<input type="reset" name="reset">
<textarea>元素可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过等我们学了 CSS 之后，更好的办法是使用 CSS 的 height 和 width 属性来控制其尺寸。
简单示例如下：
<textarea rows="5" cols="30" placeholder="请输入评论"></textarea>
<select>元素用于创建选项菜单，默认只能选择一个值，可通过设置属性multiple="multiple"来实现多选（很少很少使用多选）。
其选项为<option>元素，常用有两个属性：
- value：表示选中该选项的值。
- selected： 表示默认选中。
简单示例如下：
<!-- 单选且有默认选中值 -->
<select name="tag">
<option value="html" selected>HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
<!-- 多选 -->
<select name="tags" multiple="multiple">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
<button>元素用来定义按钮，跟 input 定义的按钮不同，这个是有闭合标签的。
同样也可以通过设置 type 属性来实现提交按钮和重置按钮，不过不建议这么做。
<label>元素用于关联表单元素的标题，可直接包裹表单元素，也可以通过设置其 for 属性关联到表单元素的 id 属性，这样点击 label 标题上关联的表单元素就可以自动获取焦点，提升用户体验。
简单示例如下：
<!-- 包裹表单元素 -->
<label>用户名：<input type="text"></label>
<!-- 使用for属性关联表单元素的id属性 -->
<label for="username">用户名：</label><input type="text" id="username">
网友评论