HTML - 邂逅HTML一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情基

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

基础知识

网站由多个网页组成，而每一个网页都是由HTML+CSS+JavaScript组成

其中HTML用以定义网页的主体结构

CSS用以进行网页中的布局和样式

JavaScript用以定义网页的交互行为

网页从服务器请求回来的时候是一段01数据，解析后是对应的代码，所以需要一个工具来帮助我们解析这些代码，并进行渲染

这个工具就是浏览器，而浏览器中最核心的就是渲染引擎(Rendering Engine)，一般也称为（浏览器内核）用于负责解析网页语法，并渲染(显示)网页

常见的浏览器内核有：

内核	常用浏览器
Trident	IE
Gecko	Mozilla Firefox
Presto	Opera(最新的Opera已经采用Blink)
Webkit	Safari，移动端浏览器(Android、iOS)
Blink	Google Chrome， Edge Blink是Webkit的一个开发分支，是在Webkit的基础上进行的二次开发得到的渲染引擎

不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同

简介

超文本标记语言(英语:HyperText Markup Language，简称:HTML)是一种用于创建网页的标准标记语言

标记语言
- HTML 由无数个标记(标签、tag)组成
- HTML可以对某些内容进行特殊的标记，以供其他解释器(主要是浏览器)进行识别处理
  
  也就是说 HTML通过标签告诉浏览器对应的网页需要渲染成什么结构
超文本

因为HTML不仅仅可以表示插入的普通文本(Text)，也可以表示插入的图片、音频、视频, 超链接等无法使用普通文本表示的内容
HTML元素不区分大小写，但是推荐小写

HTML文件的后缀名为.html

因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符

所以早期的html文件的后缀名为.htm

<!DOCTYPE html>
<!-- 
  一段完整的网页由html标签包裹
  而html下存在head和body标签
-->
<html lang="en">
<!-- head和body标签的缩进比较特殊，他们不进行缩进(约定俗成) -->
<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>Document</title>
</head>
<body></body>
</html>

元素

元素是网页的一部分，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含

当一个元素中有包含内容的时候，这个元素被称之为双标签元素，如div,span等

当一个标签中没有包含任何的内容的时候，这个元素被称之为单标签元素，如img，meta等

这个元素的主要部分有:

开始标签 (Opening tag): 包含元素的名称(本例为 p)，被左、右尖括号所包围。表示元素从这里开始或者开始起作用
结束标签 (Closing tag): 与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾
内容 (Content): 元素的内容
元素 (Element): 开始标签、结束标签与内容相结合，便是一个完整的元素

元素也可以拥有属性(Attribute): 属性包含元素的额外信息，这些信息不会出现在实际的内容中

一个属性必须包含如下内容:

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格)
属性名称，后面跟着一个等于号
一个属性值，由一对引号“ ”引起来（这里的引号不区分单引号还是双引号，推荐使用双引号）

<!-- 
	div --- 标签
	<div> --- 开始标签
  </div> --- 结束标签
	<div>content</div> --- 元素

	class="foo" --- 属性
	class --- 属性名
	foo --- 属性值
-->
<div class="foo">content</div>

注释

在实际工作中, 一个项目通常是多人协作完成的. 可能是几个或者十几个等等

这个时候, 你可能需要使用别人写出的代码功能, 别人也可能使用你的代码功能

此时我们就需要为我们的代码添加上必要的注释

<!-- 注释内容 -->

简单来说，注释就是一段代码说明, 注释是只给开发者看的，浏览器并不会把注释显示给用户看

HTML常见元素

文档声明和html元素

<!--
  <!DOCTYPE html> --- 文档类型声明 简称 文档声明
  特点:
    1. 必须位于html的第一行（注释除外）
    2. DOCTYPE 是大写的
    3. 文档类型声明 本身 并不是一个元素

  作用:
   声明当前网页是一个HTML5的网页，需要按照HTML5的标准去进行解析
-->
<!DOCTYPE html>

<!--
  html元素 --- 表示是一个html的顶级元素 或者叫 根元素
  所有的元素 必须是 html元素的 后代

  lang用于指定网页的语言
  作用:
    1. 帮助 语言合成工具 来朗读网页
    2. 帮助 翻译工具 来对网页进行翻译

  常见值:
    en --- 英文
    zh --- 中文(包括简体和繁体)
    zh-CN --- 简体中文
		(zh-CN 和 zh-cn是等价的，因为html不区分大小写， 推荐zh-CN)
-->
<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>Document</title>
</head>

<body></body>
</html>

head元素和body元素

head元素

head元素是用来描述文档的相关配置信息的，这些配置信息也被称之为元数据，即描述数据的数据

