HTML基础（学习笔记）

原创 已于 2022-11-03 09:30:50 修改 · 789 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html
于 2021-05-27 16:16:24 首次发布

此文为作者本人学习过程中的笔记总结，如若文中有不正确，或者需要补充的地方，欢迎大家在下方评论。

1. HTML是什么

  • HTML（Hyper Text Markup Language），超文本标记语言
  • HTML是一种用来描述网页的语言
  • HTML不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签，HTML使用标记标签来描述网页

想了解编程语言、标记语言与脚本语言的区别，请点击链接进行查看。

2. HTML结构

2.1.  基本骨架

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>这是标题</title>
</head> 
<body>
    <!-- 主体内容 -->
</body>
</html>

<html>标签

  • 定义HTML的根元素，其他所有的标签都要写在<html>标签的内部。

<head>标签

  • 用于放置当前HTML文件的信息，其中包含<meta>和<title标签>。
  • <meta>标签，是定义一些页面相关的信息，例如：页面宽度、缩放比例等等。
  • <title>标签，定义页面标题，用来告诉用户和搜索引擎，当前网页的主要内容是什么。

<body>标签

  • 是HTML文件的主体内容部分，网页所要显示的内容，都要放在 <body> 标签中。

2.2. DTD

  • DTD（DocType Definition），文档类型声明。
  • 告诉浏览器该网页使用的是哪个版本的HTML规范，然后浏览器就会按照对应版本的HTML语法来解析后面的内容。

现在使用到的是HTML5中简化后的DTD格式：

<!DOCTYPE html>

3. 常用标签

3.1. 排版

3.1.0. 空白折叠现象

  • 浏览器在解释HTML代码时，会自动忽略掉多余的空格和换行。
  • 在HTML文件中。无论有多少个空格和换行，浏览器渲染之后，都会折叠成一个空格显示在页面上。
  • 如果需要空格和换行，就需要一个标签，来告诉浏览器这里需要空格或换行。
  • 空格和换行所用的标签分别为 &nbsp; 和 <br> ，后面会逐渐提及到。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>空白折叠</title>
</head>
<body>
    <!-- 文本内容有多个空格和换行 -->
    Dont't talk, show me the code!
    Dont't talk, show                me the code!


    Dont't talk, show me         the code!
</body>
</html>

显示效果：

加入对应标签后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>空白折叠</title>
</head>
<body>
    <!-- 用指定标签来表示空格和换行-->
    Dont't talk, show me the code!
    Dont't talk, show &nbsp;&nbsp;&nbsp;&nbsp; me the code!
    <!-- 这里由于<br>是单标签，所以加上了关闭符号-->
    <!-- HTML5版本后已经不需要加上关闭符号了,写成 <br>和<br />都可以  -->
    <br />
    <br />
    Dont't talk, show me &nbsp;&nbsp; the code!
</body>
</html>

现在的显示效果：

3.1.1. 标题标签

  • 标题是通过<h1> ~ <h6>标签来定义的。
  • <h1>表示一级标题, <h2>表示二级标签，依此类推，一直到最小的<h6>。
  • 注意：标题标签之间不能互相嵌套

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf=8" />
    <meta name="viewport" content="width=device-width initial-scale=1">
    <title>标题标签</title>
</head>
<body>
    <h1>这是一级标签</h1>
    <h2>这是二级标签</h2>
    <h3>这是三级标签</h3>
    <h4>这是四级标签</h4>
    <h5>这是五级标签</h5>
    <h6>这是六级标签</h6>
</body>
</html>

显示效果：

相互嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf=8" />
    <meta name="viewport" content="width=device-width initial-scale=1">
    <title>标题标签</title>
</head>
<body>
    <h1>这是一级标签</h1>

    <!-- 在h1标签中嵌套一个h2标签 -->
    <h1>
        <h2>这是一级标签中的二级标签</h2>
    </h1>
</body>
</html>

显示效果及说明：

虽然这里显示的效果，仍然是二级标题的效果，但是我们打开控制台，可以看到这个<h2>标签不是像我们在HTML代码中写的那样在<h1>标签内部，而是独立出来了。

也就是说这里显示的效果确实是二级标题的效果，但是不是嵌套在一级标题里面的，因为标题标签之间不能互相嵌套，浏览器这里是自动做了调整。

3.1.2. 水平线

  • <hr>标签可以在页面中创建一条水平线，可以用来分隔页面内容。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>水平线</title>
