HTML语法标签大全

码到之处一片红

已于 2023-01-25 16:29:29 修改

阅读量1.9k

点赞数 3

分类专栏：前端知识库文章标签： html 前端

于 2023-01-25 16:23:33 首次发布

本文链接：https://blog.csdn.net/m0_63241290/article/details/128761094

版权

前端知识库专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML语法标签大全

1.语法标签通常由<,>,/组成,通常是双标签,一般形式为<开始标签>包裹内容</结束标签>，也有但标签,一般形式为<>,而且不能包裹内容

2.标签与标签之间的关系👇:

1.嵌套关系                                             2.并列关系
<head>                                                 <head></head>
<title></title>                                    <body></body>
<head>

一.标题标签

<h1>1级标题</h1>                               注意：1. 1~6级标签，重要程度依次递减
<h2>2级标题</h2>                               特点：1.文字自动加粗
<h3>3级标题</h3>                                     2.自动换行
<h4>4级标题</h4>
<h5>5级标题</h5>                                  一般只会用到h1-h3
<h6>6级标题</h6>

1.段落标签
1.用于分段显示内容(段落)
2.代码：<p> </p>
3.特点：独占一行，段落间有间隙

2.排版标签
①.换行标签
1.代码:<br> 英文全称：break line
2.特点：强制换行，单标签

②.水平分割线
1.代码：<hr>
2.特点：单标签

3.文本格式化标签

标签说明
b或strong 加粗
u或ins 下划线
i或em 倾斜
s或del 删除线

标签	说明
b或strong	加粗
u或ins	下划线
i或em	倾斜
s或del	删除线

4.引用标签
短引用：<q> 不会换行
长引用：<blockquote> 会自动换行

子曰<q>学而时习之，不亦说乎</q>

<blockquote>
    这句话是我没有说过的！
</blockquote>

二.媒体标签

1.图片标签

1.代码：<img src="" alt="">
其中src叫属性名，""叫属性值，两者合称属性标签

2.是单标签

3.注意点：标签上可以存在多个属性，属性之间以空格隔开；标签名与属性之间必须以空格隔开。
4.alt属性是替换文本的意思，当图片加载失败，就显示alt的文本，加载成功不会显示。

🔺5.title属性是提示文本的意思，也就是当鼠标悬停时，才显示的文本（title属性不仅仅可以用于图片标签，还可以用于其他标签）

6.width和height属性表示宽度和高度。
①如果只设置width和height中的一个，另一个设置会自动等比例缩放（此时图片不会变形）
② 如果同时设置了两个，则会导致图片变形

补充：7.图片的格式：
jpeg（jpg）：支持的图片颜色比较丰富，不支持透明效果，不支持动图
gif：支持的颜色比较少，支持简单透明，支持动图
png：支持的颜色丰富，支持复杂透明，不支持动图

2.路径

①.页面需要加载图片，需要先找到对应的图片

绝对路径（了解）
目录下的绝对位置，可直接到达目标位置，通常从盘符（C盘，D盘...）开始的路径

相对路径（常用）
1.从当前文件（当前的html网页）开始出发找目标文件（要找的图片）的过程
2.相对路径分类：
同级目录：当前文件和目标图片在同一个文件夹里     <img src="目标图片.gif">或<img src="./目标图片.gif">
下级目录：目标图片所在的文件夹和当前文件在一起   <img src="图片文件夹名/目标图片.gif">
上级目录：当前文件所在的文件夹和目标图片在一起   <img src="../当前文件所在文件夹/目标图片.jpg"
                                      或<img src="../目标图片.jpg"

3.音频标签

①.代码：<audio src="./music.mp3" controls autoplay，loop等></audio>
②.常见属性

属性名功能
src 音频的路径
controls 显示播放的控件
autoplay 自动播放(部分浏览器不支持)
loop 循环播放

③.音频标签目前支持三种格式：MP3, Wav，Ogg

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放(部分浏览器不支持)
loop	循环播放

4.视频标签

①.代码：<video src="./video.mp4" controls ></video>

②.常见属性

属性名功能
src 视频的路径
controls 显示播放的控件
autoplay 自动播放（谷歌浏览器中配合muted实现静音播放）
loop 循环播放

③.视频标签目前支持的三种格式：MP4,WebM,Ogg

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中配合muted实现静音播放）
loop	循环播放

5.内联标签

①.代码：<iframe scr='http://www.qq.com' frameborder='0'></iframe>
②.作用：用于在当前网页中引入另一个网页，相当于在一个网页里嵌套了另一个网页，其中frameborder指定的是内联框架的边框

三.链接标签

①.功能：点击，从一个页面跳到另外一个页面

②.称呼：a标签，超链接，锚链接

③.代码：名称（随便起）

（其中href后面加的是要跳转到的地址）

④.特点：双标签，内部可包裹内容；如果需要a标签点击之后去指定页面，需要设置a标签的href属性

⑤.当你不知道跳转地址的时候可以先在引号里写一个#，表示空链接

⑥.target属性：目标网页的打开形式👇

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

例1：创建一个阅读文章回到顶部的超链接

<a href='#'>回到顶部</a>

将href属性设为#，则页面不会跳转，而是会回到该页面的顶部

例2：创建一个直接跳到底部的超链接

