Html-基础

HTML

全称是 HyperText Markup Language，即超文本标记语言，它不是编程语言，而是一种用来告知浏览器如何组织页面的标记语言，用来描述网页的表现，展示效果或功能及行为。

超文本(hypertext) 是指连接单个网站或多个网站网页的链接
HTML 使用标记(markup) 来注明文本、图片和其它内容
HTML 通过标签(tag)标记元素，标签由在<和>中包裹的元素名组成
HTML 标签里的元素名不区分大小写

实体

需要在网页中书写特殊的符号，则需要使用 html 中的实体（转义字符）

实体的语法：&实体的名字;

常见的实体：

&nbsp;: 空格
&gt;: >
&lt;: <
&copy;: 版权符号
&quot;: "
&apos;: '
&amp;: &

文档声明

告诉浏览器当前网页的版本
html5 的文档声明:
1
<!Doctype HTML>

进制

十进制（日常使用）

特点：满 10 进 1
单位数字：10个（0-9）

二进制（计算机底层的进制）

特点：满 2 进 1
计数：0 1 10 11 100 101 110 111
单位数字：2个（0-1）
扩展：
- 所有数据在计算机底层都会以二进制的形式保存
- 将内存想象为一个有多个小格子组成的容器，每个小格子中存储一个 1 或一个 0,这个小格子在内存中被称为 1 位（bit）
- 换算：
  - 8bit = 1byte(字节)
  - 1024byte = 1kb(千字节)
  - 1024kb = 1mb(兆字节)
  - 1024mb = 1gb(吉字节)
  - 1024gb = 1tb(特字节)
  - 1024tp = 1pb

八进制

特点：满 8 进 1
单位数字：8 个（0-7）

十六进制(一般显示一个二进制数字时，都会转换为十六进制)

特点：满 16 进 1
计数：0 1 2 … 9 a b c d e f 10 11 12 …19 1a 1b 1c 1d 1e 1f 20
单位数字：16 个（0-f）

字符编码

所有数据在计算机中存储时都是以二进制形式存储的，文字也不例外。
而计算机会将编码转换为字符，供我们阅读

编码

将『字符』转换为『二进制』码的过程

解码

将『二进制』码转换为『字符』的过程

字符集（charset）

编码和解码所采用的规则

乱码问题：

如果编码和解码所采用的字符集不同就会出现乱码问题

常见的字符集：

ASCII
ISO88591
GB2312
GBK
UTF-8，在开发时我们使用的字符集都是 UTF-8

head 的内容

元数据：元素

meta: 可提供有关某个 HTML 元素的元信息，比如描述、针对搜索引擎的关键词以及刷新频率
charset：指定网页的字符集
1
<meta charset="utf-8" />
name：指定 meta 元素的类型，说明该元素包含的信息。
- keywords：表网站的『关键字』，可以同时指定多个关键字，使用,隔开，SEO相关
- description：规定页面的『描述』。搜索引擎会把这个描述显示在搜索结果中，SEO相关
- application-name：规定页面所代表的 Web 应用程序的名称。
- author：规定文档的作者的名字。
content：指定的实际的数据内容
http-equiv：设置或者返回 content 属性中 HTTP 头部信息
- content-type：返回内容的 MIME 类型，通常用于字符集的设置。
- refresh：定义间隔多久后刷新页面

示例：

1
2
3

<meta name="keywords" content="HTML5,前端,CSS3">
<meta http-equiv="refresh" content="300"> // 定义间隔多久后刷新页面。
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> // 重定向火狐

title 标签

内容会作为搜索结果的超链接上的文字显示

表象元素

概念：仅仅影响表象而且没有语义的元素
i标签：被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
b标签：被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
u标签：被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

标签的属性

在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
如果有属性值，属性值应该使用引号引起来

语义化标签

语义对无障碍、SEO（搜索引擎优化）等非常重要

标题标签

