HTML标签

标签双标签1.加粗标签：b strong2.倾斜标签：i em3. 下划线标签：u4. 字体标签：font5. 角标标签：下角标标签（sub）和上角标标签（sup）6. 删除线：s del7. 段落标签：p8. div标签：盒子元素、块级元素、容器 作用：用于区块的划分9. span标签10. 列表标签：ol、li、ul11. 文本标题标签：h1~h612. 超链接标签：a13.表格标签和表单标签14.表单标签

单标签1. 换行标签：br2. 水平线标签：hr3.图片标签：img

标签

HTML标签中，有双标签和单标签两种。其中，单标签由一个标签组成;双标签由“开始标签”和“结束标签”组成。 标签的特点：

所有的标签都需使用<>所有的属性都需要在标签名字之后，且需要空格属性和属性值之间用等号连接属性值需要用双引号连接每一组属性和属性值都需要用空格连接双标签必须带‘/’

下面对两类标签进行分类

标签具体类型双标签b、strong、i、em、u、font、sub、sup、s、del、p、div、span、ol、li、ul、h1~h6、单标签br、hr、img

双标签

格式：

<标签的名字 属性="属性值" 属性="属性值">

1.加粗标签：b strong

作用：对文本进行加粗

strong标签和b相比，strong更具有语义化。

我是一个粉刷匠

我是一个粉刷匠

2.倾斜标签：i em

作用：文本的倾斜显示

em标签和i相比，em更具有语义化

我是一个粉刷匠

我是一个粉刷匠

3. 下划线标签：u

作用：给文本添加下划线

我是一个粉刷匠

4. 字体标签：font

作用：对字体进行修饰

语法：我是一个粉刷匠

属性属性值字体大小：size1-7 1是最小的 7是最大的 3是默认的字体文本颜色：colorred green blue字体属性：face隶书 楷体 宋体…浏览器支持的字体为：宋体 隶书 楷体，默认的字体为宋体

文本文本文本

5. 角标标签：下角标标签（sub）和上角标标签（sup）

H₂o

m²

6. 删除线：s del

作用：文本添加删除线修饰=====类似于删除效果

del更加具有语义化

不要998

不要998

7. 段落标签：p

注意事项：p只能嵌套对应的文本标签，不能嵌套自己本身，独立的段落标签。

1111111111111111111111111111111111111111111111111111111111111111

8. div标签：盒子元素、块级元素、容器 作用：用于区块的划分

显示情况：默认div纵向便是，如果需要横向显示，需要用到后面的浮动属性。

9. span标签

作用：对独立文本的修饰，如果修饰一大段文本中的一块文本需要使用span标签单独括起来进行独立修饰。

文本文本

10. 列表标签：ol、li、ul

1）有序列表：有顺序的列表

属性属性值修改列表项显示类型：type1/A/a/I/i修改起始项：start数值 例如：start=“3”

注意：ol里面只能放置li，不能放置其他内容，如果想要实现其他内容，需要在里面嵌套。

1. 文本
2. 文本
3. 文本

2)无序列表：没有顺序的列表

默认列表项为黑色的实心原点。

