Web 前端学习HTML 标签

最新推荐文章于 2024-05-12 07:21:47 发布

菇毒

最新推荐文章于 2024-05-12 07:21:47 发布

阅读量525

点赞数

分类专栏： web 前端学习文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_43960383/article/details/120113980

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

Web 前端学习之HTML 标签

1. HTML 语言概述
2. 实体标签元素分类；
3. 网页文档编码与meta标签
- 3.1文档编码及转换
- 3.2 使用meta 标签设定文档编码
4. 特殊字符
5. HTML 色彩与度量单位
- 5.1 HTML 色彩
6. HTML 度量单位
结束语

1. HTML 语言概述

1.1 基本标签 html、head 和 body

<html>标签位于 <! doctype> 标签之后，也称为根标签，用来告知浏览器其自身是一个HTML 文档，<html> 标签标志着HTML文档的开始，</html>标签标志着HTML文档的结束，它们之间的是文档头部和主题内容；
<head>标签用来定义HTML文档的头部信息，也称为头部标签，紧跟在<html>标签之后，用来封装其他位于文档头部的标签，如<title>、<meta>、<link>和<style>等，用来描述文档的标题、作者及和其他文档的关系等；
一个HTML文档只能包含一对<head>标签，大多数文档头部包含的数据都不会真正作为内容显示在页面中；
<body> 标签用来定义HTML文档要显示的内容，也称为主体标签；浏览器显示的所有文本、图像、音频和视频等信息都必须位于标签内，<body>标签中的信息才是最终展示给用户看的；
一个HTML文档只能含有一对<body>标签，<body>标签必须在标签内，位于<head>头部标签，与<head>标签是并列关系;
使用HTML制作网页时，若想让HTML标签提供更多的信息，可使用HTML标签的属性加以设置；语法格式如下：

<标签名 属性 1=“属性值1” 属性 2=“属性值2” ···>网页元素</标签名>

标签可拥有多个属性，属性必须写在开始标签中，位于标签名后；
属性之间不分先后顺序，标签名与属性、属性与属性之家以空格隔开，任何标签的属性都有默认值，省略该属性则取默认值；

例子 1：

<h1 align="right">标题文本<h1>

align 是属性名，right 是属性值，表示标题文本右对齐；对于标题标签，还能设置文本居中和左对齐，对应的属性分别是 center 和 left；
若省略 align 属性，标题文本则按照默认的左对齐显示，即<h1></h1>等价于<h1 align="left"></h1>；
在 HTML 页面中，带有 “<>” 符号的元素叫做 HTML 标签，如上面的<html>、<head>、<body>都是HTML标签；
HTML文档中，<标签名>表示改标签的作用开始，称为开始标签，而</标签名>表示该标签的作用结束，称为结束标签；
注意： 结束标签和开始标签相比，结束标签在标签名钱加了关闭符“/”；
单标签也叫空标签，指用一个标签符号即可完整地描述某个功能的标签，基本语法格式如下：

<标签名 />

在HTML中，注释标签是一种特殊的标签，用于阅读和理解但又不需要显示在页面中的注释文字，语法格式如下：

<!-- 注释内容 -->

注意： 注释内容不会显示在浏览器创空中，但作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时可看到；
书写HTML页面时，经常会在一对标签之间在定义其他的标签，HTML中把这种标签之间的包关系称为标签的嵌套；
例子 2：

<p align="center">
	<font color="rd" size="2">
	更新时间：2021年09月20日21时07分 来源：<font color="green">资源网站</font>
	</font>
</p>

执行结果如下所示：
2021-9-20

在嵌套结构中，HTML元素总是遵循“就近原则”；
代码中的 “资源网站” 这几个文字的颜色会遵循最靠近它的<font>标签，而 size 属性遵循外层的<font>标签，对齐属性则遵循最外层的<p>标签；

1.2 页面头部

