前端开发注意事项(HTML与CSS进阶)

2023年1月7日 133次阅读 来源: OSong

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>
  • 换行符
<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效果，查看便知

    原文作者：OSong
    原文地址: https://www.jianshu.com/p/8cc30f88b897
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