- 声明文档类型
- 善用figure标签
1
2
3
4
5
6
| <figure>
<img src=”” alt="" />
<figcaption>
<p>img title</p>
</figcaption>
</figure>
|
- 引入css和js无需写类型
如下：
1
2
| <link rel=”stylesheet” href=”” />
<script src=””></script>
|
- contenteditable属性
contenteditable属性允许用户编辑元素内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<h2>h2</h2>
<ul contenteditable=”true”>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
|
- placeholder
1
| <input name=”email” type=”email” placeholder=”example@email.host” />
|
- local storage
html5的local storage可以让浏览器记住输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。
- 语义标签
有header和footer等等
1
2
3
4
5
6
| <header>
</header>
<footer>
</footer>
|
群组标题标签
1
2
3
4
| <hgroup>
<h1>h1</h1>
<h2>h2</h2>
</hgroup>
|
- 低版本IE兼容html5
1
2
3
| header, footer, article, section, nav, menu, hgroup {
display: block;
}
|
1
2
3
4
5
6
| document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“menu”);
|
- required属性
某个表单必须要输入，则使用required属性
1
| <input type=”text” name=”someInput” required>
|
例子：
1
2
3
4
5
| <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>
|
- autofocus属性
1
| <input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
|
- audio标签
1
2
3
4
5
| <audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a href=”file.mp3″>Download</a>
</audio>
|
- video标签
1
2
3
4
5
| <video width="320" height="240" controls preload>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
|
- 检测浏览器对属性的支持
原生js实现
1
| alert( ’pattern’ in document.createElement(‘input’) )
|
jquery实现
1
2
| if (!’pattern’ in document.createElement(‘input’)) {
}
|
- mark标签
用于高亮显示文本。
1
| <p>这是一段<mark>高亮</mark>文本</p>
|
