04【HTML常用标签】_cellpadding mdn

最新推荐文章于 2025-04-02 00:33:10 发布

2401_84247760

最新推荐文章于 2025-04-02 00:33:10 发布

阅读量1k

点赞数 25

分类专栏： 2024年程序员学习文章标签：网络安全 web安全面试

本文链接：https://blog.youkuaiyun.com/2401_84247760/article/details/138926570

版权

2024年程序员学习专栏收录该内容

111 篇文章

订阅专栏

在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。

需要完整版PDF学习资源

需要体系化学习资料的朋友，可以加我V获取：vip204888 （备注网络安全）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

4.2.1 段落标签（p）

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

小V的自我介绍：大家好，我是小V，来自江西
小Z的自我介绍：大家好，我是小Z，来自广西
    
<hr>
<p>小V的自我介绍：大家好，我是小V，来自江西</p>
<p>小Z的自我介绍：大家好，我是小Z，来自广西</p>

</body>
</html>

打开浏览器查看效果：

4.2.2 标题标签（h1~h6）

标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题等。HTML 文档也是一样。HTML 包括六个级别的标题， <h1> – <h6> ，一般最多用到 3-4 级标题。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>第一章：初入江湖</h1>
<h2>第一章：初入江湖</h2>
<h3>第一章：初入江湖</h3>
<h4>第一章：初入江湖</h4>
<h5>第一章：初入江湖</h5>
<h6>第一章：初入江湖</h6>

<!--注意: 只有h1~h6标签,没有h7标签,解析失败-->
<h7>第一章：初入江湖</h7>
</body>
</html>

打开浏览器查看效果：

4.3 图像标签（img）

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，其基本语法格式如下：

img标签的属性：

属性名	属性值	介绍
src	一段URL文本	图像的路径
alt	文本	当图像不能显示时的替换文本
title	文本	鼠标悬停在图片上时显示的文本
witdth	像素	图片的宽度
height	像素	图片的高度
border	边框粗细值	图片的边框

【代码示例】：

效果：

4.4 超链接标签（a）

4.4.1 超链接的用法

HTML 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。中的内容应该应该指明链接的意图。

语法：
a标签的属性：
- href：点击超链接后跳转的地址
- target：新地址跳转的方式
  - _left：默认值，在当前页面打开超链接的地址
  - _blank：在新的页面打开超链接的地址
代码示例：

4.4.2 锚点的基本使用

通过创建锚点链接，用户能够快速定位到目标内容。

示例代码-1：
效果：

4.4.3 锚点的跨页面跳转

锚点不仅可以链接到当前页面上的某个位置，也可以链接到其他页面上的某个指定位置；

准备第一个页面：
准备第二个页面：

4.4.4 其他功能

a标签的作用是链接，即给a标签中的href中赋予一个值，那么a标签就可以帮我们链接过去；
下面是一些特殊的链接：

4.5 列表标签

列表标签也是参与布局的重要标签之一，在页面上，列表标签的影子随处可见；在HTML中，列表分为无序列表（ul）和有序列表（ol）两大类；

4.5.1 无序列表（ul）

无序列表的各个列表项之间没有顺序级别之分，是并列的。
下面都是使用无序列表做的案例：

无序列表的语法如下：

【代码示例】：
【效果】：

为什么我们定义的无序列表没有其他网站那么好看？因为我们现在只编写了HTML代码，就相当于只存在代码的骨架，等我们后续学习了CSS就可以对该骨架进行美化啦！

4.5.2 有序列表（ol）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义。
下面都是有序列表的应用场景：

有序列表的语法如下：

【代码示例】
效果如下：

Tips：ol的特性基本与ul 一致，再加上后续的样式可以通过CSS来调整，所以实际开发中，ol用的比较少，一般都统一使用ul；

4.5.3 自定义列表（dl）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
下面是自定义列表的应用场景：

语法：

【代码示例】
【效果如下】

4.6 表格标签（table）

4.6.1 表格标签介绍

表格标签一般用于展示信息

例1：

例2：

4.6.2 表格的结构

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。

语法：
- table：表格
- caption：表格标题
- thead：表格头部
- tbody：表格主体
- tfoot：表格脚注
- tr：表格的每一行
- th：表格的每一个单元格（用于表头）
- td：表格的每一个单元格（用于表格的主体）

一个完整的表格结构如下：

【代码示例】
【效果如下】

4.6.3 表格的属性

我们设计好了表格的骨架后，可以通过表格的属性来调整一些表格的样式，尽管Web标准中不推荐我们使用HTML来修改网页的样式，但HTML依旧提供这些样式；
表格常用属性如下：

table：
- align：设置表格水平对其的方式
  - left：左对齐
  - right：右对齐
  - center：居中对其
- width：设置表格的宽度。当表格设置宽度后，所有的单元格将平均该宽度
- height：设置表格的高度。当表格设置高度后，所有的单元格将平均该高度
- border：设置表格的边框，默认为0像素
- cellspacing：设置单元格与单元格边框之间的空白间距，默认为2像素
- cellpadding：设置单元格内容与单元格边框之间的空白间距，默认为1像素
thead、tbody、tfoot、tr：
- align：设置单元格水平对其的方式
- valign：设置单元格的垂直对其方式
  - top：顶部对齐
  - bottom：底部对齐
  - middle：中间对齐
