HTML简介
HTML：Hyper Text Mark-up Language，超文本标记语言，超文本即超链接，标记即标签；
HTML是一种用于制作网页的语言，由一个个标签组成，文件的扩展名为html或htm。
HTML的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><title>
<head>
<body></body>
</html>
1. <!DOCTYPE html>，H5的文档声明，表示兼容最低版本浏览器，如果不声明，有些浏览器会进入
怪异模式，导致页面无法正常解析；
2. lang="en"：表示定义网页的语言为英文，lang="zh-CN"表示中文，不显示声明也并没有影响，
一般用于分析统计；
3. <meta />：用于声明，比如声明编码方式、缓存、网页关键字、网页描述 ...
4. HTML的注释：<!-- 注释内容 -->
5. 规范：
1. 所有的标签必须小写，而且标签必须闭合；
2. 所有的属性值必须用双引号；
3. <img />必须加alt属性，对图片进行描述。
HTML标签
基本标签
1. <h1></h1> -- <h6></h6>：标题标签，一到六级标题；
2. <p></p>：段落标签；
3. <br />：换行标签，浏览器渲染网页时，不识别Enter键的换行； <hr />：一条分割线；
4. 字符实体
1. ：表示一个空格；
2. 空格键输入的多个空格只会渲染成一个空格，而多个 对应多个空格；
3. 如果文字之间需要2个以上的空格，通常会使用样式实现，而不使用
4. > --> 大于号> < --> 小于号< © --> 版权符号
5. html块
1. <div></div>：块元素，盒子标签，表示一块内容，没有任何语义；
2. <span></span>：行内元素，表示一行中的一部分内容，也没有任何语义。
6. 自带样式和语义的标签
1. <em></em>：行内元素，文字斜体的效果，表示语气中的强调词；
2. <i></i>：行内元素，斜体效果，W3C强加了语义，表示专业词汇；
3. <b></b>：行内元素，加粗效果，W3C强加了语义，表示文档中的关键字或产品名；
4. <strong></strong>：行内元素，加粗效果，表示非常重要的内容。
7. 语义化的标签：搜索引擎在爬网时能认识这些标签，理解文档的结构，所以在布局时要多使用；
1. <h1>表示标题，<p>表示段落，<ul>、<li>表示列表，<a>表示超链接，dl、dt、dd...
8. <img />：在网页上插入图片，src属性用于定义图片的地址；
1. alt属性用于定义图片的描述，也就是图片加载失败时显示的文字；
2. 特性：只设置width时，图片的height也会随之等比缩放；
3. 相对路径：相对于当前文件本身去定位被引入的文件，比如 ./image/1.jpg
1. ./：表示当前目录下，可以省略；
2. ../：表示当前目录的上一层目录下。
4. 绝对路径：相对于磁盘去定位被引入的文件，比如 D:\test\oneday\image\1.jpg
9. <a></a>：超链接，href属性定义跳转的地址；
1. href="#"，href=""：回到当前页面的顶部；
1. href=""：默认打开当前界面，即刷新一次当前界面；
2. href="#"：浏览器地址栏的网址会追加一个#，当前界面不会刷新。
2. 让<a>的默认行为失效：href="javascript:void(0);" -->简写：javascript:;
3. 如果点击一块内容，需要执行跳转操作，则必须用<a>作为该区域的父标签，比如 把图片做成
超链接：<a> <img /> </a>
4. href="javascript:;"：用一个空的JS语句，可以在有超链接样式的前提下，但又不允许做
任何跳转，常作为缺省值使用；
5. 锚点：对于一个内容很长的网页，在当前页面内跳转到指定位置；
1. 页面内使用了id/name属性的标签(name可能不兼容)，<a>可以跳转到指定的标签位置；
2. <h1 id="mao1">标题一</h1>，<a href="#mao1">跳转到标题一</a>
6. target：默认值_self，在当前页面做链接，_blank 表示新开一个窗口做链接；
7. title：每个标签都具有的属性，定义鼠标悬停在标签上时弹出的提示文字。
布局标签
1. 列表
1. 有序列表：<ol>
1. <ol>，<li>：<ol>作为<li>的容器，<li>表示一行内容；
2. 有序列表会为每一行<li>编号，从1开始；
3. 快捷键：ol>li*3+Tab键，表示生成3个<li>标签。
2. 无序列表：<ul>，默认在每一行<li>的前面加一个实心圆；
3. 定义列表：<dl>
1. <dt>：用于定义标题
2. <dd>：用于解释<dd>定义的标题，解释的内容相对于标题默认会有缩进的样式；
3. 快捷键：dl>(dt+dd)*3+Tab键，表示生成3对<dt><dd>标签。
2. 表格
1. <table>，<tr>：分别用于声明一个表格，表格中的一行；
2. <td>，<th>：定义一行中的一个单元格，<td>是普通单元格，<th>是表头单元格，其内容
带有加粗居中的样式；
3. 表格的常用属性：
1. border：定义表格的边框；
2. height，width：定义表格的大小，可以使用百分比作为属性值；
3. cellpadding：定义单元格内的内容与边框的距离；
4. cellspacing：定义单元格与单元格之间的距离；
5. align：设置单元格中内容的水平对齐方式，属性值包括left/center/right；
6. valign：垂直对齐方式，属性值包括top/middle/bottom；
7. <table>标签只有align属性，用于设置自身相对于父标签的水平对齐方式；
8. colspan/rowspan：设置单元格水平/垂直合并。
4. 传统布局：传统的布局方式使用table做整体页面的布局，布局的技巧：
1. 定义表格的宽高，并将border、cellpadding、cellspacing设置为0；
2. 单元格里嵌套表格；
3. 单元格中的元素和嵌套的表格用align和valign设置对齐方式；
4. 通过属性或者CSS样式设置单元格中的元素样式。
3. 表单
1. <form>：定义一个表单区域
1. action属性：定义表单提交的地址，对于POST请求，地址以"/"结束；
2. method属性：设置提交方式，默认是GET方式；
3. 上传文件：<form action='post' enctype="multipart/form-data">
2. <lable>：定义提示性文字，比如：用户名、密码...
1. for属性：点击提示性文字，激活对应的输入框，其属性值为<input />的id属性值；
2. for属性的应用场景：对于一个单选框/多选框，点击提示性文字，选中对应的选框。
3. <filedset>, <legend>：表单分组
4. <input />：输入框
1. type属性：定义输入框的类型，比如用户名输入框的类型为"text"；
1. placeholder属性：定义输入框中的提示文本；
2. disabled属性：让表单控件失效，不能输入/点击；
2. type="file"：上传文件；
3. type="hidden"：隐藏内容，用于存储表单默认自带的一些信息；
4. 提交按钮：<input type="submit" value="提交" />
可以自定义submit事件，通过return true/false控制是否提交表单。
4. <input type="image" src="图片路径" />：也有提交功能，但可能会提交两次；
5. 重置按钮：清除表单输入的内容，<input type="reset" value="重置" />
6. type="button"：普通按钮；
7. id、name、value：id属性是input标签的唯一标记，name和value相当于键-值对，
在提交表单时，输入框的内容是以"key=value"的形式提交到action地址的；
8. 对于单选框type="radio"和多选框type="checkbox"，name属性值必须相同。
5. <select>：下拉框
1. <option>：作为<select>的子标签，用于定义下拉框的选择项；
2. name属性设置在<select>中，value属性设置在<option>中，组成键-值对；
也即，<select>的value值就是<option>的value值。
6. <textarea>：可以输入多行文本
7. <button>：按钮标签
1. type="button"：普通按钮
2. type="submit"：提交按钮
3. type="reset"：重置按钮
4. <iframe>：内嵌框架，在当前页面引入另一个页面，但搜索引擎会忽略iframe；
1. src属性：定义另一个HTML页面的引用地址；
2. width、height：设置框架的宽高；
3. frameborder属性：定义边框；
4. scrolling属性：是否有滚动条，auto/no/yes；
5. <iframe>与<a>配合使用：
1. 点击<a>标签的超链接，在<iframe>中显示链接的窗口；
2. 设置<a>标签的target属性值为<iframe>标签的name属性值。
网友评论