美文网首页网页前端后台技巧(CSS+HTML)
前端开发注意事项(HTML与CSS进阶)

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

作者: OSong | 来源:发表于2018-06-05 13:54 被阅读15次

    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效果,查看便知

    相关文章

      网友评论

        本文标题:前端开发注意事项(HTML与CSS进阶)

        本文链接:https://www.haomeiwen.com/subject/isbpsftx.html