</head>
<body>
    <h1>这里是标题</h1>

    <!-- hr是单标签，可以选择加上关闭符号，所以写成<hr>和<hr />都可以 -->
    <hr />

    这里是内容部分
</body>
</html>

显示效果：

3.1.3. 段落标签

  • 段落是通过 <p> 标签定义的，段落标签中的内容是独占一行的。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>段落标签</title>
</head>
<body>
    <!-- 由于空白折叠现象，这段文字渲染之后，是不会换行的 -->
    <!-- 除非文字很多，一行显示不下，浏览器才会自动进行换行显示 -->
    这是一段文字
    这也是一段文字

    <!-- 段落标签的内容是单独成行的，所以下面两段文字会分成两行显示 -->
    <p>这是一个段落</p>
    <p>这也是一个段落</p>
</body>
</html>

显示效果：

3.1.4. 换行标签

  • <br> 标签（也可以写成 <br />）可以强制换行，例如：将同一段落中的内容。分成两行来显示。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>换行标签</title>
</head>
<body>
    <p>
        这是第一部分内容
        这是第二部分内容
    </p>

    <p>
        这是第一部分内容
        <br />
        这是换行显示的第二部分内容
    </p>
</body>
</html>

显示效果：

3.1.5. 块引用标签

  • <blockquote> 标签中的文本内容，会从常规文本中分离出来，经常会在左右两边进行缩进。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>块引用标签</title>
</head>
<body>
    <p>
        这是段落标签中的内容；这是段落标签中的内容；这是段落标签中的内容；这是段落标签中的内容
    </p>

    <blockquote>
        这是块引用标签中的内容；这是块引用标签中的内容；这是块引用标签中的内容；这是块引用标签中的内容
    </blockquote>
</body>
</html>

显示效果：

可以看到使用了 <blockquote> 标签的文本内容，在两边都有缩进产生。

3.2. 文本格式化

  • HTML中定义了一些标签，可以用来对文字进行格式化显示设置。
  • 注意：这些标签内部的内容，只能是文字。

汇总：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文本格式化</title>
</head>
<body>
    <p>这是普通的文字</p>

    <!-- 以下的几个，都是比较常用的 -->
    <p><b>这是加粗的文字</b></p>
    <p><i>这是斜体的文字</i></p>
    <p><u>这是加了下划线的文字</u></p>
    <p><em>这是着重文字</em></p>
    <p><strong>这是表示加重语气的文字</strong></p>
</body>
</html>

显示效果：

3.3. 列表

列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式展示出来，方便用户浏览。

3.3.1. 无序列表

  • 无序列表（Unordered List），所使用到的标签包含 <ul> 和 <li>。
  • 无序列表中的 <li> 之间没有先后顺序之分，重要程度相同。
  • 适用场景是，列表项之间没有顺序等逻辑关系，是并列的，例如：列出四大名著的名称和作者

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>无序列表</title>
</head>
<body>
    <ul>
        <li>《西游记》- 吴承恩</li>
        <li>《三国演义》- 罗贯中</li>
        <li>《水浒传》- 施耐庵</li>
        <li>《红楼梦》- 曹雪芹</li>
    </ul>
</body>
</html>

显示效果：

我们可以看到每一项的最前面都以一个小圆点，这是通过 <ul> 的 type 属性来进行设置的。

可选的值有三个，分别是：

  1. disc --> 小圆点，这个是默认值
  2. circle --> 小圆圈
  3. square --> 小方块

设置type属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>无序列表</title>
</head> 
<body>
    <ul type="circle">
        <li>《西游记》- 吴承恩</li>
        <li>《三国演义》- 罗贯中</li>
        <li>《水浒传》- 施耐庵</li>
        <li>《红楼梦》- 曹雪芹</li>
    </ul>
</body>
</html>

设置 type 属性为 circle 的显示效果：

3.3.2. 有序列表

  • 有序列表（Ordered List），所使用到的标签包括 <ol> 和 <li>
  • 有序列表中的 <li> 之间，是有先后顺序之分的。
  • 适用场景是，列表项之间有顺序区别，例如：操作步骤介绍，热搜榜展示等等

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>有序列表</title>
</head> 
<body>
    <ol>
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关上冰箱</li>
    </ol>
</body>
</html>

显示效果：