h1 ~ h6标签
- 代表分别从一级标题到六级标题
- 从 h1~h6 重要性递减，h1 最重要，h6 最不重要
- h1 在网页中的重要性仅次于 title 标签，一般情况下一个页面中只会有一个 h1
- 一般情况下标题标签只会使用到 h1 ~ h3，h4 ~ h6 很少用
- 标题标签都是块元素
hgroup标签
- 为标题分组，可以将一组相关的标题同时放入到 hgroup
p标签
- 表示页面中的一个段落
- p 标签也是一个块元素
em标签(倾斜): 用于表示语音语调的一个加重
strong标签(加粗): 表示强调，重要内容！
blockquote标签: 表示一个长引用
q标签: 表示一个短引用
br标签: 表示页面中的换行

块元素和行内元素

『块元素』(block element)：在页面中独占一行的元素
- 在网页中一般通过块元素来对页面进行布局
『行内元素』(inline element)：在页面中不会独占一行的元素
- 行内元素主要用来包裹文字
注：
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p 元素中不能放任何的块元素
- 浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正

布局标签（结构化语义标签）

header标签：表示网页的头部
main标签：表示网页的主体部分(一个页面中仅一个)
footer标签：表示网页的底部
nav标签：表示网页中的导航
aside标签：和主体相关的其他内容（侧边栏）
article标签：表示一个独立的文章
section标签：表示一个独立的区块，上边的标签都不能表示时使用 section
div标签：无语义，表示一个盒子，主要的布局元素
span标签：行内元素，无语义，用于在网页中选中文字

列表

在 html 中也可以创建列表，html 列表一共有三种：
1. 有序列表
  - 使用ol标签来创建有序，带编号列表
  - 使用 li 表示列表项
2. 无序列表
  - 使用ul标签来创建无序列表
  - 使用 li 表示列表项
3. 定义列表
  - 使用 dl 标签来创建一个定义列表
  - 使用 dt 来表示定义的内容
- 使用 dd 来对内容进行解释说明
列表之间可以互相嵌套

超链接

可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

使用 a 标签来定义超链接
属性：
- href 属性
  - 作用：指定跳转的目标路径
  - 值
    - 当值为『javascript:;』,点击这个超链接什么也不会发生
    - 当值为『#』,可以跳到当前页面的顶部的位置
    - 当值为『#目标元素的id属性值』,可以跳转到页面的指定位置
- target 属性
  - 作用：用来指定超链接打开的位置
  - 可选值：
    - _self：默认值，在当前页面中打开超链接
    - _blank：在一个新的页面中打开超链接
- id 属性（唯一不重复的）
  - 每一个标签都可以添加一个 id 属性
  - id 属性就是元素的唯一标识，同一个页面中不能出现重复的 id 属性
行内元素，在 a 标签中可以嵌套除它自身外的任何元素

相对路径

跳转一个服务器内部的页面时，一般使用相对路径
相对路径都会『使用./或../开头』
『./』：表示『当前文件所在的目录』,可以省略不写
『../』：表示『当前文件所在目录的上一级目录』

常用的例子

// 绝对URL
<a href="https://www.baidu.com">超链接</a>
<a href="07.列表.html">超链接2</a>
// 相对URL
<a href="./target.html">超链接1</a>
<a href="../07.列表.html">超链接2</a>
// 值为javascript:;，点击无效果
<a href="javascript:;">这是一个新的超链接</a>
// 点击在标签中打开新的页面
<a href="07.列表.html" target="_blank">超链接</a>
// 跳到页面容器id为#bottom的位置
<a href="#bottom">去底部</a>
// #回到顶部
<a id="bottom" href="#">回到顶部</a>

图片标签

作用：向当前页面中引入一个外部图片
使用 img 标签来引入外部图片，img 标签是一个自结束标签
img 这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

img 的属性：

src：属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
搜索引擎会根据 alt 中的内容来识别图片，如果不写 alt 属性则图片不会被搜索引擎所收录
width：图片的宽度 (单位是像素)
height：图片的高度 (单位是像素)
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
loading：指定浏览器是应立即加载图像还是延迟加载图像。
- eager：立即加载
- lazy：延迟加载
注意：
- 一般情况在 pc 端，不建议修改图片的大小，需要多大的图片就裁多大
- 但是在移动端，经常需要对图片进行缩放（大图缩小）
- 如果是纯图片页面, 如果不固定图片的宽高,当刷新时所有元素宽高都为0会导致所有图片都在可视区域,导致加载慢

