一、标签布局
- header：顶部，放标题等
- footer：底部，放版权信息等
- nav：导航栏，主要是内部导航
- aside：侧边栏，提供注册等功能
- section：我的理解是有header、article、footer划分的区块
- article：正文内容
二、图文显示
任务一要求图文列表，最先想到列表形式：
1
2
3
4
| <li>
<p>title</p>
<img src="">
</li>
|
但是发现并木有题设的首行缩进。于是看了下7.7分的作品艾欧尼亚团队的Task1是如此实现的：
1
2
3
4
5
6
| <dl>
<dd>title</dd>
<dd>
<img src="">
</dd>
</dl>
|
但是总觉得不舒服，后来查了下资料，发现H5是这么写的：
1
2
3
4
| <figure>
<figcaption>title</figcaption>
<img src="">
</figure>
|
三、超链接局部刷新
1
2
3
4
5
6
7
8
9
| <a href="####"></a>
<a href="javascript:;"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(null)"></a>
<a href="#" onclick="return false"></a>
|
给a标签增加href属性的作用：
- :link选择器可以选择到它
- 这个a标签可以获得焦点（可以通过tab按键访问到）
- 在浏览器的默认样式表中，有href属性的a标签才有cursor:pointer的效果（尤其是在低版本的IE上）。
- 优雅降级，在网络连接很差，还没有加载到CSS的时候，依然有手型与正常的link样式。
四、表单细节
1. 使用label优化点击：
- label的for属性指向对应input的id
- lable标签包裹input标签，这就能省去for属性
- 6-16位英文、数字的密码：
- 邮箱：
1
| [\dA-Za-z]+([-_.][\dA-Za-z]+)*@([\dA-Za-z]+[-.])+[\dA-Za-z]{2,5}
|
五、其他标签
1. hgroup标签可整合主、副标题
1
2
3
4
| <hgroup>
<h1>主标题</h2>
<h2>副标题</h3>
</hgroup>
|
2. 时间可用time标签
1
2
3
4
| <p>
<strong>作者：Orion</strong>
<time>2016年3月14日21:58:18</time>
</p>
|
3. table表格最好带上thead、tbody、tfoot标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <table border="1">
<thead>
<tr>
<th>Name</th>
<th>Chinese Name</th>
<th>Usage Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Talonflame</td>
<td>烈箭鹟</td>
<td>
18%
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
<td>Scizor</td>
<td>巨钳螳螂</td>
<td>
16%
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
<td>Garchomp</td>
<td>烈咬陆鲨</td>
<td>
15%
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
<td>Heatran</td>
<td>席多蓝恩</td>
<td>
15%
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Average</td>
<td colspan=2>16%</td>
</tr>
</tfoot>
</table>
|