说明：

  • 我们可以看到，每一项最前面有顺序标注，类似于无序列表，这个也是可以进行设置的。
  • 可以通过 type 属性来设置标注的样式，还可以通过 start 属性来设置开始序号

start的取值只能是一个阿拉伯数字，无论序号类型是什么。

type 的取值有五个，分别是：

  1. 1 --> 阿拉伯数字，这个是默认值
  2. a --> 小写英文字母
  3. A --> 大写英文字母
  4. i --> 小写罗马数字
  5. I --> 大写罗马数字

设置 type 属性和开始序号：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>有序列表</title>
</head> 
<body>
    <ol type="a" start="3">
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关上冰箱</li>
    </ol>
</body>
</html>

显示效果：

相关的设置为 type="a" start="3"，所以是以小写英文字母作为序号标注，同时要求从第三个小写英文字母开始，即从 c 开始；

同样的，若设置了 type="I" start=“5”,则是从第五个大写罗马数字开始，即从 V 开始。

3.3.3. 自定义列表

  • 自定义列表，所使用到的标签包括 <dl>, <dt> 和 <dd>；
  • 其中 <dt> 是列表的表头，<dd> 则是对应表头中的列表项；
  • 每一个 <dd> 标签都是归属于，它前面的且离他最近的那个 <dt>
  • 适用场景是，列表项中需要进一步细分，例如：展示一些城市的名称，并区分国内和国外

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自定义列表</title>
</head> 
<body>
    <dl>
        <dt>国内</dt>
        <dd>北京</dd>
        <dd>上海</dd>
        <dd>武汉</dd>

        <dt>国外</dt>
        <dd>洛杉矶</dd>
        <dd>伦敦</dd>
        <dd>巴黎</dd>
        <dd>东京</dd>
    </dl>
</body>
</html>

显示效果：

3.4. 图像

  • 图像是由 <img> 标签来定义的，<img>标签是一个单标签，本身相当于一个特殊的文本；

<img> 标签有三个常用属性，分别是：src, alt 和 title

  1. src --> 指定所要展示的图片的路径
  2. alt --> 图片加载失败后的替换文本，用来告诉用户这个图片的内容
  3. title --> 鼠标悬停在图片上面时，展示的提示信息

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图像标签</title>
</head> 
<body>
    <img src="./Assets/image/front-end.jpg" alt="前端三大件" title="这是提示信息">
</body>
</html>

显示效果：

 

说明：

  • 还可以在<img> 标签中通过 width 和 height 来设置图片大小。
  • 一般只需要设置其中一个，然后图片会等比例进行缩放，若同时设置宽高，需按照原本的宽高比例进行设置，否则图片就会变形。
  • 这里的 src 后面的值，我是用到的是相对路径，也可以设置为绝对路径。

想了解什么是相对路径和绝对路径，请点击链接进行查看。

3.5. 链接

3.5.1. 超链接

  • 链接是使用 <a> 标签定义的。

<a> 标签有三个属性值，分别是：href, target 和 title;

  1. href --> 要跳转的地址
  2. target --> 打开新窗口的方式
  3. title --> 鼠标悬停时的提示信息

其中 target 取值范围有两个：

  1. _self --> 跳转的页面，在当前窗口中打开，这个是默认值
  2. _blank --> 跳转的页面，在新的窗口中打开

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>超链接</title>
</head> 
<body>
    <a href="https://www.baidu.com" target="_blank" title="点击跳转到百度">点击一下试一试</a>
</body>
</html>

显示效果：

超链接，默认是蓝色字体且带有下划线，可以自己进行样式设置。

注意：如果链接颜色显示为紫色，说明已经访问过链接的这个网址，可以在浏览器的设置中，清除掉浏览数据，再次刷新页面。

3.5.2. 锚点链接

  • 当我们将 <a> 连接中的 href 属性，设置为当前页面的某一个元素的ID值，则可以跳转到该元素所在的位置。
  • 可以用于一个内容较多的页面，通过锚点链接直接跳转到用户想要查看的部分所在的位置。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>锚点链接</title>
</head> 
<body>
    <h1>这是标题</h1>
    <hr>

    <a href="#five">跳转到第五段内容</a>

    <p>第一段内容</p>
    <p>第二段内容</p>
    <p>第三段内容</p>
    <p>第四段内容</p>
    <p id="five">第五段内容</p>
    <p>第六段内容</p>
