HTML编码与标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/RedZiteng/article/details/105927897

本文详细介绍了HTML中的编码处理方法，特别是中文字符集的使用，如UTF-8、GB2312和GBK。此外，还深入探讨了HTML常用标签，包括标题、段落、换行、水平线、修饰标签、特殊符号、列表和图片标签等，以及它们的属性和使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.乱码处理方法

采用中文字符集

	<head>
		<meta charset="UTF-8">             <-----UTF-8是中文编码格式
	</head>

常用的编码格式如下

UTF-8：是一种前缀码，又称万国码，是一种针对Unicode的可变长度字符编码
GB2312：GB 2312 或 GB 2312-80 是中国国家标准简体中文字符集，收录 6763 个汉字，对任意一个图形字符都采用两个字节表示
GBK：GBK即汉字内码扩展规范，K为扩展的汉语拼音中“扩”字的声母。英文全称Chinese Internal Code Specification。GBK编码标准兼容GB2312，共收录汉字21003个、符号883个，并提供1894个造字码位，简、繁体字融于一库。GB2312码是中华人民共和国国家汉字信息交换用编码，全称《信息交换用汉字编码字符集——基本集》，1980年由国家标准总局发布。

2.HTML常用标签

标题标签：
		<h1></h1>
		<h2></h2>
		<h3></h3>
		<h4></h4>
		<h5></h5>
		<h6></h6>

段落标签：
		<p></p>

换行标签：（单标签）
		<br />

水平线标签：
		<hr />
	属性：
			width：设置水平线宽度，单位：px（像素）/%（百分比）
			color：设置水平线颜色
			align：设置水平线居中对齐
			noshade：设置水平线无阴影

修饰标签类：
		1.	&nbsp：添加一个空格		
		2.	<i></i>/<em></em>：文字斜体
		3.	<b></b>/<strong></strong>：加粗字体
		4.	<sub></sub>：下标，对文字位置进行下移
		5.	<sup></sup>：上标，对文字进行上移
		6.	<ins></ins>：下划线
		7.	<del></del>：删除线
要对哪些内容进行修饰，内容就要放在相应的标签内。

特殊符号：
			1.&lt;    ——>  '<'小于符号
			2.&gt;    ——>  '>'大于符号
			3.&reg;   ——>  '®'已注册符号
			4.&copy;  ——>  '©'版权符号
			5.&trade; ——>  '™'商标符号
			6.&nbsp;  ——>  ' '空格符

列表：
		1.无序列表：
		2.有序列表：
		3.自定义列表：

/*1.无序列表*/
	<ul>
		<li>我是无序列表</li> 		/*在li里边填写相应内容*/
		<li>我没有顺序编码</li>
		<li type="square">我是方块样式</li>
		<li type="circle">我是空心圆</li>
	</ul>

disc	square
圆点	正方形
circle	–
空心圆	–

可以使用type属性来设置无序列表的样式
效果图如下：

/*2.有序列表*/
		<ol type="1">
			<li>我是有序列表</li>
			<li>我有编号顺序</li>
			<li>按照顺序排列</li>
		</ol>

type属性值：
属性值为1：有序列表则按照1 2 3 4 5 ……依次排列
属性值为a：有序列表则按照a b c d e ……依次排列
属性值为A：有序列表则按照A B C D E ……依次排列
属性值为 i：有序列表则按照i ii iii iv v……依次排列
属性值为I：有序数列则按照I II III IV V……依次排列
如果不填，默认属性值为1
效果图如下：

/*3.自定义列表*/
<dl>								/*定义自定义列表*/
			<dt>水果</dt>    		/*填写数列名称*/
			<dd>苹果</dd>			/*填写数列内容*/
			<dd>桃子</dd>
			<dd>梨子</dd>
			<dd>香蕉</dd>
		</dl>

其中，自定义列表dl中可以有多个dt，对于每个dt而言可以有多个dd进行描述。dt和dd是同级别标签，两者不能相互嵌套，这三个标签要同时使用。
效果图如下

图片标签：
	1.语法：   <img src="" alt=""/>
	2.注意：  它是一个单标签，没有结束标签，所以使用反斜杠来闭合。
	3.属性值： 
			src：url描述，图像地址
			alt：文本代替图像（当用户无法查看图像，alt属性可以代替图像显示
在浏览器中）
			height：设置图片的高度，其单位是px（像素）/%（百分比）
			width：设置图片的宽度，其单位是px（像素）/%（百分比）

图片路径问题解决方法：

. ./代表一个上一级，如上一级的上一级则为. ./. ./
图片和网页同在一个文件夹下就直接引用图片，如果图片在上一级目录中我们使用. ./图片名字，如果图片在下一级的文件夹中我们写入文件夹的名字后/加上图片的名字。

超链接标签：
	1.语法：<a href="">内容</a>
	2.属性：
		href:链接地址，可以是内部链接或者外部链接
		target:链接的目标窗口，值有如下
				_self:默认值，在当前窗口打开新的页面
				_blank:创建一个新的窗口，打开新的页面
				_top:在当前的整个浏览器窗口中打开所链接的文档，因而会删除
所有框架
				_parent:将链接的文件载入含有该链接框架的父框架集或父窗口
中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象
_self参数一样。

锚点链接：
	定义锚点：
		<a href="#锚名1">内容</a>
		<a href="#锚名2">内容</a>
	用法：第一步，先定义锚点名字，锚点名字用name属性来定制
		<a href=" " name="锚名1">内容</a>
	总结：先定义锚点的位置和锚点名，在设置寻找锚点的链接。特别注意，锚点定义的a标签不一定有具体的内容，他只是拥有一个定位的功能