HTML标签入门（2）——超文本链接、有序列表、无序列表、表格、表单、块元素标签、内联元素标签、特殊内联元素标签

程序猿ZhangSir

已于 2024-10-08 15:22:23 修改

阅读量1.9k

点赞数 31

分类专栏： # HTML 前端文章标签： html 前端服务器

于 2024-08-23 18:41:09 首次发布

本文链接：https://blog.csdn.net/m0_70325779/article/details/141434167

版权

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

六. 块元素、内联元素、行内块元素(特殊内联元素)

6.1 通过现象引出问题

6.2 常见的块元素标签与内联元素标签

6.3 块元素与内联元素的区别

6.4 行内块元素(可理解为特殊内联元素)

一. 超文本链接<a href = ""></a>

1.1 超链接简述

超文本链接用一句话来形容就是"想跳哪里跳哪里"，链接大家并不陌生，我们随意点开一个网站，就可以发现很多图片和文字是可以进行点击的，点击之后就会跳转到另一个地方或者打开一个新的页面，这就是跳转链接。它可以是一个字，一句话、一段话、或是一张图片，简单来说，可以展示在页面上的任何文本都可以作为一个超链接。

1.2 超链接标签语法

超链接的使用方式如下：

<a href = "https://www.xxx.com">链接文本</a>

需要使用一对<a>标签进行包裹，标签中间的文本就是链接文本。href 属性的值就是要跳转到的其他页面或当前页面的某个地方。

此外要注意的点是此处的值必须填写完整值(完整路径)，平时我们在浏览器搜索一般都是不带前缀 "https://www." 的。但在超链接中，一定要加上，否则超链接会失效；如果 href 属性为空，此时链接也会失效，链接文本也就变成了普通的文本。

1.3 超链接代码示例

如下代码，我简单写了三个超链接；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.bilibili.com/">点击我进入B站吧</a>
    <br>
    <a href="https://www.csdn.net/">点击我进入CSDN吧</a>
    <br>
    <a href="https://www.baidu.com/">点击我进入百度吧</a>
</body>
</html>

然后保存在浏览器打开，如下图所示，三个超链接就形成了。

默认情况下，链接会有以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线；
访问过的链接显示为紫色并带有下划线；
点击链接时，链接显示为红色并带有下划线；

还有一个小细节：如果想确认一个文本是不是超链接或者自己设置的文本连接是否有效，可以将鼠标移动到文本处，如果鼠标从原本的样式变成了一个"小手"，则说明当前文本是超链接文本。

如果不希望有下划线或想改变字体颜色，可以后期使用一些其他方法例如CSS选择器让它不显示或改变其样式，这里不多说了。

二. 有序列表

2.1 有序列表简述

有序列表其实非常常见，就是1，2，3，4，5....或者A，B，C...这样，现在小编正在写的文章的每个小标题其实就可以理解为是有序列表。在HTML标签中，它提供了多种有序列表标签供我们去进行选择使用。

2.2 有序列表标签

(a) 有序列表标签语法如下所示，最外层由一对<ol></ol>标签进行包裹，内部则可以由若干的<li></li>标签进行填充，每个<li></li>标签中间就使用文本来进行填充；

    <ol type="">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

(b) 不仅如此，还可以通过 type 属性来选择要生成的不同种类的有序列表

1：表示列表项目用数字标号(1,2,3...)；
a：表示列表项目用小写字母标号(a,b,c....)；
A：表示列表项目用大写字母标号(A,B,C...)；
i：表示列表项目用小写罗马数字标号(i,ii,iii...)；
I：表示列表项目用大写罗马数字标号(1II...) ；

(c) 此外，无序列表之间还可以进行嵌套使用，形成多层级结构。

2.3 有序列表代码示例

如下所示，我将上面五种有序列表全都写了一下，并且嵌套使用了有序列表，嵌套在内部的有序列表也可以通过 type 指定有序列表的前缀，如果不指定默认就是使用1，2，3来进行排序；

<body>
    <ol type="1">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <hr>
    <ol type="A">
        <li>CSGO</li>
        <li>CF</li>
        <li>LOL</li>
    </ol>
    <hr>
    <ol type="a">
        <li>抖音
            <ol type="A">
                <li>短视频</li>
                <li>长视频</li>
                <li>图片</li>
            </ol>
        </li>
        <li>B站</li>
        <li>CSDN</li>
    </ol>
    <hr>
    <ol type="I">
        <li>淘宝</li>
        <li>咸鱼</li>
        <li>拼夕夕</li>
    </ol>
    <hr>
    <ol type="I">
        <li>手机
            <ol type="1">
                <li>apple</li>
                <li>huawei</li>
                <li>xiaomi</li>
            </ol>
        </li>
        <li>平板</li>
        <li>电脑</li>
    </ol>
