Html 标签详细整理

HTML5

HTML是什么？
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
HTML 由各种标签组成,运行在浏览器上，由浏览器来解析,告诉浏览器如何显示页面

HTML的作用是什么？

用来制作网页，控制网页和内容的显示。
插入图片,音乐,视频
引入链接，通过链接跳转到相应页面
使用表单获取用户的信息,比如注册时用户输入的信息

版本
W3C：万维网联盟(指定web相关的规范和标准的组织)HTML就是W3C制定的标准

后缀名

.html
.htm

HTML基本结构
html标签是由尖括号包围的关键词,如,通常都是成对出现的

HTML 实例

<!DOCTYPE html>                             //声明为 HTML5 文档
<html>                                      //元素是 HTML 页面的根元素
<head>                                     //元素包含了文档的元（meta）数据,文档类型,文章标题。如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<meta charset="utf-8">
<title>百度(baidu.com)</title>
</head><body>                                     //元素包含了可见的页面内容<h1>一个标题</h1><p>一个段落。</p></body>
</html>

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。浏览器不会直接显示HTML标签,而是使用标签解释网页的内容

2.标签

2.1标签的组成
一个完整的HTML标签组成
<标签名属性名=“属性值”>内容</标签名>

2.2标签分类
根据标签是否关闭,分为:关闭型,非关闭型

关闭型,有结束标签成对出现

<title></title>
<body></body>

非关闭型:没有结束标签

<meta>
<br>
<hr>

根据标签是否独占一行,分为块级标签,行级标签

块级标签,是否为块状,独占一行

<h1></h1>
<hr>

行级标签,在行内显示,可以与其它内容在同一行显示

<span></span>

3.注释和实体字符

3.1注释
注释在浏览器不会显示,是用来标注解释的,但是通过查看源代码可以看到.

<!--注释内容-->

3.2实体字符
也称为特殊字符,用于显示一些特殊符号,如< > & 空格等
常用实体字符

&lt;   <  小于号
&gt;   >  大于号
&et;   =  等于号

&nbsp;    空格 对于连续的空白字符(包括空格,缩进,换行等)在浏览器中只会显示一个空格

&amp;  与

这样才能在页面上显示书名号,否则浏览器会认为一对尖括号是一个标签

&quot   ""   双引号
&copy  ©  版权符号

&reg   ®    注册符号

注:实体字符名称区分大小写

4.常用标签

4.1 pre格式化文本标签,保留编码时的文本格式(比较常用)

<pre>季布,学习html</pre>

4.2 P标签，这是段落标签，前后有明显的间隔

<body><p>一份比亚迪（002594.SZ）的《电池价格上调联络函》于10月26日晨间在市场上传开。</p><p>受该传闻拉动，比亚迪当日股价高开达到330.50元，涨幅超过4%。对于电池涨价传闻，比亚迪内部人士接受第一财经记者采访时表示，正在核实中</p><p>比亚迪电池外供的汽车品牌包括红旗等。记者就此向红旗内部人士求证，对方对此不予置评。</p>
</body>

4.3 div标签常被用做容器来使用，分区标签，一般用来进行页面的布局，很常用

 <div>导航</div><div>正文</div><div>版权</div>

直接这样写看不出任何效果，其实我们可以给导航或者正文设置长宽高以及样式

 <div style='width:400px;height:100px'>导航</div><div>正文</div><div>版权</div>

4.4 span 范围标签默认没有任何效果，一般用来设置行内的特殊样式(比如说这一行有一段文字是特殊的内容我想给它加特殊的样式),很常用

<body>我的名字是<span style="font-size:40px">季布</span>
</body>

4.5 ol,li是有序列表

<body><h1>英雄</h1><ol type="1"><li>赵云</li><li>李白</li><li>露娜</li><li>荆轲</li></ol>
</body>

默认是通过阿拉伯数字进行排序从1开始，可以通过属性type进行修改

type=‘1’
type=‘A’

<body><h1>英雄</h1><ol type="A" start='3'><li>赵云</li><li>李白</li><li>露娜</li><li>荆轲</li></ol>
</body>

start=‘3’ 从3开始

4.6 ol,li是无序列表

<body><h1>英雄</h1><ul><li>赵云</li><li>李白</li><li>露娜</li><li>荆轲</li></ol>
</body>

默认使用实心圆为符号标记，可以通过属性type修改

type属性:设置列表前的符号标记,取值:disc实心圆(默认),circle空心圆,square正方圆,none不显示符号

4.7 d,dt,dd 定义列表,对术语,图片进行描述