图片的格式：

jpeg(jpg) – 有损压缩，最流行
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
png – 无损静态图像首选
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
apng
- 动态可移植网络图形
- 是无损动画序列的良好选择（GIF 性能较差）。AVIF 和 WebP 性能更好，但浏览器支持较少
avif
- AV1 图像档案格式
- 性能高，且无需版税。支持静态图像，与 PNG 或 JPEG 相比，它的压缩效果更好。
- 请注意，在使用 AVIF 时，应包含浏览器支持更好的回退格式（即要使用 picture标签元素）
svg
- 可缩放矢量图形
- 适用于用户界面元素、图标、图表等
base64
- 将图片使用 base64 编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用 base64
示例：
1
<img src="./img/1.gif" alt="松鼠">

aspect-ratio

控制容器的宽高比，避免产生布局偏移及抖动

示例:

// 原始方法: 每个图片给都一个固定宽高
ul li img {
  width: 150px;
  height: 100px;
}

// 应用aspect-ratio, 跟上面的样式一样,保持了宽高比
ul li img {
  width: 150px;
  aspect-ratio: 3/2; 
}

// 如果宽度是动态的也适用, 将宽度平分为三个, 且保持宽3,高2的比例
ul li img {
  width: 100%;
  aspect-ratio: 3/2; 
}

object-fit

设定内容应该如何适应到其使用高度和宽度确定的框，避免图片拉伸
值:
- fill(把图片压扁到能填充容器宽高,会有拉伸),
- none(直接把图片放进去,多余裁掉,只有一个方向填满),
- contain(把图片完整放进容器,图片可能会缩小,只有一个方向填满),
- cover(图片居中显示,宽高都填满, 多余裁掉的, 为了填充图片会等比例放大)

object-fit

配套: object-position
- 基于 object-fit，设置图片实际展示的 position 范围
- 默认 50% 50%

image-rendering

设置图片在缩放状态下的展示算法
举例: 图片 100*100 放大后会模糊, 修改image-rendering会清晰
值:
- auto: 默认, 使用Geko使用双线性(bilinear)算法进行重新采样 — 放大模糊
- smooth: 使用能最大化图像客观观感的算法来缩放图像 — 放大模糊
- high-quality: 与smooth相同,但更倾向于高质量的缩放
- crisp-edges: 适用于像素艺术作品，例如一些网页游戏中的图像
- pixelated: 放大图像时,使用最近邻居算法,因此图像看着像是由大块像素组成的.缩小图像时,与auto相同 — 放大清晰
浏览器目前只支持: auto, pixelated,-webkit-optimize-contrast(Chrome 下的 smooth)

图片的懒加载

JS方案实现图片的懒加载
- 方案1: 监听onscroll时间,通过getBoundingClientRect API 获取元素图片距离视口顶部的距离,配合当前可视区域的位置实现图片的懒加载
- 方案二: 通过HTML5的 IntersectionObserver API, Intersection Observer(交叉观察器) 配合监听元素的isIntersecting属性,判断元素是否在可视区内,能够实现比监听onscroll性能更佳的图片懒加载方式
使用 content-visibility: auto; 实现图片内容的延迟渲染
- 该属性控制一个元素是否渲染其内容,它允许用户代理(浏览器)潜在的省略大量布局和渲染工作,直到需要它为止
- 可以实现如果该元素当前不在屏幕上，则不会渲染其后代元素
- 效果:
  - 图片的外部容器应用content-visibility属性,然后不断滚动无数这个容器
  - 向下滚动时如果图片没渲染出来,则滚动条会回弹,每次滚动时图片逐渐渲染,图片还没渲染出来所以滚动不下去
  - 快速滚动下去时感觉就是一卡一卡的