包括文档的标题，引入的文档样式，脚本等

head标签中可以设置的内容有很多，但一般最为常见的有2个，分别为视口，网页标题和网页编码

<head>
  <!--
    meta标签是一个单标签
    属性 charset用于设置网页字符编码
		不设置 可能会导致 网页编码错误
    UTF-8 和 utf-8 是一致的，因为html不区分大小写
  -->
  <meta charset="UTF-8">
  <!-- 遇到IE浏览器，尽可能使用edage模式进行解析，也就是使用blink来进行解析 -->
  <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元素一般都是在body元素中进行编写的

<body></body>

h元素

在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素

<h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题

<h1> 级别最高，而 <h6> 级别最低

<h1>我是h1元素</h1>
<h2>我是h2元素</h2>
<h3>我是h3元素</h3>
<h4>我是h4元素</h4>
<h5>我是h5元素</h5>
<h6>我是h6元素</h6>

p元素

如果我们想表示一个段落，这个时候可以使用p元素

HTML <p>元素(或者说 HTML 段落元素)表示文本的一个段落

p元素是paragraph单词的缩写，是段落、分段的意思
p元素多个段落之间默认会有一定的间距

img元素

HTML <img> 元素将一份图像嵌入文档

img是image单词的所以，是图像、图像的意思
对于img元素，一般值需要设置宽度和高度中的任意一个即可

另一个值会依据图片的比例自动去适配
事实上img是一个可替换元素( replaced element )
- 因为img标签本质上所做的功能是在浏览器上添加一个占位符
  
  (会把元素撑开，但是去获取占位符的宽高的时候，皆为0)
- 等到网络图片或本地图片加载完成后
- 使用需要渲染的图片替换掉原本的那个占位符
- 对于这类元素就被称之为可替换元素

img有两个常见的属性

属性名	描述
src	source单词的缩写，表示源必选项，表示你想嵌入的图片的文件路径
alt	可选值 1. 当图片加载不成功(错误的地址或者图片资源不存在)，显示的提示文本 2. 屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义 3. 便于搜索引擎识别这张图片的含义，有利于SEO

img图片路径的表示方式:

路径形式	说明
本地图片	本地电脑上的图片，后续需要和html一起部署到服务
网络图片	一个网络上的URL地址

本地图片路径的表示方式:

路径形式	说明
绝对路径	从电脑的根目录开始一直找到资源的路径
相对路径	相当于当前文件的一个路径 . 代表当前文件夹(1个.)，可以省略 .. 代表上级文件夹(2个.)

对于网页来说，不管什么操作系统(Windows、Mac、Linux)，路径分隔符都是斜杠/，而不是反斜杠 \

而windows路径分割符是\，mac和ios上的路径分割符为/
如果使用绝对路径去引入一张图片的时候，必须要以file协议进行打开，如果是在本地开启了一个服务来进行调试的时候

是无法找到这张图片的，因为路径会被转换成类似http://www.example/Users/klaus/Desktop/avatar.jpg

所以推荐在使用路径的时候尽可能使相对路径

浏览器可以支持的图片格式：

a元素

在网页中我们经常需要跳转到另外一个链接，这个时候我们使用a元素

HTML <a>元素 (或称锚(anchor)元素)
定义超链接，用于打开新的URL

属性	说明	可选值
href: Hypertext Reference的简称	指定要打开的URL地址可以是本地文件也可以是一个网络地址，甚至可以是一个id选择器
target	指定在何处显示链接的资源	常用的值有 `_self` --- 在当前窗口打开URL --- 默认值 `_blank` --- 在一个新的窗口中打开URL --- 相当于先打开一个新的空白标签页后，再在新的标签页中打开需要打开的那个网页

1. 链接跳转

<a href=“https://www.google.com”>google</a>
<a href=“./demo.html” >打开本地文件</a>

2. 锚点

锚点链接可以实现: 跳转到网页中的具体位置 --- 也就是在同一个页面之间进行跳转

锚点链接有两个重要步骤:

在要跳到的元素上定义一个id属性
定义a元素，并且a元素的href指向对应的id

<!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>Document</title>

  <style>
    .theme {
      height: 600px;
    }
  </style>
</head>
<body>
  <!-- 以#开头 表示这是一个id -->
  <a href="#theme1">theme1</a>
  <a href="#theme2">theme2</a>
  <a href="#theme3">theme3</a>

  <div id="theme1" class="theme">
    <h2>theme1</h2>
  </div>
  <div id="theme2" class="theme">
    <h2>theme2</h2>
  </div>
  <div id="theme3" class="theme">
    <h2>theme3</h2>
  </div>
