HTML5简明教程（一）概述
2017-05-05 本文已影响338人
娜姐聊前端
HTML5遵循的理念是不破坏原有HTML规则下，增加更多新功能，不仅仅是HTML标签，还涉及需要JavaScript支持的富Web应用开发，以及CSS3。
《深入浅出HTML5》将分为几个篇章对HTML5新特性进行介绍。
1. HTML5模板
<!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
微信公众号：
