HTML 与 CSS 进阶
- Img 标签
alt 属性 一定要添加 用于图片描述 给机器看的,如果图片加载失败,会显示 alt
<img src="" alt=""/>
- 为 img 添加 图片注释 建议做法为 figure(图形) 和 figcaption [caption(字幕)]
<figure><img src="" alt=""/> <figcaption>图片说明</figcaption>
</figure>
- 表格语义化 数据形式的最佳选择还是表格
(h5新增 th, caption, thead, tbody 和 tfoot 根据需求选择使用者三个标签)
<table><caption>表格示例</caption><!-- 表头 --><thead><tr><th>表头单元格1</th><th>表头单元格2</th></tr></thead><!-- 表身 --><tbody><tr><td>标准单元格1</td><td>标准单元格2</td></tr><tr><td>标准单元格1</td><td>标准单元格2</td></tr></tbody><!-- 表脚 --><tfoot><tr><td>标准单元格1</td><td>标准单元格2</td></tr></tfoot></table>
- 换行符<br/>
<div><span>标题</span> <br/><span>第一部分内容</span><br/><span>第二部分内容</span><br/><span>第三部分内容</span>
</div>
<!-- 上边是错误用法 吃惊吗 -->
<!-- br 有自己的特定语义 只适合用户 P 标签内部的换行-->
<p>广东省<br/>广州市<br/>黄埔大道61号
</p>
- 无序列表 <ul>
主要用于列表型数据
<ul><li><span>1</span>HTML 教程</li><li><span>2</span>PHP 教程</li><li><span>3</span>java 教程</li>
</ul>
有人说,每一个列表前都有数字,为什么不用有序列表实现。
答: 因为有序列表前的数字外观是固定的,不能修改。所以在开发中,大多数情况下都是使用无序列表
- Strong 标签和 em标签
可以用于 SEO 突出
W3C 对这两个标签赋予了"强调"的语义。 为了SEO突出,可以使用 strong 和 em如果被 CSS 重新定义新的样式,也不影响这两个标签的语义
如何判断一个页面是否语义良好
去掉所有CSS效果,查看便知