</body>

保存代码，然后在浏览器打开，就可以看到效果如下所示，在页面中出现了五种有序列表，且嵌套在内部的有序列表样式因为 type 指定的不同因此和外部不一样。

三. 无序列表

3.1 无序列表简述

与上述有序列表与之对应的，当然就是无序列表了，从字面理解也可以知道，无序列表是也一个列表，但内部是没有顺序的，排名不分先后。

3.2 无序列表标签

(a) 无序列表标签的使用语法和有序标签几乎相同，只是外部标签不同，有序标签外部是<ol></ol>来进行包裹，而无序标签则是使用<ul></ul>来进行包裹，内部每个选择同样时使用<li></li>标签。

(b) 而且无需标签和有序标签之间是可以互相嵌套使用的，嵌套语法和刚才有序标签的方式一样。

(c) 无序列表也可以通过 type 来指定属性，常用的有以下四种

disc：默认实心圆
circle：空心圆
square：小方块
none：不显示

3.3 无序列表代码示例

如下代码，第一个是普通无序列表；第二个是无序列表嵌套有序列表；第三个是有序列表嵌套无序列表；

<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
    <hr>
    <!-- 无序列表嵌套有序列表 -->
    <ul type = "circle">
        <li>奶茶
            <ol>
                <li>米雪</li>
                <li>茶摆到</li>
                <li>Cooc</li>
            </ol>
        </li>
        <li>咖啡</li>
        <li>可乐</li>
    </ul>
    <hr>
    <!-- 有序列表嵌套无序列表 -->
    <ol>
        <li>苹果
            <ul type = "square">
                <li>红苹果</li>
                <li>青苹果</li>
                <li>绿苹果</li>
            </ul>
        </li>
        <li>香蕉</li>
        <li>橘子</li>
    </ol>
</body>

保存在浏览器打开，就可以得到如下所示的效果，我们平常在浏览器中看得到排序效果，就是无序列表有序列表混合搭配而形成的。

四. 表格

4.1 表格简述

HTML中的表格和我们日常间的表格是一样的，横平竖直，每一个小的单元格都是一个独立的存储单元，并且各行各列都是等高等宽的。每个单元格中可以填写文字，图片等；

4.2 表格标签的使用

在HTML中，表格标签使用<table></table>来进行标识，所有要写在表格中的内容都要写在<table></table>标签之内。

<tr></tr>代表表格中的行，一对标签就是一行，两对就是两行；

<td></td>代表表格中的列，写在<tr></tr>标签之内，一对标签就是单独一列，两对标签就是将一行分为两列，三对就是拆成三列；

4.3 表格代码示例

如下代码，一共有三对<tr>标签，每个标签内部又还含有四对<td>标签，所以会在页面中生成三行四列的单元格。

<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>

保存在浏览器打开，得到的表格效果如下图所示

五. 表单

5.1 表单简述

表单是Web网页中几乎必不可少的一项重要功能，主要作用就是让用户将信息填写在表单之中，从而采集到用户信息，让页面具有交互能力。

在一个页面中，几乎所有需要让用户输入内容的地方都是由表单来完成的，例如用户注册、登录、搜索框等......

表单是由容器和控制组件共同构成的，一个表单通常会含有让用户输入信息的输入框，和用户输入完毕后提交信息的按钮框。这些输入框和按钮框就是控件，一个表单中可以容纳各种各样的控件。

5.2 表单语法

在HTML中，表单标签使用<form></form>来进行标识，form 标签的内部还可以填写多种属性，如下代码示例

<form action="url" method="get|post" name="xxx"></form>

action：用来填写后台服务器的网址；
method：表单提交的方法，通常为 get 请求或 post 请求，而这也略有区别，get 一般用于提交少量数据，post 用于提交大量数据。
name：用来标识当前表单的名称，后期CSS添加样式时会用到；

一个完整的表单包含以下三个基本组成部分：表单标签，表单域，表单按钮。表单域也可以简单理解成输入框，在HTML中使用<input>标签即可形成几个输入框，并通过 type 指定类型，type = "text" 表示当前输入框是一个文本输入框，type = "submit" 表示当前输入框是一个按钮提交框。

    <form action="url" method="get|post" name="xxx">
        <input type="text">
        <input type="submit">
    </form>

在页面上展示的效果如下

有输入框，有提交框。形成了一个最最基本的表单。

5.3 表单代码示例

如下代码所示，在 form 标签内部，我们可以直接填写文本，不需要再写<p>标签以及其他文本标签，但也可以根据页面需要嵌套使用。

使用<input>标签生成多个控件，然后通过type指定属性，属性不一样，控件的效果也不一样。

placeholder 属性：用来提示用户当前文本框应该输入什么值；

value 值：用来标注当前按钮的文本；

