HTML5 核心标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/noisy_wind/article/details/103860918

HTML5的基础知识

HTML标签的分类

块级元素：另起一行，单独一行。
```
  如：h1-h6、p、div、ul、ol、dl
```
行内块元素：可以和其他行元素在同一行中，但是自己具有宽高的设置。
```
  如：input、img、button
```
行内元素（内联元素）：可以和其他行元素在同一行中，无法设置宽高，根据自己内容的大小确定宽高。只有左右的外边距。
```
  如：span、a、strong
```

HTML的head标签

head标签的作用

head标签中主要配置浏览器的配置信息

head标签内的主要标签

1. title标签

网页标题标签：告诉浏览器使用什么标题显示网页

2. meta标签

//网页解析编码格式配置：告诉浏览器使用指定的编码格式解析文档
<meta  charset="utf-8"/>

//网页关键字：提升网页在浏览器中的搜索概率
<meta name="keywords" content="HTML,CSS,JS"/>

//网页描述：提升网页在浏览器中的搜索概率
<meta name="description" content="本网页上是关于HTML的head标签学习的,特别棒,6666."/>

//网页作者：提升网页在浏览器中的搜索概率
<meta name="author" content="大鹏"/>

//网页自动跳转:5秒之后跳转到http://www.baidu.com
<meta  http-equiv="refresh" content="5;url=http://www.baidu.com"/>

HTML的body标签

一.文本标签

1. 标题标签：h1-h6

(1). 作用:

会将其中的数据加粗加黑显示，并且显示依次减弱，标题标签自带换行功能

(2). 属性：

属性名	属性值及含义
align	center 居中
	left 左对齐
	right 右对齐

2. 水平线标签：hr

(1). 作用：

会在页面中显示一条水平线，默认居中显示

(2). 属性：

属性名	属性值及含义
width	10px; 设置水平线的宽度为10px
size	10px; 设置水平线的高度为10px
color	red；设置水平线的颜色为红色

3. 段落标签：p

(1). 作用：

会将一段数据作为整体进行显示，主要是进行css和js操作时比较方便，会自动换行

(2). 特点：

p的段间距比br的行间距要大

4. 换行符：br

作用：

告诉浏览器需要在此位置换行

5. 空格符：&nbsp

作用：

告诉浏览器在此位置增加空格

6. 权重标签：b、i、u、del

(1). 作用：

标签	作用
b	会将内容加黑显示
i	会将内容斜体显示
u	会将内容增加下划线
del	增加中划线

(2). 特点：

权重标签不会自动换行，并且可以嵌套使用

！注意：

1.标签的属性是对标签的功能的进一步补充，可以由开发人员自由指定标签的属性值，来达到想要的显示效果。

2.像素单位占据的是电脑屏幕的大小，所以减小浏览器窗口的大小，内容会被遮挡。百分比占据的是浏览器窗口的大小，所以改变浏览器窗口的大小，内容也跟着变化，而不会被遮挡。

二. 列表标签

1. 无序列表：ul

(1). 使用方法：

在 ul 下嵌套 li 标签，在 li 标签中书写列表内容，一个 li 标签代表列表中的一行数据

<ul>
		<li>我是一行数据</li>
</ul>

(2). 特点：

默认在数据前有一个黑圆圈符号

####2. 有序列表：ol

(1). 使用方法:

在 ol 下嵌套 li 标签，在 li 标签中书写列表内容，一个 li 标签代表列表中的一行数据

<ol>
		<li>我也是一行数据</li>
</ol>

(2). 特点：

会自动的给列表进行顺序编码，格式从小到大并且是连续的

(3). 属性：

属性名	属性值及含义
type	1 阿拉伯数字顺序
	a 小写字母顺序
	A 大写字母顺序
	I 罗马数字顺序

3. 自定义列表：dl

(1). 使用方法：

在 dl 下嵌套 dt 或 dd ，其中 dt 代表数据的标题， dd 代表数据的具体内容，一个 dd 表示一条数据

<dl>
		<dt>我是数据的标题</dt>
		<dd>我是一行数据</dd>
</dl>

(2). 特点：

dd 和 li 一样会有缩进，而 dt 会顶格显示。dd 和 dt 都没有格式。

三. 其他标签

1. 图片标签：img

属性：

属性名	属性值及含义
src	图片路径。 1.本地资源路径：一般本地图片资源使用相对路径即可。2.网络资源路径：图片资源的URL地址。
width	设置图片的宽度，如果是单独设置，则在图片保证不失真的情况下自动缩小或者放大，单位可以是px，也可以是百分比。
height	设置图片的高度，如果是单独设置，则在图片保证不失真的情况下自动缩小或者放大，单位可以是px，也可以是百分比。
title	图片标题，鼠标放在图片上的时候会显示。
alt	图片加载失败后的提示语。

！注意：

相对路径：从当前文件出发查找另一个文件所经过的路径。

绝对路径：从根盘符触发所查找文件的路径。

2.超链接标签：a

(1). 属性：

