html5学习笔记5-HTML5基础

2.3 HTML5基础

2.3.1 HTML5语法

1.内容类型

扩展名：.html .htm

内容类型：text/html

2.文档类型声明

在HTML5中，刻意不用版本声明，一份文档将会适用于所有版本的HTML。

HTML5中，使用DOCTYPE会触发浏览器以标准兼容模式显示页面。网页有怪异模式（quirks），近标准模式（almoststandards）和标准模式（standards）。其中标准模式也称为非怪异模式（no-quirks）

IE的怪异模式中，盒子模型的width是包括边框的

另外，chrome的例子模型的padding，是从上面，顺时针下来的

3.字符编码

从HTML5开始，字符编码推荐使用UTF-8

4.版本兼容性

可以省略标记的元素

第一，不允许写结束标记的元素 如
area base br col command embed hr img input keygen link meta paramsource track wbr

第二，可以省略结束标记的元素 如

• dt dd p rt rp optgroup option colgroup thead tbody tfoot tr tdth

第三，可以省略全部标记的元素 如 head body colgroup tbody

可以省略全部标记的元素在网页中以隐式方式存在

具有布尔值的属性

对于具有boolean值的属性，如disabled和readonly等，只写属性不写属性值时，表示true。

属性值等于空字符串时，以及等于属性名时，也是true。

测试结果：

省略引号

当属性值不包括空字符串、<、>、=、单引号、双引号等字符时，属性值两边的引号可以省略。

2.3.2 HTML5元素

元数据：通常出现在head中，设置页面其它部分的表现和行为，如script、style、title等

1.新增的结构元素

新增了语义化标记，搜索引擎在抓取和索引网页时，也会利用这些元素。

section：web页面中的一块区域

aside：相关内容或引文

HTML5推崇表现和内容的分离，必须使用CSS来定义样式。

2.HTML5新增功能元素

hgroup元素：对标题进行组合

figure元素：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。

embed元素：用来插入各种多媒体

mark元素：需要突出的文字

canvas元素：表示图形，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能把想绘制的东西绘制在这块画布上。

source元素：为媒介元素（如）定义媒介资源。

菜单元素：表示菜单列表

ruby元素：注音

rt元素：在ruby中使用，定义不支持ruby元素的浏览器所显示的内容

wbr元素：软换行 浏览器窗口或父级元素的宽度足够宽时，不进行换行。

command元素：命令按钮，如单选、复选、按钮。

details元素：与summary元素配合使用。标题可见，点击标题，显示细节信息。

progress元素：表示运行中的进程，使用它显示JS中耗费时间的函数的进程。

email元素：表示必须输入E-mail地址的文本输入框

url元素：URL地址输入框

number元素：必须输入数值的文本框

range元素：必须输入一定范围内数值的输入框

Date Pickers元素：

time——选取时间（小时和分钟）

datetime——选取时间、日、月、年（UTC时间）

datetime-local——选取时间、日、月、年（本地时间）

3.HTML5中废除的元素

能使用CSS替代的元素

basefont、big、center、font、s、strike、tt、u这些元素，

它们都是表现文本效果，而HTML5中提倡把表现型功能放在CSS样式表中统一编辑，所以将这些元素废除。

font元素由“所见即所得”的编辑器来插入，s、strike元素可以由del元素替代，tt由CSS的font-family替代

不再使用frame框架

由于frame框架对网页可用性存在负面影响，不再支持。H5只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式。所以废除frame、frameset、noframes元素。

只有部分浏览器支持的元素

applet、bgsound、blink、marquee被废除。

applet➡embed或object

bgsound➡audio

marquee➡JS编程

其它被废除的元素：（省略）

2.3.3 H5增加及废除的属性

1.增加的属性：

表单属性

• 为input(text)、select、textarea、button增加autofocus属性。画面打开时自动获得焦点

• 为input(text)、textarea增加placeholder属性，提示用户可以输入的内容。

• 为input、output、select、textarea、button与fieldset新增加form属性，声明属于哪个表单；元素可放置在页面任何位置，不局限在表单之内。

