2、html标签介绍1

1077 阅读 0 评论 0 点赞

3. 真实案例分享

百度搜索（部分）

<ul>

<li>

<a>

<img

src="https://pics0.baidu.com/feed/bd3eb13533fa828b324d63ea7f258e32970a5a0a.jpeg">

</a>

</li>

<li>

<a>

<img

src="https://pics4.baidu.com/feed/30adcbef76094b36eaacf1e422f6b3df8d109dba.jpeg">

</a>

</li>

<li>

<a>

<img

src="https://pics5.baidu.com/feed/730e0cf3d7ca7bcb8af180f33f33a465f724a821.jpeg">

</a>

</li>

</ul>

代码块1234567891011121314151617181920

淘宝网（部分）

<div>

</div>

<div>

<h4>Huawei/华为 p40 pro</h4>

<p>MUI 10.1系统，内置华为AI语音助手Celia ，支持“Hey Celia”语音唤醒。HMS服务，华为P40搭载华为HMS服务。</p>

</div>

代码块12345678

4. 小结

img 标签为单标签，没有尾标签。

img 标签的 src 属性为必选项，其余属性为可选项。

img 标签可以嵌套在任意标签里。

img 标签路径可以为的相对路径，绝对路径和网络路径，通常情况下我们采用相对路径。

认识超链接标签 a 标签

我们在很多应用场景需要点击标签而跳转到一个新的网页，比如点击文章标题进入到文章详情，点击商品名称进入到商品详情，这个时候我们就需要用到超链接标签 a 标签了， a 标签页成为了我们在实际网站开发过程中，用的比较多的标签。

注意：

本章节只能展示 a 标签在网页上呈现的效果，实际跳转效果需自己编写代码操作。

1. a 标签的使用

a 标签为双标签，需要有首尾标签。a 标签的 href 属性为必填属性，表示该 a 标签点击过后跳转网页的地址。例如：

<a href="https://www.imooc.com/">去往夜猫编程</a>

代码块1

在网页中会呈现以下效果：

注意:

a 标签的 href 属性必须添加网络协议，如：HTTP 或者 HTTPS 协议，一般为 HTTPS 协议，不能单纯的编写网址；

a 标签有很多默认样式，默认字体为蓝色，文本有下划线，点击过后，字体变为偏紫色；

a 标签默认在本页面跳转，既不会新开一个网页跳转；

a 标签的 href 属性如果为错误的网络地址，则页面会跳转，但不会显示网页的内容。

a 标签还有一个属性为 target，表示跳转的网页为在当前页面跳转，还是新开一个页面跳转。默认值为 _self, 表示为在当前页面跳转，如果将 a 标签的 target 属性设置为 _blank，则表示新开一个网页跳转，代码如下：

<a href="https://www.imooc.com/" target="_blank">去往夜猫编程</a>

代码块1

a 标签的 target 属性为可选属性。

2. 链接

我们如果是编写新闻类网站或者电商类网站，有一个需求是点击也可以跳转到对应的详情页面，这个时候就需要用到链接了。其实链接非常简单，我们只需要在 a 标签中嵌套一个 img 标签即可，这样就可以实现点击跳转网页了。

3. 锚点定位

a 标签还有一个重要的功能，那就是锚点定位。什么是锚点定位呢？通俗的讲，我们想要让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，它指向页面特定的部分。那么 a 标签实现锚点定位，需要两个部分组成：锚记和指向锚记的链接。有以下方法：

\1. 方法一：使用 a 标签作为锚记和链接，俗称使用 name 定位，代码如下：

<a href="#mao">点击此处到目标位置</a>

被点击的 a 标签的 href 属性需要和目标位置的 a 标签的 name 属性对应，而且被点击的 a 标签的 href 属性必须加上 # ，但是很多时候锚点对象不一定是 a 标签，那就不必要为了使用锚点定位而额外增加一个 a 标签了。

\2. 方法二：使用 a 标签作为链接，使用其他元素（建议使用块元素）作为锚记，俗称 id 定位，代码如下：

<a href="#mubiao">点击此处到目标位置</a>

</a>

<div id="other_page">这里是目标的位置</div>

