认识更多的 HTML 元素

浏览 280

课文

学 HTML 就像搭建一栋建筑物,需要我们针对不同的结构选择不同的元素。认识更多的常用元素,可以让我们在写代码的时候有更多的选择空间。

文本元素

接下来我们还是通过一个例子,来认识下文本相关的元素。

<!DOCTYPE html>
<html>
    <body>
        <b>加粗文本</b>
        <i>斜体文本</i>
        <u>下划线文本</u>
        <s>删除线文本</s>
        <small>小号文本</small>
        <sup>上标文本</sup>
        <sub>下标文本</sub>
        <code>代码文本</code>
        <strong>重点文本</strong>
        <em>强调文本</em>
        <ins>插入文本</ins>
        <del>删除文本</del>
    </body>
</html>

运行代码,我们会发现跟 p 标签不一样的是,这些标签内容都显示在了一行上面。这是因为 p 标签属于 块级元素 ,而例子中的标签则都属于 行内元素(内联元素)

块级元素

  1. 独占一行,默认宽度为 父元素的最大宽度,默认高度为 元素内容 的高度。
  2. 有宽高属性,可以设置宽高的长度。

内联元素

  1. 可以与其他行内元素共处一行。
  2. 不可以设置宽高,默认宽高为元素内容 的宽高。

如果想让这些标签内容呈现换行,我们有几个办法。

  1. p 标签等块级元素把以上元素包裹起来。
  2. 通过 css 样式将以上元素修改为块级元素。
  3. 在每个元素后面加上 <br /> (换行)标签。

我们用最简单易懂的第三种方法, 给每个元素后面加上 <br /> 标签。

<!DOCTYPE html>
<html>
    <body>
        <b>加粗文本</b><br />
        <i>斜体文本</i><br />
        <u>下划线文本</u><br />
        <s>删除线文本</s><br />
        <small>小号文本</small><br />
        <sup>上标文本</sup><br />
        <sub>下标文本</sub><br />
        <code>代码文本</code><br />
        <strong>重点文本</strong><br />
        <em>强调文本</em><br />
        <ins>插入文本</ins><br />
        <del>删除文本</del><br />
    </body>
</html>

执行效果:

image

细心的同学可以发现, bstrong 都是加粗字体, iem 都是斜体, uins 都是下划线等等。

这是因为 strongemins 等等属于 语义化标签,分别表示 重点强调插入 的元素, 它只是刚好在主流的浏览器上表现为 粗体斜体下划线 等形式。

语义化标签是可以通过标签名就能推测出其元素类型的一类标签,简单说就是具有语言含义的一类标签。

比较推荐大家日常使用语义化的标签,对于我们比较容易记忆,对于一些搜索引擎的爬虫能更好地帮助它们抓取重点。

列表元素

少不了的,我们要经常展示一些列表,依旧是通过一个实例来学习。

<!DOCTYPE html>
<html>
    <body>
        <h3>学生名单</h3>
        <!-- 无序列表 -->
        <ul>
            <li>鸣人</li>
            <li>柯南</li>
            <li>王路飞</li>
        </ul>
        <h3>成绩排名</h3>
        <!-- 有序列表 -->
        <ol>
            <li>柯南 - 99分</li>
            <li>鸣人 - 70分</li>
            <li>王路飞 - 50分</li>
        </ol>
    </body>
</html>

执行结果:

image

**ul 标签:** 无序列表标签,我们通常用来表示一些跟顺序无关的元素。比如这里班级的学生名单,排名不分先后。在浏览器中会以 圆点作为列表项的起始。

**ol 标签:**有序列表标签,顾名思义会拿来展示一些顺序相关的元素。比如这里的成绩排名,就是按从高到低展示。在浏览器中会以 数字 从 1 到 n 作为列表项的起始。

**li 标签:**列表项标签,放置在 ulol 标签中。

值得一说的是,列表项的标签内容也可以是一个列表。

请看实例:

<!DOCTYPE html>
<html>
    <body>
        <h3>学生名单</h3>
        <ul>
            <li>
                男生名单
                <ul>
                    <li>鸣人</li>
                    <li>柯南</li>
                    <li>王路飞</li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                女生名单
                <ul>
                    <li>春野樱</li>
                    <li>毛利兰</li>
                    <li>汉库克</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

执行效果:

image

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1