制作网页时，需要经常设置页面的基本信息，如页面的标题、作者和其他文档的关系等；
因此，HTML 提供了一系列的标签，这些标签都是写在 head 标签内，所以被称为头部相关标签；
<title>标签用于定义 HTML 页面的标题，即给网页去一个名字，必须位于<head>标签之内；一个HTML文档只能含有一对 <title></title> 标签，<title></title>之间的内容将显示在浏览器的标题栏中；
语法格式如下所示：

<title>网页标题名称</title>

例子 3：

<title>资源网站</title>

执行结果如下所示：
2021-9-20
<meta /> 标签用于定义页面的元素信息，可重复出现在<head>头部标签中，在HTML中国是一个单标签； <meta /> 标签通过**“名称/值”**的形式定义页面的相关参数，如为搜索引擎提供网页的关键字、作者名字、内容描述及网页的刷新时间等；
使用<meta /> 标签为搜素引擎提供信息的基本格式如下：

<meta name="名称" content="值" />

设置网页关键字，name 属性的值为 keywords，content属性用于定义关键字的具体内容，多个关键字之间用逗号“,” 隔开；
例子 4：

	<meta name="keywords" content="Web 前端开发,python 数据分析,Java EE 开发"/>

设置网页描述，name 属性的值为 description，content 属性用于定义描述的具体内容；
例子 5：

	<meta name="description" content="描述网站的内容"/>

设置网页作者等版权信息，name 属性值为 author，content 属性值用来定义具体的作者及版权信息；
例子 6：

	<meta name="author" content="WUST,Wzx"/>

在<meta /> 标签中，使用 http-equiv/content 属性可设置服务器发送给浏览器的 HTTP 头部信息，为浏览器显示该压面提供的相关参数；其中，http-equiv 属性提供参数类型，content 属性提供对应的参数值；
例子 7：

<meta http-equiv="名称" content="值"/>

注意： 默认会发送<meta http-equiv="Content-Type" content="text/html"/>，即通知浏览器发送的文件类型是 HTML；

设置页面使用的字符编码为 utf-8 的代码如下所示：
<meta http-equiv="Content-Type" content="text/html";charset=utf-8 />
如果想设置自动刷新和跳转，需设置 http-equiv 属性值为 refresh，设置 content 属性值为数值（以秒为单位）和url ，其间使用分号 “;” 隔开；
例子 8（定义某个页面10秒后跳转至菜鸟教程）：

<meta http-equiv="refresh" content="15;url=https://www.runoob.com/"/>

执行结果如下所示：

web 定时跳转

1.3 控制标签

为了使更语义化，会经常在页面中用到标题标签，HTML 提供了 <h1> 、<h2> 、<h3>、 <h4>、 <h5>、 <h6>，从 <h1> 至<h6>是6个等级的标题标签；
语法格式如下：

<hn align="对齐方式">标题文本</hn>

语法中的 n 的取值为1到6，align 属性为可选属性，用来指定标题的对齐方式；
align 属性设置对齐方式，取值如下所示：

left：设置标题文字左对齐（默认值）；
center：设置标题文字居中对齐；
right：设置标题文字哟对齐；

<p> 是 HTML 文档最常见的标签，文本在一个段落中会根据浏览器窗口的大小自动换行；
网页中要把文字有条理地显示出来，离不开段落标签，如同平常写文字一样，整个网页也分为若干个段落，段落标签是<p>；

<p align="对齐方式">段落文本</p>

网页中常常看到一些水平线的将段落与段落之间隔开，让文档结构清晰，层次分明；
水平线可通过插入图片实现，或使用以下的标签完成；

<hr />

在 HTML 中，一个段落中的文子会丛左到右排列，直到浏览器窗口的右端，后自动换行；
若希望某段文本强制换行，可使用以下的标签；

<br />

2. 实体标签元素分类；

块元素 ( block element ) 和内联元素 (inline element) 都是 HTML中规范的概念；块元素和内联元素的基本差异是块元素一般从新行开始；
HTML 中，产生实体的标签元素有三种不同类型：块元素、行内元素、行内块元素；

2.1 块级元素

每个块级元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高及顶和底边距都可设置；
元素宽度在不设置的情况下，是它本身父容器的 100% （和父宽度一样）；常用的块级元素有<div> 、<p> 、<h1> 、···、 <h6> 、<ol> 、<ul> 、<table> 和<from>等；

