基本骨架
HTML文件最基本的四个标签，组成了网页的基本骨架，包括:<html>、 <head>、<title>、<body>四组标签。
<html>标签
作用:定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在 标签内部。
<head>标签
作用:用于存放<title>,<meta>,<base>,<style>,<script>,<link>。内部用于对 网页的设置，除了<title>内部的文字，其他标签都不显示在浏览器上。
注意在<head>标签中我们必须要设置的标签是title。
<title>标签
作用1:让页面拥有一个属于自己的标题。
作用2:title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。
作用3:内部的内容会显示在搜索结果的标题部分。
作用4:作为浏览器收藏夹默认的网页标题。
建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字。
<body>标签
作用:定义网页的主体部分，用于存放所有的HTML显示内容的标签 <p>,<h1>,<a>,<div>等。
<body>内部的元素内容会显示在浏览器的窗口中。
DTD
完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition， 简称DTD。也称作文档声明类型，DocType Declaration。
作用:告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应 版本的HTML语法进行解析页面。
命名空间
<html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性。
XHTML1.0版本
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></html>
HTML5版本
<html lang="en"></html>
xml:可扩展标记语言，使用在传输过程中的规范。被设计用来传输和存储数据，是html 的补充。
xmlns:全称叫做XML NameSpace，NameSpace叫做命名空间，浏览器会将此命名空间 用于该属性所在元素内的所有内容。
<html>元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，避免出现 标签名冲突，这个标准使用的就是一个固定的网址www.w3.org/1999/xhtml中…
xml:lang="en"和lang="en" 表示所有的标签元素内容的语言都是英语，对搜 索引擎和浏览器是有帮助的。
字符集
<head>标签内部的<meta>标签通过http-equiv属性定义了当前的网页所使用的字符编码。
char:character，字符。set:集合。
XHTML1.0版本
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5版本
<meta charset="UTF-8">
国际通用字库
UTF-8:以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字为3个字节大小。
中文国标字库
gb2312:共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。
gbk:是gb2312的扩展，增加了繁体字，共收入21886个汉字和图形符号，其中汉字(包括部首和构件)21003 个，图形符号 883 个，一个汉字为2个字节大小。
HTML常用标签
标题标签
标题(Heading)，是通过<h1>-<h6> 六个标签分别来对六个级别的标题进行定义的。
<h1>定义最大的标题，<h6>定义最小的标题。
<h1>-<h6> 标签都是双标签，且是容器级标签。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的粗体、字号等样式。
标题标签之间是不能互相嵌套的，下一级标题与上级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一级标题。
段落标签
段落(paragraph)是通过<p>标签进行定义的。
<p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的标签等
<p>这是一个段落</p>
换行标签
<br />(breaking)标签是HTML中一个简单的换行符。
<br />标签是一个单标签。
在需要换行的位置可以使用<br />标签书写，但是<br />与<p>不同，<br />没有建立新的段落的语义，只是简单的进行强制换行。
`<p>`这是第一`<br />`个段落`</p>`
`<p>`这是第二个段落`</p>`
图像标签
图像(image)由<img>标签进行定义。
<img>标签是单标签，本身相当于一个特殊的文本。
<img>标签的作用是在指定的位置插入一张图片。
在HTML文件，常用的插入图片的类型有:jpg、png、gif。
src属性和路径
如果需要插入一张图片到HTML中，<img>标签必须设置src属性。
src:全称source资源，属性值是图片查找的路径。
路径:指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。
路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。
<img src="smile01.jpg">
宽度和高度
width:图片的宽度
height:图片的高度
属性值:以px 为单位的数值，或者省略px 不写。 如果不设置两个属性，会以图片的原始尺寸加载。
如果设置属性:只设置了其中一个，另一个会等比例变换;如果两个都设置，按照设置值加载。
<img src="smile01.jpg" width="200px">
<img src="smile01.jpg" height="100px">
<img src="smile01.jpg" width="200" height="100">
边框border
border:设置图片的边框。 属性值:数值，数值是几表示边框宽度为几像素。
<img src="smile01.jpg" border="20">
提示文本title
title:设置的是鼠标悬停时的提示文本。 属性值:自定义的提示文字内容。
<img src="smile01.jpg" title="点击查看原网站">
替换文本alt
alt:设置的是图片查找错误时，出现的替换文本。 如果能正常找到图片，替换文本是不显示的。 属性值:自定义的替换内容。
<img src="smile01.png" alt="这是一张微笑的表情">
音频标签
音频使用<audio>标签进行定义。
<audio>是双标签。
同图片一样，需要使用src属性设置音频查找的路径。
音频文件支持的格式包括:.mp3、.ogg、.wav。
<audio src="audio.mp3"> </audio>
音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是 controls。
<audio src="audio.mp3" controls="controls"> </audio>
视频标签
视频的设置方法与音频非常类似。
视频使用<video>标签进行定义。
<video>是双标签。
使用src属性设置视频查找的路径。
视频文件支持的格式包括:.mp4、.ogg、.webm。
<video src="video.mp4"></video>
视频也需要使用controls属性设置控制条，属性值也是controls。
<video src="video.mp4" controls="controls" ></video>
超级链接标签
在HTML中使用<a>标签可以创建链接。
a全称anchor，锚的意思。
<a>为双标签。
作用:在指定的位置添加超级链接，提供用户进行点击和跳转。
<a>标签可以实现两种跳转:跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。
<a>链接内容</a>
href属性
href全称hypertext reference，超文本引用，用于规定链接的目标地址。
属性值:链接目标的路径地址。可以使用相对路径或网址形式的绝对路径。
href属性非常重要，<a>标签要想实现点击跳转，必须设置该属性，拥有这个属性<a>标签在鼠标移上时才会显示一个小手指针状态。
书写方式如下:
<a href="目标地址">链接内容</a>
target属性
使用target 属性，可以定义被链接的文档在何处跳转显示。
属性值有两种:
_self:默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。
_blank:空白的，表示跳转的页面在新窗口打开。
<a href="http://www.lagou.com" target="_blank">拉勾</a>
title属性
title设置的是鼠标悬停时的提示文本，与标签类似。
属性值:自定义的文字内容。
该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。
<a href="smile.html" title="点击查看源网页"><img src="images/smile02.png" /></a>
两种特殊的锚点跳转方法
页面内锚点跳转
这种跳转方式实现的是从某个位置跳转到同页面的另一个位置。
制作方法分为两个步骤，分别是设置锚点、添加链接。
设置锚点，也就是设置跳转目标位置，有两种设置方式。
1在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。
id的属性值自定义规则:必须以字母开头，后面可以有字母、数字、下划线和横 线，区分大小写。
<h2 id="mubiao">目标位置</h2>
2在目标位置添加一个空的<a>标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的。
<a name="mubiao"></a>
添加链接
链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值。
<a href="#mubiao">点击文本</a>
跨页面锚点跳转
这种跳转方法综合了跨页面跳转和锚点跳转。
制作方法也分为两个步骤，分别是设置锚点、添加链接。
第一步:设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name属性。
第二步:链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径#id 。
<a href="new.html#mubiao">点击文本</a>
无序列表标签
无序列表需要两个标签参与，分别是<ul>和<li>。
ul:unordered list，表示定义一个无序列表的大结构。
li:list item，列表项，定义的是无序列表内的某一项。
<ul>和<li>是嵌套关系，快捷键:ul>li。 一个列表中可以有任意个列表项。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
有序列表标签
有序列表的语法与无序列表非常类似，只是在语义上有差异。
有序列表由两个标签组成，分别是<ol>和<li>。
ol:ordered list，表示定义一个有序的列表的大结构。
li:list item，定义的是有序列表的每一项。
<ol>和<li>是嵌套关系，快捷键:ol>li。
<ol>标签内部可以嵌套任意多个<li>标签。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
定义列表标签
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
由三个标签组成完整的结构，包含<dl>、<dt>和<dd>。
dl:definition list，表示定义一个自定义列表的大结构。
dt:definition term，表示定义自定义列表中的一个主题或者术语。
dd:definition description，定义解释项，表示描述或解释前面的定义主题。
<dl>内部只能嵌套<dt>和<dd>，<dt>与<dd>是同级关系。
<dt>
<dt>主题</dt>
<dd>解释项</dd>
</dt>
<div>标签
div:全称division，分割、区域、跨度的意思。俗称大盒子。
<div>是双标签，是最经典的容器级标签，内部可以放置任意内容。
作用:多用于划分网页区域，进行结构布局。一般将相关的内容使用<div>包裹起来，整体设 置大的布局效果。
<span>标签
span:小区域、小跨度的意思。俗称小盒子。
<span>也是双标签，容器级标签。
作用:在不改变整体效果的情况下，可以辅助进行局部调整。
<table>标签
表格基础
创建一个简单的表格至少有三个标签组成，分别是<table>、<tr>、<td>标签。
table:表格，定义的是整个的表格大结构。
tr:table rows，表格的行，定义的是表格由多少行组成。
td:table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。
三者的关系:table>tr>td.一个表格中有多个行，每个行中有多个单元格。
<table>的属性
<table>标签可以添加border边框属性。 属性值:数字，表示像素值。
表格的单元格之间有默认的空隙，会导致双线边框。
解决方法:设置标签样式属性style。 属性值:border-collapse : collapse; 表示边框塌陷。
表头单元格
如果要绘制表头，使用标签<th>，table head data，表头单元格。
在表格中绘制的时候，替换的是<td>的位置。
<th>标签中自带默认的css样式效果，文字显示粗体居中。
单元格属性
表格的单元格可以进行合并，通过和的两个属性可以进行合并设置。
rowspan:跨行和并。上下的合并。
colspan:跨列合并。左右的合并。
属性值:数字，数字是几表示跨几行或跨几列合并。
分区标签
<table>内部最直接的子级包含四个分区标签，他们都是双标签。
caption:表格的标题，内部书写标题文字。
thead:table head，表格的头部。内部嵌套tr>th。
tbody:table body，表格的主体。内部嵌套tr>td。
tfoot:table foot，表格的页脚。内部嵌套tr>td。
四个分区可以选择性的进行组合。
注意:不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的。
<form>标签
HTML表单域使用<form>标签进行定义。
<form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个<form>标签之内。
<form>标签为双标签，容器级标签。
<form>标签通过对应属性规定提交数据的方法和提交位置。
<form action="xxx.php" method="post/get" name="message"> </form>
<input>标签
单行文本输入框:text
<input>标签的type属性值为text。 定义提供用户输入的单行文本的输入框，不能输入多行文字。 常用value属性定义默认的输入文字。
<input type="text" value="默认输入文本" >
密码输入框:password
<input>标签的type属性值为password。 定义提供用户输入的密码框。
password 字段中的字符会被做掩码处理(显示为星号或实心圆)。
<input type="password">
单选框:radio
<input>标签的type属性值为radio。
定义提供用户点击选择的单选框。
单选框一般都是成组出现，多个单选框组成一组选择的情况。
同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性值实现。
<input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女
复选框:checkbox
<input>标签的type属性值为checkbox。 定义提供用户点击选择的多选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。 同一组复选框最好也设置相同的name属性。
<input type="checkbox" name="hobby" /> 唱歌
<input type="checkbox" name="hobby" /> 代码
<input type="checkbox" name="hobby" /> 运动
单选框和复选框都可以提前设置默认选中项。
<input>标签有一个checked属性，如果不设置表示默认没有选中。 属性值如果设置为"checked"，表示该项默认被选中。
<input type="radio" name="sex" checked="checked" /> 男
<input type="checkbox" name="hobby" checked="checked" /> 唱歌
按钮
<input>标签有四种形式的按钮:
button:没有任何功能
reset:将同一个form中填写的表单内容清空
submit：将填写的数据提交到指定的后台，并清空表单内容
image:与提交按钮效果相同，显示图片需要使用src属性
文件上传:file
<input>标签的type属性值为file。
定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。
<input type="file">
使用input的multiple属性，可以决定是否可以选择多个文件。
<input type="file" multiple="multiple" />
文本域<textarea>
文本域使用<textarea>标签定义，制作可以输入多行文本的区域。
<textarea>标签为双标签，本身相当于一个特殊的文字。
文本域可以设置默认输入的文字，在双标签之间书写默认文字。
<textarea>有两个标签属性，可以设置显示区域大小。
rows:行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数， 会被隐藏并且出现滚动条。
cols:列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字 节数(一个汉字按2字节计算)。
<textarea cols="30" rows="10">默认输入文字</textarea>
下拉菜单
HTML中的下拉菜单提前设置一些选项，然后可以通过点击选择其中一项。
下拉菜单需要至少两个标签完成结构: <select>:选择，表示定义下拉菜单整体结构。
<option>:选项，表示定义下拉菜单的每一项。
两个标签都是双标签，文本级标签。 关系:select>option，option可以有任意多项。
<select>
<option>广州</option>
<option>北京</option>
<option>重庆</option>
<option>上海</option>
</select>
默认情况下，选中的是第一项。
下拉菜单可以通过给<option>标签设置selected属性，属性值为selected，更改默认选中项。
<option selected="selected">北京</option>
下拉菜单中如果选项变得复杂，可以将<option>进行分组管理。
可以使用<optgroup>标签对选项进行分组，<optgroup>是一个双标签。 关系:select>optgroup>option
<optgroup>可以设置一个label属性，表示给这一组选项添加一个分组标签名，分组 标签<optgroup>是不能被点击选择的。
<select>
<optgroup label="国内">
<option>广州</option>
<option selected="selected">北京</option>
</optgroup>
<optgroup label="国外">
<option>伦敦</option>
<option>巴黎</option>
</optgroup>
</select>
label标签
<label>标签的作用是帮表单元素定义标注(标记)。
如果将表单控件与提示内容使用<label>进行绑定后，当用户鼠标点击<label>内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。
绑定方法一
1.给表单元素设置id属性。
2.然后将需要绑定的其他内容用<label>标签包裹。
3.给<label>标签设置for属性，属性值为绑定的表单元素的id属性值。
<input type="checkbox" name="hobby" id="sport" />
<label for="sport">运动</label>
绑定方法二
如果绑定内容和表单元素写在一起，可以化简绑定写法。
直接使用<label>标签将绑定内容与表单元素一起进行嵌套。
<label><input type="radio" name="sex" />男</label>
