前端学习总结（一）HTML5基础

一 html5标签大全

html4原有的元素(此处只列出常用元素，全部元素列表（包括h5）见http://www.runoob.com/tags/ref-byfunc.html) 和 HTML 元素速查列表：http://www.runoob.com/html/html-quicklist.html：

元素	用途
<h1> - <h6>	标题，<h1>最大，<h6>最小(浏览器会自动地在标题的前后添加空行)
<hr>	水平线
<p>	段落
<br> （单标签）	换行
<b>或<strong>	粗体字
<i>或<em>	斜体字
<code>	定义计算机代码
<a>	链接
<img>	图像
<table>	定义表格
<tr>	表格的行
<td>	每行的各个单元格
<th>	表格的表头,表头<tr>中代替<td>
<ul>	无序列表是一个项目的列表，此列项目使用粗体圆点进行标记
<ol>	有序列表，列表项目前面使用数字进行标记
<li>	列表的每一项
<dl>	自定义列表,不仅仅是一列项目，而是项目及其注释的组合。自定义列表项以 开始,替换li中的点和ol里的数字序号,列表项的定义以 开始。
<div>	定义了文档的区域，块级
<span>	用来组合文档中的行内元素，内联元素(inline)
<form>	表单
<input>	输入标签
<iframe>	框架，以便在同一个浏览器窗口中显示不止一个页面，可用作公共页面部分的共用
<script>	定义了客户端js脚本

html5新增的元素：

HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等。

元素	用途
1 canvas新元素
<canvas>	画布，标签定义图形，比如图表和其他图像，可以使用 JavaScript 在网页上绘制图像
2 新多媒体元素：
<audio>	音频
<video>	视频
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件
<track>	诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道,即：字幕
3 新表单元素：
<datalist>	定义选项列表,与 input 元素配合使用
<keygen>	规定用于表单的密钥对生成器字段
<output>	定义不同类型的输出，比如脚本的输出
4 新的语义和结构元素：	（用来创建更好的页面结构）
<article>	定义页面独立的内容区域
<aside>	定义页面的侧边栏内容
<bdi>	允许设置一段文本，使其脱离其父元素的文本方向设置
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚
<header>	定义文档的头部区域
<mark>	定义带有记号的文本
<meter>	定义度量衡,仅用于已知最大和最小值的度量
<nav>	定义运行中的进度（进程）；导航
<progress>	定义任何类型的任务的进度
<ruby>	定义 ruby 注释（中文注音或字符）
<rt>	定义字符（中文注音或字符）的解释或发音
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容
<section>	定义文档中的节（section、区段）
<time>	定义日期或时间
<wbr>	规定在文本中的何处适合添加换行符

html5已移除的元素：

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>

<tt>

二 html5新增API

（1）除了原先的DOM接口，HTML5增加了更多样化的API，下面列出一些个人觉得很不错的学习资源:

• HTML Geolocation (地理定位) /article/1210394.html

• HTML Drag and Drop（拖放）

/article/6989610.html

• HTML LocalStorage（本地存储）

http://www.w3school.com.cn/html5/html_5_webstorage.asp

• HTML Application Cache（应用缓存）

/article/4682309.html

• HTML Web Workers（运行在后台的js,不会影响页面性能）

http://www.w3school.com.cn/html5/html_5_webworkers.asp

• HTML SSE（服务器数据推送）

http://www.runoob.com/html/html5-serversentevents.html

Html SSE与websocket对比：

http://www.php100.com/html/it/biancheng/2015/0323/8828.html

• HTML Canvas/WebGL（绘图）

/article/2905366.html

• HTML Audio/Video（音频视频）

http://www.360doc.com/content/15/0317/14/14006402_455807117.shtml

三 html中重要的概念

1 Canvas 与 SVG 的比较

HTML5 支持内联 SVG（即：可伸缩矢量图形 (Scalable Vector Graphics)），使用<svg>标签表示。

canvas 与 SVG 之间的一些不同之处：

Canvas	SVG
依赖分辨率	不依赖
不支持事件处理器	支持
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

2 HTML5 新的 Input 类型

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week