一、HTML介绍
HTML：Hyper Text Markup Language 超文本标记语言
它是用来描述网页的一种标记语言。
所谓超文本，有2层含义：
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接(超级链接文本)
二、HTML骨架格式
<!-- 页面中最大的标签 根标签 --> <html> <!-- 头部标签 --> <head> <!-- 标题标签 --> <title></title> </head> <!-- 文档的主体 --> <body> </body> </html>
三、文档类型声明标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本显示网页。<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。
四、页面语言lang
lang指定该html标签内容所用的语言。（1）en定义语言为英语 （2）zh-CN定义语言为中文
这个属性对浏览器和搜索引擎（百度、谷歌等）还是有作用的
五、字符集
字符集（characterset）是多个字符的集合，以便计算机能够识别和存储各种文字。
<meta charset = "UTF-8" />charset目前最常用的字符集编码方式是UTF-8，基本包含了全世界国家需要用到的字符。
如果不写可能引起乱码的情况。
六、HTML常用标签
6.1标题标签<h1>~<h6>
作为标题使用，并且依据重要性递减。
特点：1.加了标题的文字会变粗，字号也会变大
2.一个标题独占一行
6.2段落标签<p>
在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落
特点：段落和段落之间保有空隙
6.3换行标签<br/>
在HTML中，如果希望某段文本强制换行显示，就需要使用换行标签<br/>
特点：1.<br/>是个单标签
2.<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
6.4文本格式化标签
HTML中的文本格式化标签，使文字以特殊的方式显示粗体、斜体或下划线等：
语义 标签 加粗 <strong></strong>或<b></b> 倾斜 <em></em>或<i></i> 删除线 <del></del>或<s></s> 下划线 <ins></ins>或<u></u>
6.5<div>和<span>
是没有语义的,是我们网页布局最主要的2个盒子
<div>标签用来布局，但是现在一行只能放一个<div>盒子
<span>标签用来布局，一行上可以多个<span>小盒子
6.6图像标签和路径
1.图像标签：
属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换文本。图像不能显示 title 文本 提示文本。鼠标放到图像上，显示的文字 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 像素 设置图像的边框粗细 2.路径：
(1)相对路径:
相对路径分类 符号 说明 同一级路径 图像文件位于HTML文件同一级 如<img src="1.png"/> 下一级路径 / 图像文件位于HTML文件下一级 如<img src="images/1.png" /> 上一级路径 ../ 图像文件位于HTML文件上一级 如<img src="../1.png" /> 相对路径是从代码所在的这个文件出发，去寻找目标文件的。
(2)绝对路径:是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
6.7超链接标签<a>
在HTML中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
(1)链接的语法格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>两个属性的作用如下:
属性 作用 href 用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能 target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式 (2)链接分类:
1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>
6.8注释标签
<!-- 注释语句 -->
快捷键是： ctrl + /
或者 ctrl +shift + /注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的。
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。
6.9HTML中的特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，需要使用下面的字符来替代
特殊字符 描述 字符的代码 空格符 ＜ 小于号 < ＞ 大于号 > & 和号 & ¥ 人民币 ¥ © 版权 © ® 注册商标 ® ° 度 ° ± 正负号 ± × 乘号 × ÷ 除号 ÷ ² 平方2(上标2) ² ³ 立方3(上标3) ³
6.10 表格标签
表格主要用于显示、展示数据。它可以让数据显示的非常的规整，可读性非常好。
表格的基本语法：
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
- table用于定义一个表格标签。
- tr标签 用于定义表格中的行，必须嵌套在 table标签中。
- td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
表头单元格标签<th>：一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示,突出重要性。
<table> <tr> <th>姓名</th> ... </tr> ... </table>表格属性:
属性名 属性值 描述 align left、center、right 规定表格相对周围元素的对齐方式。 border 1或"" 规定表格单元是否拥有边框，默认为"",表示没有边框 cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素 cellspacing 像素值 规定单元格之间的空白，默认2像素 width 像素值或百分比 规定表格的宽度。 表格结构标签：在表格标签中，分别用:<thead>标签表示表格的头部区域，<tbody>标签表示表格的主体区域。这样可以更好地分清表格结构。
1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
3. 以上标签都是放在 <table></table> 标签中。合并单元格方式:
1.跨行合并：rowspan="合并单元格的个数"
2.跨列合并：colspan="合并单元格的个数"
找到目标单元格，选择实现合并方式并删除多余的单元格。
6.11 列表标签
列表是用来布局的。列表最大的特点就是整齐、整洁、有序。
列表可以分为三大类:
1.无序列表<ul>
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul>注意：<ul></ul>中只能嵌套<li></li>，直接在<ul>标签中输入其他标签或者文本的做法是不允许的。
2.有序列表<ol>
<ol type="A"> <li>列表项1</li> <li>列表二</li> <li>列表三</li> </ol>
- <ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
- 常用的type属性值分别为是1，a，A，i，I
- <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。
- <ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。
3.自定义列表
在HTML中，<dl>标签用于定义描述列表，该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl>注意：1.<dl></dl>里面只能包含<dt>和<dd>,<dt>和<dd>里面可以放任何标签
2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
6.12 表单标签
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
1.表单域：
一个包含表单元素的区域。由<form>标签表示。常用属性如下：
属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址 method get/post 用于设置表单数据的提交方式，其取值为get或ppst name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域 <form action=“url地址” method=“提交方式” name=“表单域名称"> 各种表单元素控件 </form>2.表单控件：
(1)input控件：用于收集用户信息。
<input type="属性值" />type属性可以让input表单元素设置不同的形态.type常用属性如下：
属性值 描述 button 定义可点击按钮（多数情况下，用于通过JS启动脚本） checkbox 定义复选框 file 定义输入字段和“浏览”按钮，供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 定义密码字段，该字段中的字符被掩码 radio 定义单选按钮 rest 定义重置按钮。重置按钮会清除表单中的所有数据 submit 定义提交按钮。提交按钮会把表单数据发送到服务器 text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符 除type属性外，<input>标签还有其他很多属性，其常用属性如下:
属性 属性值 描述 name 由用户自定义 定义input元素的名称，主要给后台人员使用 value 由用户自定义 规定input元素的值，主要给后台人员使用 checked checked 规定input元素首次加载时应当被选中。主要针对于单选按钮和复选框 maxlength 正整数 规定输入字段中的字符的最大长度。一般较少使用 补充：
<label>标签用于绑定<input>元素，当点击<label>标签内的文本时，浏览器就会将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
<label for="sex">男</label> <input type="radio" name="sex" id="sex" />核心：<label>标签的for属性应当与相关元素的id属性相同。
(2)<select>表单元素：定义下拉列表
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>1. <select> 中至少包含一对<option> 。
2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。(3)<textarea>表单元素：用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
<!-- cols=“每行中的字符数” ，rows=“显示的行数” --> <textarea rows="3" cols="20"> 文本内容 </textarea>