<body><h1>英雄解释</h1><dl><dt>赵云</dt><dd>王者荣耀英雄,属于刺客</dd><dd>打野</dd><dd>技能带惩戒</dd><dt>HTML</dt><dd>是一种用来制作网页的标记语言</dd><dd>目前正在学</dd></dl>
</body>

效果是有一定的缩进,可以搭配css进行修饰

4.8 hr 水平线标签块级标签独占一行
常用属性:

color:颜色两种写法: 一,color = “red” green blue 二，16进制的RGB 这个可以去网上搜
size :表示水平线的粗细
width: 表示水平线的宽度，默认是100% style=“width:20px”
align:对齐方式取值：center(默认)，right(右边),left(左边)

<body><h1>英雄解释</h1><div style="width:600px;height:300px;background: #cccccc;"><hr color="red" width="50%" align='left'></div>
</body>

div中嵌套hr hr的宽度是div的50%

4.9 image 图像标签

<body><img src="图片路径" alt="图片加载失败...">
</body>

src :指定图片的路径(来源)
alt:图片显示不出来时的提示信息
title: title=“鼠标悬停在图片上的提示信息”
width/height:设置图片的宽和高

4.10 i 倾斜标签
字体倾斜

<body>赵<i>云</i>
</body>

4.11 em 强调标签
在浏览器显示的效果和 4.10 i标签一样，但是意义不一样，i是单纯字体倾斜,em是对内容进行强调

4.12 address 地址标签效果也是标签包含的部分字体倾斜
需要注意的是这是一个块级标签,独占一行

4.13 b strong 加粗标签都是将标签包含的内容进行加粗

4.14 del 删除标签

<body>原价<del>198</del>元,优惠价<span style="font-size: 40px;color: red;">99</span>元
</body>

4.15 ins 下划线标签

<body>季节:<ins>冬天</ins>
</body>

4.16 sub 上标和下标

<body>水的分子表达式:H<sub>2</sub>O
</body>

4.17 abbr 提示信息标签

<body><abbr title="这是提示信息!">HTMLL</abbr>
</body>

4.18 small bit 调节字体大小的标签
字体的大小是相较于当前字的大小

5 头部标签

5.1 meta 定义网页的摘要信息,如编码格式,关键字,作者等

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> //设置编码的格式<meta name="keywords" ,content='游戏,开发,前端'> //设置关键字，就是能被搜索引擎用关键字进行搜索,多个关键字以逗号分割<meta name='description' ,content='游戏,开发,前端'> //也是为了搜索引擎便于搜索到<meta name='auther'> //设置作者<meta http-equiv="refresh" content="2,url=https://www.baidu.com"> //用于页面的刷新跳转<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body>HTML
</body></html>

5.2 title 定义网页的标题

5.3 style 定义内部的样式

5.4 script 定义或引用脚本

5.5 base 定义基础路径
图片默认会从基础路径中查找相应的图片

<base href='images/'>
<img src='heihei.gif'>

6.标签的嵌套

看一下示例：

浏览器读取编写代码进行翻译以图形的方式进行展示，这个过程叫渲染。浏览器渲染和编写的的代码不一样。标签是不能随意嵌套的

7.超链接

使用超链接可以从一个页面跳转倒另一个页面，实现页面的导航
超链接分为三种类型

普通页面间链接，可以跳转倒其他页面
锚链接，跳转到锚点
功能性连接，实现特殊功能

7.1 使用a标签创建超链接
语法:

<a href="链接地址" target="链接打开地址">链接文本或图像</a>href：链接地址/路径
target：链接打开的位置 _self(当前,自身)   _blank(在空白的窗口打开，新的窗口)

路径分类:
1)相对路径:相对于当前文件的路径,换句话说绝对路径之外的路径都是相对路径，不是以根开始的路径
绝对路径:
2)以根开始的路径如:C:\dev\Git https://www.baidu.com

7.2 锚链接
点击链接后跳转到指定位置
锚链接的分类：

页面内的锚链接
页面间的锚链接

7.2.1页面内的锚链接
步骤:
1.定义锚点(标记)

<a name="锚点名称">目标位置</a>

2.链接锚点

<a href="锚点名称"></a>

页面内点击后跳转到相应的位置

7.2.2页面间的锚链接
单独创建一个页面存放锚点，点击锚点可以链接到另一个页面的内容

<a href="目标页面#锚点名称">链接文本</a>

7.2.3 功能性链接
进行图片,视频等下载

