HTML
全称是 HyperText Markup Language，即超文本标记语言，它不是编程语言，而是一种用来告知浏览器如何组织页面的标记语言，用来描述网页的表现，展示效果或功能及行为。
- 超文本(hypertext) 是指连接单个网站或多个网站网页的链接
- HTML 使用标记(markup) 来注明文本、图片和其它内容
- HTML 通过标签(tag)标记元素，标签由在<和>中包裹的元素名组成
- HTML 标签里的元素名不区分大小写
实体
需要在网页中书写特殊的符号，则需要使用 html 中的实体（转义字符）
- 实体的语法：&实体的名字;
- 常见的实体：
空格>><<©版权符号"“'‘&&
文档声明
- 告诉浏览器当前网页的版本
- html5 的文档声明:
<!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：指定网页的字符集
<meta charset="utf-8" /> - name：指定 meta 元素的类型，说明该元素包含的信息。
- keywords：表网站的关键字，可以同时指定多个关键字，使用,隔开，SEO相关
- description：规定页面的描述。搜索引擎会把这个描述显示在搜索结果中，SEO相关
- application-name：规定页面所代表的 Web 应用程序的名称。
- author：规定文档的作者的名字。
- content：指定的实际的数据内容
- http-equiv：设置或者返回 content 属性中 HTTP 头部信息
- content-type：返回内容的 MIME 类型，通常用于字符集的设置。
- refresh：定义间隔多久后刷新页面
- 示例：
<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 列表一共有三种：
- 有序列表
- 使用ol标签来创建有序，带编号列表
- 使用 li 表示列表项
- 无序列表
- 使用ul标签来创建无序列表
- 使用 li 表示列表项
- 定义列表
- 使用 dl 标签来创建一个定义列表
- 使用 dt 来表示定义的内容
- 使用 dd 来对内容进行解释说明
- 有序列表
- 列表之间可以互相嵌套
超链接
可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
- 使用 a 标签来定义超链接
- 属性：
- href 属性
- 作用：指定跳转的目标路径
- 值
- 当值为
javascript:;,点击这个超链接什么也不会发生 - 当值为
#,可以跳到当前页面的顶部的位置 - 当值为
#目标元素的id属性值,可以跳转到页面的指定位置
- 当值为
- target 属性
- 作用：用来指定超链接打开的位置
- 可选值：
- _self：默认值，在当前页面中打开超链接
- _blank：在一个新的页面中打开超链接
- id 属性（唯一不重复的）
- 每一个标签都可以添加一个 id 属性
- id 属性就是元素的唯一标识，同一个页面中不能出现重复的 id 属性
- href 属性
- 行内元素，在 a 标签中可以嵌套除它自身外的任何元素
相对路径
- 跳转一个服务器内部的页面时，一般使用相对路径
- 相对路径都会
使用./或../开头 ./：表示当前文件所在的目录,可以省略不写../：表示当前文件所在目录的上一级目录
常用的例子
1 | // 绝对URL |
图片标签
- 作用：向当前页面中引入一个外部图片
- 使用 img 标签来引入外部图片，img 标签是一个自结束标签
- img 这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
img 的属性：
- src：属性指定的是外部图片的路径（路径规则和超链接是一样的）
- alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
搜索引擎会根据 alt 中的内容来识别图片，如果不写 alt 属性则图片不会被搜索引擎所收录 - width：图片的宽度 (单位是像素)
- height：图片的高度 (单位是像素)
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
- loading：指定浏览器是应立即加载图像还是延迟加载图像。
- eager：立即加载
- lazy：延迟加载
- 注意：
- 一般情况在 pc 端，不建议修改图片的大小，需要多大的图片就裁多大
- 但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
- jpeg(jpg) – 有损压缩，最流行
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
- gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
- png – 无损静态图像首选
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
- webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- apng
- 动态可移植网络图形
- 是无损动画序列的良好选择（GIF 性能较差）。AVIF 和 WebP 性能更好，但浏览器支持较少
- avif
- AV1 图像档案格式
- 性能高，且无需版税。支持静态图像，与 PNG 或 JPEG 相比，它的压缩效果更好。
- 请注意，在使用 AVIF 时，应包含浏览器支持更好的回退格式（即要使用
<picture>元素）
- svg
- 可缩放矢量图形
- 适用于用户界面元素、图标、图表等
- base64
- 将图片使用 base64 编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用 base64
- 示例：
<img src="./img/1.gif" alt="松鼠">
音视频
audio 标签
支持 ie9 以上
用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
- controls 是否允许用户控制播放
- autoplay 音频文件是否自动播放
- 如果设置了 autoplay 则音乐在打开页面时会自动播放
- 但是目前来讲大部分浏览器都不会自动对音乐进行播放
- loop 音乐是否循环播放
除了通过 src 来指定外部文件的路径以外，还可以通过 source 来指定文件的路径,使用 source 最好指定源是什么 type
示例：
1
2
3
4
5
6<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 静音播放
- 示例：
1
2
3
4
5
6<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>
