HTML基础全解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45645902/article/details/104711007

本文全面解析HTML的基础知识，包括网页概念、HTML语言介绍、常用标签详解、网页开发工具使用及Web标准，适合初学者入门。

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

一、网页

1、什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此称其为 HTML文件。

2、什么是HTML

HTML指超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。

注释：
html不是一种编程语言，是一种标记语言(Markup Language)。
标记语言是一套标记标签(Markup Tag)。

超文本
有两层含义：
1、它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
2、它可以从一个文件跳转到另一个文件，与世界各地的主机连接(超链接)。

3、网页的形成

网页是由网页元素组成的，这些元素利用html标签描述出来，通过浏览器解析来显示给用户的。
前端人员开发代码 —> 浏览器显示代码(解析、渲染) —> 生成最后的Web页面

二、常用的浏览器

浏览器是由网页显示、运行的平台。

1、常用的浏览器

IE、火狐(FireFox)、谷歌(Chrome)、Safari和Opera等，其中最常用的是谷歌浏览器。

2、浏览器内核

浏览器内核是负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
FireFox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	Chrome/Opera浏览器内核。Blink其实是Webkit的分支

目前国内一般的浏览器采用的是Webkit/Blink内核，如360、UC、QQ、搜狗等。

三、Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

1、为什么需要Web标准

浏览器不同，显示的页面或排版会有差异。

2、Web标准的构成

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)

标准	说明
结构	用于对网页元素进行整理和分类，指HTML
表现	用于设置网页元素的版式、颜色、大小等外观样式，指CSS
行为	指网页模型的定义及交互的编写，指JavaScript

Web标准提出的最佳体验方案：结构、样式、行为相分离。
可以理解为：结构写到html文件中、表现写到CSS文件中、行为写到JS中。

四、HTML标签

1、预备知识

1.1、标签

	<html></html>  <!-- 此形式称为双标签 -->
	<br/>  <!-- 称为单标签 -->

双标签关系：包含关系、并列关系

包含关系：

	<html>
		<head>
			<title>  </title>
		</head>
	<html/>

并列关系

	<head>  </head>
	<body>  </body>

1.2、html结构标签(骨架标签)

	<html>
		<head>
			<title> 样例 </title>
		</head>
	
		<body>
			哈哈
		</body>
	<html/>

基本结构标签

2、网页开发工具

2.1、文档类型声明标签

<!DOCTYPE>
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>
表示当前页面采取的是HTML5版本来显示网页

注释：
<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html>标签之前
<!DOCTYPE>不是html标签，是文档类型声明标签

2.2、lang语言种类

lang [language]

用来定义当前文档显示的语言

注释
1、en定义语言为英语[english]
2、zh-CN定义语言为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文

对浏览器和搜索引擎有一定作用

2.3、字符集

字符集(Character set)是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定html文档应该使用哪种字符编码。

<meta charset="UTF-8"/>

注释：
必需。否则可能引起乱码。
charset常用的值有GB2312、BIG5、GBK、UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

3、HTML常用标签

让页面结构更清晰规范

3.1、标题标签

	<h1></h1> ~ <h6></h6>

3.2、段落和换行标签

    <p> </p>  <!-- 文本在一个段落中会根据浏览器窗口大小自动换行 -->

换行标签

    <br/>  <!-- 强制换行 -->

3.3、文本格式化标签

文本格式化标签

3.4、<div>和<span>标签

没有语义，就是一个盒子，用来装饰内容。

一行只能放一个<div> (大盒子)
一行可以多个<span> (小盒子)

3.5、图像标签

	<img src="图像URL">  <!-- src是图像标签的必需属性，用于指定图像文件的路径和文件名。 -->

其他属性：

图像标签示例1：

	<!DOCTYPE html>
		<html>
			<head>
				<title>图像标签示例</title>
			</head>
			<body>
				<img src="/i/eg_tulip.jpgimg.jpg"  alt="我裂开了" width="400" height="266" title="上海鲜花港 - 郁金香" />
			</body>
	</html>

运行结果：

图像标签示例2：

	<!DOCTYPE html>
		<html>
			<head>
				<title>图像标签示例</title>
			</head>
			<body>
			    <img src="img.jpg"  alt="我裂开了" width="400" height="266" title="上海鲜花港 - 郁金香" />
			</body>
	</html>

运行结果：
图像标签示例
注释：
1、可以拥有多个属性，但必须写在标签名后面。
2、属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3、属性采取键值对的格式，即属性=“属性值”。

3.5、路径

1、目录文件夹和根目录
2、相对路径
以引用文件所在位置为参考基础，而建立出的目录路径，即文件相对于当前html页面的位置。

相对路径分类	符号	说明
同一级路径		文件位于html文件同一级
下一级路径	/	文件位于html文件下一级
上一级路径	. . /	文件位于html文件上一级

3、绝对路径
指目录下的绝对位置，直接到达的目标位置，通常是从盘符开始的路径，例"D:\Web\imgs\img.jpg"

