共计 5014 个字符,预计需要花费 13 分钟才能阅读完成。
目录
1.b/strong 标签
2.i/em 标签
3.u 标签
4.del 删除线
5.br 换行
6.p 标签 *
7.pre 预处理标签
8.span 标签 **
9.div 标签 ***
10.sub 标签
11.sup 标签
12.hr 标签
13.hn 标签
14.HTML5 中语义标签
特殊字符
15. 多媒体标签
img***
a 标签 ***
第一种用法:超链接
第二种用法:锚点
audio 标签
video 标签
16. 表格标签 **
基本表格
带标题的表格
跨行跨列表格
表格嵌套
17. 列表标签 ***
ul
ol
dl
18. 表单标签 ***
form 标签
input
select
textarea
1.b/strong 标签
这个标签是用于加粗文字的,一般用于强调某个部分的作用。
b/strong 标签的使用 2022 年 3 月 23 日 HTML文档也叫做 web 页面 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的
在以后使用中,推荐使用 strong 标签。
2.i/em 标签
它们的使用是让 文字变为斜体
b/strong 标签的使用 2022 年 3 月 23 日 HTML 文档也叫做 web 页面 HTML 标签 HTML 标记 标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的
3.u 标签
它的作用是给文字 添加下划线
b/strong 标签的使用 2022 年 3 月 23 日 HTML 文档也叫做 web 页面 HTML 标签 HTML 标记 标签 通常 被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的
4.del 删除线
它的使用是给文字 添加删除线
b/strong 标签的使用 2022 年 3 月 23 日 HTML 文档也叫做 web 页面 HTML标签HTML 标记 标签 通常 被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的
5.br 换行
不需要
b/strong 标签的使用 2022 年 3 月 23 日 HTML 文档也叫做 web 页面 HTML标签HTML 标记 标签 通常 被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的
6.p 标签 *
这个标签是一个段落标签,它本身就自带了 行间距。在这个标签中的文件会独占一行。
p 标签的使用 HTML 不是编程语言,是一种超文本标记语言,用来制作网页的一门语言,由标签组成的,比如:图片标签、链接标签、视频标签... 所谓超文本,有两层含义:
html 可以加入图片、声音、动画、多媒体等内容(超越了文本的限制)
html 可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)
HTML 页面也称为 HTML 文档
HTML 文档的后缀名必须是.html 或 .htm,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们 HTML 文档里按下多次空格,在网页中只会显示一个空格,并且在 HTML 文档里按下回车键,在网页中也不会进行换行
7.pre 预处理标签
这个标签的作用是 书写的内容与显示的样式内容相同。
pre 标签 静夜思 床前明月光,疑是地上霜。举头望明月,低头思故乡。
这个标签 一般用于显示源码 的。
8.span 标签 **
它是一个行内标签,它没有什么特殊的意义,但是在使用中却比较多。一般会接合 css 样式来修饰文本。
span 标签 静夜思版本说明 明代版本 这是目前流传比较广泛的版本。
9.div 标签 ***
它是一个块状标签,一般用于页面布局。
div 标签 div 标签是一个块状标签,一个 div 标签会独占一行,它没有任意的属性,但是我们可以给它自定义一个属性,例如,id、class 等。
10.sub 标签
这个标签的作用是指定下标,一般用于数字方面。
sub log2
11.sup 标签
这个标签的作用是指定上标,一般用于数字方面。
sup 23=8
12.hr 标签
这个标签用于给页面划水平线。不需要
hr 静夜思
床前明月光,疑是地上霜。举头望明月,低头思故乡。
标签属性说明:
size:用于指定线的粗线,值越大线越粗 width:用于指定线的宽度,值越大越宽 align:用于指定线的对齐方式,有以下三个值:left:居左对齐 center:居中对齐,它是默认值 right:居右对齐
13.hn 标签
这个标签中的 n 是 1 ~ 6 的数字,一般用于标题。
hn h1
h2
h3
h4
h5
h6
14.HTML5 中语义标签
这个标签是 HTML5 中定义的新的语义标签,有以下几个:
-
header:用于定义页面的顶部
-
article:用于表示文章的内容
-
section:用于定义内容的分块信息
-
nav:用于定义页面的导航部分
-
aside:用于定义页面的侧边栏
-
footer:用于定义页面的页脚部分
-
address:用于定义用户邮件、地址等信息
html5 新标签的使用 这是头部信息
特殊字符
在 HTML 中有很多特殊字符,如下表所示
特殊字符 | 转义码 |
---|---|
空格 | |
|
|
> | > |
版权 | © |
15. 多媒体标签
img***
这个标签的作用是在页面中引入图片
img 标签
标签属性说明:
src:这个属性非常重要,用于指定图片显示的路径,可以是相对路径,也可以是绝对路径。(简单来 说,在 windows 中带了盘符,在 Linux 中以 / 开头的路径,在链接中以 http:// 开头的就是绝对路径,其他都是 相对路径。相对路径的参考点就是这个对象本身。)width:用于指定图片显示的宽度,如果只指定宽,则高会根据宽度来等比例绽放 height:用于指定图片显示的高度,如果只指定高,则宽度会根据高度来等比例绽放。注意:width 和 height 两个属性不要同时指定。border:用于指定力图片显示的边框粗细,默认是无边框 alt:是在图片不能正常显示时才会显示这个文字内容 title:用于当鼠标移动到图片上时显示的提示信息。一般用于搜索引擎优化。
a 标签 ***
这个标签是用于作链接的标签。
第一种用法:超链接
a 标签 百度
打开百度
属性说明:
href:这个属性是一个必须属性,用于指定要打开的目标地址
target:链接打开的方式,有以下几个值:- _blank:在新窗口打开
- _self:在本窗口打开,默认值
- _top:在父窗口打开,一般用于 frame 框架时
- _parent:在父窗口打开,一般用于 frame 框架时
第二种用法:锚点
锚点 底部 | demo2.html
demo2 demo1.html
audio 标签
这个标签是用于播放音乐的标签。常用支持格式为 mp3 格式。
audio
标签属性说明:
1. controls:它是用于对播放器进行控制器的,即显示播放器的控制按钮
2. src:用于指定音频文件的路径
3. autoplay:指定是否自动播放
4. loop:指定是否循环播放
video 标签
video
标签属性说明:
1. src:指定要播放的视频地址,可以是相对路径,也可以是绝对路径。这个标签所支持的视频格式不多,目前只把持 mp4、ogg 两种
2. controls:显示播放控制按钮
3. autoplay:自动播放
4. loop:自动循环
5. width:设置播放器的宽度
6. height:设置播放器的高度
16. 表格标签 **
在我们进行数据展示时,很多时候都会用到表格,特殊是在后台进行数据管理时,或者显示列表数据时,就会用表格。
要使用表格就需要用到 table 标签,而表格是由行和列组成。行的标签是 tr,而列的标签是 td 或 th。
基本表格
简单表格
1
2
3
4
5
6
表格的标签和属性说明:
table:用于绘制表格 tr:用于绘制表格的行 td:用于绘制表格的列(单元格)width:指定表格的宽度,也可以是 td 的属性 border:指定表格的边框粗细 cellspacing:指定单元格之间的间距 cellpadding:指定单元格边框与单元格中内容的距离 align:用于指定表格对齐方式:- left:左对齐,默认值 - center:居中对齐 - right:右对齐 align 属性可以是 table,也可以是 tr,还可以是 td。如果是 table 的,表示对整个表格有效;如果是 tr 的,表示对当前行有效;如果是 td 的表示只对当前的单元格有效。
带标题的表格
带标题的表格
第二个表格
编号
姓名
年龄
1
2
3
4
5
6
7
8
9
hello
使用 caption 来指定表格的标题,使用 thead 标签来指定表格的头,tbody 来指定表格数据区,tfoot 指定表格的尾部。
td 和 th 的区别:
-
td 中的内容是普通格式,而 th 中的内容是加粗的格式
-
td 中的内容是左对齐,而 th 中的内容是居中对齐
跨行跨列表格
跨行跨列的列表
1
3
4
5
6
7
8
9
10
11
相关属性说明:
1. colspan:用于指定要跨多少列,它的值是一个数字
2. rowspan:用于指定要跨多少行,它的值是一个数字
表格嵌套
表格嵌套
1
2
3
41
42
43
44
17. 列表标签 ***
在 HTML 中,列表标签有以下几种:
ul
它是 无序列 表标签
ul
- 西安
- 北京
- 重庆
- 1
- 2
- 3
标签和属性说明:
ul:用于指定无序列表 li:指定列表中的某一项 type:指定无序列表的格式,有以下几个值:(了解)- disc:实心圆形,默认值 - square:实心方形 - circle:空心圆形
ol
它是 有序 列表
ol
- 北京
- 上海
- 天津
- 北京
- 上海
- 天津
- 北京
- 上海
- 天津
- 北京
- 上海
- 天津
type 属性有以下值:
1. 数字:默认值 2. a:以小写字母 a 开始 3. A:在大写字母 A 开始 4. i:以罗马字开始
dl
它数据列表
dl
- 陕西地名
- 西安
- 潼关
- 宝鸡
18. 表单标签 ***
form 标签
这个标签是用于表单提交的标签,一般在与用户交互时就会用到 form 标签。
form 表单标签
标签属性说明:
name:用于给这个表单取一个唯一的名称,便于后续使用 js 来操作这个表单
action:表单提交的地址
method:表单提交的方式,有以下两个值:- get:表单以 get 方式提交
- post:表单以 post 方式提交
补充 get 和 post 提交的区别:
get 提交的数据会以参数的形式体现在浏览器地址栏中,而 post 提交的数据是在请求头中
get 提交方式提交的数据不能超过 4k 大小,而 post 提交方式理论上是没有大小限制的
input
这是表单元素中非常重要一组标称,它有很多类型:
form2 表单元素之 input 的使用
select
select 是下拉列表标签
form 表单之下拉列表
标签属性说明:
name:表单提交时要获取对应元素值是所需要的属性 value:指定 select 中每一个子元素的值 size:指定 select 可看到的元素个数,默认值是 1 multiple:表示可以多选
textarea
这个标签是用于输入大文本内容的标签。
form 表单之 textarea
标签属性说明:
name:用于获取元素值的属性 cols:用于指定文本框的宽度 rows:用于指定文本框的高度
原文地址: HTML 中常用标签 – 详解