</body>
</html>

3. 其它URL地址

在之前的例子中，a元素的href属性所对应的文件都是html文件，即使是远程URL地址，其默认也是去请求对应的index.html文件

其实a元素的href属性中，也可以跟上一些其它的URL地址

<!--
	当a标签的href属性可以打开的时候，如音视频(其格式可以在浏览器中进行播放)，网页等
	那么a链接会按照预先设置的打开方式去打开对应的资源
-->
<a href="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4" target="_blank">在新窗口播放视频</a>

<!--
	如果是一些特殊的协议头，那么会执行特殊的操作
	如mailto 就是打开系统自带的邮件应用 准备进行发送邮件操作
-->
<a href="mailto:example@gmail.com">example@gmail.com</a>
<a href="tel:1234-5678-9999">拨号</a>   
<a href="sms:1234-5678-9999">发短信</a>

<!-- 
	如果浏览器无法打开href中对应的资源，那么浏览器会自动下载这些资源到本地
-->
<a href="https://github.com/coderwxf/vue3-ts-cms/archive/refs/heads/main.zip">下载zip包</a>

iframe

<!--
  iframe的主要作用是 在一个html网页中打开另一个html网页
  iframe 目前使用越来越少 不推荐经常使用
-->

<!--
  在下边的例子中 只有taobao是可以正常通过iframe进行嵌入的
  另外两个例子是无法正常通过iframe进行嵌入的
  这是因为在另外两个网站的html页面的响应头中有如下响应头
  x-frame-options: SAMEORIGIN
  也就是只有同源网页才可以在自己页面中使用iframe嵌入当前网页
-->

<!-- 
	默认情况下。ifram有默认的宽度和高度 
	我们可以使用width属性和height属性来修改iframe的宽高
-->
<iframe src="http://www.taobao.com" width="600" height="800" frameborder="0"></iframe>
<iframe src="http://www.mi.com" width="600" height="800" frameborder="0"></iframe>
<iframe src="http://www.google.com" width="600" height="800" frameborder="0"></iframe>

<!--
  frameborder 有2个值 0 | 1
  当值为0的时候， iframe没有外边框
  当值为1的时候，iframe有外边框 这也是默认值
-->
<iframe src="http://www.taobao.com" width="600" height="800" frameborder="0"></iframe>
<iframe src="http://www.mi.com" width="600" height="800" frameborder="1"></iframe>

iframe和a结合

a元素target的值:

_parent:在父窗口中打开URL --- 在父级iframe中打开
_top:在顶层窗口中打开URL --- 如果存在多级嵌套的iframe的时候，在顶层的iframe中打开
_self: 在网页自身打开
_blank: 在新标签页中打开

div 和 span

在HTML中有两个特殊的元素 （div元素、span元素）

div元素: division，分开、分配的意思;
span元素: 跨域、涵盖的意思;

网页的发展早期是没有css，这个时候我们必须通过语义化元素(所谓语义化标签就是用正确的元素去做正确的事情)

来告知浏览器一段文字如何显示，所以在这个阶段出现了类似于strong,em等之类的一系列标签

但是随着操作样式的标签越来越多，用于定义网页结构的标签和用来设置样式的标签越来越难以区分和管理

于是提出了2个纯粹的容器，或者说是2个盒子，他们就是div和span

其余的所有元素都可以看成是在div和span的基础上添加对应的样式

元素	描述
div	块级元素独占一行一般作为其他元素的父容器，把其他元素包住，代表一个整体可以用于把网页分割为多个独立的部分
span	行内元素默认宽高和包裹的内容一致默认情况下，跟普通文本几乎没差别可以结合样式来区分特殊文本和普通文本，比如用来显示一些关键字

全局属性

某些属性只能设置在特定的元素中 ( 比如img元素的src、a元素的href )

也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为 “全局属性(Global Attributes)”

属性名	描述
id	定义`唯一标识符(ID)`，该标识符在整个文档中`必须是唯一`的其目的是在链接(使用片段标识符也就是锚点)，脚本或样式(使用 CSS)时标识元素
class	一个以`空格分隔`的元素的`类名(classes )列表` 允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素;
style	给元素添加内联样式
title	包含表示与其所属元素相关信息的文本这些信息通常可以作为提示呈现给用户，但不是必须的

HTML不常见元素

