六、路径的写法
站内资源和站外资源
站内资源：当前网站的资源
站外资源：非当前网站的资源
绝对路径和相对路径
站外资源：绝对路径
站内资源：相对路径
- 绝对路径
url地址/绝对路径的书写格式：
协议名://主机名:端口号/路径
schema://host:port/path
https://www.baidu.com/?tn=68018901_25_oem_dg
协议名：http、https、file
主机名：域名、ip地址
端口号：如果协议为http协议，默认端口号为80；如果协议是https协议，默认端口号是443
当跳转目标和当前页面的协议相同时，可以省略协议
- 相对路径
相对路径书写格式：
以 ./ 开头， ./ 表示当前资源所在的目录
可以书写 ../ 表示返回上一级目录
相对路径中 ./ 可以省略
七、图片元素
img元素
<img src="" alt="">
image的缩写，空元素
src属性：source（资源）的缩写，
alt属性：当图片资源失效时，将使用该属性的文字替代图片
img元素和a元素联用
例：点击图片跳转到相关网页
<a href="">
<img src="" alt="">
</a>
img元素和map元素
<map name="">
</map>
<a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281">
<img usemap="#solarMap" src="./img/太阳系.jpg" alt="太阳系概念图">
</a>
<map name="solarMap">
<area shape="circle" coords="545,133,73" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
</map>
驼峰命名法：骆驼式命名法（Camel-Case）又称驼峰式命名法，是电脑程式编写时的一套命名规则（惯例）。正如它的名称CamelCase所表示的那样，是指混合使用大小写字母来构成变量和函数的名字。
shape-形状 circle-圆 rect-rectangle-矩形 poly-polygon-多边形
coords-坐标
map的子元素：area-区域
img元素和figure元素
figure,指代、定义
通常用于把图片、图片标题、描述包裹起来
figcaption：figure的子元素，表示指代的元素的标题
<figure>
<a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281">
<img usemap="#solarMap" src="./img/太阳系.jpg" alt="太阳系概念图">
</a>
<figcaption>
<h2>太阳系</h2>
</figcaption>
<p>太阳系（英文：Solar system）是一个以太阳为中心，受太阳引力约束在一起的天体系统，包括太阳、行星及其卫星、矮行星、小行星、彗星和行星际物质。</p>
</figure>
八、多媒体元素
video 视频
audio 音频
video
<video src="">
</video>
controls:控制控件的显示，只有一个值"controls"
某些属性只有两种状态：1.不写；2.取值为属性名；
这种属性叫做布尔属性，在HTML5中，可以部用书写属性值
autoplay:布尔属性，自动播放
muted:布尔属性，静音播放
loop：布尔属性，循环播放
audio
和视频完全一致
兼容性
- 旧版本的浏览器不支持这两个元素
- 不同的浏览器支持的音视频格式可能不一致（通常有mp4、webm）
<video controls autoplay muted loop style="width:500px;">
<source src="media/open.mp4">
<source src="media/open.webm">
<p>
对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
</p>
</video>
九、列表元素
有序列表
ol——ordered list
li——list item
<body>
<ol>
<li>打开冰箱门</li>
<li>大象关进去</li>
<li>关上冰箱门</li>
</ol>
</body>
type属性
type="1" 列表用数字表示
type="i" 列表用小写罗马数字表示
type="I" 列表用大写罗马数字表示
type="a" 列表用小写字母表示
type="A" 列表用大写字母表示
一般情况下要使用CSS来控制列表序号，只有在特殊情形（如法律条文）下才会使用type属性
小技巧
alt+shift+↓ 可以复制选中的文本
reversed，布尔属性，列表序号倒置内容不会
无序列表
ul——unordered list
<body>
<ul>
<li>有责任心</li>
<li>会家务</li>
<li>年薪30万</li>
</ul>
</body>
无序列表常用语制作菜单或新闻列表
定义列表
通常用于一些术语的描述
dl——definition list
dt——definition title
dd——definition description
<dl>
<dt>HTML</dt>
<dd>
超文本标记语言
</dd>
</dl>
十、容器元素
容器元素：该元素代表一个块区域，内部用于放置其他元素
div元素
没有语义，用来划分区域
语义化容器元素
header:通常用于表示页头，也可以用于表示文章的头部
footer:通常用于表示页脚，也可以用于表示文章的尾部
article:通常用于表示整片文章
section:通常用于表示文章的章节
aside:通常用于表示侧边栏/附加信息
十一、元素包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
元素的包含关系有元素的内容类别决定
例如，查看h1元素中是否可以包含p元素，百度 h1 mdn 查看其允许内容
总结：
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
- 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
