文章目录

一、 前端二、HTML2.1 HTML概念2.2 HTML结构2.21 标签2.4.1 双标签2.4.2 单标签2.4.3 标签关系

2.3 注释2.4 head标签2.4.1 title标签2.4.2 meta标签2.4.2.1 name属性2.4.2.2 http-equiv属性

2.4.3 style标签2.4.4 link标签2.4.5 script标签2.4.6 base标签

2.5 文本标签2.5.1 标题标签2.5.2 段落标签2.5.3 换行标签2.5.4 水平线标签

2.6 文本格式化标签2.6.1 上标标签2.6.2 下标标签2.6.3 字符实体

2.7 媒体标签2.7.1 图片标签2.72 音频标签2.73 视频标签2.74 超链接标签

2.8 列表标签2.8.1 无序列表2.8.2 有序列表2.8.3 自定义列表

2.9 表格标签2.91 表格基本结构2.92 表格标签属性2.93 表格标题标签2.94 表格表头单元格标签2.94 表格语义化结构标签2.94 合并单元格

2.10 表单标签2.10.1 form标签2.10.2 input标签2.10.3 多行文本框2.10.4 下拉列表

2.11 框架标签2.12 标签类型2.12.1 行内标签2.12.2 块级标签2.12.3 行内块级标签2.12.4 标签类型转换

一、 前端

构成语言描述结构HTML网页元素和内容表现CSS网页元素的外观和位置等页面样式（如颜色、大小等）行为JavaScript网页交互

二、HTML

2.1 HTML概念

HTML，超文本标记语言（Hyper Text Markup Language），是一门描述性语言。标记，标签，元素，叫法不同，意思相同。HTML超文本标记语言主要通过标签的方式，对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML，就是学习各种标签，来搭建网页的结构。

2.2 HTML结构

结构：!DOCTYPE

说明：作用是告诉浏览器用哪个文档规范来解析文档

标签：html

说明：用于搭建HTML网页文档结构和网页布局

标签：head

说明：用于定义HTML网页文档的头部,它是所有头部元素的容器

标签：body

说明：用来定义HTML网页文档的主体区域

标签：meta

说明：用来描述HTML网页文档的属性

标签：title

说明：用来放到HTML网页文档的头部，是搜索引擎首要抓取的目标代码

2.21 标签

标签，也叫作标记，是由一对尖括号<>，里面包含单词组成

2.4.1 双标签

2.4.2 单标签

2.4.3 标签关系

嵌套关系

并列关系

2.3 注释

注释用来帮助程序员记录程序设计方法，辅助程序阅读

2.4 head标签

2.4.1 title标签

双标签，定义网页的标题

2.4.2 meta标签

是单标签，用来描述HTML网页文档的属性

2.4.2.1 name属性

属性值说明keywords网页关键字，多个关键字用逗号隔开description网页描述author作者copyright版权信息

标签属性：

1、标签的属性写在开始标签内部

2、标签名与属性之间要有空格隔开

3、一个标签可以同时存在多个属性

4、属性之间以空格隔开

5、属性没有先后顺序之分

2.4.2.2 http-equiv属性

属性值说明Content-Type定义网页所使用编码refresh定义网页自动刷新跳转

2.4.3 style标签

是双标签，用来定义标签的css样式

2.4.4 link标签

是单标签，是用来引入外部css样式文件

2.4.5 script标签

是双标签，是用来写JavaScript代码的地方

2.4.6 base标签

是单标签，是用来设置整个网页的基础路径。

开发中很少用到，有人使用知道就行

上面所述标签是放在head标签里的，接下来接触的标签都是放在body标签内的

2.5 文本标签

2.5.1 标题标签

是双标签，h是header的缩写

h1标签：一级标题

h2标签：二级标题

h3标签：三级标题

h4标签：四级标题

h5标签：五级标题

h6标签：六级标题

特点：

1、字体加粗

2、独占一行

3、从h1到h6，字体逐渐减小

4、使用标签的主要意义是告诉搜索引擎这是一段文字的标题

5、

在一个页面最多只能有一个，不要用多个

2.5.2 段落标签

是双标签，p是paragraph的缩写

这是一段文字

这是一段文字

这是一段文字

特点：

1、独占一行

2、段落与段落之间，存在间隙

2.5.3 换行标签

是单标签，br是break的缩写

这是一段
文字

特点：

1、强制换行

2、单标签

2.5.4 水平线标签

是单标签，hr是horizon地平线的缩写

这是一段文字

这是一段文字

特点：

1、在页面中显示一条水平线

2、单标签

2.6 文本格式化标签

标签1标签2说明bstrong加粗uins下划线iem倾斜sdel删除线

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

特点：

1、不会独占一行

2、推荐使用标签2所在列标签

2.6.1 上标标签

sup是superscripted这个单词的缩写

a²

2.6.2 下标标签

sub是subscripted这个单词的缩写

H₂O

2.6.3 字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

显示结果描述实体名称空格 <小于号<>大于号>&与&"双引号"x乘号×÷除号÷-长破折号—|竖线|‘左单引号‘‘右单引号’©版权符©®注册商标®™商标™°度°

2.7 媒体标签

2.7.1 图片标签

img标签常见属性：

属性名说明src图片路径（绝对路径、相对路径）alt图片加载失败时，显示的文字title鼠标悬停时，显示的文字width图片宽度height图片高度

只设置宽或高，会自动等比缩放，宽高只需要数字，不需要’px’

绝对路径：指目录下的绝对位置，比如从根目录开始的路径，或完整的网络地址

相对路径：从当前文件开始出发找目标文件的过程

2.72 音频标签

audio标签常见属性：

属性名说明src音频路径controls显示播放控件autoplay自动播放（部分浏览器不支持）loop循环播放

