HTML学习篇(三) 标题,段落和列表

HTML学习篇(三) 标题,段落和列表
0

  下面将分别总结 HTML 中标题(h1~h6)、段落(p)和列表(ul、ol)的使用。


标题

  HTML 里面表示标题的是 h1、h2、h3、h4、h5、h6 标签,通过编写以下代码:

<body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
</body>

  浏览器的显示效果图如下,可以看到从 h1 到 h6 ,标题逐渐变小,并且文字加粗:

%E5%9B%BE%E7%89%87

  需要注意的是,不要为了得到一定大小的文字而使用标题,为了文档结构具有语义以及搜索引擎优化,只有当需要一个标题的时候才应用 h1 到 h6 标签,如果单纯在正文中想要一定大小的文字,可以使用 CSS 来达到目的。

段落

  p 标签很常见,用来表示一串文字段落。

<p>这是一个段落。</p>

  在 HTML学习篇(一)的时候有讲过,p 标签和 h1~6 标签都是块级元素,它们在网页中独占一行,可以编写以下代码:

<body>
    <p>这是一个段落1。</p>
    <p>这是一个段落2。</p>
    <p>这是一个段落3。</p>
    <p>这是一个段落4。</p>
 </body>

  在浏览器中显示效果如下:

%E5%9B%BE%E7%89%87

  这里跟上面h1~h6标签的效果一样,各个段落分别独占一行,而且跟代码中是否换行没有关系,编写以下代码。

<body>
    <p>这是一个段落1。</p><p>这是一个段落2。</p><p>这是一个段落3。</p><p>这是一个段落4。</p>
</body>

  即使像上面这样编写也是一样的效果:

%E5%9B%BE%E7%89%87

  也就是代码中标签之间(注意不是指标签内的内容之间)是否换行与页面的内容是否换行是没有绝对关系,而是要看标签属于什么样的元素,是块级元素就显示为一行,而行内元素就合并在一行内,如果其内容超出一行范围则剩余部分切换到下一行。

  上一篇 HTML学习篇(一)还讲到一个 HTML 关键特性——嵌套, 块级元素 除了可以嵌入 其他块级元素 外,还可以嵌入 行内元素 ,但 行内元素 则不能嵌入 块级元素 ,只能嵌入 其他行内元素 。下面分别对比下,块级元素分别嵌入块级元素与行内元素之间的对比:

<!--块级元素 p 嵌入了另一个块级元素p-->
<body>
    <p>这是一个<p>这是一个段落2。</p>段落1。</p>
</body>

  上面代码在浏览器中将显示为:

%E5%9B%BE%E7%89%87

  可以看到上图段落(1)被段落(2)截断了,这里验证了行内元素独占一行的特性(前后自动换行)。

  既然这样,赶紧再来看看块级元素嵌入行内元素的情况:

<!--块级元素p嵌入了行内元素a-->
<body>
    <p>这是一个<a href="https://www.baidu.com/">这是一个百度超链接。</a>段落。</p>
</body>

%E5%9B%BE%E7%89%87

  很明显,有下划线的这个超链接作为行内元素,并没有自动换行的特性,所以被包含在标签p的内容里。

  虽然这里只使用了标签 p 和 a 来做示例,但对于其他块级元素和行内元素来说结果应该会是一样的。

  上面提到“代码中 标签之间 是否换行与页面的内容是否换行是没有关系”,那么如果是 标签内的内容之间 换行呢

<body>
    <p>这是一个段落。
    换行,这是下一行</p>
</body>

%E5%9B%BE%E7%89%87

  可以看到标签的内容换行是不起作用的,换行需要用 br 标签:

<body>
    <p>这是一个段落。<br>
    换行,这是下一行</p>
</body>

%E5%9B%BE%E7%89%87

  另外,一个标签内连续多个(2个或以上)空格都会被当成一个空格来处理。

如需在标签的内容中的多个空格和换行都正确显示在页面上,可以使用 <pre>标签

列表

  列表有三种,分别是无序列表 ul、有序列表 ol 和定义列表 dl

  1. 无序列表

ul 标签代表无序列表,列表项由 li 标签嵌入,列表项不分先后顺序,默认前置标记为实心圆点:

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

%E5%9B%BE%E7%89%87

  无序列表可以通过设置 CSS 样式 list-style-type 来更改前置标记为其他形状,也可以标记为无标记(none)。

  1. 有序列表

  ol 标签代表有序列表,列表项同样是li标签,列表项按顺序放,默认是阿拉伯数字从 1 开始:

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

%E5%9B%BE%E7%89%87

  有序列表同样可以通过设置 CSS 样式 list-style-type 来前置顺序标记为其他,可参考 list-style-type

  1. 定义列表

  dl 标签代表定义列表,列表项由 dt 和 dd 标签来组成,dt 标签表示列表项标题,dd 标签表示列表项内容。dl 标签包含了1个或多个的 dt 和 dd,而 dt 和 dd 之间不是嵌套关系,而是兄弟节点关系。

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dd>内容1.1</dd>
  <dt>标题2</dt>
  <dd>内容2</dd>
</dl>

%E5%9B%BE%E7%89%87

  可以看到,多个 dt 和 dd 标签为同一级标签,而且是一对多的关系。

上一篇:HTML学习篇(二) head标签
下一篇:HTML学习篇(四) 超链接

1赞