html常见语义化标签

最新推荐文章于 2024-06-17 17:48:38 发布

伯nulee

最新推荐文章于 2024-06-17 17:48:38 发布

阅读量706

点赞数 1

分类专栏：日常文章标签： html5 html

本文链接：https://blog.csdn.net/liyunfu233/article/details/110677302

版权

日常专栏收录该内容

21 篇文章 0 订阅

订阅专栏

ie-不支持h5新增语义化标签，建议使用div span代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 语义化标签是块元素，独占一行 全部可以用div代替 -->
    <!-- header表示网页头部 主要用于放置一些logo、导航、搜索框等 -->
    <header>
        我是网页的头部

        <!-- nav表示页面的导航栏 -->
        <nav>导航栏</nav>
    </header>

    <!-- main标签表示网页中的主体内容 -->
    <main>
        我是网页的主体
        <!-- aside表示侧边栏 -->
        <aside>侧边栏</aside>
        <!-- section表示一块独立的区域 -->
        <section>独立区域</section>
        <!-- article表示网页中的一块内容 -->
        <article>  
            <p>
                锄禾日当午,<br>
                汗滴禾下土,<br>
                谁知盘中餐,<br>
                粒粒皆辛苦.<br>
            </p>
        </article>
    </main>

    <!-- footer表示网页底部 主要用于放置一些版权信息，友情链接  -->
    <footer>
        网页底部
    </footer>

    <!-- 
        以上标签都是H5新增的语义化标签，他们并不能支持所有的浏览器，
            所以基本上不用，如果使用也就nav用得最多，基本上可以使用div代替以上所有标签
     -->
</body>
</html>

header 表示网页头部，主要用于放置logo，导航，搜索框等
main 表示网页主体主要内容都放里面
footer 表示网页底部主要放置版权，友情链接等
nav 导航栏
aside 侧边栏
section 表示一块独立区域当无法用其他标签表示的区域时可以使用
article 表示网页中的一块内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        em标签 表示强调 默认斜体显示
        strong标签 表示强调 加粗

        em和strong为行内元素
     -->
    <p>今天<em>天气</em>真好</p>
    <p>今天<strong>天气</strong>真好</p>
    
    <!-- i和b无语义 就是斜体和加粗 -->
    <p>今天<i>天气</i>真好</p>
    <p>今天<b>天气</b>真好</p>
    
    <!-- 
        q标签表示短引用
        blockquote标签表示长引用 块元素
        p标签中不能放任何块元素
     -->
    <p>
        鲁迅说：<q>地上本没有路走的人多了便成了路</q>
    </p>
    <blockquote>
        床前明月光<br>
        疑是地上霜<br>
    </blockquote>

    <!-- span没有语义 主要作用就是选中文本 -->
    <span>我是span</span>

    <!-- 
        sub下标
        sup上标
     -->
    9<sub><small>8</small></sub>
    9<sup>8</sup>
</body>
</html>

em和strong 都表示强调一个默认斜体显示，一个加粗显示
i和b 无语义仅仅是斜体和加粗
q标签表示短引用是行内元素
blockquote表示长引用是块元素
span 没有语义主要作用就是选中文本
sub 下标 sup上标
常用的标签：div和span 可以代替以上所有语义标签

伯nulee

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html常见语义化标签

ie-不支持h5新增语义化标签，建议使用div span代替<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>
复制链接

扫一扫

专栏目录