当前位置：首页 > news >正文

一、HTML

news 2025/6/7 19:10:18

一、基础概念

1、浏览器相关知识

这五个浏览器市场份额都非常大，且都有自己的内核。

什么是内核：
内核是浏览器的核心，用于处理浏览器所得到的各种资源。
例如，服务器发送图片、视频、音频的资源，浏览器就需要使用内核来进行处理这些资源。内核处理完这些资源之后，我们才能看到页面。这五大浏览器都有自己的内核。

五大浏览器，四大内核。不在这五个之中的统称为其他浏览器。其他浏览器就是在上述的内核的基础上，加上了一些精美的UI界面，实用的小功能等等。

2、网页相关概念

一个网页由那几部分组成：
结构：HTML用于搭建网页的结构。
表现：CSS让结构都具有表现力
行为：JavaScript 让网页由交互的效果。

3、HTML是什么

全称：HyperText Markup Language
译为：超文本标记语言

超文本：可以理解为：暂时理解为 ’超级的文本‘，和普通文本比，内容更丰富。
标记：文本变成超文本，就需要用到各种标记符号
语言：每一个标记的写法、读音、使用规则，构成标记语言。

4、HTML发展史

二、HTML基础

1、 html标签：

标签又称元素，是html的基本组成单位。
标签名不区分大小写！但是推荐使用小写。
标签有单标签和双标签，单标签比较少！
标签也可以进行嵌套！

2、HTML属性：

1）用于给标签提供附加信息。
2）可以写在：其实其实标签或单标签中，形式如下：

3）有些特殊属性，没有属性名，只有属性值。
例如：<imput disabled>
4）注意点：
1、不同的标签，有不同的属性，也有一些通用的属性在任何标签中都能写。
2、属性名、属性值不能乱写。都是w3c规定好的
3、属性名、属性值，都不区分大小写，但推荐小写。
4、双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号
5、标签中不要出现同名属性，否则后写的会失效，

3、HTML基本结构：

1、在网页中，点击鼠标右键，选择检查，可以查看某段具体代码
2、检查和查看网页源代码的区别：

查看网页源代码看到的是：程序员编写的源代码。
检查看到的是：经过浏览器处理后的源代码
备注：日常开发中，检查用的最多

3、网页的基本结构如下：

1、想要呈现在网页中的内容写在body标签中
2、head标签中的内容不会出现在网页中
3、head标签中的title标签可以指定网页的标题。
4、图示：

4、HTML注释

1、特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
2、作用：对代码进行解释和说明
3、写法：

<marquee loop="1" > hello world! </marquee>

4、注释不可以嵌套

5、HTML文档声明

1、作用：告诉浏览器当前网页的版本
2、写法：
旧写法：要依网页所用的HTML版本而定，写法有很多，具体写法请参考：W3C官网-文档声明。

新写法：

<!DOCTYPE html> 生命这个就代表这个代码是h5版本的。

3、注意：文档声明，必须在网页的第一行，且在html标签的外侧。

6、HTML字符编码

1、计算机对数据的操作：
存储时，对数据进行：编码
读取时，对数据进行：解码
2、编码、解码，会遵循一定的规范 -- 字符集
3、字符集有很多，常见的有：

ASCII：大写字母、小写字母、数字、一些符号，共计128个。
ISO 8859-1:在ASCII基础上，扩充了一些希腊字符等，共计是256个。
GB2312:继续扩充，收录了6773个常用汉字，682个字符
GBK：收录了的汉字和符号达到20000+，支持繁体中文。
UTF-8:包含世界上所有的语言，所有文字与符号。-- 很常用

4、使用原则：
原则1：存储时务必使用合适的字符编码，否则无法存储，数据会丢失！
原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码。否则数据会错乱，乱码。

5、总结：
平时写代码时，统一采用UTF-8编码最稳妥。
为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合 charset属性指定字符集：

<head>

<meta charset="UTF-8"/>
</head>

7、HTML设置语言

长按 shift + 网页左上角刷新按钮，可以强刷页面。

1、主要作用：让浏览器显示对应的翻译提示，有利于搜索引擎优化。
2、具体写法：

<html lang"zh-CN">

3、扩展知识：lang属性的编写规则

第一种写法(语言-国家/地区)：
zh-CN：中文-中国大陆（简体中文）
zh-TW：中文-中国台湾（繁体中文）
zh：中文
en-U：英语-美国
en-GB：英语-英国

第二种写法（语言-具体种类）以不推荐使用：
zh-Hans：中文-简体
zh-Hant：中文-繁体

w3School上的说明：语言代码参考手册
w3c官网上的说明：略

8、HTML标准结构

在vscode中，输入 ! 再回车可以直接生成标准结构：

<!DOCTYPE html> <!-- 文档声明，代表这是h5页面 -->
<html lang="zh-CN"> <!-- 设置语言为中文，可以在设置红调整该选项 -->
<head><meta charset="UTF-8"> <!-- 设置字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 暂未用到，跟移动端网页有关 --><title>这是一个标题</title> <!-- 标题，在网页上面显示的网页名称 -->
</head>
<body><h1> hello world！ </h1>
</body>
</html>

9、开发者文档学习网站

推荐 MDN：https://developer.mozilla.org/zh-CN/

可以查看相关html标签！

三、HTML常用标签

1、排版标签

h1 - h6 标题标签：

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

<p> 段落标签

<p>我是一个段落！</p>
<p>我是一个段落！</p>
<p>我是一个段落！</p>

<div> 块标签，没有任何含义，用于整体布局（生活中的包装袋）。

1）h1 最好写一个
2）h1 - h6 不能互相嵌套，例如 h1 标签中最好不要写 h2 标签了。
3）p标签很特殊，它里面不能有：h1 - h6 、 p 、 div标签。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>排版标签</title>
</head>
<body><h1>把个人信息安全"安全提"筑牢</h1><p> 2022-06-21 07:34  · 1347条评论</p><div><p>置身移动互联网时代，人们在享受只能设备带来的便利的同时，也在一些场景中面临个人信息泄露风险，随着时间推移，这样的风险日益呈现出新的表现形式。</p><p>一些app生成看视频，玩游戏甚至走路都能赚钱，但用户想提现却难上加难，还容易泄露个人信息；新型不法软件图标透明，没有名称，在手机屏幕上十分隐蔽，不仅不停推送广告，还会收集并转卖用户隐私信息；个人信息和隐私保护话题引发关注，正说明其涉及群众切身利益，问题不容小觑</p></div>
</body>
</html>

2、语义化标签

概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要！
举例：对于h1标签，效果是文字很大，语义是网页主要内容。
优势：
1）代码结构清晰可读性强。
2）有利于SEO（搜索引擎优化）
3）方便设备解析（如屏幕阅读器，盲人阅读）

意思就是说，h1标签的实现效果就加粗文字，但其实文字的粗细程度并不是h1标签的主要功能，而是说，h1 代表的是一个网页最重要的信息，所以它的语义比较重要。当在网页中使用 h1 就代表它是这个网页的标题之类的最显著的信息。