最近看了html5+css3 权威指南第二版上册,对html5有了全面的了解。特做笔记。
html5和html4的区别
一.html5语法的改变
标记语法:
1.DOCTYPE声明
html4:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html5:<!DOCTYPE html>
2. 指定字符编码
html4:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
html5:
<meta charset="UTF-8">
版本兼容:
html5确保了与之前的html的语法保持最大的兼容。
1.可以省略的标记元素
❑ 不允许写结束标记的元素有:area、base、br、col、command、embed、hr、img、
input、keygen、link、meta、param、source、track、wbr。
❑ 可以省略结束标记的元素有:li、dt、dd、p、rt、rp、optgroup、option、colgroup、
thead、tbody、tfoot、tr、td、th。
❑ 可以省略全部标记的元素有:html、head、body、colgroup、tbody。
2. 具有boolean值的属性
<!--只写属性不写属性值代表属性为true-->
<input type="checkbox" checked>
<!--不写属性代表属性为false-->
<input type="checkbox">
<!--属性值=属性名,代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串,代表属性为true-->
<input type="checkbox" checked=""> -------需注意,属性值为空字符串,代表属性为true
3.省略引号
<input type="text"><input type='text'><input type=text>异曲同工
二、新增的元素和废除的元素
新增的元素:section、arcitle、header、footer、video、progress、time等。
新增的input元素类型:email、url、number、range。
三、新增的属性
❑ 可以对input(type=text)、select、textarea与button元素指定autofocus属性。它以指定
属性的方式让元素在画面打开时自动获得焦点。
❑ 可以对input元素(type=text)与textarea元素指定placeholder属性,它会对用户的输
入进行提示,提示用户可以输入的内容。
❑ 可以对input、output、select、textarea、button与fieldset指定form属性,声明它属于
哪个表单,然后将其放置在页面上任何位置,而不是表单之内。
❑ 可以对input元素(type=text)与textarea元素指定required属性。该属性表示在用户提
交的时候进行检查,检查该元素内一定要有输入内容。
❑ 为input元素增加了几个新的属性:autocomplete、min、max、multiple、pattern与step。
等等。
四、全局属性
1、contentEditable属性
2、designMode属性
designMode属性由javascript脚本控制,有on和off两个值。当为on时页面可编辑。
3、hidden属性
4、spellcheck属性
<!—以下两种书写方法正确-->
<textarea spellcheck="true" >
<input type=text spellcheck=false>
<!—以下书写方法为错误-->
<textarea spellcheck >