</body>
</html>

显示效果：

  • 这里为了不占用过多篇幅，所写的内容不多，这个时候点击锚点链接，是没有反应的，因为当前页面可以展示出所有的内容。
  • 可以打开控制台，使用上图中红框中的这个工具，调整页面的大小，使得一页不能显示出所有内容，这个时候点击锚点链接，就会发生位置跳转。
  • 默认会跳转到链接的元素所在位置，并从这个位置开始显示剩下的页面内容，除非页面内容不够。

3.5.3. Link链接

  • 在文档中声明使用外部资源（如CSS文件）时，使用此标签。

<link>标签有三个常用的属性，分别为：rel, href 和 type

  1. href --> 指定需要加载的资源的地址（路径）
  2. rel --> 指定链接类型，如导入CSS文件时，填写为 rel="stylesheet"
  3. type --> 指定所链接文档的MIME类型，如导入CSS文件时，填写为 type="text/css"

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>link链接</title>

    <!-- 导入CSS文件 -->
    <link rel="stylesheet" href="./CSS/style.css" type="text/css">
</head> 
<body>
    
</body>
</html>

注意：<link>标签是需要写在 <head>标签里面的。

3.6. 表格

<table>标签定义一个表格，<tr>标签定义一行，<td>标签定义一个单元格。

3.6.1. 基本表格

  • <table>标签可以设置边框属性 border，值为一个数字，表示的是像素值。
  • 例如：border="2" 即表示给这个表格设置了一个 2个像素宽的边框

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表格</title>
</head> 
<body>
    <table border="2">
        <!-- 第一行 -->
        <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>
</html>

显示效果：

表格的单元格之间有默认的空隙，会导致上图看到的这种双线边框的效果。

解决方法：

（1）设置标签样式属性，style="border-collapse: collapse;"; 表示边框塌陷

（2）设置单元格之间的间隔为0， cellspacing="0px"

HTML代码

<table border="2" style="border-collapse: collapse;">
    ...
<table>
<table border="2" cellspacing="0px">
    ...
<table>

显示效果：

左边为设置style的效果，右边为设置 cellspacing的效果，有细微的区别。

3.6.2. 合并单元格

设置 rowspan 属性可以实现跨行合并，设置 colspan 可以实现跨列合并。

需要实现的效果：

先补全所有的单元格（六行七列）：

搞清楚哪些单元格需要合并：

 

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表格</title>
</head> 
<body>
    <table border="1px" cellspacing="0px">
        <!-- 对列进行设置 -->
        <colgroup span="6" width="100px"></colgroup>
        <colgroup span="1" width="200px"></colgroup>
        
        <!-- 第一行 -->
        <tr height="40px" align="center">
            <td colspan="7">个人简历</td>
        </tr>

        <!-- 第二行 -->
        <tr height="40px" align="center">
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>年龄</td>
            <td></td>
            <td rowspan="4">照片</td>
        </tr>

        <!-- 第三行 -->
        <tr height="40px" align="center">
            <td>学历</td>
            <td></td>
            <td>籍贯</td>
            <td colspan="3"></td>
        </tr>

        <!-- 第四行 -->
        <tr height="40px" align="center">
            <td>电话</td>
            <td></td>
            <td>政治面貌</td>
            <td colspan="3"></td>
        </tr>

        <!-- 第五行 -->
        <tr height="40px" align="center">
            <td>毕业院校</td>
            <td colspan="5"></td>
        </tr>

        <!-- 第六行 -->
        <tr height="40px" align="center">
            <td>求职意向</td>
            <td colspan="6"></td>
        </tr>
    </table>
</body>
</html>

3.6.3. 表格分区

<table>标签内部最直接的子级，包含四个分区标签，分别是：

  1. <caption> --> 表格的标题
  2. <thead> --> 表格的头部，内部嵌套 <tr> 和 <th>
  3. <tbody> --> 表格的主体，内部嵌套 <tr> 和 <td>
  4. <tfoot> --> 表格的页脚，内部嵌套 <tr> 和 <td>

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表格分区</title>
</head> 
<body>
    <table border="1px" cellspacing="0px">
       <caption>这是表格的标题</caption>
       
       <!-- 这是表头 -->
        <thead>
            <tr>
                <th>前年数据</th>
                <th>去年数据</th>
                <th>今年数据</th>
            </tr>
        </thead>

       <!-- 这是主体 -->
       <tbody>
           <!-- 第一行 -->
           <tr>
               <td>第一行第一列</td>
               <td>第一行第二列</td>
               <td>第一行第三列</td>
           </tr>

           <!-- 第二行 -->
           <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
       </tbody>
    </table>
