结构语义化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML语义化示例</title>
    </head>
    <!--
        *为什么要语义化：
        1.不怕裸奔，没有CSS也能呈现良好结构。
        2.有利于SEO，爬虫容易理解和抓取。
        3.便于维护，遵循W3C标准，更具可读性。
        
        *语义化的应用：
        1.标签语义化。
        2.命名语义化。
    -->
    <body>
        <!--
            div语义：布局
        -->
        <div id="main">
            <!--
                a：链接，target：打开方式
                img：图片，alt：图片描述
            -->
            <a href="#" target="_blank">
                <img src="" alt="w3c标识"/>
            </a>
            
            <!--
                h1：正文标题
                h2：正文中段落的标题
                h3~h4：段落中小节的标题
                h5~h6：免责声明或版权通告
            -->
            <h1>W3C标准</h1>
            
            <!--
                p：段落
                em：段落内强调
                strong：全文强调
                br：换行
            -->
            <p>
                <h2>网页主要由三部分组成：</h2>
                <em>结构</em>包括(X)HTML、
                <em>表现</em>包括CSS、
                <em>行为</em>包括JavaScript,
                <strong>我们一定要遵循<br>W3C标准。</strong>
            </p>
        </div>
        <div id="sidebar">
            <!--
                ul:无序列表
                ol：有序礼拜
                li：列表项
            -->
            <ul>
                <li>结构</li>
                <li>表现</li>
                <li>行为</li>
            </ul>
            <ol>
                <li>html</li>
                <li>css</li>
                <li>javascript</li>
            </ol>
        </div>
        <div id="copyright">
            <h6>版权所有:©2020-2050 w3c.org</h6>
        </div>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容