22个编写HTML5的实用小技巧
<mg src=”path/to/image” alt=”About image” />
<p>Image of Mars. </p>
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
<p class=myClass id=someId> Start the reactor.
<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> Watch video of self </li>
</ul>
</body>
</html>
<ul contenteditable=true>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<form action=”" method=”get”>
<label for=”email”>Email:</label>
<input id=”email” name=”email” type=”email” />
<button type=”submit”> Submit Form </button>
</form>
</body>
</html>
<input name=”email” type=”email” placeholder=”[email protected]” />
<div id=”header”>
…
</div>
<div id=”footer”>
…
</div>
<header>
…
</header>
<footer>
…
</footer>
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”>
<form method=”post” action=”">
<label for=”someInput”> Your Name: </label>
<input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>
<button type=”submit”>Go</button>
</form>
14. 自动对焦（Autofocus）属性
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a href=”file.mp3″>Download this file.</a>
</audio>
<form action=”" method=”get”>
<label for=”email”>Email:</label>
<input id=”email” name=”email” type=”email” />
<button type=”submit”> Submit Form </button>
</form>
</body>
</html>
<video preload>
…
</video >
<video preload controls>
…
</video >
<form method=post action=”">
<label for=”username”>create a username: </label>
<input id=”username” type=”text” name=”username” placeholder=”4 <> 10″ required=”required” autofocus=”autofocus” pattern=”[A-Za-z]{4,10}”>
<button type=”submit”>Go </button>
</form>
alert( ’pattern’ in document.createElement(‘input’) ) // boolean;
<script>
if (!’pattern’ in document.createElement(‘input’) ) {
// do client/server side validation
}
</script>
<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </h6>