一、可以省略标记的元素
不允许写结束标记的:br、hr、img、input、link、meta、base、param、area、col、command、embed、keygen、source、track、wbr
可以省略结束标记的:li、dt、dd、p、option、thead、tbody、tr、td、th、rt、rp、optgroup、colgrooup、tfoot
可以省略全部标记的:html、head、body、colgroup、tbody
二、新增加元素
1.布局用的语义标签
section:表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用标记文档结构。
article:表示页面中的一块与上下文不相关的独立内容,例如博客中的一篇文章。
aside:表示article元素内容之外的,与article元素相关的辅助信息。
header:表示页面中一个内容区块或整个页面的标题。
hgroup:用于整个页面或页面中一个内容区块的标题进行组合。
footer:用于整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名,创建日 期及创作者联系信息。
nav:表示页面中导航链接的部分。
figure:表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元,使用figcaption元素 为figure元素组添加标题。
这些标签与div相似,单独写出来没有任何效果(下图为不用div标签布局)

2.form表单新增加的属性
form:在html4中,表单内的从属元素必须书写在表单内部,但在html5中,可以书写在表单上任何位置,只需要给该元素制定一个form属性,属性值为表单的id就可以了,这样做的好处是给页面中的元素添加样式时更方便。
formaction:在html4中,表单内的所有元素都只能通过表单的action属性统一提交到另一个页面,但在html5中可以给所有的提交按钮都增加不同的formaction属性,使得点击不同的按钮,将表单提交到不同的页面。
formmethod:可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。
placeholder:当文本框“text”或“textarea”处于未输入状态时文本框中显示的输入提示。




autofocus:当页面刚打开,文本框、选择框或按钮可以自动获得焦点。不过一个页面只能有一个控件使用该属性。


list:该属性需要和datalist元素(html5新增)一起使用,list属性的值就是datalist的id,使用datalist元素设置一个选择列表,当用户输入的值在列表中就出现选择提示,当用户想要设定的值不在选择列表之内时,允许其自行输入。


autocomplete:可以指定“on”、“off”和“”三种值,不指定时,使用浏览器默认值。
待续。。。
网友评论