</body>
</html>

显示效果：

3.7. 表单

3.7.1. 概述

  • HTML表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件
  • 一个完整的表单通常由表单域、提示信息和表单元素（也叫表单控件）三个部分组成

3.7.2. 表单域

  • 表单域是使用 <form> 标签来定义的。

<form> 标签有三个常用属性，分别是：action, method 和 name

  1. action --> 指定接收并处理表单数据的服务器的URL地址
  2. method --> 设置表单提交方式
  3. name --> 设置表单的名称

其中，method的取值有两个：

  1. GET--> 参数是包含在URL中的
  2. POST--> 通过request body 传递参数

想了解 GET和POST的区别，请点击链接查看。

3.7.3. 表单元素

3.7.3.1. 输入框

  • <input>标签可以定义一个输入框

汇总：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单</title>
</head> 
<body>
    <form action="#" method="GET" name="test">
        <p>
            用户名：
            <input type="text">
        </p>
        <p>
            密码：
            <input type="password">
        </p>
        <p>
            性别：
            <input type="radio" name="gender" checked="checked">男
            <input type="radio" name="gender">女
        </p>
        <p>
            爱好：
            <input type="checkbox" name="hobby" checked="checked">羽毛球
            <input type="checkbox" name="hobby">户外徒步
            <input type="checkbox" name="hobby">阅读
        </p>
        <p>
            <input type="reset" value="重置">
            <input type="submit" value="提交">
        </p>
    </form>
</body>
</html>

显示效果：

注意：单选框和复选框的各个元素之间，要设置相同的 name 值，这样才会被识别为同一组。

3.7.3.2. 下拉列表

  • <select>标签可以定义一个下拉列表，<option>标签定义列表中的一个列表项。
  • 如果列表项比较复杂，可以使用 <optgroup> 标签对列表项进行分组。

HTML代码：

<p>
    所在城市：
    <select>
        <!-- 可使用lable属性，设置分组的值 -->
        <!-- 设置了selected的列表项，会被默认选中 -->
        <optgroup label="国内">                
            <option>北京</option>
            <option>上海</option>
            <option selected="selected">武汉</option>
        </optgroup>

        <optgroup label="国外">
            <option>洛杉矶</option>
            <option>伦敦</option>
            <option>巴黎</option>
            <option>东京</option>
        </optgroup>
   </select>                  
</p>

显示效果：

3.7.3.3. label标签

  • <label>标签的作用，是帮表单元素定义标记。将表单元素与提示内容使用 <label> 进行绑定后；
  • 当用户点击 <label> 标签内的内容时，浏览器就会自动将焦点转到和相关的 表单元素上。
  • 例如：上面展示过的一个单选框，只有点中小圆框才能被选中，我们可以把小圆框和后面的文字进行绑定；
  • 这样点击到文字，也可以选中对应的小圆框，从而达到扩大用户点击区域的效果，增强用户体验。

HTML代码：

<p>
    性别：

    <!-- label标签中的for对应的值，就是需要绑定多个表单元素的ID值 -->
    <input type="radio" name="gender" id="male"><label for="male">男<label>

    <!-- 这两种方式都可以生效，第一种适合于绑定的元素距离较远的情况 -->
    <label>
        <input type="radio" name="gender">女
    </label>
</p>

3.7.3.4. 表单框

  • <fieldset>标签可以设置表单框，<legend>标签可以设置表单标题。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单</title>
</head> 
<body>
    <fieldset>
        <legend>这是表单的标题</legend>
        <form action="#" method="GET" name="test">
            <p>
                用户名：
                <input type="text">
            </p>
        </form>
    </fieldset>
</body>
</html>

显示效果：

3.7.3.5. 多行文本域

  • 文本域使用 <textarea> 标签定义，实现一个可输入多行文本的区域。
  • <textarea>有两个常用属性，用于设置显示区域的大小，分别是：rows 和 cols

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文本域</title>
</head> 
<body>
    <form action="#" method="GET" name="test">
        <p>
            自我介绍：
            <textarea cols="30" rows="10"></textarea>
        </p>
    </form>
</body>
</html>

