HTML回顾
html全称：HyperText Markup Language（超文本标记语言）
注重标签语义，而不是默认效果
规则
块级元素包括: marquee、div等
行内元素包括: span、input等
规则1：块级元素中能写：行内元素、块级元素（几乎什么都能写）
规则2：行级元素中能写：行内元素，但不能写：块级元素
规则3：标签内编写多个同名属性，后面的会失效，也就是说只有第一个生效
特殊规则：h1~h6不能互相嵌套
特殊规则：p标签中不能写块元素（未过时的）
特殊规则：a标签中不能写a标签
文本标签
图片标签与常见的图片格式
-
jpg 格式
一种有损的压缩格式
支持的颜色丰富、占用空间小、不支持透明背景、不支持动态图 -
png 格式
一种无损的压缩格式
支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图 -
bmp 格式
一种不进行压缩的格式
支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图 -
gif 格式
仅支持256种颜色，色彩呈现不是很完整
支持的颜色较少、支持简单透明背景、支持动态图 -
webp 格式
谷歌推出的一种格式
具备以上几种格式的优点，但兼容性不太好。 -
base64 格式
- 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
- 原理：把图片进行 base64 编码，形成一串文本
- 如何生成：靠一些工具或网站
- 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
- 使用场景：一些较小的图片，或者需要和网页一起加载的图片。
超链接
- 在html代码里敲的多个回车或多个空格，只会被浏览器解析为一个空格
- 虽然 a 是行内元素，但 a 元素可以包裹除它自身以外的任何元素
- 跳转浏览器无法打开的文件，则会引导用户下载
- 若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称
跳转锚点
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接_跳转锚点</title>
</head>
<body><a href="#xyy">找喜羊羊</a><a href="#htl">找灰太狼</a><a href="#wk">找悟空</a><a href="#atm">找奥特曼</a><a href="#gs">找怪兽</a><a name="xyy"></a><p>我是喜羊羊</p><img src="./images/喜羊羊.jpg" /><a name="htl"></a><p>我是灰太狼</p><img src="./images/灰太狼.jpg" /><p id="wk">我是悟空</p><img src="./images/悟空.jpg" /><p id="atm">我是奥特曼</p><img src="./images/奥特曼.jpg" /><p id="gs">我是怪兽</p><img src="./images/怪兽.jpg" /><p>整体介绍完毕了</p><a href="#">回到顶部</a><a href="">刷新页面</a><a href="javascript:alert(666);">点我弹窗</a>
</body>
</html>
两种跳转锚点的办法（推荐使用第二种）
- a 标签的name