一.第一个网页
Emmet插件：自动生成HTML代码片段
（输入一个！直接按回车会自动生成一个代码，代码写在body中间）
1. 注释
为代码的阅读者提供帮助（后面的超链接就是注释，仅仅为让读者可以看的更明白），注释不参与运行
在HTML中注释使用以下格式书写：
<!--注释内容-->
也可以按住键盘的Ctrl键加斜杆（问号处），先写出注释内容，然后按一下变注释，再按一下返回原样，也可以先按在写注释内容。注释可以写多行。
2.元素（官方称呼）
其它叫法：标签，标记。
<a href="http://www.duyiedu.com">渡一教育</a>
<title>Document</title>
元素=起始标记(begin tag)+结束标记+元素内容+元素属性
详解：
1.结束标记：需要和起始标记一样，多一个斜杠/
2.元素内容：你要在页面上显示的东西（上面的渡一教育和Document）
//超文本：可以连接到其他地方的文本，上述代码中的a（链接到其他文档）
//起始和结束标记决定元素名字，不同元素有不同元素的功能，a元素和title元素，上面代码中第一个元素是一个超链接，第二个表示一个标题（显示在网页名字的小标签处）
3.元素属性：描述额外信息（不是必须写）
a.属性=属性名+属性值
b.属性的分类：
-局部属性：某些元素特有的属性，href表示链接地址（a元素特有）
-全局属性：所有元素通用
（h1 表示一级标题，属性加到起始标记里面）
<meta charset="UTF-8">
有些元素没有结束标记，这样的元素叫做空元素比如img元素
空元素的两种写法：
1.<meta charset="UTF-8">
2.<meta charset="UTF-8"/>(/闭合标记，这是老版本写法，已经不需要)```
3.元素的嵌套
1.元素不能相互嵌套
正确
<div>
<p></p>
</div>
错误
<div>
<p>
</div>
</p>
2.父元素，子元素，祖先元素，后代元素，兄弟元素
a.大一级父元素，大两级祖先元素
b.有相同父元素为兄弟元素
4.标准的文档结构
HTML：页面，HTML文档
1.文档声明
<!DOCTYPE html>
告诉浏览器当前文档使用的HTML标准是HTML5.
不写文档声明浏览器进入怪异渲染模式。
2.根元素
<html lang="en">
</html>
一个页面最多一个，并且该元素是所有元素的父元素或祖先元素（将所有元素包起来），html5中也可以省略。
lang属性：language，全局属性表示该元素内部使用的文字是哪种语言自然语言书写而成的。
en表示英文，zh-CN，cmn-hans表示中文，多用后面
3.文档头
<head>
</head>
文档头内部内容不会显示到页面上
a.meta元素
<meta>
文档的元数据：附加信息。
charset：指定网页内容编码（像一个字典，将网页的内容读出来）。
UTF-8：Unicode（万国码）编码一个版本（指定字符编码集）
b.其他
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
第一行为适配手机端，第二行解决IE问题（用edge内核）
4.网页标题
<title>Document</title>
5.文档体
<body>
</body>
页面上所有要显示的元素
！元素都是小写字母
二.语义化
1.什么是语义化
- 每一个html元素都有具体含义。
eg：a表示超链接，h1表示一级标题，p表示段落 - 所有元素与展示效果无关，元素展示到页面的效果应该由css决定
由于浏览器带有默认的css样式，所以每个元素有一些默认样式
（Ctrl+d选中相同的元素并进行修改）
重要：选择什么元素，取决于内容的含义，而不是显示出的效果
2.为什么需要语义化
- 为了搜索引擎优化（SEO）:是搜索引擎更好地理解网页
搜索引擎：百度，搜搜，谷歌，Bing。
每隔一段时间，搜索引擎会从互联网中抓取页面源代码（更好理解，存放到数据库）
2. 为了让浏览器理解网页
阅读模式，语音模式
三.文本元素
HTML5中支持的元素：html5元素周期表
h
h1-h6统称：表示一级标题到六级标题
（小技巧）1. Ctrl+enter可以直接切换下一行，Ctrl+shift+enter可以在上面多加一行。
2. h1*6+tap会生成六个h1
3.表示子元素{}表示里面是普通文本
<h1>*6>{1级标题}
tap或enter 生成六个一样的一级标题，ctrl+z恢复
4.
<h$*6>{&级标题}>
$处会进行自争，该元素生成1.2.3.4.5.6级标题
p
段落
拓展：lorem 乱数假文，没有任何实际含义的文字.lorem 后面加几就会生成一个有几个单词
h1*6>lorem1
span(无语义)
没有语义，仅用于样式的设置（像一个容器）
拓展：以前：某些元素在实现时会独占一行（块级元素），而有些而不会（行级元素）。
到了html5已经弃用这种说法(元素与显示无关)（w3c官方描述）
pre（无语义）
预格式化文本元素
空白折叠：在源代码中的连续空白字符（空格，回车，换行，制表/tap）,在页面显示时会被折叠成一个空格。(源代码和页面空格区分开)
例外：在pre元素中的内容不会出现空白折叠。
在pre元素内部出现的内容会按照源代码格式显示到页面上
该元素通常用来显示一些代码
pre元素功能本质是有一个默认的css属性
显示代码时通常外面套code元素，code表示代码区域。
四.HTML实体
实体字符，HTML Entity
为了在页面中显示一些特殊符号
书写方式：
- &单词；
- &#数字；
常见：
小于符号：& lt；
大于符号：& gt；
空格：& nbst；
版权符号：& copy；（©）
&符号：& amp；
五.a元素
超链接
href 属性
通常表示跳转地址
- 跳转地址
- 跳转到某个锚点（当前页面的不同位置，并没有跳到其他页面）
id属性：全局属性，表示元素在文档中的唯一编号。
最后加一个#，回到顶部 - 功能链接
点击后触发某个功能
-执行js代码 javascript：
-发送邮件，mailto：
要求计算机上安装邮件发送软件
-拨号，tel:
target属性
表示跳转窗口位置。
target取值：
_self:在当前页面窗口打开，默认值
_blank:在新窗口打开
六.路径的写法
1.站内资源和站外资源
站内资源：当前网站的资源（比如同一个文件夹）
站外资源：非当前网站的资源
2.绝对路径和相对路径
站外资源：绝对路径（只可以）
站内资源：相对路径（也能用绝对）
- 绝对路径
绝对路径的书写格式：
url地址：
协议名://主机名:端口号/路径
schema://host:port/path
（了解）举例：https://www.bilibili.com/video/BV1yx411d7Rc/?p=9&spm_id_from=333.880.my_history.page.click&vd_source=de6184415c3a988cba0ce3e33125f434
a.协议名（交通工具）：http，https，file（文件中打开网址）
b.主机名（大厦的名字）：域名，IP地址
c.端口号（大厦房间号）：有的可以省略，如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号443.在.com后面
d.路径（房间里面具体的抽屉）：后面的/video/BV1yx411d7Rc/?p=9&spm_id_from=333.880.my_history.page.click&vd_source=de6184415c3a988cba0ce3e33125f434
当跳转目标和当前页面的协议相同时，可以省略协议
2. 相对路径
以./开头，./表示当前资源所在的目录
可以书写…/表示返回上一级目录
相对路径中：./可以省略
七.图片元素
img元素
image缩写，空元素
src属性：source
站外资源使用“复制图片地址”，站内资源使用"./"
alt属性：当图片资源失效时，将使用该属性的文字替代图片，图片能显示就不会显示
1.和a元素联用
<a target="_blank" href="网页地址"><img src="图片地址" alt="这是一张太阳系图片"></a>
2.和map元素
点图片不同部分跳到不同位置。
map：地图
将map和图片联系起来需要元素属性name，在img元素中使用usemap，加#name属性的位置
进行划分：map的子元素：area
shape：圆形(circle)，矩形(rect)，多边形(poly)
coords：坐标，关键点的坐标
href：点击此处后跳转的地址
alt：图片没有显示出现的文字
target：新窗口还是当前窗口
衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：ps、pxcook
3.和figure元素
指代、定义，通常用于把图片、图片标题、描述包裹起来
添加额外信息，会在显示的图片下面显示。
子元素：figcaption
八.多媒体元素
video 视频
audio 音频
video
一开始是没有视频的播放控制的图标，需要有要加controls
controls: 控制控件的显示，取值只能为controls,套娃
<video controls="controls" src="./media/open.mp4" style="width: 500px;"></video>
某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫做布尔属性，例如controls，布尔表示真和假
布尔属性，在HTML5中，可以不用书写属性值
autoplay: 布尔属性，自动播放。
muted: 布尔属性，静音播放
loop: 布尔属性，循环播放
audio
和视频完全一致
兼容性
- 旧版本的浏览器不支持这两个元素
- 不同的浏览器支持的音视频格式可能不一致
视频播放的模式mp4、webm
网站一般会有两种播放模式，这种情况下我们不再使用src显示位置，我们在video下添加子元素source src
<source src="./media/open.mp4" type="">
<source src="media/open.webm" type="">
这样增加兼容性。如果还不支持，添加p元素“对不起，你的浏览器不支持video元素，请点击这里下载最新版本2”（成功运行会自动忽略p元素）
九. 列表元素
有序列表
ol: ordered list（整个列表）
li：list item （列表内的每一项）
ol元素下的子元素只可以是li
有序列表的属性：
- type：决定列表中元素的序号type=1，则使用数字，type=i，使用罗马数字，type=a用小写字母
（小技巧）alt+shift+光标下，复制粘贴向下选中结果
不过不太建议使用该属性，建议使用css
2.reversed：表示反序，将列表倒过来
无序列表
把ol改成ul
ul：unordered list
无序列表常用于制作菜单 或 新闻列表。
定义列表
通常用于一些术语的定义
dl: definition list
dl的子元素
-
dt: definition title（术语标题）
-
dd: definition description（术语描述）
十.容器元素
容器元素：该元素代表一个块区域，内部用于放置其他元素（区域里面可以是图片，超链接，其他容器【盒子套盒子】）
1. div元素
没有语义，用来划分区域，没有显示效果,可以div套div
2.语义化容器元素
header: 通常用于表示页头，也可以用于表示文章的头部
footer: 通常用于表示页脚，也可以用于表示文章的尾部
article: 通常用于表示整篇文章
section: 通常用于表示文章的章节
aside: 通常用于表示侧边栏
遇事不决div
十一. 元素包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
块级元素独占一行，行级元素不换行（已抛弃）
元素的包含关系由元素的内容类别决定。
例如，查看h1元素中是否可以包含p元素，行不通
去百度搜索h1 mdn，进入页面点击“允许的内容查找"
plain text纯文本
总结：
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
- 标题元素和段落元素不能相互嵌套，并且不能包含容器元素（标题内不能有段落，段落不能有标题）
856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