被点击的 a 标签的 href 属性必须和目标位置的 HTML 标签的 id 名一致，而且被点击的 a 标签的 href 属性也必须加上 # 。需要注意的是，目标位置的 HTML 元素最好是块级元素。

4. 注意事项

a 标签为双标签，有首尾标签；

a 标签必须写内容，否则在页面上不会显示；

a 标签的 href 属性为必填属性，表示跳转网页的地址；

a 标签的 target 属性为可选属性，表示是在当前页面跳转还是新开一个页面跳转，默认在当前页面跳转；

A 标签有一些默认样式。

5. 经验分享

通常情况下我们会清除 a 标签的默认样式；

如果我们不想 a 标签跳转页面，我们可以设置 HREF 属性为 # 或者 javascript:;；

我们也可以通过 js 阻止 a 标签的默认事件，这样 A 标签页不会跳转页面；

a 标签为行内块元素，默认在同一行排列，可以设置宽高，所以我们通常用来做导航栏。

6. 真实案例分享

思否论坛首页

<div>

</a>

</a>

</a>

</div>

代码块1234567891011

京东首页（部分）

<ul>

<li>

</li>

<li>

<div>

</div>

</li>

<li>

<div>

</div>

</li>

<li>

<div>

</div>

</li>

<li>

<div>

</div>

</li>

<li>

<div>

</div>

</li>

</ul>

代码块12345678910111213141516171819202122232425262728293031

7. 小结

a 标签为双标签，有首尾标签，且必须有内容。

a 标签必须填写 href 属性，href 属性为跳转的地址路径。

a 标签为行内元素，不可以设置宽高，且在一行排列。

a 标签通常用于制作导航栏。

a 标签设置 target 属性来设置跳转页面的打开方式。

认识表格标签 table 标签

表格在我们的网页中是非常常见的，比如我们要展示商品信息，工作安排，产品参数等都需要用到表格。那么在 html 中，使用表格就需要用到 table 标签了。但是表格不仅是 table 一个标签，需要用到和表格相关的一组标签，这一小节我们就来学习这些标签吧。

1. 表格的结构

在使用表格标签之前，我们需要先认识一下在 html 中表格是由哪些结构构成的。一般情况下，表格都表头、表身构成。表头里面放每一列对应的字段，一般是一个描述，如姓名、年龄等，表身则放每一个表头对应的具体的值，如张三对应表头的姓名，20 对应表头的年龄。表格有行和列的概念，行就代表一个数据的所有属性，比如姓名：张三，年龄：20，而列则表示一个表头对应的所有数据，比如姓名这一列就只有姓名，如张三、李四等。通常情况下，我们都是先确定表头，然后再确定每行对应表头的具体数据。

2. 表格的使用

想要编写表格，需要用到表格的一组标签。table 标签表示表格整体，类似 ul 和 ol 表示列表整体一样。在 table 标签里， thead标签表示表头， tbody 标签表示表示。在 table 表头中， tr 标签代表行， th 标签代表表头的每一项。在 tbody 标签中， tr 标签代表行， td 标签代表每一个表头对应的具体数据。代码如下：

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

代码块123456789101112131415161718192021222324252627

效果如下:

我们可以给表格添加 border属性给表格添加边框，border属性的值为正整数，默认为 0，则无边框，我们把border 设置为 1，代码如下：

...

</table>

代码块1234

则会呈现以下效果：

我们还可以给 table 设置cellpadding来使用单元格填充来创建单元格内容与其边框之间的空白，cellpadding值也是正整数，我们把表格的 cellpadding设置为 10，代码如下：

...

</table>

代码块1234

则效果如下：

我们还可以给 table 设置cellspacing来设置单元格与单元格直接的距离，cellspacing值也是正整数，我们把表格的 cellspacing设置为 10，代码如下：

...

</table>

代码块1234

效果如下：

我们也可以为表格添加标题，那么我们就需要在 thead 标签前加上 caption 标签，而 caption 标签的内容则是表格的标题，代码如下：

<table>

...

</table>

代码块12345

效果如下：

3. 注意事项

tr 标签只能嵌套 th 和 td 标签，不能嵌套其他标签；

tr 代表表格的每一行；

td 标签的内容必须和表头的信息对应。

4. 真实案例分享

