HTML CSS 学习3

路径

资源分类：站内资源&站外资源
定义：
站内资源：当前网站的资源。
站外资源：非当前网站的资源。

路径分类：绝对路径和相对路径
站外资源和站内资源由于来源的不同，使用不同的路径表示方法。
站外资源：绝对路径(例如url)
站内资源：相对路径（当然也可以使用绝对路径）

协议名：//主机名：端口号/路径
例如：http(不安全),https,file
主机名，域名，IP地址，端口号：有的端口号可以省略
如果是http协议，默认端口号80
如果是https，默认443

省略规则

当跳转目标和当前页面的协议相同时，可以省略协议

http://renren.com
//renren.com

在浏览器中打开
在文件中打开进不去
主机名，端口相同也可以省略

相对路径

当前资源所在的目录。以./开头，./表示当前资源所在的目录，可以书写…/表示返回上一级

./../

相对路径中./可以省略

常用元素

img元素

image，空元素
src属性：source
alt属性：图片资源失效时，将使用该属性的文字替代图片，比如“这是一张太阳系的图片”

和a元素联用

有时候图片跳转比较特殊，例如淘宝。

map元素

首先给map属性起名字 name属性

在img里面加唯一
mao里面加子元素 空元素 shape元素的形状 圆形矩形rect
coords指的是关键点的坐标 坐标系的远点在左上角
可以用QQ截图 得到x，y坐标
circle coords“x，y，r”，在量取的时候一定要保证页面为100%显示
Rect coords 左上角坐标 和右下角坐标
Poly coords 依次描述它每个点的坐标 斜的四边形为
衡量坐标的时候 为了避免错误，最好用PS、pxcook、*cutpro
Href
Target

figure元素

定义

指代，通常用于把图片标题，描述包裹起来。

<figure>
       <figcaption><h1>标题</h1></figcaption>
       <p></p>段落
</figure>

子元素

Figcaption

指代图片的标题。可以将h1,h2等放入，为了更好的语义化。

多媒体元素

定义：可以将视频和音频放入的元素。分为Video（视频），Audio（音频）。两者用法相似。

video（视频）

属性

src

值：视频文件的 URL。可能的值：绝对 URL - 指向另一个站点（比如href=“http://www.example.com/song.ogg”），相对 URL - 指向网站内的文件（比如 href=“song.ogg”）可以放入。
且对格式有要求，通常是mp4 ，不允许avi，详情看兼容。
但，通常网站都有视频保护，找不到源地址。
默认情况下没有显示播放控件的，如果想要一开始有播放控件，右击后选择显示播放控件。

controls

controls="controls"
这个属性控制播放控件的显示，取值只能是controls，唯一。
某些属性仅有两种状态：1.不写（布尔语言）2.写的话仅为属性名

autoplay

自动播放，也为布尔属性，但是有的浏览器不允许自动播放。 这个情况下，加入muted的布尔属性，使之静音播放，就可以实现自动播放。
<video src="video/ha.mp4" controls="controls" loop="loop" autoplay="autoplay" muted="muted">视频</video>

loop

布尔属性，循环播放，很多游戏的网页都可以。

audio音频

和视频一致，但打开后音频看不见 ，加入controls后就可以看见进度条。
也同样可以使用autplay ，loop ，muted等。

兼容性

1. 旧版本浏览器不支持这两个元素
2. 不同的浏览器支持的音视频格式不一致
   有的版本支持Mp4或者webm ，所以通常情况下 用户会上传avi视频，浏览器进行转码 ，将他们同时上传两种格式的视频。

<video src="">
        <source src="">//mp4
        <source src="">//webm
 </video>

将两种格式都写上，来获得更好的兼容性。

如果是旧版本的话
1.

<video src="">
        <source src="">//mp4
        <source src="">//webm
             <p>对不起，你的浏览器不知处video元素，请点击这里下载最新版本的浏览器</p>//再加入a链接下载

 </video>

2.也可以，在里面嵌入flash插件。

列表元素

有序列表

ol： ordered list
li： ol的子元素，ol中的子元素只能是li。

属性

type=“1” （即为1. 2. 3.）
还有A ，I ，a， 等。
这个属性曾经被弃用过，最好使用CSS控制显示效果，最好不要使用type。

无序列表

同ol，将元素的名称改成ul。只需要将ol变成ul，子元素也是li，假如用CSS 改成了1，2 ，3 其实它本质上还是无序列表。无序列表常用于制作菜单或者新闻列表。

定义列表

定义：元素的标签为dl，带有项目和描述的描述列表。
子元素：dt： definition title，dd： definition description。

容器元素

容器元素：该元素内部用于放置其他元素。

div元素

没有语义，没有显示效果 但是浏览器无法识别与一

语义化容器元素

header

通常用于表示页头，也可以用div表示，但是不能更好的语义化。

footer

可以表示页脚，也可以表示文章的尾部。

article

通常表示文章,也可以加入header，footer。

section

通常用于表示文章的章节 ，在其中放置p元素。

aside

通常用于表示附加信息，侧边，不是很重要的信息。

这几个部分和显示效果没有关系，为了更好的语义化。

元素的包含关系

  以前块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。实际上现在没有这种说法了，现在，元素的包含关系由元素的内容类别决定。
  例如，查看h1是否能够包含p元素，按照语义说法不成立，mdn 看他是什么内容类别的，允许内容，看见它是短语内容，看包含的元素有没有p元素。
例如这就是p元素的内容

  所以现在的元素包含关系比以前更加复杂了。但不用去背诵，有问题可以去官网查询。
容器元素中可以包含任何元素，a元素几乎可以包含任何元素，某些元素只有固定的子元素。
  如ul>li ，ol>li ，dl>dt和dd。
  标题元素和段落元素不能相互嵌套，并且不能包含容器元素 。