- 缺点: 无法直接替代图片懒加载，设置了该属性的元素在可视区外只是未被渲染，但是其中的静态资源(接口请求)仍旧会在页面初始化的时候被全部加载。因此，它更像是一个虚拟列表的替代方案。
使用loading=lazy HTML属性实现图片懒加载
- 可以延迟加载
- 可以添加到 img标签或 iframe标签
- 设置该属性会告诉浏览器,如果图像位于可视区域时,会立即加载图像,并在用户滚动到它们附近时获取其他图像
- 示例:
  1
  <img src="xxx.png" loading="lazy">
使用decoding=async 实现图片的异步解码
- 用于告诉浏览器使用何种方式解析图像数据
- 值:
  - sync: 同步解码图像,保证与其他内容一起显示
  - async: 异步解码图像, 加快显示其他内容
  - auto: 默认,由浏览器决定使用那种解码方式
  - 当不希望图片的渲染解码影响页面的其他内容的展示时使用异步
- 示例:
  1
  <img src="xxx.png" decoding="async" >
loding 和 decoding 一起用效果更佳

图片的可访问性处理

所有有意义的img元素必须有alt属性
提供替代alt属性的其他方式: 使用 WAR-ARIA 规范提供的诸如 aria-label 和 aria-labelledby 属性为图像提供可访问的名称。
- WAI-ARIA 是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。
- tabindex 属性控制元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航
- role 属性，来标识元素的语义及作用，譬如在容器上使用role=”button”来模拟一个按钮
- aria-* 属性，表示元素的属性或状态
- 存在这些属性时,会忽略alt属性
使用辅助技术隐藏装饰图像
- 使用alt=””
- 使用aria属性 role=”presentation” 标明元素是装饰可忽略图片
- 使用CSS background的方式呈现这些图片

图片的异常处理

利用图片加载失败,触发img标签的onerror事件,给加载失败的 img 元素新增一个样式类
利用新增的样式类,配合img 元素的伪元素,在展示默认兜底图的同时,还能一起展示 img元素的alt属性

示例:

<img src="test.png" alt="加载失败" oneror="this.classList.add('error')" >
img.error{
  position: relative;
  display: inline-block;
}

img.error::before {
  content: '';
  background: url(error-default.png);
}

img.error::after {
  content: attr(alt);
}

参考

音视频

audio 标签

支持 ie9 以上
用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
- controls: 是否允许用户控制播放
- autoplay: 音频文件是否自动播放
  - 如果设置了 autoplay 则音乐在打开页面时会自动播放
  - 但是目前来讲大部分浏览器都不会自动对音乐进行播放
- loop: 音乐是否循环播放
除了通过 src 来指定外部文件的路径以外，还可以通过 source 来指定文件的路径,使用 source 最好指定源是什么 type

示例：

<audio controls>
	<!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
	<source src="./source/audio.mp3">
	<source src="./source/audio.ogg">
	<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>

video 标签

支持 ie9 以上
向网页中引入一个视频
属性:
- controls: 是否允许用户控制播放
- autoplay: 音频文件是否自动播放
  - 如果设置了 autoplay 则音乐在打开页面时会自动播放
  - 但是目前来讲大部分浏览器都不会自动对音乐进行播放
- loop: 音乐是否循环播放
- width | height: 播放器宽高
- poster: “url”: 加载等待的画面图片
- muted: 静音播放

示例：

<video width="300" height="150" controls loop></video>
<video controls>
	<source src="./source/flower.webm">
	<source src="./source/flower.mp4">
	<embed src="./source/flower.mp4" type="video/mp4">
</video>

Html-基础

UUOVO

HTML

实体

文档声明

进制

十进制（日常使用）

二进制（计算机底层的进制）

八进制

十六进制(一般显示一个二进制数字时，都会转换为十六进制)

字符编码

编码

解码

字符集（charset）

乱码问题：

常见的字符集：

head 的内容

元数据：元素

title 标签

表象元素

标签的属性

语义化标签

标题标签

块元素 和 行内元素

布局标签（结构化语义标签）

列表

超链接

相对路径

常用的例子

图片标签

img 的属性：

图片的格式：

aspect-ratio

object-fit

image-rendering

图片的懒加载

图片的可访问性处理

图片的异常处理

参考

音视频

audio 标签

video 标签

其他文章

Html-盒子布局

Html-元素布局篇

块元素和行内元素