常用块标签和三种列表

目录

常见的块标签：

[1、h1-h6 标题标签](#1、h1-h6 标题标签)

[2、p 段落标签](#2、p 段落标签)

[3、center 居中标签](#3、center 居中标签)

4、header、main、footer、aside、article、section

5、div

6、hgroup

7、列表标签：ul,ol,li,dl,dt,dd

列表的注意

---

块标签：主要用来搭建网页结构框架

特点：1、独占一行 2、可以设置宽高 3、如果宽度未设置则是其父元素100% ；如果高度没设置，则高度由内容撑开

常见的块标签：

h1-h6,p,center,header,main,footer,aside,article,section,hgroup,div,ul,li,ol,dl,dt,dd

1、h1-h6 标题标签

默认样式：字体加粗，大小有变化，从h1-h6字体会不断变小，标签上下有20px左右的外边距

语义：对浏览器来说被标题标签包裹的内容就是标题，语义从h1-h6逐步降低，其中h1语义最重一般一个页面只用一次h1，比如logo

<h1>我是一个一级标题</h1>
<h2>我是一个二级标题</h2>
<h3>我是一个三级标题</h3>
<h4>我是一个四级标题</h4>
<h5>我是一个五级标题</h5>
<h6>我是一个六级标题</h6>
 

2、p 段落标签

默认样式：上下有16像素的外边距

语义：p标签包裹的内容就是一个段落

注意：一般只包含文字，不可以包含块标签

这里用的插件生成的假文

jw+数字和lorem+数字，生成对应数字的中英假文

3、center 居中标签

默认样式：居中显示

语义：凡是要居中的内容，都可以写在center里面

<center>  
<p>不小者光为，天斯洪攻冷自血怒接出，的回。</p>  
<p>说秦的就文，一中过心，仍选挟的护词感有。</p>  
</center>  
 

4、header、main、footer、aside、article、section

header：网页的头部

main：网页的主体

footer：网页的底部

aside：页面的侧边栏，跟主体相关的内容

article：表示文章的区域

section：如果某个区块没有特殊的语义，则可以使用section，同样也可使用div

<header style="height:200px;background-color:#FAEBD7;">
  网页的头部
</header>

<main style="height:400px;background-color:#7FFFD4;">
  <aside style="height:50px;background-color:#A52A2A;">
    侧边栏
  </aside>
  
  <article style="height:200px;background-color:#6495ED;">
    文章区域
    <p>我么无币命作身洪以。</p>
    <p>罪明锐薪到落，盲耐。</p>
  </article>
</main>

<footer style="height:200px;background-color:#7FFF00;">
  网页的底部
</footer>
 

5、div

div 如果某个区块没有具体的特殊的语义，我们就可以用

注意：有语义的地方，尽量用有语义的标签，div需要慎用（其实用的挺多的，但是会增加浏览器的负担）

6、hgroup

话题分组

下面h1的内容和h3的内容如果不加hgroup,他俩依旧是兄弟元素，但是并没有直接联系，加了hgroup之后就有了逻辑关联。

<hgroup>
  <h1>古诗一首</h1>
  <h3>作者：xxxx</h3>
</hgroup>
 

<hgroup>
  <h1>静夜思</h1>
  <h3>作者：李白</h3>
</hgroup>
<article>
  <p>床前明月光，疑是地上霜。</p>
  <p>举头望明月，低头思故乡。</p>
</article>
 

7、列表标签：ul,ol,li,dl,dt,dd

列表定义：使用ul,ol,dl,创建列表，然后在列表中写列表项

列表使用场景：如果结构、样式、语义存在高度相同的部分就可以使用列表

列表分类：ul 无序列表（无顺序要求），ol有序列表，dl描述列表（定义列表）

1、使用ul创建列表时使用li表示列表项

默认样式：ul上下有16像素的外边距，左侧有40像素的内边距 li列表项默认新增 实心黑色圆点项目符号

<h3>超市购物</h3>
<ul>
  <li>牙膏牙刷</li>
  <li>买点水果</li>
  <li>买点纸巾</li>
  <li>
    <p>要话好明了使惜，狂。</p>
  </li>
  <li>
    <div>京因夹慨种，病疾国。</div>
  </li>
</ul>
 

如果不需要默认样式

<ul style="list-style: none">
 

2、用ol创建列表，li表示列表项

默认样式：ol上下有16像素的外边距，左侧有40像素的内边距

li列表项默认新增1，2，3···的项目符号

<ol>
  <li>刷会手机</li>
  <li>
    穿衣服
    <ol>
      <li>穿上衣</li>
      <li>穿下衣</li>
      <li>
        <ul>
          <li>穿左侧</li>
          <li>穿右侧</li>
        </ul>
      </li>
    </ol>
  </li>
  <li>刷牙洗脸</li>
  <li>吃早餐</li>
</ol>
 

3、定义列表：（有定义有内容）

用dl创建列表，dt表示下定义（小标题），dd表示对定义内容补充

默认样式：dl上下有16像素的外边距 dd左侧有40像素的外边距

<h3>热门课程</h3>
<dl>
  <!-- 小标题 -->
  <dt>鸿蒙前端课程</dt>
  <dd>html/css</dd>
  <dd>js</dd>
  <dd>vue框架</dd>
  <dd>鸿蒙框架</dd>

  <dt>大数据课程</dt>
  <dd>python</dd>
  <dd>数据分析</dd>
  <dd>数据清洗</dd>
  <dd>数据爬虫</dd>
</dl>
 

列表的注意

1、给列表增加type属性，可以修改项目符号，但一般我们不用列表的默认的项目符号

ol type属性值 可选：1(默认值)，A,a,I,i

ul type属性值 可选：

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

2、在实际开发过程中，一般不会具体区分有序列表还是无序列表，都可以使用

3、列表之间可以嵌套使用

4、列表和列表项是搭配使用，一般列表内不添加其他直接的子标签