th、td：
- align：单独设置单元格的水平对齐方式（th默认的水平对其方式为center，td为left）
- valign：单独设置单元格的垂直对齐方式（th和td默认的垂直对其方式都是middle）
- width：单独设置单元格的宽度，当修改了某一个单元格的宽度时，那么整列的单元格的宽度都会更改
- height：单独设置单元格的高度，当修改了某一个单元格的高度时，那么整行的单元格的高度都会更改
- rowspan：单元格行合并的个数
- colspan：单元格列合并的个数

1）表格基本属性

【案例效果】

【代码示例】

2）单元格合并

th和td标签可以设置单元格合并效果，其属性为：

跨行合并：rowspan
跨列合并：colspan

【案例效果】

【代码示例】

4.7 表单标签（form）

4.7.1 表单标签介绍

在HTML中，表单标签用于在页面中收集用户的数据，然后将数据提交（发送）到服务器进行后端保存。表单标签在实际开发中用的非常多，常用于用户的注册、登录、搜索等需要收集用户数据的应用场景；

搜索：

4.7.2 表单的常用标签

1）form

form标签是表单的整体，一个form标签中包含有很多用于收集用户数据的其他标签，一个form标签代表一个表单；form标签中设置的是表单提交的服务器地址、提交的方式、提交的类型等；

form标签的属性：
- action：表单提交的地址
- target：表示在提交表单之后，在哪里显示响应信息
  - _self：默认值。在本窗口打开新的提交请求。
  - _blank：在新窗口打开新的提交请求。
  - _parent：在父窗口打开新的提交请求，如果没有父级窗口，则与 _self 表现一致。
  - _top：在顶级窗口打开新的提交请求，如果没有父级窗口，则与 _self 表现一致。
- method：表单提交的方式；HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT这几种，但普通表单只支持GET、POST提交，GET一般用于查询操作，POST一般用于新增操作
  - GET：GET提交方式一般用于查询操作
  - POST：POST提交方式一般用于新增操作
- enctype：当 method 属性值为 post 时，enctype 用于设置提交的MIME类型，取值有：
  - application/x-www-form-urlencoded：默认值，采用URL编码提交，用于提交普通文本
  - multipart/form-data：当表单包含文件时使用此值，可以提交文本与文件；
  - text/plain：出现于 HTML5，一般用于调试场景；不对提交的数据编码，用于提交普通文本；

【示例代码】

2）input

input是form表单中非常重要的标签，也是使用最频繁的标签；
input是一个输入框，用于用户输入信息用，用户输入数据的方式有很种，例如文本框、单选框、复选框、密码框、文件框等都是input标签来完成；因此input标签也有很多类型：

属性	属性值	描述
type	text	文本输入框
	password	密码输入框
	checkbox	复选框
	radio	单选按钮
	button	普通按钮
	reset	重置按钮
	submit	提交按钮
	file	文件选择框
	image	图形形式的提交按钮
name	用户自定义	输入框的名称，后端根据这个名称获取这个输入框的值
value	用户自定义	输入框的默认值
size	正整数	input控件在页面中显示的宽度

【示例代码】
案例效果：

我们打开浏览器，按下F12，打开浏览器控制台，再次重新提交，查看表单提交的数据：

3）label

label 标签为 input 元素定义标注（标签）。
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
【代码示例】

4）button

button标签用于添加一个按钮，和显示效果一样，但是button标签制作的按钮默认自带表单提交功能；
【示例代码】

5）select

select标签用于制作下拉菜单，每一个下拉菜单使用option标签来添加；
【代码示例】
案例效果：

需要注意的是，虽然省份选中的是"江西"这个option，城市选中的是"南昌"这个option，但是提交的确实option中的value值；我们可以打开浏览器的F12控制台来查看提交信息：

6）textarea

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框；
【示例代码】
案例效果：

4.8 iframe内联框架

iframe标签用于在网页中嵌入其他资源；

属性如下：

属性名	描述
name	内联框架名称，与target属性配合使用
frameborder	内联框架的边框粗细值为`1`（默认值）时，显示此框架的边框。值为`0`时移除边框。Tips：此属性已不赞成使用，请使用 CSS 属性 `border`代替。
scrolling	是否显示滚动条yes：显示（默认值）no：不显示
width	内联框架的宽度，默认300，单位为像素
hegith	内联框架的高度，默认150，单位为像素

4.9 HTML的转义字符

4.9.1 什么是转义字符

HTML中<，>，&等有特殊含义（<，>，用于链接签，&用于转义），不能直接使用。这些符号是不显示在我们最终看到的网页里的，那如果我们希望在网页中显示这些符号，该怎么办呢？
这就要说到HTML转义字符串（Escape Sequence）了。
转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要体系化学习资料的朋友，可以加我V获取：vip204888 （备注网络安全）

需要这份系统化资料的朋友，可以点击这里获取