北京大学官网

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td><p style="text-align:center;padding:5px;"><a href="http://elective.pku.edu.cn/elective2008/edu/pku/stu/elective/controller/courseDetail/getCourseDetail.do?kclx=BK&course_seq_no=BZ1920301132632_15745" target="_blank">生物化学讨论课<br>Current topics on Biochemistry</a></p></td>

<td>生命科学学院</td>

<td><p>6月29-7月7日，10-12节，选修同学需先修生物化学理论课</p></td>

</tr>

<tr>

<td><p><a href="http://elective.pku.edu.cn/elective2008/edu/pku/stu/elective/controller/courseDetail/getCourseDetail.do?kclx=BK&course_seq_no=BZ1920301132022_18636" target="_blank">遗传学讨论<br>Current topics on Genetics</a></p></td>

<td>生命科学学院</td>

<td><p>上课时间：7月13日-7月24日，10-12节。选修同学需先修遗传学理论课</p></td>

</tr>

</tbody>

</table>

5. 小结

表格的结果为表头和表身，可以为表格添加标题。

thead 代表表头，tbody 代表表身， thead 嵌套 tr 和 th， tbody 里嵌套 tr 和 td。

tr 里只能嵌套 th 和 td， th 一般用来表示表头，有加粗的样式。td 代表表头对应的具体数据。

原生的表格样式比较丑，我们可以通过 CSS 为表格设置样式。

认识输入框 input 标签

输入框是我们网页中常见的元素，登录、注册、个人资料、收货地址等都需要用到输入框。而在 HTML 中，输入框的类型和属性都有很多，我们可以根据实际需求来决定使用哪一类输入框。

1. 输入框的类型

在 HTML 中， input 标签表示输入框，而输入框有很多类型，比如普通文本输入框、密码框、邮箱框（只能输入邮箱格式的内容）、网址框（只能输入框网址格式的内容）、数字框（只能输入数字）、单选框、多选框等。我们可以改变 input 标签的 type 属性来显示不同的输入框类型。

2. 输入框的使用

input 的类型有很多，我们依次为大家介绍。

2.1. 普通输入框

普通输入框既可以输入任意内容，没有格式和内容要求。代码如下：

代码块1

效果如下：

input 标签的 type 属性默认为text。

2.2. 密码框

把 input 的 type 属性设置为 password则表示密码框。密码框既输入的内容为密文显示，呈现的效果为实心黑点，不会显示具体的输入内容。代码如下：

代码块1

效果如下：

2.3. 邮箱框

把 input 的 type 设置为 email则表示邮箱框，那么输入的内容会有规则限制，输入的内容必须包含 @，且 @ 后必须有内容才满足验证规则，否则会有错误提示。代码如下：

代码块1

效果如下：

2.4. 网址框

把 input 的 type 设置为 url则表示网址框，那么输入的内容会有规则限制，输入的内容需要以 http:// 或者 https:// 开头，且 @ 后必须有内容才满足验证规则，否则会有错误提示。代码如下：

代码块1

Tips：这里的网站和我们平时输入的网站不同，前面必须加上网络协议，既 http:// 或者 https://

2.5. 数字框

把 input 的 type 设置为 number则表示数字框，那么就只能输入数字，输入其他字符无效，且输入框最右侧会有加减按钮。代码如下：

代码块1

效果如下：

2.6. 单选框

把 input 的 type 属性设置为 radio则表示单选框，因为 input 标签是单标签，所有单选框的内容直接写在 input 标签后面，如果单选框有多个选项，则需要写多个 input 标签，且每个 input 标签必须添加 name 属性，否则不能成为一组的单选框（既可以选多个）。代码如下：

<input type="radio" name='gender'> 男

<input type="radio" name='gender'> 女

<input type="radio" name='gender'> 保密

代码块123

效果如下：

单选框可以添加 checked 属性，表示默认选中一项。代码如下：

<input type="radio" checked> 男

<input type="radio"> 女

<input type="radio"> 保密

代码块123

效果如下：

Tips：如果给多个单选框设置 checked 属性，则会默认选中最后一个设置 checked属性的选项。

2.7. 多选框

把 input 的 type 属性设置为 checkbox，则表示多选框。多选框和单选框一样，需要设置 name属性，且多选框也可以设置 checked 属性表示默认选中，多选框的 checked 属性可以设置多个。代码如下：

