文章目录
路径
资源分类:站内资源&站外资源
定义:
站内资源:当前网站的资源。
站外资源:非当前网站的资源。
路径分类:绝对路径和相对路径
站外资源和站内资源由于来源的不同,使用不同的路径表示方法。
站外资源:绝对路径(例如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等。
兼容性
- 旧版本浏览器不支持这两个元素
- 不同的浏览器支持的音视频格式不一致
有的版本支持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。
标题元素和段落元素不能相互嵌套,并且不能包含容器元素 。