<a href="images/haha.gif">点击此处下载图片</a>
<a "mail_to:jibu@qq.com">联系我们</a>   可调用发送邮件的接口

8.表格

<body><table><tr><td>hello</td><td>hello</td><td>hello</td></tr><tr><td>hello</td><td>hello</td><td>hello</td></tr></table></body>

规则的行列结构,每个表格由若干个行组成,每行由若干个单元格组成

8.1 table 标签用来定义表格

常用属性(table属性针对的是整个表格)

border 边框,默认为零
width/height 宽度/高度
align 水平对齐默认是left对齐也可以center,right
bordercolor 边框颜色
bgcolor 背景颜色
background =“图片路径”
cellspacing 单元格之间的距离默认为1
padding 边距 (单元格内容与边界的距离)

8.2 tr标签
用来定义表格的行
常用属性(针对的是某一行，单独行的设置会覆盖table属性的设置)；

align 水平对齐取值 left right center
valign 垂直对齐取值 top(顶部对齐) middle bottom(底部对齐)
bgcolor 背景颜色

8.3 td标签
定义单元格

属性同上

这里需要注意的是:table 里面只能放tr 不能直接放td或者其它内容

8.4 合并单元格
表格的跨行跨列
两个属性:

rowspan
设置单元格所跨的行数，如rowspan=2，表示跨两行
colspan
设置单元格所跨越的列数如clospan=4,表示跨四列

步骤：
1.在跨越的单元格中设置rowspan/colspan 属性
2.将被跨越的单元格删除

<body><table border="1" width="500px" height="300px" ><tr><td colspan="3">hello</td></tr><tr><td>hello</td><td>hello</td><td>hello</td></tr></table></body>

示例：
将第二行第一列和第三行第一列合并

8.5 表格的高级标签

8.5.1 caption标签
表格的标签

    <table border="1" width="300px" height="200px" align="center"><caption><h2>学生信息表</h2></caption><tr><td>学号</td><td>姓名</td><td>年龄</td></tr><tr><td>01</td><td>张三</td><td>25</td></tr><tr><td>02</td><td>李四</td><td>20</td><tr><td>总人数</td><td colspan="2">2</td></tr></tr></table>

8.5.2 thead标签
表格的头部

<table border="1" width="300px" height="200px" align="center"><caption><h2>学生信息表</h2></caption><thead><tr><td>学号</td><td>姓名</td><td>年龄</td></tr></thead><tr><td>01</td><td>张三</td><td>25</td></tr><tr><td>02</td><td>李四</td><td>20</td><tr><td>总人数</td><td colspan="2">2</td></tr></tr></table>

8.5.3 th标签
表格的头部标题
一般用在thead中，设置头部的标题，替代td标签(与td标签的区别是th会加粗)

<table border="1" width="300px" height="200px" align="center"><caption><h2>学生信息表</h2></caption><thead><tr><th>学号</th><th>姓名</th><th>年龄</th></tr></thead><tr><td>01</td><td>张三</td><td>25</td></tr><tr><td>02</td><td>李四</td><td>20</td><tr><td>总人数</td><td colspan="2">2</td></tr></tr></table>

8.5.4 tbody标签
表格的主题部分

  <table border="1" width="300px" height="200px" align="center"><caption><h2>学生信息表</h2></caption><thead><tr><th>学号</th><th>姓名</th><th>年龄</th></tr></thead><tbody bgcolor='red'><tr><td>01</td><td>张三</td><td>25</td></tr><tr><td>02</td><td>李四</td><td>20</td></tbody><tr><td>总人数</td><td colspan="2">2</td></tr></tr></table>

8.5.5 tfood标签
表格的底部

<table border="1" width="300px" height="200px" align="center"><caption><h2>学生信息表</h2></caption><thead><tr><th>学号</th><th>姓名</th><th>年龄</th></tr></thead><tbody bgcolor='red'><tr><td>01</td><td>张三</td><td>25</td></tr><tr><td>02</td><td>李四</td><td>20</td></tr></tbody><tfoot bgcolor="yellow"><tr><td>总人数</td><td colspan="2">2</td></tr></tfoot></table>

9.表单

表单是一个包含若干表单元素的区域，用于收集用户输入的信息如文本框，密码框，单选按钮，下拉列表

表单语法

<form action="表单提交的地址">多个表单元素</form>

常用属性:

action 提交数据给谁处理，即处理数据的程序，如果为空表示当前页面处理
method 提交数据的方式比如get(默认),post
enctype 指定提交数据的格式 multipart/form-data（文件上传属性）文件是二进制数据

