前端之路（五）—— 文字标签

最新推荐文章于 2024-07-12 23:25:33 发布

popping_Sun

最新推荐文章于 2024-07-12 23:25:33 发布

阅读量1.3k

点赞数

分类专栏：前端之路文章标签：前端 html5 html javascript css

本文链接：https://blog.csdn.net/popping_Sun/article/details/122686788

版权

前端之路专栏收录该内容

12 篇文章 1 订阅

订阅专栏

通过前四篇内容，我们对html有了一个简单的认识。简单的页面通过html就可以写出来，当我们准备好编辑器与浏览器就可以开始我们的代码之旅啦。页面展示的内容不能是简单的一整页文字，它有丰富内容，比如图片，段落，列表等等。要想实现这些，就需要借助各种元素。所以这篇我们就来学习一起文字标签。

标题和段落

标题：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>都是双标签，数字越大，标题越小

<!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>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
  </body>
</html>

段落：<p></p>，将里面的内容变成一个段落。还记得我们提到的块级和行内元素吗？段落是不会跟其他内容连在一起的，所以p标签是块级元素。那么行内元素怎么表示呢？

  <p>我是一个段落</p>

行内元素：<span></span>用来组合文档中的行内元素

  <span>我是一个行内元素</span>

列表

列表也是很常见的元素，比如我们常见网页上新闻，列表有三种类型，有序列表、无序列表、自定义列表。

无序列表：<ul><li></li></ul>

<!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>
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
    </ul>
  </body>
</html>

<ul>包裹着整个列表，<li>包裹的是列表的每一项

有序列表：有序列表跟无序类似，就是有序列表按照一定的顺序列出来。

<!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>
    <ol>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
    </ol>
  </body>
</html>

自定义列表：<dl><dt></dt><dd></dd></dl>。简单来说就是带有描述的列表。dt一般包裹着描述，dd一般包裹着描述的标题。

<!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>
    <dl>
      <dt>水果</dt>
      <dd>苹果</dd>
      <dd>香蕉</dd>
    </dl>
  </body>
</html>

列表之间是可以嵌套的，比如在无序列表<li>里面包裹一个有序列表。注意，嵌套时标签一定不能混用！