HTML基础知识点

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

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

1.乱码处理方法

采用中文字符集

	<head>
		<meta charset="UTF-8">             <-----UTF-8是中文编码格式
	</head>
常用的编码格式如下
  1. UTF-8:是一种前缀码,又称万国码,是一种针对Unicode的可变长度字符编码
  2. GB2312:GB 2312 或 GB 2312-80 是中国国家标准简体中文字符集,收录 6763 个汉字, 对任意一个图形字符都采用两个字节表示
  3. 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>
discsquare
圆点正方形
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标签不一定有具体的内容,他只是拥有一个定位的功能
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值