HTML5小技巧你知道多少？
1、新的文档类型（Doctype）
<!DOCTYPE html>
注意：你的doctype的申明需要出现在你html文件的第一行。
2、HTML<tt> <i> <b> <big> <small> 标签
原来你可以利用<small>元素来创建与logo密切相关的副标题。不过，现在HTML5修改了这个用法，<small>元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注（如，网站底部的版权声明）。
<html>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
</body>
</html>
3、 图形（Figure）元素
你还在考虑用下面的代码来标记图片吗？
<img src="../cat.jpg" alt="猫">
<p style="margin-left: 160px;">这只猫好可爱</p>
上面的代码它不能以简单而且富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹，而 HTML5通过引进<figure>元素，改进了这一点。当结合 <figcaption> 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：
<figure>
<img src="../cat.jpg" alt="猫">
<figcaption>
<p style="margin-left: 140px;">这只猫好可爱</p>
</figcaption>
</figure>
4、不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下：
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
5、引号
记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cat {
margin-left: 140px;
}
</style>
</head>
<body>
<figure>
<img src="../cat.jpg" alt="猫">
<figcaption>
<p class = cat>这只猫好可爱</p>
</figcaption>
</figure>
</body>
</html>
6、contenteditable
HTML5其中一个非常强大的功能就是"contenteditable"，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory</li>
<li> Watch video of self </li>
</ul>
</body>
</html>
7、语义化
这部分内容在博主的另一篇文章有介绍，想了解的坐飞机过去
html5语义化
8、IE和HTML5
IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：
document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“menu”);
9、音频支持
**注意：**想具体了解音频、视频这几个新特性的，可以参考博主的另一篇文章
HTML5+CSS3
我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素<audio>。目前，只有最新的浏览器支持HTML5音频。 此时，最好还是提供一些向后兼容性。
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a href=”file.mp3″>Download this file.</a>
</audio>
说道音频格式，Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件，Webkit浏览器只支持最常见的.mp3扩展名。这意味着说，至少目前为止，你应该创建两个版本的音频。当Safari加载页面时，它认不出.ogg格式的文件，将会跳过并移到mp3版本上。请注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。
10、正则表达式
多亏了新模式的属性，我们可以直接在代码中插入一个正则表达式。
<form method=post action=”">
<label for=”username”>create a username: </label>
<input id=”username” type=”text” name=”username” placeholder=”4 required=”required” autofocus=”autofocus” pattern=”[A-Za-z]{4,10}”>
<button type=”submit”>Go </button>
</form>
如果你比较熟悉正则表达式的话就会注意到这个新模式: [A-Za-z]{4,10}只接受大小写字母。这个字符串最少必需有四个字符，最多是十个字符。
11、检测浏览器对属性的支持
前面提到过并非所有的浏览器都支持这些属性，那是否有什么方法能够判断浏览器是否能够识别它们呢？这个问题问得非常好，这里给大家介绍两种方式，第一个选择是使用Modernizr来检测，或者你也可以创建并剖析这些元素来看看浏览器都有什么能力。例如，在前面的例子里，如果我们要确定浏览器是否能够执行pattern属性，就可以在页面上添加JavaScript:
alert( ’pattern’ in document.createElement(‘input’) ) // boolean;
实际上，这是确定浏览器兼容性的一种非常常用的方法。jQuery库利用了这个技巧。上面的代码里，我们创建了一个新的输入元素，并确认pattern属性是否能够被识别。如果能够识别的话，浏览器就支持这个功能，否则就不支持。
<script>
if (!’pattern’ in document.createElement(‘input’) ) {
// do client/server side validation
}
</script>
记住，这将需要依靠 JavaScript来实现！
12、Mark元素
<mark> 元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索"Open your Mind" ，我可以使用在<mark>标签里使用JavaScript 来包裹每一次动作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </h6>
</body>
</html>
13、何时使用<div>
是否还需要使用<div>标签呢？当然需要。例如，如果你想在一个元素里将一段代码包裹住，特别是为了内容的定位，<div> 将会是非常理想的选择。不过，如果不是上述情况而是要包裹博客文章、或者页脚的链接列表，建议你分别使用 <article>和<nav>元素。
本篇博客内容参考自微信公众号“web前端开发”
https://mp.weixin.qq.com/s/Bh2Kb3LYGXxCkKq6o2yUsQ
如有侵权，请联系博主删除qq:1105810790