<input type="checkbox" name="ball" checked> 篮球

<input type="checkbox" name="ball">足球

<input type="checkbox" name="ball" checked>排球

<input type="checkbox" name="ball">乒乓球

代码块1234

效果如下：

2.8. 占位符

INPUT 标签可以设置 placeholder属性为占位符。占位符的作用为输入提示，如果输入框没有内容，则会显示占位符的内容，一旦输入框有内容，则会显示输入框的内容，占位符的内容消失。代码如下：

代码块1

效果如下：

3. 注意事项

单选框和多选框必须给 name 属性，name 属性的值为自定义内容；

邮箱框和网站框对输入内容有限制，需按照其验证规则输入正确的内容；

占位符一般为输入提示，所以占位符的内容为此输入框的提示，输入内容后消失。

4. 真实案例分享

京东

<div>

</div>

<span >大小写锁定已打开</span>

</div>

简书官网

<div >

</div>

<div >

</div>

代码块123456

5. 小结

改变 input 的 type 属性来设置输入框不同的类型。

单选框和多选框需要设置 name 属性。

邮箱框、网站框需要按照一定规则书写内容。

输入框类型比较多，可以根据实际需求决定使用哪个类型。

认识 label 标签

label 标签的作用为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。例如：

1. label 标签的使用

label 需要和 input 标签搭配一起使用。LABEL 标签的 for 属性需要和 input 的 id 属性一致，这样才能点击 label 标签的内容使对应的 input 输入框自动获取焦点。代码如下：

代码块12

效果如下：

2. label 标签的作用

表单控件都是内联元素所以他俩会在一行显示。在网页中当我们点击 label 标签的内容或文本框时都会在文本框中出现光标，这个就是 label 标签的功能了。说白了 label 标签就是他所关联的表单控件的延伸，即鼠标点击了他，就会出现和点击他所关联的表单控件一样的效果。而这前提是 label 的 for 属性的属性值与想要关联的表单控件的 id 一样。

除了增强用户体验外，还为行动不便人士上网提供了便利。比如说，视力障碍者是借助“网页朗读器”发出的声音来浏览网页的，若没有 label 标签的关联，上网者就在脑海中不能想象出那种对应性，不能很好理解网站表单所想表达的内容。再比如，肢体有缺陷的上网者对于鼠标的控制是很辛苦的，运用label后点击的目标变大了，有利于操作。

3. 注意事项

label 标签里面需要写内容，才会在页面显示。

label 标签的 for 属性必须和 input 输入框的 id 一致。

4. 真实案例分享

京东

<div>

</div>

<span class="capslock">大小写锁定已打开</span>

</div>

代码块12345678910

拼多多

<div>

</div>

<div>

</div>

代码块12345678

5. 小结

label 标签一般和 input 一起使用。

label 标签的内容会和 input 在同一排显示。

点击 label 标签的内容，会让 input 输入框获取焦点。

label 标签的 for 属性必须和 input 的 id属性一致。

认识 textarea 文本域标签

文本域既表示一个文本的区域，通俗来说就是可以一个区域内，可以输入多行文本，普通的输入框只能输入单行文本。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。比如网站中的评论、留言等功能都可以使用 textarea 文本域标签来实现。

1. textarea 文本域标签的使用

我们直接书写 textarea 标签既代表文本域标签，代码如下：

代码块1

效果如下：

我们可以通过可以通过 COLS 和 ROWS 属性来规定 textarea 的尺寸。cols 设置文本域的宽度，rows 设置文本域的高度。代码如下：

代码块1

效果如下：

需要注意的是，文本域的右下角有一个可以拖拽的区域，可以通过拖拽来改变文本的宽高，如果想要取消这个功能，需要通过 CSS 样式来取消。

文本域也可以设置 placeholder 属性来实现占位符的效果，用法和作用和 input 的 placeholder 属性一样。

效果如下：

如果在文本域标签当中写入了内容，那么这些内容会显示文本域的区域内。代码如下：

代码块1

效果如下：

2. 注意事项

文本域可以设置 cols 和 rows 属性来改变文本域的宽高，不过更好的办法是使用 CSS 的 height 和 width 属性;