9.1 表单元素
大多数表单都是使用input标签来定义的,通过设置属性type来定义不同的表单元素

表单元素类型	含义	说明
text	文本框	默认就是text
password	密码框	以点隐藏,为了安全
radio	单选按钮	只能选择其中的一个
checkbox	复选框	同时选中多个
submit	提交按钮	提交表单数据
reset	重置按钮	将表单数据恢复到初始值
image	图片按钮	可以使用图片作为按钮也具有提交的功能
button	普通按钮
file	文件	选择要上传的文件
hidden	隐藏域	页面上不显示，但是里面的数据会被提交，可以用来存储数据

单行文本框
常用属性:

name名称指定表单名字(比如有多个输入框那后端如何判断是哪一个输入框？就是根据name名称判断的,如果没有指定则数据是无法提交的)
value 给输入框设置默认值
size 设置输入框的宽度
maxlength 最大字符数
readonly 只读 readonly=“readonly” 输入框的信息不能修改可简写readonly，后端是可以拿到数据的
disabled 禁用可简写disabled 完全禁用，后端是拿不到数据

单选按钮
常用属性

value 这个必须有，提交给后端的时候是根据这个判断选中的是哪一个单选按钮
name 多个radio的name属性必须相同表示是同一组的，才能实现互斥(单选)
checked 是否选中, 可以checked=“checked” 或者直接写成checked

<body><input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女
</body>

表单元素要提交需要满足两个条件 1.有name属性 2.非disabled

复选框
常用属性和单选按钮的属性差不多

<body><input type="checkbox" value="eat">吃饭<input type="checkbox" value="sleep">睡觉<input type="checkbox" value="play">玩
</body>

<body><input type="submit" value="注册"><input type="reset" value="重置">
</body>

文件选择器
常用属性

name 名称
.accept 设置可选文件的类型，用来限制上传文件的类型
使用MIME格式字符串限制上传文件的类型
纯文本 text/plain text/html text/xml
图像 image/jpeg image/png

<input type="file" name="head" accept="image.jpeg">

hidden 属性

<input type="hidden" name="id" value="1">

页面上看不到，但是会提交给后端

9.2 特殊表单元素

表单元素	含义	说明
select	下拉列表
option	列表选项
optgroup	选项组	用来对option进行分组
textarea	文本域/多行文本框	创建多行文本框

下拉列表
select 常用属性

name 名称
size 同时显示多个选项
multiple 同时选择多个选项
disabled 禁用

option 常用属性

value 选项值用以区别选择了哪一个选择
selected 默认选中下拉框的某一项

<form action="">学历:<select name="degree" size="2"><option value="0">请选择</option><option value="zhuanke">专科</option><option value="benke">本科</option><option value="yanjiusheng">研究生</option></select><br><input type="submit"></form>

9.3 textarea文本域
常用属性:

name 名称
row 行数
col 宽度

    <form action=""><textarea name="v-test" id="" cols="30" rows="10" readonly>
遵守协议</textarea>
</form>

编辑代码的格式会被保留下来

9.4 label 标签
为表单元素提供标签,当选中label标签的文本内容时将标点切换到与之关联的表单元素
常用属性

for 必须将该属性值设置为与之关联的表单元素的id属性

注;几乎所有的HTML标签都有id属性，且id值必须是唯一的

<form><label for="username">用户名:</label><input type="text" name="username" id="username"><label for="email">邮箱:</label><input type="email" id="email">
</form>

9.5 button标签
也表示按钮，与input标签按钮类似

<button>按钮文本或图像</button><button type="button">提交按钮</button>
<button type="reset">提交按钮</button>

常用属性

type 按钮的类型取值:submit(默认) reset

9.6 fieldset 和 legend

<form><fieldset><legend>院校信息</legend>学号: <input type="text" name="stuID"><br>学校: <input type="text" name="stuschool"><br>专业: <input type="text" name="stumajor"><br></fieldset>
</form>

fieldset 对表单信息进行分组
legend 对分组添加标题

10 内嵌框架

iframe 可以在一个页面中引入另一个页面,实现复用
语法

<iframe src="" name="hello"></iframe>
<a href="链接地址" target="hello">链接文本或图像</a>

常用属性

src 指定要引入的页面
weigth/height 宽，高
frameborder 是否显示边框 1(yes)默认 0(no)
scrolling 是否显示滚动条取值 yes no auto
name 为这个内嵌框架起个名字

<ul><iframe src="top.html" frameborder="0" width="100" height="150"></iframe><h2>主题部分</h2><iframe src="foot.html" frameborder="0"></iframe>
</ul>
</body>

