【前端】【HTML】基础知识

码字小萌新♡

已于 2025-04-28 19:07:17 修改

阅读量7.6k

点赞数 12

分类专栏：前端文章标签：前端 html5

于 2022-03-06 23:05:39 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51712954/article/details/123319639

版权

HTML 基础知识

一. 什么是HTML？
二. 基本语法
三. 标签关系
- (一) 包含关系
- (二) 并列关系
四. HTML基本结构标签
五. 特殊字符
六. HTML常用标签
七. 语义化标签
八. 多媒体标签及其控制函数
九. index.html 文件剖析
- （一）必须包含的标签

一. 什么是HTML？

🔰HTML指的是超文本语言，它是用来描述网页的的一种语言。
🔰HTML不是编程语言，而是一种标记语言。
🔰标记语言是一套标记标签。

二. 基本语法

🔰HTML标签是由尖括号包围的关键词，例如：<dr/>
🔰HTML标签通常是成对出现的，例如：<html>和</html>,称之为双标签；第一个是开始标签，第二个是结束标签。
🔰有些特殊的标签必须是单标签，例如：<br/>,称之为单标签。

三. 标签关系

(一) 包含关系

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

(二) 并列关系

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

四. HTML基本结构标签

1.<html></html>：页面中最大的标签，称之为根标签。
2.<head></head>：注意在head标签中我们必须要设置的标签是title标签。
3.<title></title>：让页面拥有一个属于自己的网页标题。
4.<body></body>：页面中的内容基本都放到body里面。

(一) 以下三个代码vscode自动生成基本不需要我们重写

1. `<!DOCTYPE html>`文档类型声明标签

1）告诉浏览器使用HTML5版本来显示网页；
2）声明位于文档中最前面的位置，处于html标签之前；
3）不是HTML标签，而是文档声明标签；

2. `<html lang="en">`lang语言种类

1）用来定义当前文档显示的语言；
2）定义为en的就是英文网页，定义为zh-CN就是中文网页；

3. `<meta charset="UTF-8">`字符集

1）必须写，采取UTF-8来保存文字，如果不写就会乱码；

(二) HTML网页大至骨架如下

（输入<kbd>！</kbd>按下<kbd>tab</kbd>键，就可以直接生成）

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>网页标题</title>
	</head>
	<body>
		网页全部内容……
	</body>
</html>

五. 特殊字符

特殊字符	字符代码	特殊字符	字符代码
空格符( )	&nbsp；	和号(&)	&amp；
大于号(>)	&gt；	小于号(<)	&lt；
人民币(￥)	&yen；	版权(©)	&copy；
注册商标(®)	&reg；	摄氏度(℃)	&deg；
正负号(±)	&plusmn；	乘号(×)	&times；
除号(÷)	&divide；	平方(²)	&sup2；
立方(³)	&sup3；

六. HTML常用标签

(一) 标题标签

<h1>我是一个一级标题标签</h1>

🔰一个标题独占一行；
🔰标题标签里的文字会加粗，字号h1至h6依次变小；

(二) 段落标签

<p>我是一个段落标签</P>

🔰它用于定义段落，可以将整个网页分为若干个段落；

(三) 文本格式化标签

<strong></strong>或<b></b>	粗体字
<big></big>					大号字
<small></small>				小号字
<em></em>或<i></i>			斜体字
<strong></strong>			加重语气
<del></del>或<s></s>		删除线
<ins></ins>或<u></u>		下划线

<hr/>						水平线标签
<br/>						换行标签
<!--注释语句-->              注解（Ctrl+/）