<body>
    <form action="url" method="get|post" name="xxx">
        用户名：<input type="text" placeholder="请输入用户名">
        <br>
        密码：<input type="password" placeholder="请输入密码">
        <br>
        <input type="submit" value="登录">
        <br>
        <input type="submit" value="提交注册">
    </form>
</body>

保存在浏览器打开，页面效果如下所示。

placeholer 的值在文本框内部就有提示用户输入；下面两个按钮的值也对应着 value 值；

此外还有更重要的一点，在密码输入框，我们将 type 属性赋值为 password，在实际页面中，用户输入的密码就会有一个个小黑圆点代替，不会以明文的方式展示，保证了用户信息的安全性；

而用户名则不需要隐藏，直接赋值为 text 普通文本即可，就会以明文的方式显现，如下图所示

六. 块元素、内联元素、行内块元素(特殊内联元素)

6.1 通过现象引出问题

也许很多同学不知道块元素、内联元素、行内块元素是什么东西，无妨。

我们先一起来看下面的一段代码

<body>
    <!-- 一级标题 -->
    <h1>一级标题</h1>
    <!-- 三级标题 -->
    <h3>三级标题</h3>
    <!-- 六级标题 -->
    <h6>六级标题</h6>

    <!-- 一段文本 -->
    <span>我是第一段文本</span>
    <!-- 又一段文本 -->
    <span>我是第二段文本</span>
    <!-- 又又一段文本 -->
    <span>我是第三段文本</span>
    <!-- 又又又一段文本 -->
    <span>我是第四段文本</span>
    <!-- hr换个行 -->

    <!-- 一个段落 -->
     <p>我是第一个段落</p>
     <!-- 又个段落 -->
     <p>我是第二个段落</p>
     <!-- 又又个段落 -->
     <p>我是第三个段落</p>
     <!-- 又又又个段落 -->
     <p>我是第四个段落</p>

    <!-- 第一个超链接 -->
    <a href="https://www.bilibili.com/">点击我进入B站吧</a>
    <!-- 第二个超链接 -->
    <a href="https://www.csdn.net/">点击我进入CSDN吧</a>
    <!-- 第三个超链接 -->
    <a href="https://www.baidu.com/">点击我进入百度吧</a>

    <!-- 第一个表格 -->
    <table>
        <tr>我是第一个表格</tr>
    </table>
    <!-- 第二个表格 -->
    <table>
        <tr>我是第二个表格</tr>
    </table>
    <!-- 第三个表格 -->
    <table>
        <tr>我是第三个表格</tr>
    </table>
</body>

然后在浏览器打开，就看到下面这种样子，小伙伴们细心看看一看这些标签形成的元素在页面上的排布规则，有没有发现一些微妙的地方；

相信细心的小伙伴们已经看出来了。

那就由我来说一下吧！

疑问点一：一级标题，三级标题，六级标题这三个都是标题，它们没有将自己所在的那一行占满，但是在新建一个标题时，还是会另起一行；

疑问点二：但是页面中的四个段落紧紧挨在一起展示的，都是在同一行，而当我们去新建段落时，新建的段落并没有紧贴着文本去显示，而是另起了一行，每个段落都是另起了一行；

疑问点三：我建立的三个超链接，它们是紧挨着去显示的，当我创建第一个表格时，它也是紧挨着去显示的，而当我去建立第二个、第三个表格时，它又变成了另起一行去显示。

这些现象都好奇怪啊，为什么有些标签生成的文本是占领一整行？就算没有填充，也似乎在说，这一整行都是我的，其它标签不许占；

而有些标签原本就不会占领一整行，只有这一行都被占满了才会去另起一行；

其实出现这个现象的最重要的原因，就是各种标签之间存在着差异，像<h1></h1>标题标签、<p></p>段落标签、<table></table>表格标签都被称之为"块元素标签"，它们在页面上显示的时候很霸道，不管我的文本有没有填满一整行，但是就会把一整行的位置都占领，不允许其它标签存在；

而<span></span>文本标签、<a href = ""></a>超链接标签这些被称之为"内联元素标签"，它们在页面上显示的时候会略处下风，自己有多大就占多大空间，不会多占，其后面允许其它标签存在。

6.2 常见的块元素标签与内联元素标签

常见块元素	常见内联元素
div、form、h1~h6、hr、p、table、ul等	a、b、em、i、span、strong等

6.3 块元素与内联元素的区别

块元素	内联元素
块元素在页面会独占一行(自上而下垂直排列)	行内元素不会独占一行，只占自身的大小
可以设置 width 宽度，height 高度属性	不可以设置 width 宽度，height 高度属性，设置了也无效
块元素内部可以包含其他块元素，也可以包含内联元素，可以说是最大的一个级别	一般内联元素内部只能包含其他内联元素，不能包含块级元素