HTML学习笔记
1.认识HTML5骨架
(1) 文档类型声明
定义和用法
<!DOCTYPE>，位于标签之前。用于告诉浏览器此文档的类型是什么。目前开发中常用的声明是<!DOCTYPE html>，表示声明一个 HTML5 文档。
- 不写 DTD 会引发浏览器的一些兼容问题
- 不同版本的 HTML 有不同的 DTD 写法
- 它不属于 HTML 标签，而是一条指令。
HTML 4.01 与 HTML5 之间的差异
- 在 HTML 4.01 中，
<!DOCTYPE>声明引用DTD，因为 HTML 4.01 基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 - 在 HTML 4.01 中有三种 <!DOCTYPE> 声明。
- HTML4.01 严格版
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">- HTML4.01 过渡版
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">- HTML4.01 框架版
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> - 在 HTML5 中只有一种
<!DOCTYPE html>
<!DOCTYPE > 声明没有结束标签。
<!DOCTYPE > 声明对大小写不敏感。但建议使用 <!DOCTYPE html>
标准模式和怪异模式
现代的浏览器一般都有两种渲染模式：标准模式和怪异模式。当浏览器遇到正确的文档声明时，浏览器就会启动标准模式，按照制定的文档类型标准解析和渲染文档。而对于旧有的网页，由于网页编写的当时标准还没有确定，所以一般是不会有文档类型声明的。所以，对于没有文档类型声明或者文档类型声明不正确的文档，浏览器就会认为它是一个旧的HTML文档，就会使用怪异模式解析和渲染该文档。
(2) 网页的组成
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
| 标准 | 简介 | 描述 |
|---|---|---|
| 结构 | 用于对网页元素进行整理和分类，即当下学习的HTML | 网页的骨骼 |
| 表现 | 表现用户设置网页元素的排版、颜色、大小修饰等外观样式，即CSS | 网页的皮肤 |
| 行为 | 行为是指网页模型的定义、交互等编写，即要学习的JavaScript | 网页的神经 |
Web 标准提出的最佳体验方案：结构、样式、行为相分离，即：结构写在 HTML 文件中，表现写在 CSS 文件中，行为写在 JavaScript 文件中。
(3) 文档结构标签
<html>标签：每创建一个 HTML 文件，都需要创建html 标签对。除了声明文档类型的代码，其他的所有内容都存放在 html 标签对中。
<head>标签：定义文档的头部，用来包含网页的配置（例如网页的标题 title，网页的基础配置 meta 都放在 head 中）。
<title>标签：定义网页的标题，标题内容会显示在浏览器的标签栏上。
<body>标签：定义网页的主体，例如：网页中的图片、文字等。
(4) 元标签
<meta>元标签，用来表示网页的基础配置。
字符集charset
<meta charset="UTF-8" />
常见字符集
| 字符集 | 涵盖字符 | 适用场景 | 1个汉字所占用的字节 |
|---|---|---|---|
| UTF-8 | 涵盖全球所有国家、民族的文字和大量图形字符 | 开发有非汉字文字的网页 | 3 |
| gb2312（gbk） | 收录所有汉字字符（简体、繁体）和英语、少量韩文、日语和少量图形字符 | 开发只有汉语和英语的网页，由于 1 个汉字仅占 2 个字节，网页文件尺寸大小明显减少 | 2 |
*注意：
- GBK对GB 2312-80进行扩展。
- Live Serve 插件不支持 gb2312、gbk 字符集，只支持 UTF-8 字符集。
- 文件编码集与 meta 标签编码不一致网页会出现乱码
网页三要素
- title：网页的标题（30 字以内）。文字会显示在浏览器的标题栏上。title 也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理的标题设置有利于 SEO 优化
- keywords：网页的关键词（关键词之间用英文状态下的逗号 “,” 分隔）
- description：网页的描述（150 字以内）
SEO优化
SEO（Search Engine Optimization）即：搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。
meta 标签及属性的含义
X-UA-Compatible 是 IE8 的一个专有<meta>属性，它告诉 IE8 采用何种 IE 版本去渲染网页，在 html 的<head>标签中使用，IE8 以下版本不识别。
Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。
<!--IE8及以上的版本按照最新的标准去渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
最佳的兼容模式方案：
添加”chrome=1“ 将允许站点在使用了谷歌浏览器内嵌框架（Chrome Frame）的客户端渲染，对于没有使用的，则没有任何影响。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
viewport主要用作移动端适配。
width：用来设置 layout viewport 的宽度
device-width ：设置成设备的实际宽度
initial-scale=1.0 ：防止浏览器对页面进行缩放 1:1 显示，即不缩放。initial-scale初始缩放比例
minimum-scale: 允许用户缩放到的最小比例。
maximum-scale: 允许用户缩放到的最大比例。
user-scalable: 用户是否可以手动缩放。
VSCode生成以下代码快捷键 ：html:5
<!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>我是网页的标题</title>
</head>
<body>
</body>
</html>
(5) HTML
什么是HTML
HTML(Hyper Text Markup Language)是超文本标记语言，它不是一种编程语言，HTML使用标记标签来描述网页。
超文本有两层含义：一、它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。二、它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
HTML 标签是由尖括号包围的关键词，如<html>。HTML标签通常是成对出现的，比如 。标签对中的第一个标签是开始标签，第二个标签是结束标签。
2. HTML常用标签
(1) 标题标签
h1~h6：一级标题 ~ 六级标题
<h1></h1>标签的内容对于搜索引擎来说非常重要，相当于一篇文章的标题（主题）应该将当前页面最重要的内容放到<h1></h1>标签中。
<h1></h1>标签在一个网页中只能放置一个，否则会被搜索引擎视为作弊。
h 标签在 SEO 优化中的设置技巧
1. 不同类型页面的设置
- 首页：网站首页的 h1 通常是网站 logo，强调 alt 的内容，而 alt 属性是网站首页标题，包含核心关键词，h2 标注分类页面，h3 标注内容页面标题链接。
- 列表页（栏目页）：h1 设置为分类名称，h2 是子分类名称，h3 设置为内容页面标题链接。
- 内容页（产品详情页、文章页）：h1 设置文章标题名称，h2 标注列表名称，h3 标注相关文章。
2. h标签应包含关键词
- h标签是一个强调性的标签，因此，h1 标签中，必须包含核心关键词，h2、h3 标签可以适当的包含长尾关键词
3. 页面 H 标签的数量。
- 一个页面上只能有 1 个 h1 标签，可以包含不等的 h2-h6 标签。从结构化的角度看，有 h3 就要有 h1、h2。
(2) 段落标签
中。
<p></p>标签表示段落标签。任何段落都要放到 p 标签中，因为 HTML 代码中即使代码换行了，页面显示效果也不会换行，必须写在
*<p></p>标签中不能嵌套块级元素，如 h 标签 和 其他 p 标签，只能嵌套内联元素。
(3) div标签
标签 是用来将相关内容组合到一起，以和其他内容分隔，使文档结构更清晰比如：一般网页布局 头部，内容区，底部 都会通过 div 进行分隔
(4)列表
1. 无序列表
无序列表是使用
<ul></ul>标签包裹列表项<li></li>构成的，不能单独出现
*无序列表使用场景
- 导航栏
- 各种页面 list 列表
2. 有序列表
有序列表是使用
<ol></ol>标签标签包裹列表项<li></li>构成的，特性和无序列表相同
ol 标签属性
type属性，用来设置编号的类型，如：英文字母序号，罗马数字编号。start属性，用设置起始序号，但它的值必须是一个阿拉伯整数。reversed属性，用来指定列表中的条目是否是倒序排列的，想要设置倒序列表只需要写 reversed 单词即可
3. 定义列表
需要逐条给出定义描述的列表，就是定义列表。定义列表使用
<dl></dl>标签，是英文单词definition list（定义列表） 缩写。
<dt></dt>标签，是英文单词 data term（数据项）缩写
<dd></dd>标签，是英文单词 data definition (数据定义)缩写
<dd></dd>标签内容是对<dt></dt>标签的解释说明
(5) 多媒体标签
1. 图片标签img
<img>标签用来在网页中插入图片
src属性用来表示图片的存储目录和完整的文件名
alt属性是英语 alternate（代替者）缩写，对图像的文本描述，不强制。若由于某种原因无法加载图像，浏览器会在页面上显示 alt 属性中的备用文本。供视力不方便的用户使用的网页朗读器，也会朗读 alt 中的文本。对于搜索引擎优化友好，告诉搜索引擎图片的含义，利于搜索引擎爬虫抓取
<img src="images/example.png" alt="示例" />
网页上支持的图片格式
| 支持格式 | 描述 |
|---|---|
| .bmp | Windows 画图软件默认保存的格式，位图 |
| .jpeg（.jpg） | 有损压缩图片，通常用于照片显示 |
| .png | 便携式网络图像，用于 logo，背景图形等。支持透明和半透明 |
| .gif | 动画 ，如：表情包 |
| .svg | 矢量图片 |
| .webp | 最新的压缩算法，非常优秀的图片格式 |
相对路径和绝对路径
相对路径： 从当前目录出发，要找到图片的路径就叫 相对路径。
../表示回退上一级目录
./表示当前目录
绝对路径： 描述文件或文件夹的精准完整地址。
2. 超链接
<a></a>是实现链接跳转的方法。
href属性，用来设置跳转地址。title属性用户设置鼠标的悬停文本。target属性，用来设置跳转链接是在当前页面进行还是打开新窗口。_blank实现在新窗口中打开网页，_self是默认值，实现当前页面跳转。页面锚点
对于很长的页面，可以对应的标签添加
id属性，将它变成页面的 “锚点”。当点击锚点连接时，浏览器地址栏就会出现#id属性名称 页面就会自动滚动到锚点处。从其他页面页面点击带#号的链接，就可以直接定位到锚点位置在 HTML5 中 直接使用
#top即可回到顶部，不用定义id="top"。特殊链接（下载、邮件、电话）
- 下载链接
指向 exe、zip、rar、word、excel 等文件格式的链接，将自动成为下载链接。- 邮件链接
在herf属性中使用mailto:xxx@xxx.com系统将自动打开 email 相关软件，即可发送邮件
<a href="mailto:abcd@126.com">发邮件</a>
电话链接
在herf属性中使用tel:12345678900系统将自动打开手机拨号键。
<a href="tel:12345678900">拨号</a>
3. 音频和视频
- 音频
<audio></audio>标签可直接在网页中插入音频，并自动生成默认的编辑器。
controls属性 ，显示播放空间src音频路径标签对中填写对不兼容 audio 标签的浏览器所显示的文字。autoplay音频自动播放，不会等待整个音频文件下载完成。无需写属性值。loop循环播放音频。无需写属性值。<source/>标签为媒体元素定义媒体资源，该标签允许定义多个格式的音视频文件，供浏览器选择自己支持的媒体类型进行播放。
Format MIME-type 描述 MP3 audio/mpeg 一种音频压缩技术，用来大幅度的降低音频数据量 Ogg audio/ogg 一种新的音频压缩格式，是完全免费、开发和没有专利限制的 Wav audio/wav 微软公司开发的一种声音文件格式，声音文件质量和 CD 相差无几 浏览器需要选择它支持格式的源文件进行播放，如果都支持则任选一个（默认选择第一个）
浏览器中常用的音频格式：mp3 和 ogg 格式。
- 视频
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