支持mp3、wav、ogg三种音频格式

2.73 视频标签

属性名说明src视频路径controls显示播放控件autoplay自动播放loop循环播放

支持mp4、webm、ogg三种视频格式

2.74 超链接标签

超链接，是双标签，实现各个独立页面之间进行跳转，可以跳去站外也可以在站内之间跳转

文本或图片

站外跳转，采用绝对路径

百度

站内跳转，采用相对路径

跳去b页面

b页面

页面内跳转

美食

景点

推荐美食

推荐景点

属性名说明href跳转链接target链接打开方式

target属性值

属性值说明_self默认值，在原来窗口打开链接_blank在新窗口打开链接_parent在父窗口打开链接_top在顶层窗口打开超链接

target属性值一般使用_self（默认）和_blank

2.8 列表标签

2.8.1 无序列表

• 列表项
• 列表项
• 列表项

解释：

1、ul，unordered lists，无序列表，li，list item，列表项

2、ul标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值说明disc默认，实心圆circle空心圆square实心方型

• 你
• 我
• 他

2.8.2 有序列表

1. 列表项
2. 列表项
3. 列表项

解释：

1、ol，ordered lists，有序列表，li，list item，列表项

2、ol标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值说明1默认，阿拉伯数字，1,2,3…a小写英文字母，a,b,c…A大写英文字母，A,B,C…i小写罗马数字,i,ii,iii…I大写罗马数字,I,II,III…

1. 你
2. 我
3. 他

2.8.3 自定义列表

名词

描述

……

解释：

1、dl，definition lists，自定义列表；dt，definition term，自定义列表组；dd，definition description，自定义列表描述

称呼

你

我

他

2.9 表格标签

2.91 表格基本结构

解释：

1、tr，table row，表格行；td，table data cell，表行单元格

2.92 表格标签属性

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

2.93 表格标题标签

标题内容，位于表格内第一行

2.94 表格表头单元格标签

，th，table header cell，表头单元格

2.94 表格语义化结构标签

thead、tbody、tfoot

2.94 合并单元格

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

2.10 表单标签

2.10.1 form标签

双标签，包裹其它表单标签

form标签的常用属性

属性说明name表单名称method提交方式action提交地址target打开方式enctype编码方式

name属性

一个页面中，表单可能不止一个。name属性，用来区分不同的表单

method属性

用来指定表单数据使用哪种提交方式给后端

属性值说明getget方式postpost方式

action属性

用来指定表单数据提交到哪个地址

target属性

该属性跟a标签的target属性一样，其属性值也是四个，一般情况只用到_blank属性值，默认也是这个值

enctype属性

属性值说明application/x-www-form-urlencoded在发送前编码所有字符（默认）multipart/form-data不对字符编码，在使用包含文件上传控件的表单时，必须使用该值text/plain空格转换为 “+” 加号，但不对特殊字符编码

2.10.2 input标签

input是单标签

属性值说明text单行文本框password密码文本框radio单选框checkbox多选框button普通按钮submit提交按钮reset重置按钮file文件上传

单行文本框常用属性

属性说明value设置文本框的默认值size设置文本框的长度maxlength设置文本框中最多可以输入的字符数

密码文本框常用属性

密码文本框常用属性和单行文本框常用属性相同

单选框

属性说明name组名，同组单选框，组名要相同，必要属性value单选框选项取值，必要属性checked默认选中项，同组单选框，可以有一个默认选中项

复选框

复选框和单选框的属性都相同，区别复选框可以多选

普通按钮

普通按钮

区别：

1、input是单标签，button是双标签

2、button标签的信息除了文本，还可以是图像、其它标签等

3、button有type属性，属性值可以是button、submit、reset等

提交按钮

把对应表单数据提交给后端服务器

重置按钮

点击重置后，所在form表单里所有内容被清空了

文件上传

2.10.3 多行文本框

2.10.4 下拉列表

选项内容

选项内容

下拉列表标签是为了节省页面空间

select标签属性

属性名说明name数据提交后端所需字段size下拉选项显示个数multiple默认只允许选一个，选多个得加这个属性disabled所有下拉选项禁止选中

option标签属性

属性名说明selected默认选中value被选中，数据提交后端的值disabled该下拉选项禁止选中

2.11 框架标签

框架标签常用属性

属性名说明src嵌入的文档地址width标签宽度height标签高度

有些文档禁止被嵌入

2.12 标签类型

HTML标签分为三种，行内标签、块级标签和行内块级标签。

2.12.1 行内标签

特点：

1、在页面内只占据刚好能包裹自己内容的空间

2、没有宽高，内容多大就多大，行内标签不能嵌套块级标签（a标签除外）

3、行内标签设置宽高无效，可以对行高line-height进行设置

4、可以设置外边距margin和内边距padding，但只对左右边距有效果，上下无效

5、常见行内标签span、a、strong、ins、del、br等

span标签

双标签，行内标签，本身没有固定样式

我是中国人

2.12.2 块级标签

特点：

1、独占一行

2、高度、宽度、外边距、内边距都可以设置生效

3、宽度默认是父级宽度的100%

4、是一个容器盒子，可以嵌套多层子级行内标签、块级标签，文本类块级标签除外

5、常见块级标签div、p、h1~h6、ol、ul、li等

div标签

双标签，块级标签，本身没有固定样式

2.12.3 行内块级标签

特点

1、在页面内只占据刚好能包裹自己内容的空间

2、高度、宽度、外边距、内边距都可以设置生效

3、常见块级标签img、input、td

2.12.4 标签类型转换

通过css样式display属性转换，这是css的内容

小结：HTML不止上面所述标签，但掌握上述这些标签一般足够了！

相关文章