属性名	属性值及含义
href	要跳转的网页资源路径。
target	指明要跳转的网页资源的显示位置。
	_self：在当前页中刷新显示
	_blank：在新的标签页中显示
	_top：在顶层页面中显示
	_parent：在父级页面中显示。

！注意：

超链接标签中一定要声明访问方式，访问方式可以是文字也可以是图片。
即一定要有内容，供用户点击。

(2). 锚点：

作用：

在一张网页中进行资源跳转

使用方法：

先使用超链接标签在指定的网页位置增加锚点,格式为：

<a name="锚点名"> </a>

使用a标签可以跳转指定的锚点，达到网页内部资源跳转的目的,格式为：

<a name="#锚点名"> 访问方式 </a>

3. 表格标签：table

(1). 使用方法：

table：声明一个表格。
tr：声明一行，设置行高及该行所有单元格的高度。
th：声明一个单元格，表头格。默认居中加黑显示。
td：声明一个单元格，默认居左显示原始数据。

<table>
		<tr>
			<th>第一行第一个单元格(表头格)</th>
		</tr>
		<tr>
			<td>第二行第一个单元格</td>
		</tr>
</table>

！注意：

行高及该行所有单元格的高度。单元格的宽度及列宽。

(2). 属性：

属性名	属性值及含义
border	给表格添加边框
width	设置表格的宽度
height	设置表格的高度
cellpadding	设置内容据边框的距离
cellspacing	设置边框的大小

(3). 特点：

默认根据数据的多少进行表格的大小显示

(4). 单元格的合并：

第一步：首先确保表格是一个规整的表格
第二步：根据要合并的单元格，找到其所在的源码位置
第三步：

1.行合并：在要合并的单元格中的第一个单元格上使用属性rowspan=“要合并的单元格的个数”，并删除其他要合并的单元格

2.列合并：在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格的个数”，并删除其他要合并的单元格

4. 内嵌标签： iframe

(1). 属性：

属性名	属性值及含义
src	要显示的网页资源路径。默认当前页面打开及加载src指向的资源。
width	设置显示区域的宽度
height	设置显示区域的高度
name	设置内嵌区域的名字，结合超链接标签的target属性使用

(2). 作用：

在当前网页中加载其他网页的资源，达到不同网页资源之间互不干扰，并能在同一个页面中展现给用户。

5. 框架标签：frameset

！注意：一定要删除body标签

(1). 属性：

属性名	属性值及含义
rows	按照行进行切分页面
cols	按照列进行切分页面

(2). 子标签：frame

作用：

进行切分区域的占位，一个frame可以单独加载网页资源

属性：

属性名	属性值及含义
src	资源路径
name	区域名，结合超链接使用

(3). 代码示例：

<!-- 将整个页面切成 上边10%  中间剩余所有 下边10% -->
	<frameset rows="10%,*,10%">
		<frame src="frameset/top.html" />
		<!-- 将中间部分切成 左边10% 和 右边剩余所有 -->
		<frameset cols="10%,*">
			<frame src="frameset/left.html" />
			<frame src="frameset/right.html" name="_right"/>
		</frameset>
		
		<frame src="frameset/bottom.html" />
	</frameset>

6. form表单标签

(1). 作用：

收集并提交用户数据给指定服务器

(2). 属性：

属性名	属性值及含义
action	收集的数据的提交地址，也就是URL
method	收集的数据的提交方式
	get：适合小量数据，表单数据以?隔开拼接在URL后面，不同的键值对使用&符号隔开，不安全
	post：适合大量数据，安全，隐式提交

！注意：

表单数据的提交，要提交的表单项必须拥有name属性值，否则不会提交.提交的表单项数据为键值对，键为name属性的值，值为用户书写的数据
form标签会收集其标签内部的数据.
form表单的数据提交需要依赖于submit提交按钮.

(3). form表单域标签：input、select、textarea

作用：

给用户提供可以进行数据书写或者选择的标签

使用：

在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式，提交给action属性所指明的提交地址.

1> 文本框： input

属性名	属性值及含义
type	text ；收集少量的文本数据，用户可见
	password ；手机用户密码数据，用户不可见
name	数据提交的键，也会被js使用
value	默认值

2> 单选框 : input

属性名	属性值及含义
type	radio ；单选框
name	数据提交的键，name属性值相同的单选框只能选择一项数据
value	要提交的数据
checked	checked ；使用此属性的单选默认是选择状态

3> 多选框 : input

属性名	属性值及含义
type	checkbox ；多选框
name	数据提交的键，一个多选组需要使用相同的name属性值
value	要提交的数据
checked	checked；使用此属性的多选框默认是选择状态

4> 普通按钮 : input

属性名	属性值及含义
type	button；普通按钮
value	要提交的数据

5> 隐藏标签 : input

属性名	属性值及含义
type	hidden；隐藏
name	数据提交的键名
value	要提交的数据

6> 单选下拉框： select

属性名	属性值及含义
name	数据提交的键名，必须声明
子标签 option	一个option标签表示一个下拉选项
	value：要提交的数据
	selected： selected；使用此属性的下拉选项是默认值

7> 文本域： textarea