HTML的十五大新特性
1.新的文档类型(New Doctype)
1 | <!Doctype html> |
2.脚本和链接无type
1 | <!-- HTML4或XHTML --> |
3.语义Header和Footer
1 | <!-- HTML4或XHTML --> |
4.Hgroup
在HTML5中,有许多新引入的元素,hgroup就是其中之一。假设我的网站名下面紧跟着一个子标题,我可以用”h1>”和”h2”标签来分别定义。然而,这种定义没有说明这两者之间的关系。而且,h2标签的使用会带来更多问题,比如该页面上还有其他标题的时候。在HTML5中,我们可以用hgroup元素来将它们分组,这样就不会影响文件的大纲。1
2
3
4
5
6<header>
<hgroup>
<h1>Aaaa</h1>
<h2>Bbbb</h2>
</hgroup>
</header>
5.标记元素 (Mark Element)
你可以把它当做高亮标签。被这个标签修饰的字符串应当和用户当前的行动相关。比如说,当我在某博客中搜索“Open your Mind”时,我可以利用一些JavaScript将出现的词组用修饰一下。1
2
3
4<h3>Hello,world</h3>
<p>
<mark>China</mark>
</p>
6.图形元素
1 | <!-- HTML4或XHTML --> |
7.重新定义small
在HTML4或XHTML中,
small>元素已经存在。然而,却没有如何正确使用这一元素的完整说明。在HTML5中,small>被用来定义小字。试想下你网站底部的版权状态,根据对此元素新的HTML5定义,smal
可以正确地诠释这些信息。
8.占位符 (Placeholder)
在HTML4或XHTML中,你需要用JavaScript来给文本框添加占位符。比如,你可以提前设置好一些信息,当用户开始输入时,文本框中的文字就消失。而在HTML5中,新的“placeholder”就简化了这个问题。1
2
3
4
5
6
7
8
9
10
11
12
13
14<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form
<p><strong>注意:</strong> Internet Explorer 9及更早IE版本不支持input标签的 placeholder 属性。</p>
</body>
</html>
9.必要属性 (Required Attribute)
HTML5中的新属性“required”指定了某一输入是否必需。有两种方法声明这一属性。1
2
3<input type="text" name="someInput" required />
<input type="text" name="someInput" required="required"/>
<!-- 当文本框被指定必需时,如果空白的话表格就不能提交 -->
10.Autofocus 属性 (Autofocus Attribute)
11.Audio 支持 (Audio Support)
1 | <audio autoplay="autoplay" controls="controls"> |
12.Video 支持 (Video Support)
1 | <video controls preload> |
13.视频预载 (Preload attribute in Videos element)
1 | <video preload></video> |
14.显示控制条
1 | <!-- 如果你使用过上面的每一个提到的技术点,你可能已经注意到,使用上面的代码,视频仅仅显示的是张图片,没有控制条。为了渲染出播放控制条,我们必须在video元素内指定controls属性。 --> |
15.正规表达式 (Regular Expressions)
1 | <!-- 在HTML4或XHTML中,你需要用一些正规表达式来验证特定的文本。而HTML5中新的pattern属性让我们能够在标签处直接插入一个正规表达式。 --> |
总结:内容不完善,后面继续补充~
最新访客: