HTML概述
最新的HTML5规范，代表了未来web开发的方向
提供新的标签与属性 语义标签，多媒体，智能表单
提供了很多新的功能 画布，地理位置，本地储存，WebSocket，WebWorker等
基本结构
标签语法
head中的标签
| 标签 | 描述 |
|---|---|
| title | 文档标题，一般显示在浏览器标栏 |
| base | 指定页面的相对地址 |
| link | 链接到外部文件，一般是样式文件 |
| style | 在文档中包含css样式 |
| script | 引入外部JavaScript文件 |
| meta | 描述文档的信息，如字符编码，内容描述，关键字作者等 |
Web标准推荐的编写规则
一系列关于网页标准的集合 要求：
所有的标签和属性的名字都必须使用小写
所有标签必须关闭
所有属性都必须有值，没有值的就重复本身
属性值必须使用双引号
文本标签（1）
| 标签 | 描述 |
|---|---|
| p | 段落 |
| h1-h6 | 标题 |
| pre | 定义预格式化的文本 |
| font | 为文本指定大小，颜色 和字体，不推荐 |
| span | 组合文档中的行内元素 |
| sub | 下 标 |
| sup | 上标 |
| address | 地址 |
文本标签（2）
| 标签 | 描述 |
|---|---|
| b,strong | 文本加粗 |
| i,em | 文本斜体 |
| u | 文本下划线 |
| ins | 定义插入文本，效果和U一样 |
| del | 文本删除线 |
转义字符
| 转义字符 | 描述 |
|---|---|
|
不换行空格 |
< |
小于< |
> |
大于> |
" |
双引号“ |
© |
版权 |
& |
&符号 |
行级标签和块级标签
行级：不独占一行 <a></a>,<img>,<br>,<span>
块级：独占一行 <h1> ~<h6>,<p>,<hr>,<from>,<div>,<table>
标签通用属性
| 属性名 | 描述 |
|---|---|
| class | 指定css样式，Javascript获取元素 |
| id | 页面唯一，指定css样式，JavaScript获取元素 |
| style | 指定css样式 |
| title | 提供元素的提示文本 |
| align | 对齐方式，可以是left(默认)，right或cenner |
| height | 指定高度，单位是像素（px） |
| width | 指定宽度，单位是像素（px） |
| tabindex | 按下tab键时元素获得焦点的顺序 |
| data-x | HTML5引入的用户自定义属性标准方式 |
| onEvent | 关联时间 |
图片格式
| 格式 | 描述 |
|---|---|
| gif | 其体积小而成像相对清晰，不多于256色，可以实现简单动画 |
| png | 压缩比高，生成文件容量小，背景可透明 |
| jpg | 压缩比高，文件小Web中使用广泛 |
| bmp | 无压缩的图片，体积大,Web中使用较少 |
图片标签
使用img标签在页面显示图片
属性
src:图片的URL，可以是静态的或动态的
alt:图片未显示时的文本
width:图片显示时的宽带
height:图片显示时的高度
最佳实践
图片尽可能小 图片可以放在单独的服务器上
超链接概述
超链接是同其他网站资源间进行连接的元素
站内连接或站外连接
网页或其他元素
<a>标签的使用
使用<a>标签定义超链接
name：指定描点的名字
herf：指定连接的目标资源，包括站内资源，站外资源，电子邮件地址
target：指定打开，目标资源的方式， 包括_self(默认) _blank（新的窗口打开）, _parent,_top,自定义
相对路径与绝对路径
相对路径
被链接文件相对于当前页面的地址。
只包含本地路径的网页的地址， 地址通常以“/”和"../"表示层级关系。
绝对路径
文件在网络或本地的绝对位置
是互联网上的独立地址，包含主域名和目录地址。
base标签
在head标签中使用
属性：
herf：指定该页面中链接目标的相对地址是该属性的值
列表
列表分类
无序列表
使用ul与li一起定义
ul：声明无序列表
li：定义列表中的一项
相关属性
type：指定列表项前的图标（disc(默认的),square(实心的),cirle(空心的)）
有序列表
使用ol与li一起定义
相关属性
type：指定序号的类型（1，a，A，i，l）
start：指定起始序号
reversed：序号降序显示
定义列表
使用dl，dt，dd一起声明定义列表
dl：声明定义列表
dt：定义列表中的项目
dd：描述列表中的项目
表格
表格的基本语法
table：定义表格
border用来设置表格边框尺寸大小
tr：定义行
td：定义列
其他相关标签
thead：定义表头（第一行）
tbody：定义表格主体
tfoot:定义表格页脚（最后一行）
th：用于表头中的单元格，使用其中的内容居中加粗
caption：指定表格的标题
colgroup：为table的列包含col的组
col：在table中定义一个列，用于colgroup中
填充属性和间距属性
表单
什么是表单
表单是用于接收用户数据的控件
用户在页面输入的数据将通过表单提交到服务器端
表单的经典应用
用户注册，登录 发帖回帖 下订单
表单页面的基本结构
input标签
input标签的type属性值
表单控件的常用属性
resdonly:设置只读
disabled:设置禁用
autofocus:自动获得焦点
placeholder:为文本输入框设置占位符
required:设置控件的值必填
select(下拉框标签) option(下拉框选项) optgroup:下拉框
textarea:多行文本框
button:按钮，可以放文本，图片等
datalist:选项列表，与input元素配合使用，来定义input可能的值
meter:度量控件，默认0-1
progress:任务进度控件
元素分组标签
fieldset:将一组相关的元素分成一组
legend:为该组元素指定标题
label标签
基本用法：
<ladel for="控件id">文字信息</label>
多媒体
使用音频
<audio>标签用于在页面使用音频
属性：
src:音频URL
preload:如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay",则忽略该属性。
autoplay:自动播放
loop：循环播放
muted：静音
controls:是否出现控制按钮
使用视频
<video>标签用于在页面使用音频
属性：
src:音频URL
width：宽度
height：高度
poster：视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload:如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay",则忽略该属性。
autoplay:自动播放
loop：循环播放
muted：静音
controls:是否出现控制按钮
框架
什么是框架
通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。
框架结构标签（<frameset>）
框架标签<frameset>定义如何将窗口分割为框架
每一个<frameset>定义了一系列行或列
rows/cols的值规定了每行或每列占据屏幕的面积
框架标签（<frame>）
frame标签定义了放置在每个框架中的HTML文档。
注意事项
可以在<frame>标签中加入：
noresize="noresize"阻止用户拖动边框位置。
为不支持框架的浏览器添加noframes标签。
不能将<body></body>标签与<frameset></frameset>标签同时使用，不过，假如你添加包含一段文本的<noframes>标签，就必须将<body></body>嵌套于<noframes>标签内
框架间的超链接
为frame的name属性指定值 在a标签中指定target为该frame的属性值
内联框架iframe
指定一个浮动框架，它是嵌入在页面中的、独立的、可控的内容区域，用于在网页内显示网页。
div标签
定义文档中的分区或节，用来为HTML文档内大块的内容提供结构和背景的元素
一般会结合class或id为其样式和定位进行指定
语义化结构标签
语义化元素标签
来源：oschina
链接：https://my.oschina.net/yinheboke/blog/3170735