开发环境：
VS code (Visual Studio Code)
安装模块：
- Chinese Language
- HTML Snippets
- HTML CSS Souppot
- Live Server（浏览器自动刷新页面）
- vccode-icons
- Markdown Preview Enhanced（标记预览增强）
- SVG
- Autoprefixer(自动生成厂商前缀，F1+搜索Autoprefixer，运行自动生成)
以上安装更方便操作，以致画面优美，便于做笔记
语义：
-
每个元素都有自己具体的含义
a元素：超链接
p元素：段落
h1元素：一级标题 -
所有元素与展示效果无关
元素展示到页面中的效果，应该由CSS来决定。
因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式
那么为啥需要用语义呢？
-
搜索引擎优化
搜索引擎：百度、搜搜、Bring、Google
每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码 -
浏览器理解网页
阅读模式，语音模式
‘’‘Emmet插件了解一下：自动生成HTML代码片段（VScode自带）’’’
>直接输入 ！+ tab 即有了HTML结构
>HTML注释：<!--...--> 快捷键Ctrl+/
#整体：元素element
元素：祖先元素、后代元素、父元素、子元素、兄弟元素（一个父亲的两个儿子元素）
####元素 = 起始标记（begin tag） + 结束标记（end tag） + 元素内容 + 元素属性
属性 = 属性名 + 属性值
-
局部属性：
某些元素特有的属性
按自己理解来说，是只能用在部分标签里的属性 -
全局属性：
所有元素通用
这个就不用解释了
有些元素没有结束标记，这样的元素叫做空元素
<!DOCTYPE html>
文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5.
不写文档声明，将导致浏览器进入怪异渲染模式
<html lang="en"></html>
根元素，一个页面最多只能有一个，并且该元素是所有其他元素的父元素或祖先元素。
HTML5版本中没有强制要求书写该元素，但是XHTML中严格要求写该元素
lang属性：language,全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。
>了解一下，中国大陆官方语言（s是简写的意思）lang="cmn-hans"
<head></head>
文档头，文档头部的内容，不会显示到页面上。
'''<meta>'''
文档的元数据：附加信息。
charset:指定网页内容编码
计算机中，低压电（0 ~ 2 v）0,高压电（2 ~ 5 v）1,表示2，使用10
计算机中，只能存储数字，文字和数字相对应
比如：a — 97, A — 64
p元素：paragraphs
lorem ：乱数假文，没有实际含义的文字（随机文本，可用作新闻文本结构）
span 【无语义】
没有语义，仅用于设置样式
以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）
现在：到了HTML5，已经弃用这种说法。
pre
预格式化文本元素
空白折叠:在源代码中的连续空白字符（空白、换行、制表）,在页面显示时，会被折叠为一个空格。
例外：在pre元素中出现的内容，会按照源代码格式显示到页面上。
该元素通常用于网页中显示一些代码。
pre元素功能的本质：它有一个默认的css属性。
显示代码时，通常外面套code元素，code表示代码区域
HTML实体
实体字符， HTML Entity
实体字符通常用于在页面中显示一些特殊符号
- &单词；
- &#数字;
- 小于符号
<
- 大于符号
>
- 空格符号
- 版权符号
©
- &符号
&
a元素
超链接
href属性
hyper reference：通常表示跳转地址
- 普通链接
- 锚链接
id属性：全局属性，表示元素在文档中的唯一编号 - 功能连接
点击后，触发某个功能
- 执行JS代码，javascript:
- 发送邮件，mailto:
要求计算机上安装有邮件发送软件：exchange - 拨号，tel:
要求用户计算机上安装有拨号软件，或使用的是移动端访问
target属性
表示跳转窗口位置
target的取值：
- _self: 在当前页面窗口中打开，默认值
- _blank: 在新的页面窗口中打开
路径的写法
站内资源和站外资源
站内资源：当前网站的资源
站外资源：非当前网站的资源
绝对路径和相对路径
站外资源：绝对路径
站内资源：相对路径
- 绝对路径的书写格式：
url地址：
‘’’
协议名://主机名host:端口号/路径
schema://host:port/path
https://www.baidu.com:443/newspa
‘’’
协议名：http、https、file
主机名：域名、IP地址
端口号：如果协议是http协议，默认端口是80；如果协议是https协议，默认端口是443
当跳转页面跟当前页面的协议相同时，可以省略协议
- 相对路径
以./开头，./表示当前资源所在的目录
可以书写…/表示返回上一级目录
相对路径中，./可以省略
图片元素
img元素
image缩写，空元素
src属性：source
alt属性：当图片资源失效时，得使用该属性的文字替代图片
和a元素联用
包在a元素里面，点击src的属性值图片，直接跳转到a元素里面的href属性值里面的链接
和map元素联用
map: 地图
map的子元素：area
衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：
ps、pxcook
和figure联用
指代、定义，通常用于把图片、图片标题、描述包裹起来
子元素：figcaption(包裹标题)
作用：我们看到的界面没什么变化，但是用这个元素可以让浏览器更方便识别
多媒体元素
video 视频
audio 音频
video
controls: 控制控件的显示，取值只能为controls
某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫布尔属性
布尔属性：在HTML5中，可以不用书写属性值
autoplay：布尔属性，自动播放
muted: 布尔属性，静音播放
loop：布尔属性，循环播放
audio
和video功能一样，不过音频是添加了控件controls才会显示出来
兼容性
- 旧版本的浏览器不支持这两个元素
- 不同的浏览器支持的音频格式可能不一致
mp4、webm
利用子元素source生成两个格式不一样的同一视频，可以使浏览器兼容显示出视频
列表元素
有序列表
ol：ordered list
li: list item
无序列表
把ol改成ul
ul: unordest red list
li: list item
无序列表常用作制作菜单 或 新闻列表。
定义列表
通常用语一些术语的定义
dl : definition list
dt : definition title
dd : definition description
容器
容器元素：该元素代表一个块区域，内部用于放置其他元素
div元素
没有语义
语义化容器元素
header：通常用于表示页头，也可以用于文章的头部
nav: 通常用于表示导航栏
footer: 通常用于表示页脚，也可以用于表示文章的尾部
article: 通常用于表示整篇文章
section: 通常用于文章的章节
aside：通常用于表示侧边栏
元素包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
元素的包含关系由元素的内容类别决定。
例如，查询h1元素里面是否可以包含p元素
搜索h1 mdn 查看允许的内容
总结：
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定子元素（ul>li,ol>li,dl>dt+dd）
- 标题元素和段落元素不能互相嵌套，并且不能包含容器元素
6610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