文本域默认右下角有一个可以拖拽区域，通常情况下我们不需要这个功能，所以需要借助 CSS 来取消这个功能。

3. 真实案例分享

简书

代码块1

夜猫编程

代码块1

4. 小结

文本域为双标签，如果在文本域的标签当中写内容，则内容会出现在文本域中。

文本域可以通过设置 cols 和 rows 来改变文本域的宽高。

文本域可以设置placeholder 属性来添加占位符。

认识 select option 下拉菜单标签

下拉菜单也是我们在网页中比较常见的场景。如果我们的选项过多，如果是放单选框或者多选框的话，会造成页面显示不太优雅，会铺放很多的选项。这个时候我们使用下拉菜单是最合适不过的。下拉菜单可以提供很多选项，是比较方便的一种操作。例如以下情况：

使用下拉菜单一方面列表框为用户输入数据提供了一种便捷方式，只要把已知的数据项列举出来，用户在列表框中选择列表项就可以；另一方面可以把需要搜集的数据规范化，防止因用户输入数据的随意性而造成后端处理数据的混乱。例如，在搜集用户个人信息时，可能需要用户输入职业信息，后端程序需要按照职业信息对用户进行职业分类。在这种情况下，采用列表框元素就是比较好的获取用户数据的方式，可以预先规划好职业信息，把规划好的职业信息以列表框方式展现给用户，用户只需要选择列表项就可以了，无需让用户输入职业信息。

1. select option 标签的使用

select option 标签和 ul li 标签类似，select 标签代表下拉菜单整体，而 option 则是下拉菜单的每一个选项，代码如下：

</select>

代码块12345

效果如下：

我们可以给给 option 标签设置 disabled属性，代表当前选项是禁用项，不能选择的，代码如下：

</select>

代码块12345

我们也可以给 option 标签设置 selected属性来表示默认选中的选项，代码如下：

</select>

代码块12345

效果如下：

下拉菜单默认宽度为选项内容宽度撑开，如果想设置下拉菜单的样式，可以借助 CSS 。

2. 经验分享

select 标签里面只能嵌套 option 标签，不能嵌套其他标签；

为了增强用户体验，我们一般把下拉菜单的第一项设置为请选择，然后设置为默认选项。

3. 真实案例分享

夜猫编程

</select>

京东官网

<option selected="selected">请选择出生月份：</option>

</select>

代码块123456789101112131415

4. 小结

select 标签表示下拉菜单整体，option 标签表示下拉菜单的每一个选项。

select 标签里只能嵌套 option 标签。

设置 option 标签的 disabled属性，可以禁用该选项。

设置 option 标签的 selected 属性，可以默认选择该选项。

认识表单标签 form

表单是我们网页中常见的场景，比如登录、注册，填写个人信息，填写收货地址等。在 HTML 当中创建表单和表格一样，也是需要一组标签，而且表单的属性和表单的元素都比较多，我们可以根据实际需求来定制我们的表单内容。表单里可以嵌套各个类型的输入框，比如普通输入框、密码框等，也可以嵌套单选框、多选框以及下拉菜单。

1. form 表单的使用

form 标签和 ul select 标签类似，代表表单整体，而里面嵌套的元素则是表单具体的内容。我们来做一个用户名和密码的表单，这需要用到之前我们讲的 label 标签和 input 标签的知识，代码如下：

<form>

<br>

</form>

代码块1234567

效果如下：

表单呈现的形式和普通输入框无异，但它的作用就是我们要做提交表单的操作（既我们需要把用户输入的信息传给后台），那么普通的输入框就做不到这个功能了。那么提交表单的时候，我们可以给 form 标签加上一个 method 属性，这个属性表示当前提交表单的方式，一般为 get 或者 post，这个需要后台先行告知。form 标签还有一个 action 属性，表示表单提交的地址，这个也需要后台先行告知。

2. 经验分享

我们在编写表单时，需要先行和后台人员沟通，以获取到表单的提交方式和提交地址；

表单里面可以嵌套多个元素，这个需要根据实际需求来决定；

所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 form 标签之间（否则用户输入的信息可提交不到服务器上）。

3. 真实案例分享

京东

<div>

</div>

<span><b>大小写锁定已打开</b></span>

</div>

<div>

<span>