<a href='#bottom'>去底部</a>

<a id='bottom' href='#'>回到顶部</a>

给底部的超链接设置一个id（名字随便起），则可以唯一标识，再到顶部超链接中连接底部id，就可以点击回到底部了

四.列表标签

1.无序列表

e.g.新闻列表

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

①显示特点：每一项前面都有一个小圆圈

补充：若要去掉列表前面的小圈圈，则可以

ul{
list-style:none;
}

②注意：ul标签只能包含li标签，但li标签可以包含任意内容

e.g. 👇

<body>
   <ul>
     <li>榴莲</li>
   </ul>
</body>

2.有序列表

e.g.排行榜

标签名说明
ol 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行的内容

①显示特点：每一行最前面默认显示序号标识

②注意：ol标签只能包含li标签，但li标签可以包含任意内容

标签名	说明
ol	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

3.自定义列表

e.g.一个标题下面涵盖好几个内容，如帮助中心下面有购物指南，账户管理等

标签名说明
dl 表示自定义列表的整体，用于包裹dt和dd
dt 表示自定义列表主题
dd 表示自定义列表针对主题的每一项内容

①显示特点：dd前会默认缩进效果

②注意：dl标签只能包含dt/dd标签，但dd/dt标签可以包含任意内容

标签名	说明
dl	表示自定义列表的整体，用于包裹dt和dd
dt	表示自定义列表主题
dd	表示自定义列表针对主题的每一项内容

五.表格标签

标签名说明
table 表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容

标签名（结构标签）名称
thead 表格头部
tbody 表格主体
tfoot 表格底部

①注意：标签的嵌套关系：table > tr > td 表格的结构标签可以省略

②.表格的相关属性👇

属性名属性值效果
border 数字边框宽度
width 数字表格宽度
height 数字表格高度

③表格的标题和表头

标签名名称说明
caption 表格大标题表示表格整体大标题，默认在整体顶部居中位置
th 表格单元格表示一小列标志，通常用于表格第一行，默认内部文字加粗并居中

④注意：caption书写在table内部，th标签书写在tr内部（用于替换td标签）

⑤合并单元格：

步骤：根据左上原则：上下合并→只保留最上的，删除其他的

左右合并→只保留最左的，删除其他的

然后👇给保留的单元格设置

属性名属性值说明
rowspan 合并单元格的个数跨行合并，将多行单元格垂直合并
colspan 合并单元格的个数跨行合并，将多列单元格水平合并

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

标签名（结构标签）	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在整体顶部居中位置
th	表格单元格	表示一小列标志，通常用于表格第一行，默认内部文字加粗并居中

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行单元格垂直合并
colspan	合并单元格的个数	跨行合并，将多列单元格水平合并

六.表单标签

1.input系列标签

用于显示收集用户信息，e.g.登录页，注册页
可通过type属性值不同展示不同效果👇

标签名 type属性值说明
input（以下均为input） text 文本框，用于输入单行文本
password 密码框，用于输入密码
radio 单选框
checkbox 多选框
file 文件选择，用于之后上传文件
submit 提交按钮
reset 重置按钮
button 普通按钮，默认无功能，可配合js添加功能

①text常用属性

属性名说明
placeholder 表示占位符，提示用户输入内容的文本

②单选框常用属性👇

属性名说明
name 分组。有相同name属性值的单选框为一组
checked 默认选中
如：<body>
   性别：<input type="radio" name="gender">男
         <input> type="radio" name="gender">女
<body>
这样就保证选择性别时不会发生两个都选中的情况，而是只会出现一种情况
③ 按钮常用属性

标签名 tyoe属性值说明
input submit 提交按钮，点击后发送数据给后端服务器
input reset 重置按钮，点击后恢复表单默认值
input button 普通按钮，配合js使用

如果要实现上述表格里三个按钮标签的功能，必须要结合form标签使用

form标签使用方法：用form标签把表单标签一起包裹以来就可以

标签名	type属性值	说明
input（以下均为input）	text	文本框，用于输入单行文本
	password	密码框，用于输入密码
	radio	单选框
	checkbox	多选框
	file	文件选择，用于之后上传文件
	submit	提交按钮
	reset	重置按钮
	button	普通按钮，默认无功能，可配合js添加功能

属性名	说明
placeholder	表示占位符，提示用户输入内容的文本

属性名	说明
name	分组。有相同name属性值的单选框为一组
checked	默认选中

标签名	tyoe属性值	说明
input	submit	提交按钮，点击后发送数据给后端服务器
input	reset	重置按钮，点击后恢复表单默认值
input	button	普通按钮，配合js使用

2.select下拉菜单系列标签

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

3.textarea文本域系列标签

①在网页中提供可输入多行文本的表单控件 e.g.朋友圈
②常见属性
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
③注意：右下角可以拖拽改变大小；

4.label系列标签

使用方法①：

step1：用label标签把内容（如文本）包裹起来

step2：在表单标签上添加id属性

step3：label标签的for属性中设置对应的id属性值

使用方法②：

step1：直接使用label标签把内容（如文本）和标签一起包裹

step2: 需要把label标签的for属性删除即可
<body>
    性别：
    <input type="radio" name="gender" id="nan"><label for=“nan“>男</label>
</body>