HTML中的元素分类和结构标签的使用

最新推荐文章于 2023-12-15 09:10:07 发布

绿皮车的忧伤

最新推荐文章于 2023-12-15 09:10:07 发布

阅读量117

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/greentrainsad/article/details/127105397

版权

1.元素/标签的分类

2.结构标签

1.元素/标签分为三大类

1、块元素主要是用来布局

特点：

（1）、块元素会独占一行

（2）、常用的块元素：

h1-h6,p,div

2、行内元素主要是用来包裹文字

特点：

（1）、不会独占一行

（2）常用的行内元素：

span、em、strong、del

3、行内块元素

特点：兼具块元素和行内元素的特点

常用的行内块元素：img

注意：

1、块元素里面什么都能放，能放块元素，行内元素，行内块元素

2、行内元素里面不能放块元素，一般只用来包裹文字.

如果你放了块元素，也不会报错，但不符合规范要求

3、块元素里有一个特殊的p标签，p标签里面只能放文字

4、行内元素里面有一个特殊的a标签，a标签里面什么都能放，除了它自己

示例：

<div>
      <p>好人措尝司大车，于。</p>
      <span>俭身夫狂。</span>
      <img src="" alt="" />
    </div>

注意：以下是不对的

<em>

<p>斗意帝妄慷况人，人。</p>

<div>才终疾担者，第学正。</div>

</em>

2.结构标签

网页的头部 <header>头部</header>

网页的主体 <main>主体</main>

网页的底部 <footer>底部</footer>

网页的导航 <nav></nav>

网页的侧边栏 <aside></aside>

网页的任意部分，没有任何语义一般是用来代替div <section></section>

网页的文章部分 <article></article>

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 用来搭建网页的结构  是html5的新标签 
          新标签的出现，让网页结构更加清晰，而且让网站的性能会更好
        但要注意一些老的网站，例如淘宝、京东等依然用div 
       绝大部分的结构标签都是块元素
    -->
    <!-- 网页的头部 -->
    <header>头部</header>
    <!-- 网页的主体 -->
    <main>主体</main>
    <!-- 网页的底部 -->
    <footer>底部</footer>
    <!-- 网页的导航 -->
    <nav></nav>
    <!-- 网页的侧边栏 -->
    <aside></aside>
    <!-- 网页的任意部分，没有任何语义 一般是用来代替div-->
    <section></section>
    <!-- 网页的文章部分 -->
    <article></article>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>