HTML5笔记

DTD文档类型定义
可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的机构。在HTML中DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5不基于SGML，所以不需要引用DTD 。就是说HTML5并不是定义为SGML或者XML的也能够用程序，HTML5的DTD声明中不需要使用DTD文件。

新增标签

结构标签（块状元素）

<article>标记定义一篇文章</article>
<header>标记定义额一个网页或一个区域的头部</header>
<nav>标记定义导航链接</nav>
<section>标记定义一个区域</section>
<aside>标记定义页面内容部分的侧边栏</aside>
<hgroup>标记定义文件中的一个区块的相关信息</hgroup>
<figure>标记定义一组媒体内容以及它们的标题</figure>
<figcaption>标记定义figure元素的标题</figcaption>
<footer>标记定义一个页面或一个区域的底部</footer>
<dialog>标记定义一个对话框/绘画课类似微信

注意点：

header/section/aside/article/footer不能自嵌套；
header/section/footer > aside/article/figure/hgroup/nav > div / figcaption; 就是一层一层嵌套，级别低的在级别高的里面，header/section/footer级别最高，适合做最外面的盒子
section通常不推荐没有标题内容使用section元素,
不要将section元素作为设置样式的页面容器，那是div的功能
如果article元素、aside元素、nav元素更符合使用条件，那不要用section
不能使用menu元素代替nav元素

多媒体标签

<video src="">标记定义一个视频</video>
<audio src="">标记定义音频内容</audio>
<source>标记定义媒体资源
<canvas>标记定义图片</canvas>
<embed src="" type="">标记定义外部的可交互的内容或插件，比如flash

web应用标签

状态标签：

1 2	<meter>状态标签(实时状态显示：气压、气温)C、O</meter> <progress>状态标签(任务过程：安装、加载)C、O、F</progress>

列表标签：

1 2	<datalist>为input标签定义一个下拉列表，配合option F、O</datalist> <details>标记定义一个元素的详细内容，配合summary C</details>

Menu:

1
2
3

<menu>命令列表（目前所有主流浏览器都不支持）</menu>
<menuitem>menu命令列表标签（只有firfox8+支持）
<command>menu标记定义一个命令按钮 只有IE9支持

其他标签

注释标签

<ruby>标记定义注释或音标</ruby>
<rt>标记定义对ruby的注释内容文本</rt>
<rp>告诉某些不支持ruby元素的浏览器如何去显示</rp>
<mark>标记定义有标记的文本（黄色选中状态）</mark>
<output>标记定义一些输出类型，计算表单结果配合oninput事件（该事件可以实时监听文本框的输入变化）</output>
<keygen>标记定义表单里一个生成的键值（加密信息传送）
<time>标记定义一个日期/时间，目前所有主流浏览器都不支持</time>

删除的标签

纯表现的元素（能使用css替代的元素）
Basefont big center font s strike tt u
对可用性产生负面影响的元素
frame frameset noframes (可用iframe)
产生混淆的元素
acronym 首字母的缩小 applet isindex dir

重定义标签

显示不变，只是表达的含义进行了重新定义的标签

<b>代表内联文本，通常是粗体，没有传递表示重要的意思</b>
<i>代表内联文本，通常是斜体，没有传递表示重要的意思</i>
<dd>可以同details与figure一同使用，定义包含文本，dialog也可用</dd>
<dt>可以同details与figure一同使用，汇总细节，dialog也可用</dt>
<hr>表示主题结束而不是水平线，虽然显示相同
<menu>重新定义用户界面的菜单，配合commond或者menuitem使用</menu>
<small>表示小字体，例如打印注释或者法律条款</small>
<strong>表示重要性而不是强调符号</strong>

新增的属性

input属性:email/url/number/range/date picker/search/color/tel
- date picker Input类型：
  - date选取日、月、年
  - month选取月、年
  - week选取周和年
  - time 选取时间（小时和分钟）
  - datetime选取时间、日、月、年UTC时间 ie火狐chrome不兼容，
  - datetime-local选取时间、日、月、年（本地时间） ie火狐不兼容，
表单属性：autocomplete/autofocus/multiple/placeholder/required
- autocomplete="on"
- autofocus属性该控件自动获得光标焦点,适用于所有input标签的类型或按钮控件上，autofocus="autofocus"
- multiple 适合input下的email和file
- placeholder输入框没输入状态下显示的文字，输入后消失，适用于input标签type属性为text,search,url,telephone.email,password
- required属性规定必须在提交之前填写输入域不能为空<input type="text" required="required" name="">适用于input标签type属性为text,search,url,telephone.email,password,date pickers,number,checkbox,radio,file
链接属性：link的sizes属性/base的target属性/超链接a
- <link rel="icon" type="image/gif" href="icon.gif" sizes="16*16">
- <base href="http://localhost/" target="_blank"> base标签为页面上的所有链接规定默认地址或默认目标。写在head标签中
- 超链接a
  - a:media=”handhelp”即支持手持设备，tv为电视设备
  - a:hreflang=”zh”设置中文语言
  - a:rel=”external”设置超链接的引用，这里为外部链接
其他属性：script/html/style
- script
  - defer:加载完脚本后并不执行而是等整个页面加载完之后再执行 <script defer scr="url"></script>
  - async:加载完脚本后立刻执行，不用等整个页面都加载完，属于异步执行
- <html manifest="cache.manifest">定义页面离线应用文件
- <style scoped></style> scoped内嵌css。可以在任意地方写
- ol有序列表:start–起始值 reversed——倒序排列
  1
  2
  3
  4
  5
  6
  7
  <ol start="5" reversed="reversed">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ol>

全局属性：对任何元素都可以使用的元素

contentEditable:true可编辑
designMode：页面是否可编辑，若设置可编辑， contentEditable都能编辑
hidden
spellcheck：对input或textarea检查
tabindex：按tab可定位

复习

属性

form action 属性可提交到不同页面。
form method 指定不同的提交方式post/get
form enctype指定不同编码方式。 text/plain 空格转换为 “+” 加号，但不对特殊字符编码。multipart/form-data
不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。application/x-www-form-urlencoded在发送前编码所有字符（默认）
form target:分别指定在任何处打开表单提交所需加载的页面 _blank 新窗口 _self _parent _top当前窗口 framename 指定框架打开
autofocus：为文本框选择框或按钮控件上加上该属性，当画面打开时，
required：输入框为空白时，提交会提示
labels标签的control属性：在标签内部放置一个表单元素，
placeholder：指文本框处于未输入状态时显示的输入提示。
list 属性为某个datalist元素的id，datalist类似选择框，当用户想要设定的值不在选择列表之内时，允许自行输入
input元素使用pattern属性，值设为某个格式的正则表达式。提交时针对这些进行检查，是否符合给定格式
selectiondirection属性，当用户用鼠标选取部分文字时，正向为forward，反向为backward，没有选取任何文字时，属性为forward
indeterminate：对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在HTML5中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。