在框架中打开链接

<body><iframe src="top.html" width="100px" height="100px"></iframe><br><h2>正文部分</h2><br><a href="01.html">打开01.html</a><br><a href="02.html">打开02.html</a><br><iframe src="foot.html" width="100px" height="100px"></iframe>
</body>

没有链接地址会在当前页面打开

<body><iframe src="top.html" width="100px" height="100px" name="nav"></iframe><br><h2>正文部分</h2><br><a href="01.html" target="hello">打开01.html</a><br><a href="02.html" target="hello">打开02.html</a><br><iframe src="foot.html" width="300px" height="300px" name="hello"></iframe>
</body>

现在在底部的框里打开链接内容，让指定的超链接在指定的位置打开

11 HTML5

W3C 2014.10发布了HTML5标准

11.1结构相关标签

article标签定义一个独立的内容,完整的标签
section 定义文档的章节，段落
header 文档的头部，标题
footer 文章的底部
aside 定义侧边栏
figure 图片区域
figcaption 为图片区域定义标题
nav 定义导航菜单
结构标签只是表面各部分的角色，本身并无实际的外观样式与普通的div一样的

11.2 mark 标签
标注，用来突出文本，默认为黄色

11.3 time 标签
定义日期和时间，便于搜索引擎的查找

11.4 details 和summary
默认显示summary内容，点击后显示details中内容

<details><summary>HTML简介</summary> <p>HTML是网页标记语言</p><p>HTML包含文本，图像</p>  </details>

注：并不是所有浏览器都兼容

11.5 meter标签
计数仪，表示量度
常用属性:

max定义最大值,默认为1
min 定义最小值,默认为0
value 定义当前值
high 定义限定为高的值
low 定义限定为低的值
optimum 定义限定为最佳的值

<meter max="100" min="1" value="30" high="60" low="20" optimum="10"></meter>

11.6 email标签
用来接收邮箱地址的，有校验功能格式不正确会提示

<form action=""><label for="email">邮箱</label><input type="email" name="email" id="email"><input type="submit"></form>

11.7 url标签
接收url，也会有校验的功能，需要注意的是要写完整url包含http协议

<form action=""><label for="email">邮箱</label><br><input type="email" name="email" id="email"><br><label for="email">地址</label><br><input type="url" name="url" id="url"><br><input type="submit"><br></form>

11.8 search 标签
搜索功能

<form action=""><label for="email">搜索</label><br><input type="search" name="email" id="email"><br></form>

和普通文本框的区别是可以删除

11.9 number/range
接收数字,不允许输入数字以外的字符

<form action=""><label for="number">数字</label><input type="number" name="number" id="number"><br></form>

也可以给输入的数字限定范文

<form action=""><label for="number">数字</label><input type="number" name="number" id="number" min="1" max="10"><br></form>

11.10 data日期

<form action=""><label for="birthday">出生日期</label><input type="date" name="birthday" id="birthday"><br></form>

11.11 color 颜色选择

<form action=""><label for="color">颜色</label><input type="color" name="color" id="color"><br></form>

11.12 新增表单属性

autocomplete 关闭输入框的提示
novalidate 表单提交时不进行校验

<form action="" autocomplete="off"  novalidate><label for="color">用户名</label><input type="text" name="color" id="color"><br></form>

11.13 新增表单元素属性

placeholder 提示文字
required 是否必填
pattern 正则表达式,进行数据校验
list 使文本具有下拉列表的属性
form 可以将表单元素写在form标签外面,通过该属性来关联指定的表单

<form action="" autocomplete="off"><label for="city">城市</label><input type="text" name="city" id="city" list="cityList"><br><datalist id="cityList"><option value="nanjing">南京</option><option value="beijing">北京</option><option value="shanghai">上海</option></datalist></form>

按钮在表单外面通过form关联可以实现提交操作

<body><form action="" id="myForm">用户名:<label for="username"></label><input type="text" name="username" id="username"></form><input type="submit" value="外部提交按钮" form="myForm">
</body>

11.13 audio标签
在页面中插入音频，不同浏览器对音频的格式不一定支持
audio常用属性

src 音频文件的来源
controls 是否显示控制面板(暂定,调节音量)
autoplay 是否自动播放，默认是不自动播放的
loop 是否循环播放
muted 初始化页面静音
可以结合source标签使用,指定多个音频文件，浏览器检测第一个可用音频文件

11.14 video 标签
在页面中插入视频,不同浏览器兼容性不一样，和audio属性基本类似