2.2 行内元素

行内元素和其他元素都在一行上：元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变；
常用的行内元素有<a> 、<br> 、<i> 、<strong> 、<label>等；

2.3 行内块级元素

行内块级元素和其他元素都在一行上：元素的高度、宽度、行高及顶和底部边距都可设置；常用的行内块级元素有<img> 和<input>等；
注意： 当加入了 CSS 样式控制之后，块元素和内联元素的这种属性差异就消失了；

3. 网页文档编码与meta标签

3.1文档编码及转换

计算机是美国人发明的，当时使用的字符编码是ASCII 码，国人通过对 ASCII 编码的中文扩充改造，产生了 GB2312 编码，收录了 6763 个汉字和 682 个非汉字的图形字符；为了表示繁体和其他更多的字符，对 GB2312 编码进行了扩充，产生了 GBK 编码；为了支持不同的民族语言，又产生了 GB18030 编码；
世界上不同的国家都有自己的字符编码，于是出现了各种各样的编码，若不安装相应的编码，就无法解释相应编码想表达的内容；
为此国际标准化组织 ISO 制定了一种名为 Unicode 的编码，它包含了世界上所有文字，因此，只要计算机上有 Unicode 这种编码系统，无论是全球哪种文字，只需要保存文件的时候，保存成 Unicode 编码就可以被其他计算机正常解释；
Unicode 编码在网络传输中，出现了两个标准 UTF–8和UTF-16，分别每次传输 8个位和16个位；
注意：

UTF-8 编码较 GB2312 和 GBK 而言，占用更多的存储空间；
若面向的使用人群是中国人，可使用 GBK 编码；
为了网页的通用，推荐锁的网站多采用 UTF-8 编码；

注意：

EditPlus 和 NotePad 等编译软件，提供了文档编码转换功能；
ANSI 并不是一种独立的编码体系，它是 GB2312 或 Big5 的代名词；

3.2 使用meta 标签设定文档编码

在 VS Code 中，新建一个 HTML 文档时，其页面头部例自动产生一个 meta 标签，使用 charset 属性来指定文档的编码，基本代码如下所示：

<meta charset="urf-8">

注意： 编译器 VS Code 对汉字采用 UTF-8 编码方式，若设置标签 meta 的 charset 属性值为 GBK，则浏览器页面时会出现乱码，即页面声明的中文编码方案要与编译软件所使用的中文编码方案一致；

4. 特殊字符

为了将HTML标签语法中某些字符作为普通文本，HTML 为这些特殊字符准备了替代的 HTML 代码，如下表所示：
2021-9-5

5. HTML 色彩与度量单位

5.1 HTML 色彩

颜色是由红色（red）、绿色（green）、蓝色（blue）三种基色混合而成，简称 RGB，每种颜色的最小值为0（十六进制为 #00），最大值为255（十六进制为 #FF）；
许多 HTML 标签会涉及色彩，如，标签<font>使用使用 color 属性来定义字体颜色，标签<td>使用 bgcolor 属性来指定表格单元的背景颜色，编辑 CSS样式时，使用 CSS 样式属性 color 来指定 HTML 元素的颜色；
多数浏览器都支持颜色名的集合，仅有16中颜色名被 W3C 的 HTML 4标准所支持，分别是 aqua、black、fuchsia、gray、green、lime、Maroon、navy、olive、purple、red、silver、teal、white 与 yellow；
若需要其他颜色，则需要使用十六进制的颜色值，以“#”开头的六位十六进制数；
RGB 色彩模式是工业上的一种颜色标准，通过对红（R）、绿（G）、蓝（B）三个颜色通道的变化即它们相互之间的叠加来得到各种各样的颜色；
这标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一；
RGBA 是对 RGB 的扩展，其中 A 表示 Alpha（不透明参数）；
使用 CSS 样式修饰页面元素时，CSS 样式属性值还能使用与十六进制颜色值等效的 rgb()形式；
颜色的三种使用形式，如下所示：
2021-9-21
想看更多 点击这里