h5的28个新特性的详细介绍

<figure> <img src=”path/to/image” alt=”About image” /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>

header, footer, article, section, nav, menu, hgroup { display: block; }

document.createElement(”article”); document.createElement(”footer”); document.createElement(”header”); document.createElement(”hgroup”); document.createElement(”nav”); document.createElement(”menu”);

<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>

<input type=”text” name=”someInput” required>

<input type=”text” name=”someInput” required=”required”>

<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>

<audio autoplay=”autoplay” controls=”controls”> <source src=”file.ogg” /><!–FF–> <source src=”file.mp3″ /><!–Webkit–> <a href=”file.mp3″>Download this file.</a> </audio>

<video controls preload> <source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” /> <source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” /> <p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p> </video>

<video preload>

<video preload controls>

<form action=”" method=”post”> <label for=”username”>Create a Username: </label> <input type=”text” name=”username” id=”username” placeholder=”4 <> 10″ pattern=”[A-Za-z]{4,10}” autofocus required> <button type=”submit”>Go </button> </form>

<script> if (!’pattern’ in document.createElement(’input’) ) { // do client/server side validation } </script>

<h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>

<p id=”myp” data-custom-attr=”My Value”> Bla Bla </p>

<style> h1:hover:after { content: attr(data-hover-response); color: black; position: absolute; left: 0; } </style> <h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>

<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”"> input[type=range]:before { content: attr(min); padding-right: 5px; } input[type=range]:after { content: attr(max); padding-left: 5px;}