元素	作用
strong	内容加粗、强调
i	内容倾斜开发中偶尔会用它来做字体图标
em	表现效果为文本倾斜，具有强调的语义化效果如果的确需要在语义上表示某些文本是重要的时候，可以使用此标签
code	用于呈现一段计算机代码其中的字体可以会被替换为等宽字体，也就是每一个字符的宽度是一致的但是使用code标签表示的内容一般为单行代码，在显示多行代码的时候推荐使用pre标签因为code标签默认情况下会折叠空格和换行 code标签可以看成是设置了`font-family: monospace;` 的div元素
pre	用于表示预定义格式文本，在该元素中的文本通常按照原文件中的格式进行编排 1. 其中的字体可以会被替换为等宽字体 2. 换行和空格都会保留，并不会折叠，也就是保留文本内容原本的格式 3. 所以pre标签可以看成是设置了`font-family: monospace; white-space: pre;`的div元素
br	换行元素

额外知识补充

字符实体

字符实体是一系列类似于&实体名称;或&#实体编码;的字符串

使用字符实体我们可以来表示HTML中的一些

保留字符（也就是那些在html中有特殊含义的字符，如小于符号，大于符号等）
不可见字符（HTML在解析的时候，默认会将多个换行和多个空格进行合并，解析为一个空格 --- 这样的行为被称之为空格合并）
其他难以用标准键盘键入的字符 (例如版权符号，商标符号等)

URL

URL 代表着是统一资源定位符(Uniform Resource Locator)

URL 无非就是一个给定的独特资源在 Web 上的地址

理论上说，每个有效的 URL 都指向一个唯一的资源

这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等

URL的标准格式如下

# 只有协议类型和访问器地址是必填的，其余都是可以省略的
# 端口号 默认不填 即为80
[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

URL URN URI

URI = URN + URL

URI = Uniform Resource Identifier 统一资源标志符，用于标识 Web 技术使用的逻辑或物理资源。

URL = Uniform Resource Locator 统一资源定位符，俗称网络地址，相当于网络中的门牌号

URN = Uniform Resource Name 统一资源名称, 通过唯一的名称来定义web中的资源，是对URL的补充

元素语义化

所谓元素语义化就是使用正常的元素做正确的事情

默认情况下 span元素是没有任何样式的元素, 而div元素本质上是加上了display;block样式的span元素

也就是说任何的html元素都可通过加上对应的css样式来实现其它html标签需要实现的功能

如我们可以通过给div添加对应的样式来实现 h2标签的效果

但是全部使用div和span元素来实现元素布局必然是十分麻烦的，而且不利于阅读和维护

所以我们在实际编写的时候，需要注意元素语义化，也就是使用正常的元素去做正确的事情

标签语义化的好处

方便代码维护, 减少让开发者之间的沟通成本
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
有利于SEO

SEO

搜索引擎优化(英语:search engine optimization，缩写为SEO)是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内的排名及权重

合理的使用标签语义化有助于爬虫理解我们的网页，更好的解析和收录我们的网站

而全部使用div和span编写的网站将不利于爬虫去分析对应元素的权重和结构

而随意乱用语义化标签，会导致搜索引擎将我们的网站识别为K站(也就是作弊的网站)而取消收录

抓取：google，必应等搜索引擎网站，会使用名为“抓取工具”的自动程序搜索网络(爬虫)，以查找新网页或更新后的网页。搜索引擎网站会将这些网页的地址（即网址）存储在一个大型列表中，以便日后查看。
编入索引：搜索引擎网站会访问它通过抓取得知的网页，通过分析网页中的内容（html）、资源文件（如图片和视频文件）等来识别网站的主要内容，并为此建立索引
呈现搜索结果：当用户在搜索引擎上进行搜索时，搜索引擎会尝试确定最优质的搜索结果。“最佳”结果取决于许多因素，包括用户的位置、语言、设备（桌面设备或手机）以及先前用过的搜索查询等。例如，在用户搜索“自行车维修店”后，Google 向巴黎用户显示的答案与向香港用户显示的答案有所不同。

字符编码

计算机一开始发明出来时是用来解决数字计算问题的，后来人们发现，计算机还可以做更多的事，例如文本处理。

但计算机只“认识”010110111000...这样由0和1两个数字组成的二进制数字

这是因为计算机的底层硬件实现就是用电路的开和闭两种状态来表示0和1两个数字的

因此，计算机只可以直接存储和处理二进制数字

所以为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制数字

而将字符转换为二进制的过程被称之为编码（encode）

将二进制转回字符的编码被称之为解码（decode）

常见的字符编码	描述
ASCII码	最早的编码只能对英文进行编码
GB2312	简体中文的编码方式
GBK	简体中文 + 繁体中文的编码方式
Unicode	一种想法用于将全世界所有的语言进行统一的编码具体的实现有UTF-8/UTF-16/UTF-32 使用最多的是UTF-8 其是一个可变长编码，会根据字符的不同采用1~4位来进行存储