HTML5遵循的理念是不破坏原有HTML规则下,增加更多新功能,不仅仅是HTML标签,还涉及需要JavaScript支持的富Web应用开发,以及CSS3。
《深入浅出HTML5》将分为几个篇章对HTML5新特性进行介绍。
1. HTML5模板
代码语言:javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
// 内容
</body>
</html>
-
<!DOCTYPE html>
: HTML5文档类型,默认会触发标准模式。如果不定义文档类型,浏览器会以混杂模式显示页面,不同浏览器的混杂模式不同,这样会导致页面在不同浏览器下显示不一致。 -
<html lang="en">
: 为页面内容指定语言,这里使用英语。 -
<meta charset="UTF-8">
: 定义字符编码,这里是使用UTF-8编码,支持中英文。 -
<link rel="stylesheet" href="style.css">
: 定义外部样式表,不再需要type="text/css"
属性。 -
<script src="script.js"></script>
: 定义JavaScript,不再需要type="application/javascript"
属性。
2. 新增元素
- 构建页面的语义元素:
<article>, <aside>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <nav>, <section>, <details>, <summary>
,都是块级元素。 - 标识文本的语义元素:
<mark>, <time>, <wbr>
,都是内联元素。 - Web表单及交互:
<input type="email/url/search/tel/number/range/date/color">, <datalist>, <keygen>, <meter>, <progress>, <command>, <menu>, <output>
- 音频,视频和插件:
<audio>, <video>, <source>, <embed>
- 绘图Canvas:
<canvas>
3. 浏览器支持
推荐工具 http://caniuse.com/ ,通过它可以查看浏览器对HTML5支持情况。比如canvas
标签:
canvas support.png