列举5个html5的结构标签 html5结构标签有哪些

转载

智能开发先锋 2023-08-08 15:25:47

文章标签 列举5个html5的结构标签 html html标签嵌套 文章分类 HTML5 移动开发

html结构标签

HTML结构是网页基础，CSS、JS都是针对多是对于HTML的美化以及操作。

html标签

html标签是整个网页文档的标签，包括head、body、div以及其它所有标签，是整个文档的根树。
<html></html> :是一个双标签，开始和结束标签。

head标签

<head></head> ：网页的头部信息区域。
常见的包含<meta>、<title>标签,内容多在网页中"不可见"内容。

body标签

<body></body>：网页的主题内容区域。文字、图片、音频、视频等等内容都显示在body区域内。

div标签

<div></div>：最常见的用来网页布局标签。没有语义，一般通过id或者class定义属性名。块级元素，可以进行多重嵌套使用，过去使用div标签层层嵌套或者并行实现布局。

常见布局实例：

<!DOCTYPE html>
<html>
    <head>
        <meta  charset="utf-8"/>
        <title>html结构标签</title>
    </head>
    <body>
        <div class="header">header</div>
        <div class="content">content</div>
        <div class="footer">footer</div>
    </body>
</html>

这个实例body标签里面的div没有明确语义，只能通过class的名称来解析。

header标签

<header></header>：html5新的结构化标签，页眉头部区域，具有明确语义，利于浏览器索引。

nav标签

<nav></nav>：用于导航栏内容的标签。

footer标签

<footer></footer>：页脚区域标签，在页面底部。

section标签

<section></section>：内容区块标签，类似于div,比div语义要强，一块主题性内容区块。

article标签

<article></article>：类似于上述的section标签，可以是独立于页面其它内容的独立区块。
语义方面：div<section<article

使用新html标签的案例：

<!DOCTYPE html>
<html>
    <head>
        <meta  charset="utf-8"/>
        <title>html5新结构标签</title>
    </head>
    <body>
        <header>header</header>
        <nav>
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">案例</a></li>
                <li><a href="">知识</a></li>
                <li><a href="">博客</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </nav>
        <section>
            <p>最常见的用来网页布局标签。没有语义，一般通过id或者class定义属性名。块级元素，可以进行多重嵌套使用，过去使用div标签层层嵌套或者并行实现布局。</p>
        </section>
        <footer>
            <p>©2020 版权所有</p>
        </footer>
    </body>
</html>

图例：

列举5个html5的结构标签 html5结构标签有哪些_html