显示效果：

想要了解 更多表单相关详细内容，请点击链接进行查看。

3.8. 嵌入式框架

  • 使用 <iframe> 标签，可以创建一个嵌入式框架，并可设置框架的宽高。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>嵌入式框架</title>
</head>
<body>
    <!-- 在页面中创建一个，宽为400像素，高为300像素，源地址为https://www.baidu.com，的嵌入式框架 -->
    <iframe src="https://www.baidu.com" frameborder="0" width="400px" height="300px"></iframe>
</body>
</html>

显示效果：

告别F2进BIOS：手把手教你用Dell R630的F11快捷启动菜单装Win Server 2019
最新发布
weixin_30265103的博客
05-17 405
本文详细解析了Dell PowerEdge服务器F11快捷启动菜单的高效使用方法，帮助运维工程师快速安装Windows Server 2019。通过F11菜单，可大幅缩短系统部署时间，特别适合临时启动项选择和紧急恢复场景。文章还提供了UEFI与Legacy模式下的差异处理及故障排查方案。
HTML5基础个人学习笔记
Sentra233的博客
01-25 1872
HTML中文名叫做“超文本标记语言”，是一种用于创建网页的标准标记语言。超文本的意思就是不止是文本，还可以包含图片，链接，音乐，甚至程序等非文字元素。通过一系列 “标签” 来描述网页结构和内容的呈现方式，使得浏览器读取 HTML 文档后，按照标签含义将内容显示出来。
HTML设置大写的小写字母,如何在HTML中设置文本的大小写
weixin_28797889的博客
05-30 3289
text-transform属性介绍text-transform属性就是设置HTML页面中的标签里面的文本大小写，text-transform属性常用的属性值有三种：capitalize、uppercase、lowercase，不常用的属性值在这笔者就不进行一一说明了。text-transform属性值说明表属性值描述none默认。定义带有小写字母和大写字母的标准的文本。capitalize将英文...
题目： 编写程序，要求读入一个英文文本行，将其中每个单词的第一个字母改成大写，然后输出此文本行(这里“单词“是指由空格隔开的字符串)。
y2184107562的博客
03-29 1760
再小的努力，乘以365都很明显。
CSS样式、文本、字体、选择器
qq_43157097的博客
03-29 685
一、认识CSS 1、认识CSS （1）CSS ​ CSS表示层叠样式表（Cscading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。 （2）CSS是一种语言吗 ​ MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言； ​ MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言； 2、CSS的历史 （1）发展历程 ​ 早期的网页都是通过HTML来编写的，但是我们希望HTML
中国四大名著.html
熊小露的博客
03-23 4100
中国四大名著 《水浒传》《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。《三国演义》《三国演义》是综合民间传说和戏曲丶话本，结合陈寿的《三国志》丶范晔《后汉书》丶元代《三国志平话》丶和裴松之注的史料...
HTML5标签+基础特性
Django_的博客
10-02 1704
HTML基础
HTML基础知识学习笔记
qq_57736391的博客
03-13 2026
HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性。
【HTML学习笔记基础篇】
2303_81251774的博客
03-02 1020
HTML，全称超文本标记语言（HyperText Markup Language），是一种用于描述网页内容的标记语言。它并不是一种编程语言，而是通过标签来定义网页的结构和内容。HTML标签通常被尖括号包围，例如`<tagname>`，标签通常是成对出现的，如`<p>`和`</p>`，其中第一个是开始标签，第二个是结束标签。
【前端学习笔记】HTML基础
qq_46056318的博客
05-28 1277
HTML一、HTML介绍1.HTML概念2.文档声明3.字符编码4. HTML标签5. HTML属性二、标签1.meta标签2.语义标签3.布局标签4.列表5.超链接6.图片7.字符实体8.内联格式9.HTML 表格10.HTML 表单三、HTML5新特性1. 本地存储2. Cookie3. 语义化标签4.多媒体元素5.表单增强6.Canvas7.SVG 矢量图形支持8.拖放API9.地理定位10.离线Web应用程序 cache manifest11. Web Workers12.Web Sockets 一
html和css学习笔记_1
2402_83651472的博客
02-01 957
最近在b站看一些html的教程。尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频,在此记录学习笔记。放置在html文件第一行，文档声明不算是标签 HTML5的文档声明 详情见建议的 Doctype 声明列表ASCII （128个）英文大小写字母、一些符号 ISO 8859-1 （256个） 在ASCII码上添加了一些希腊字母 GB2312 进一步扩充，收录了6763个常用汉字，682个字符 GBK 收录汉字和符号两万多个，支持繁体中文 UTF-8 万国码，包含世界所有语言的所
html空白折叠现象,HTML之基础知识开篇
weixin_42103128的博客
06-03 665
1.HTML简介：HTML是英语HyperText Markup Language的缩写，超文本标记语言。超文本：通过标签对儿(一对标签称为标记)，描述文档语义语言。空白折叠现象：HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示在浏览器中。纯文本文件：只有文本，没有样式；用记事本等纯文本编辑器可读，不是乱码的(html、css、js都是纯本文的)。HTML、CSS、JS的...
利用Transition过渡完成手风琴菜单
利用Transition过渡完成手风琴菜单
07-15 556
## 效果预览 ## 案例分析 实现手风琴菜单最核心的部分就是鼠标移到某一个模块时，相应的里面的内容会展开，鼠标移开后，内容又会收回。这其中的原理就是将每个模块里面的内容的初始高度设置成零，然后鼠标移上去之后，通过过渡让高度缓慢地增加直至显示出所有内容，鼠标移开后，也是同样的通过过渡，再让高度逐渐地减小为零。 ## 相关代码 <!DOCTYPE html&g...
Vue transition 折叠类动画自动获取隐藏层高度以及手风琴效果实现
qq_38387487的博客
10-29 3513
Vue transition 折叠类动画自动获取隐藏层高度以及手风琴效果实现 前面要说的话 前段时间，在解决左侧导航栏激活问题时，发现折叠动画过渡不是很平滑，并且还伴随着一些bug。使用起来不是很流畅，于是在解决完激活bug后，我决定把动画效果也解决掉。 先来看看要解决的问题，如下图： 最初的样式! 不知细心的你有没有发现什么问题？ 当点击折叠展开menu-one栏目的时候没有什么问题，但点击折叠展开mene-two栏目，当动画定格在menu-two-2选项的时候，menu-two-3及以下的
【Web前端—HTML】认知部分（二 ）标签 有示例
青山的青衫的博客
06-30 1235
web开发HTML标签相关
“Talk is cheap, show me the code”你一行代码有多贵？
CSDN资讯
06-23 6246
平常程序员喜欢说“talk is cheap, show me the code”这句话，可是你知道你敲下的一行代码背后，有多贵？ 相信很多程序员不知道，你的领导也不知道。 在CSDN《2019-2020中国开发者调查报告》中，8.5 成开发者月薪在 5 千至 3 万元之间。其中，月薪在 8 千元至 1.7 万元的占 47%，月薪低于 5 千元的仅占9.5%。在北上广州深一线城市中，月薪超过 1.7 万元的开发者占比为 30%。 那么如此高薪的程序员，如何管理绩效，管理者如何评定员工的工作效能？随着软件开
Talk is cheap，show me your code！！！
weixin_43905667的博客
04-22 1307
第一次使用csdn的blog 试试水，写和发布还是蛮方便的，就是页面内的广告有点多啊，太乱了！
前端笔试题收集（笔记）
weixin_33890499的博客
02-28 2822
前端开发知识点 HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox 复制代码 JavaScript： 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块...
CSS3 transition实现手风琴效果
astonishqft的博客
01-04 3713
CSS3 transition实现手风琴效果 最近在项目中遇到了一个需求，需要完成一个手风琴效果的展示，最后通过CSS3 transition实现了这个效果，下面就分享下实现方法。 效果 首先看下效果： 可以看到，当我们点击toggle按钮的时候会实现一个带有动画的过渡效果。 transition属性 实现动画效果这要用到了transition的四个属性，分别是：transition-prope...
手风琴页面html,滑动手风琴的制作（只涉及HTML+css）
weixin_36212732的博客
06-05 1149
这次作业是通过HTML和css制作滑动手风琴，使鼠标指在图标时让内容通过滑动的方式显示出来。滑动手风琴展示图标可以通过阿里巴巴矢量图标库寻找，也可以通过链接bootcdn中的图标库，如下图BootCDN在中进行链接链接本次学习的重点内容为以下几点：1.制作出滑动效果，运用的是transition标签,transition为过渡动画效果，可用来设置滑动效果代码如下图transition2.使用消除浮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值