属性属性值修改列表项显示类型：typedisc(黑色实心圆）、circle(空心圆）、square(黑色实心正方形)、none（取消列表项）修改列表项显示类型：typedisc(黑色实心圆）、circle(空心圆）、square(黑色实心正方形)、none（取消列表项）

注意：none使用频率最高、ul里面只允许嵌套li

1. 文本
2. 文本
3. 文本

3）自定义列表 应用场景：问答列表（图文混排） 语法结构：双标签 dl dt dd dl和dl之间有比较大的间距，dt前面默认会有留白

图片/问题

图片的解释说明/答案

图片/问题

图片的解释说明/答案

图片/问题

图片的解释说明/答案

11. 文本标题标签：h1~h6

经常使用在新闻稿件/文章标题/小说目录 标签结构：双标签 h1~h6 特点：h1最大，h6最小，自带加粗效果

我是一个一级标题

我是一个二级标题

我是一个三级标题

我是一个四级标题

我是一个五级标题

我是一个六级标题

12. 超链接标签：a

a标签介绍： 1）实现超链接功能：实现不同页面之间的跳转 基本语法：

文本/图片

自带的效果：默认带有下划线，文本颜色为蓝色。 超链接访问后：默认效果为紫色。 其他属性：

属性属性值target_self(自己的页面) _blank(新的页面)

2）锚点功能：相同页面中的不同区域跳转

标签点击部分：文本

跳转部分：

应用场景： 目录、京东侧边楼梯层、 通讯录、小说下载

13.表格标签和表单标签

表格标签 作用：就是用来给页面显示加载信息用的 基本结构： table>tr>td table:表格 tr：表格的行 td：表格的单元格即表格的列 三行三列的表格如何创建？ table>tr3>td3

table的属性

属性属性值边框：border以px为单位的数值width可以为px为单位的数值，也可以用%为单位height可以为px为单位的数值，也可以用%为单位 ，但是不能直接使用百分比，需要从父元素继承，即body，html{height:100%;}背景颜色：bgcolor颜色值边框颜色：bordercolor颜色值取消单元格与单元格的间距：cellspacing0px单元格与内容之间的间距：cellpadding以px为单位的数值只显示外边框：frameabove(上边框线) 、below（下边框线）lhs(左边框线)、rhs(右边框线) 、box/border(四周的边框线)rules：表格里面的横纵线显示rows:横线；cols：纵线

tr的属性

属性属性值height数值背景颜色：bgcolor颜色值，给tr设置的时候会影响这一行的单元格的背景颜色align：一整行单元格的文本水平对齐方式left、right、centervalign：一整行单元格垂直对其方式bottom/top/middle

td的属性

属性属性值widthheight背景颜色：bgcolor只会影响自己的那个单元格文本对齐方式：alignleft、right、center垂直对其方式：valigntop、bottom、middle水平合并单元格 ：colspan横向合并，在一行里面操作。水平合并时都操作的同一个tr里面的td纵向合并单元格 ：rowspan横向合并，在一行里面操作。水平合并时都操作的同一个tr里面的td

合并第一列和第二列：

1

3

合并第一列的第一行和第二行,即下方的1和4合并

1	2	3
	5	6
7	8	9

14.表单标签

作用：用来收集用户信息的 学习表单的时候，主要学习的是表单中的控件内容。输入框密码框，单选，多选等等。这些控件一定要放在form标签才能起收集信息的作用。以下是控件

输入框 单行文本输入框，只能在一行中输入不能折行

密码框

按钮类 1）提交按钮

2）重置按钮

配合form标签，清空表单数据 3）普通按钮

单标签

1. 换行标签：br

对文本进行换行,强制性转行，不是段落划分。

1111111111111

1111111111111

2. 水平线标签：hr

作用：一条水平线

属性属性值noshadenoshadecolor颜色值width宽度值height高度值水平对其方式：aligncenter(默认值)、left、right

---

3.图片标签：img

语法：

路径：文件存储的地址，查找文件的一个途径。 相对路径：通过文件和文件之间的关系去找到对应的文件/图片

图片和页面之间是同级关系的话，插入图片路径直接可以把图片名字当做路径使用

图片所在的文件夹和页面是同级关系，需要先进入大存储图片的文件夹里面，然后再去查找图片。

图片所在的文件夹和页面所在的文件夹，是同级关系的话查找图片： img pic.png html 图片标签.html

查找办法：…/img/pic.png …/：返回上一级 ./:同一级 …/…/返回上两级

绝对路径：是一个完整的地址，可以是互联网地址，也可以是服务器上的地址，某一盘符的一个完整的路径。

alt=“图片的描述” 当图片为破损文件时，才会显示文本提示，否则不提示。 作业：为了方便优化代码，经常在优化网站时，添加alt属性，目的在于方便爬虫的爬取。 其他属性： width、height； title属性：当鼠标放上去的时候显示文本。