3.6、链接标签

    <a href="跳转目标URL" target="目标窗口的打开方式">文本或图像</a>

属性	作用
href	必需。用于指定链接目标的url地址
target	用于指定链接页面的打开方式。_self为默认值，表示在本页面打开新页面；_blank为在新窗口打开新页面

1、外部链接
例：<a href="https://www.baidu.com/">百度</a>

2、内部链接
网站内部页面之间的相互链接，直接链接内部页面名称即可。例：<a href="index.html">首页</a>

3、空连接
<a href="#">哈哈</a>

4、下载链接
1、如果href里面的地址是一个文件(.exe)、压缩包(.zip)等，会下载这个文件
2、使用download属性

	<a download="filename">
	[filename：规定下载文件的名称]

示例

	<!DOCTYPE html>
	<html>
		<body>
			<p>点击 W3School 的 logo 来下载该图片：<p>
			<a href="/i/w3school_logo_white.gif" download="w3logo">
				<img border="0" src="/i/w3school_logo_white.gif" alt="W3School">
			</a>
		</body>
	</html>

运行结果：

超链接download属性
注释：
1、只有 Firefox 和 Chrome 支持download属性
2、在<a>标签中必须设置href属性。
3、该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

5、锚点链接

作用
点击链接可以快速定位到页面中的某个位置

用法
在链接文本的href属性中，设置属性为 # 名字的形式，例 <a href="#haha">哈哈</a>
找到目标位置标签，里面添加一个"id属性"="刚才的名字"，例 <p id="haha">哈哈大本营</p> [此处的p可以改成其它的，例如span、a、h1~h6等]。还可以使用<a name="haha">哈哈大本营</a>

	<!DOCTYPE HTML>
	<html>
	<head>
		<title>锚点链接示例</title>
	</head>
	<body>
		<ul>
			<li><a href="#haha">哈哈</a></li>
			<li><a href="#heihei">嘿嘿</a></li>
		</ul>
		<a name="haha">哈哈大本营1</a><!--设置锚点方法1-->
		<h3 id="haha">哈哈大本营2</h3><!--设置锚点方法2-->
		<p>哈了个哈</p><p>哈了个哈</p><p>哈了个哈</p><p>哈了个哈</p><p>哈了个哈</p><p>哈了个哈</p><p>哈了个哈</p><p>哈了个哈</p><p>哈了个哈</p>
		<a id="heihei" style="color:red;">嘿嘿大本营</a>
		<p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p>
		<p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p><p>嘿嘿嘿</p>
  	</body>
	</html>

注释：
用此方法进行页面内跳转，可以设置出一键回顶部效果，但看起来没有那么炫酷 (ˉ▽￣～)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
    </script>
</head>

<body>
    <span>本例来自w3school官网</span>
    <span>本例在安装邮件客户端程序后才能工作!</span>
    <p>简单创建电子邮件链接
        <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
    </p>

    <p>复杂创建电子邮件链接
        <a
            href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">
            发送邮件!
        </a>
    </p>
    <!-- 单词直接空格使用 %20 代替，以确保浏览器可以正常显示文本。 -->
</body>

</html>

4、HTML中的注释和特殊字符

4.1、注释

<!-- 注释语句 -->	[快捷键Ctrl+/]

4.2、字符实体

在html页面中，一些特殊符号很难或不方便直接使用，此时需要字符实体来替代。

注释：
1、使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
2、HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，需要使用 字符实体.
3、实体名称对大小写敏感！

五、零碎知识

MUR猫
1、txt文档修改字体：格式 —> 字体

2、网页开发工具：Visual Studio Code
VSCode使用方法：
1)、打开软件
2)、新建文件(Ctrl+N)
3)、保存(Ctrl+S) [存为 .html 文件]
4)、生成页面结构：输入! 按下Tab键
5)、利用插件在浏览器中预览页面：单击鼠标右键，在弹出的窗口上点击"Open In Default Browser" (Alt+B)
[如果没有，有可能没安装插件open in browser；也可以安装live server，可以实时预览]

3、VSCode快捷键
显示所有命令 Ctrl+Shift+P
新建文件 Ctrl+N
转到文件 Ctrl+P
在文件中查找 Ctrl+Shift+F
开始测试 F5
放大缩小视图 Ctrl +、Ctrl -
注释 Ctrl+/
快速格式化代码 Shift+Alt+F
设置 Ctrl+,

4、Snipaste — 截图工具

常用快捷方式
截图，同时测量大小、设置箭头、书写文字等 F1
在桌面置顶显示 F3
对图片取色点击图片+alt
切换去色模式 shift
取消图片显示 Esc
历史记录回放 , / .
缩放鼠标滚轮或 +/-
对于 GIF 图片则是加速/减速
旋转 1/2
对于 GIF 图片则是上一帧/下一帧
镜像翻转 3/4
设置透明度 Ctrl + 鼠标滚轮或 Ctrl + +/-
鼠标穿透 X，取消则按 F4
缩略图 Shift + 双击
图像标注空格键
隐藏左键双击