• 为input(text)元素与textarea元素增加required属性。检查该元素内一定要有输入内容

• 为input元素增加autocomplete、min、max、multiple、pattern、step属性。及list和datalist元素配合使用。datalist与autocomplete配合使用。multiple属性允许在上传文件时一次上传多个文件

• 为input元素与button元素增加了formaction、formenctype、formmethod、formnovalidate、formtarget，它们可以重载form元素的action、enctype、method、novalidate、target。为fieldset添加了disabled属性，可以把它的子元素设为disabled状态。

• 为input元素、button和form增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件地提交。

链接属性

• a和area，增加media属性，该属性规定目标URL是哪种类型的媒介或设备进行优化的，只能在href属性存在时使用

• 为area增加hreflang和rel属性，保持与a、link元素一致

• 为link元素增加sizes。可与icon元素结合使用（通过rel属性），用于指定关联图板的大小。

• 为base元素指定target属性，保持与a元素的一致性。

其它属性

• 为ol元素增加reversed属性，用于指定列表倒序显示。

• 为meta元素增加charset属性。

• 为menu元素增加type和label。label属性为菜单定义一个可见的标注，type属性让菜单可以以上下文菜单、工具条或列表菜单这3种形式出现

• 为style元素增加scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用

• 为script元素增加async属性，用于定义脚本是否异步执行

• 为html元素增加manifest属性，开发离线Web应用程序时，它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。

• 为iframe元素增加3个属性sandbox、seamless与srcdoc，用来提高页面安全性，防止不信任的web页面执行某些操作。

2.废除的属性（表格内容省略）

2.3.4 H5全局属性

在H5中新增了全局属性的概念。

1.contentEditable属性

允许用户在线编辑元素中的内容。该属性还有一个隐藏的inherit状态。

属性值是true时，可编辑，否则不可编辑。

未指定属性值时，则由inherit状态来决定，如果元素的父元素可编辑，则该元素就是可编辑的。

在编辑完元素中的内容后，如果想保存这些内容，只能把该元素的innerHTML发送到服务器端进行保存。

contentEditable支持的元素：略

2.designMode属性

用来指定整个页面是否可编辑，可编辑时，上文包含contentEditable属性的元素都变成可编辑。designMode只能在JS中被编辑修改。值为on和off。

用法：document.designMode="on"

Chrome3和Safari:使用内嵌frame的方式，该内嵌frame是可编辑的

3.hidden属性

所有元素都允许一个hidden属性。功能是通知浏览器不渲染该元素，使该元素处于不可见状态。但是元素中的内容还是浏览器创建的，页面装载后允许使用JS将该属性取消。true时，不可见；false时反之。

4.spellcheck属性

针对input(type=text)和textarea这两个文本输入框提供的新属性。语法拼写检查。必须写明true和false。不能只写属性名

*如果元素的readOnly或disabled属性为true，则不进行拼写检查。除IE，都对此属性进行支持

5.tabindex属性 

tab键获得焦点的顺序

2.3.5 HTML5其它功能

1 Selectors API

传统方式用JS脚本，查找页面DOM元素，例如，getElementById()函数根据指定的ID值查找并返回元素。

新的API，可以更精确的方式来指定希望获取的元素，而不必再用标准DOM方式循环遍历。

Selectors API与现在CSS中使用的选择规则一样，通过它可以查找页面中一个或多个元素。

CSS已经可以基于嵌套、兄弟和子模式等关系进行元素选择。CSS的最新版除添加了更多对伪类的支持，如判断一个对象是否被启用、禁用或被选择等，还支持对属性的随意组合叠加。

querySelector()返回页面中第一个匹配元素

querySelectorAll()返回所有匹配元素

*Selectors API 不仅仅是方便，在遍历DOM的时候，SelectorsAPI通常会比以前的子节点搜索API更快，为了实现快速样式表，浏览器对选择器匹配进行了高度优化。

2.JavaScript日志和调试省略，深奥

3.window.JSON 省略，深奥

4.DOM Level3 省略，深奥

5.Monkeys Squirrelfish和其它JS引擎 省略，深奥