语法规范
1.标签被<>包括，大部分成对出现//<br />单标签，由一个标签组成，里面加/
2.标签关系：包含关系与并列关系
标签
| 标签名 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签，称之为根标签 |
| <head></head> | 文档的头部 | 主意在head标签中必须设置title标签 |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题，必须写在head中 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放body中的 |
文档类型声明标签（必须写到整个页面的第一行）
文档类型声明，作用：告诉游览器使用哪种HTML版本来显示网页
如：<!DOCTYPE html>表示当前页面采取的是HTML5版本来显示网页
lang语言种类
“en”定义语言为英文
“zh-CN”定义为中文
“fr”定义为法语
//定义成中文还是英文，文档中依旧都可以显示英文或者中文，但是其他语言不一样，写成其他国家的语言，一开始进入该页面时游览器会提示是否翻译，翻译过后，可能会出现错误！！！
例：
<html lang="en">
</html>
mata
<mata charset="UTF-8"/>
charset表示字符集（GB2312（简体中文）、BIG5（繁体中文）、GBK（简体繁体合一体）、UTF-8（称之为万国码，基本包括了全世界所有国家需要用到的字符））
http-equiv 自动刷新界面或者自动跳转到content的网址
content="number,地址" 时间，跳转网址
link
rel 设置当前文档和被链接文档之间的关系 icon(图标关系)
type 设置被连接文档的MIME类型 （大分类/小分类）如："image/x-icon"
href 设置被连接文档的路径
HTML常用标签
语义
标签的含义，指这个标签是干嘛用的
标题标签(六个等级h1-h6)
<h1></h1>
特点
1.每个标题独占一行
2.加了标题标签的文字会变得加粗，字号也会变大，一级大于二级大于三级······
段落和换行标签
段落标签(一对段落标签里面中的文字无论敲多少空格只显示一个)
<p>我 爱你</p> =》 我 爱你（中间只有一个空格）
//段落之间保留有空隙
如：原来：<p>我是一个学生我二十岁</p>
分段：<p>我是一个学生</p>
<p>我二十岁</p>
属性（CSS）：
font-size设置字体大小
text-align设置文字格式（如居中为center）
text-indent设置首行缩进
换行标签
<br /> （单标签，没有分段落）
是break的缩写，意为打断，换行
横线标签
<hr/>
在改行打印出一条横线
文本格式化标签
标签语义：突出重要性
| 语义 | 标签 | 说明 |
| 加粗 | <strong></strong>或者<b></b> | <strong></strong>语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | <em></em>语义更强烈 |
| 删除线 | <del></del>或者<s></s> | <del></del>语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | <ins></ins>语义更强烈 |
超链接标签
语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
anchor 锚
| 属性 | 作用 |
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接的打开方式，其中_self（当前窗口打开）为默认值，_blank为在新窗口中打开方式 |
链接分类
1.外部链接
2.内部链接
3.空链接（#代替，意思为空）
4.下载链接（如果链接里面是.exe或者是.zip等压缩包，会下载这个文件）
5.网页元素链接（在网页中的各种元素，都可以添加超链接）如：
<a href="去往链接"><img scr="图片地址"></a>
6.锚点链接，点完链接可以快速跳转到某个部分或链接
例：
<a href="#名称"></a>
<h1 name="名称">内容</h1>
在href属性中的值设为某个值前加#
特殊地，如果需要返回顶部在文段后加上如上段落即可，其中id可换成name
7.邮件链接
href中的属性值为“mailto:邮件地址”
框架标签
<frameset >(属性：行分 rows="" 列分 cols="" 可以嵌套)
<frame src=""/>
<frame src=""/>
<frameset/>
画中画标签(游览器不支持后面的文字会展示到屏幕上)
<iframe src="" height="" width="">
</iframe>
注释标签
格式
<!--文段-->
快捷方式
快捷键：Ctrl+/
特殊字符标签（每一个代码以分号结尾）
| 特殊字符 | 描述 | 字符的代码 |
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 二次方 | ² |
| ³ | 三次方 | ³ |
表格标签
主要作用
显示或展示数据，可读性好
基本语法
示例：
<table>
<caption>表格标题</caption>
<tr>
<td>单元格内的文字</td>
· · ·
</tr>
· · ·
</table>
语法：
1.<table></table>是用于定义表格的标签
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
4.字母td指表格数据（table data），即数据单元格的内容
%<th></th> 表头单元格（突出重要性） 加粗并居中显示
表格属性（后一般用CSS）
| 属性名 | 属性值 | 描述 |
| align | left、center（居中）、right | 规定表格相对周围元素的对齐方式 |
| border | 1或“” | 规定单元格是否拥有边框，默认为“”，表示没有 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
| hight | 像素值或百分比 | 规定表格的高度 |
| bordercolor | RGB | 规定边框的颜色 |
| bgcolor | RGB或者图片地址 | 规定表格的背景（颜色或者图片） |
| valign | top | 对内容进行上对齐。 |
| middle | 对内容进行居中对齐（默认值）。 | |
| bottom | 对内容进行下对齐。 | |
| 与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。 | ||
| frame | void | 去除嵌套表格的外边框 |
表格结构标签（使结构更清晰）
| <thead></thead> | 表格的头部区域，内部必须有<tr>标签 |
| <tbody></tbody> | 表格的主体区域 |
都放在<table></table>中
合并单元格（单元格属性，合并后把原来的单元格删除）
方式
1.跨行合并：rowspan=“合并单元格个数”
1.跨列合并：colspan=“合并单元格个数”
目标单元格
跨行合并：最上侧单元格为目标单元格，写合并代码
跨列合并：最左侧单元格为目标单元格，写合并代码
列表
类型
1.无序列表（各个列表之间没有顺序，没有等级之分，<ul>只能嵌套<li>不能放任何的标签，<li>里面可以放任何东西，无序列表有自己的样式）
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
· · ·
</ul>
1.使用无序列表标签ul的type属性（使用CSS的list-style来代替）。用户可以指定出现在列表项前的项目符号的样式，其取值以及相应的符号样式如下：
（1）disc：指定项目符号为一个实心圆点（默认值是disc，是否使用该值在浏览器中效果都一样）；
（2）circle：指定项目符号为一个空心圆点；
（3）square：指定项目符号为一个实心方块；
（4）none：无项目符号。
2.通过list-style-type 可以改变样式的形状，比如圆圈，方块和其他自定义的图片,但是有些时候，为了突出，我们需要将黑色圆点，变化成为其他颜色，比如红色、黄色等，此时，列表的小黑点虽然变成了我们需要的红色，但是文字也随之变成了红色，因为css样式是叠加的样式，此时，我们只需要将文字的颜色，设置成原来的黑色，即可达成效果。
//修改用于列表项的标志类型，可以使用属性 list-style-type
//常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到
//标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的
2.有序列表（各个选项之间有等级之分）
<ol>
<li>列表1</li>
<li>列表2</li>
· · ·
</ol>
3.自定义列表（对术语或名词进行解释和描述，自定义列表前没有任何项目符号，<dl>中只能有<dt><dd>）
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
· · ·
</dl>
//无序列表与有序列表中，<li>中可以包含任何内容和标签，但是<ul>和<ol>只能放<li>,自定义列表中<dl>中只能放<dt>和<dd>
表单标签
目的
收集用户信息
组成
表单域（表单区域，把所有的表单包含进去，实现用户信息的收集和传递）
标签
<form></form>
属性：
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单的提交方式 |
| name | 名称 | 用于指定表单的名称，区分同一个页面中多个表单域，一般复选框里面为数组：名称[]， |
| autocomplete | off | 设置不展示历史输入信息 |
get和post的区别：
- get将提交的数据显示在地址栏，post不会将提交的数据显示在地址栏（地址栏是否显示信息）
- get提交敏感信息不安全，post相对安全（数据是否安全）
- get信息存储到地址栏，信息体积有限，post可以提交大体积数据信息（数据的体积）
- get提交封装在请求行 post封装在请求体（提交信息的http封装形式不同）
表单控件（表单元素，如：输入内容的表格）
| 标签 | 属性及属性值 |
| <input>单标签 | type="属性值" |
| name=“自定义”，定义input的名称（主要给后台人员使用），规定：单选框和复选框必须要有相同的name值 | |
| type属性值为file时，要想控制上传的文件类型，可以加上accept属性，accept="img/jpeg"(文件类型/该类文件的后缀名)可以用逗号分开，选择多个类型。 | |
| value=“自定义”，默认值，规定input的值（主要给后台人员使用），其中，用户没有输入时默认值会被提交到服务器中 | |
| checked=“checked”，规定此input元素首次加载时应当被选中 ，即一打开该页面就被选中 | |
| maxlength=“正整数”，规定输入字段中的字符的最大长度 | |
| type为file时,定义输入文段和“游览”按钮，供文件上传，默认只能选择一个文件，可以加上属性值，multiple="multiple"可以选择多个文件（HTML5新增） | |
| disabled="disabled"一般与placeholder 共用，提示用户重要内容或者有内容不让用户使用时，即可用这个属性 | |
| autofocus="autofocus"，作用是用户进入表单界面时，自动选中该项输入位置（HTML5新增） | |
| autocomplete = "off/on" 基于之前的输入，记住用户的输入情况，会有提示 | |
| placeholder="自定义"，当用户没有输入时，显示自定义的内容（颜色更潜，可以通过伪类选择器更改颜色，input::placeholder {}），并且自定义的内容不会被提交到服务器中（HTML5新增） | |
| required 判断是否输入为空（放于表单域中，HTML5 新增） | |
| <select> | （option标签，里面有select="属性值"） |
| <textarea> | （文本域） |
type的属性值
| 属性值 | 描述 |
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| radio | 定义单选按钮（单选） |
| checkbox | 定义复选框（多选） |
| file | 定义输入文段和“游览”按钮，供文件上传，默认只能选择一个文件，可以加上属性值，multiple="multiple"可以选择多个文件 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中字符被掩码 |
| reset | 定义重置按钮，重置按钮会清除表单中所有数据 |
| submit | 定义提交按钮，提交按钮会把表单内容发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20字符 |
| textarea | 定义的多行输入字段，输入文本，当不够时，可自动转行 |
| date/time | 年月日/小时分钟（month：年+月，week ：年+周） |
| fatetime-ocal | 年月日小时分钟 |
| color | 选择颜色（颜色输出框） |
| number | 选择数字（数字输出框），附带属性：step(单击的数量变化)，max(允许的最大值)，min（允许的最小值） |
| range | 滑块附带属性和数字一样 |
HTML新增的type属性值：
| 属性值 | 说明 |
| | 限制用户输入必须为Email类型 |
| url | 限制用户输入必须为URL类型 |
| date | 限制用户输入必须为日期类型 |
| time | 限制用户输入必须为时间类型 |
| month | 限制用户输入必须为月类型 |
| week | 限制用户输入必须为周类型 |
| number | 限制用户输入必须为数字类型 |
| tel | 手机号码 |
| search | 搜索框 |
| color | 生成一个颜色选择表单 |
select的用法和属性值（下拉列表）：
形式：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
·
·
·
</select>
option中可定义select="selected"，当前选项即为默认选中项
提示信息（文字信息）
<label>标签
意义：使结构更方便于操作，如：点击显示的内容也可进行相关的内容选择或输入
形式：
<input type="" id="名称"><label for="名称">显示的内容</label>
属性：
for="名称"
布局标签
<div>和<span>标签
没有语义，相当于盒子，用来装内容
div
division 表示分割、分区
一行只能放一个div，且一个div占一行（大盒子）
span
表示跨度、跨距
一行可以放多个（小盒子）
| nav | 导航栏 |
| div | 大标签，基本都可以用 |
| header | 头部标签 |
| footer | 脚步标签 |
| aside | 旁边的小部分 |
| section | 一段话包含起来 |
| article | 一整片文章，一般可以用section划分 |
多媒体标签
视频音频标签（HTML5新增）
<video></video>（加载视频）
| 属性 | 属性值 | 说明 |
| src | 路径 | 视频的文件路径 |
| controls | controls | 显示播放控件（单属性） |
| autoplay | autoplay | （自动播放，谷歌游览器不支持，如果需要让谷歌游览器自动播放，则需要加上muted="muted"） |
| poster | 地址 | 作用为在视频没有播放时为广告图片 |
| width | px | 设置播放器的宽度 |
| height | px | 设置播放器的高度 |
| muted | muted | 静音播放 |
| loop | loop | 设置该音频是否循环播放 |
| poster | imgurl | 加载等待的画面图片 |
| preload | auto/none | 是否预加载视频，auto为是，none为否，如果有autoplay就忽略该属性 |
<source></source>（加载媒介资源）
可以嵌套在vedio中储存文件路径和文件类型
因为游览器的支持度不同，所以可以创建多个source，以支持可以播放视频，从上往下开始读写
如果全部都不支持那么就会显示最下面的文本了
写法如下：
<vedio>
<source src="路径" type="类型/文件类型"></source>
<source src="路径" type="类型/文件类型"></source>
文本
</vedio>
<audio></audio>（加载音频）
| controls | 加载播放器的空间（单属性） |
| autoplay | 自动播放（单属性） |
| loop | 循环播放（单属性） |
| preload | 提前加载准备播放（单属性） |
属性和vedio类似
<embed />
<bgsound />
背景音乐
属性：src="地址"
<progress></progress>
效果:
进度条标签
属性：
min： 最小值 属性值：数字
max： 最大值 属性值：数字
value：当前值 属性值：数字
<meter></meter>
效果：定义范围内的度量
属性：
n： 最小值 属性值：数字
max： 最大值 属性值：数字
value：当前值 属性值：数字
low : 优化、警告的最小值 属性值：数字
high: 警告的最大值 属性值：数字
optimum: 良好值 属性值：数字
<img>（图像标签）
<img src=""/>
其中src为属性且为必须属性，引号内为图片路径
第一层为根目录
路径
1.相对路径（符号：/）
相对于使用文件的路径
同一级：直接写文件名即可
下一级：文件夹名/文件名
上一级：文件名../文件名
2.绝对路径（符号：\）
目录下的绝对位置，通常从盘符开始的路径
3.网站上的地址路径
其他属性
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示时，显示该行文字做解释说明 |
| title | 文本 | 提示文本，鼠标放到图像上，显示title里面的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| broder | 像素 | 设置图像的边框粗细（一般是CSS改而不用该属性） |
只修改width或者height，图像可以按照比例等比例缩放
如果两个同时改变时可能会变形
注意点
1.所有属性必须放置在img之后/之前
2.属性之间不分先后，标签名与属性、属性与属性之间均以空格分开
3.属性采取键值对的格式，即key="value"的格式，属性="属性值"。
//配合超链接使用
加后缀ismap，获取用户点击的位置坐标
加后缀usemap="#名称"，配合map双标签，里面设置属性值id="名称"
<map></map>（映射实现）
属性：
shape 设置区域的形状 rect矩形（左上和右下） circle圆（圆心和半径） poly多边形（自定义） default整张图
coords 坐标
href 点击目标位置之后跳转地址
<area />
常用的与map相同
<marquee></marquee>（滚动标签）
属性及其属性值：
| 属性 | 属性作用 | 属性值 |
| behavior | 规定滚动的形式 | alternate（来回滚动）、scroll（单方向循环滚动）、slide（只滚动一次），如果同时出现了direction属性，那么scroll与slide的滚动方向将依照direction中的参数设置 |
| bgcolor | 设置背景颜色 | 颜色的十六进制的值 |
| direction | 设置文字滚动的方向 | down（向下）、up（向上）、right（向右）、left（向左） |
| width | 规定矩形的宽度 | 像素点数或所占游览器的百分比 |
| height | 规定矩形的高度 | 像素点数或所占游览器的百分比 |
| hspace | 规定滚动矩形区域水平和垂直方向的空白区域 | 像素点数 |
| vapace | ||
| loop | 决定滚动次数 | 任意正整数，如果设置为-1或者infinite为无限循环 |
| scrollamount | 规定滚动速度 | 正整数 |
| scrolldelay | 规定滚动延时 | |
| align | 规定滚动内容在矩形内边框的位置 | absbottom（绝对底部对齐）、absmiddle（绝对中央对齐）、baseline（底线对齐）、bottom（底部对齐（默认））、left（左对齐）、middle（中间对齐）、right（右对齐）、texttop（顶线对齐）、top（顶部对齐） |
//
οnMοuseOver="this.stop() "
οnMοuseOut="this.start()"
表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动
\\
HTML5的新标签
新的标签
新增的语义化标签：
| 标签 | 说明 | 标签属性 |
| <header> | 头部标签 | |
| <nav> | 导航标签 | |
| <arcticle> | 内容标签 | |
| <section> | 定义文档某个区域标签（大号div） | |
| <aside> | 侧边栏标签 | |
| <footer> | 尾部标签 |
//这种语义化标准主要是针对搜索引擎的，这些新标签页面中可以使用多次，在IE9中，需要把这些元素转换成块级元素（移动端更喜欢使用这些标签）
新的表单
新的表单属性
required 属性不能为空
autocomplete 是否保存历史记录（off为关闭）
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
