HTML CSS 学习3

文章目录

  • 路径
    • 省略规则
    • 相对路径
  • 常用元素
    • img元素
      • 和a元素联用
    • map元素
    • figure元素
      • 定义
      • 子元素
        • Figcaption
    • 多媒体元素
      • video(视频)
        • 属性
          • src
          • controls
          • autoplay
          • loop
      • audio音频
      • 兼容性
    • 列表元素
      • 有序列表
        • 属性
      • 无序列表
      • 定义列表
    • 容器元素
        • div元素
        • 语义化容器元素
          • header
          • footer
          • article
          • section
          • aside
    • 元素的包含关系

路径

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

路径分类:绝对路径和相对路径
站外资源和站内资源由于来源的不同,使用不同的路径表示方法。
站外资源:绝对路径(例如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元素

定义

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

标题

段落

子元素

Figcaption

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

多媒体元素

定义:可以将视频和音频放入的元素。分为Video(视频),Audio(音频)。两者用法相似。

video(视频)

属性

src

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

controls

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

autoplay

自动播放,也为布尔属性,但是有的浏览器不允许自动播放。 这个情况下,加入muted的布尔属性,使之静音播放,就可以实现自动播放。

loop

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

audio音频

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

兼容性

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

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

如果是旧版本的话
1.


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

列表元素

有序列表

ol: ordered list
li: ol的子元素,ol中的子元素只能是li。

属性

type=“1” (即为1. 2. 3.)
还有A ,I ,a, 等。
这个属性曾经被弃用过,最好使用CSS控制显示效果,最好不要使用type。
HTML CSS 学习3_第2张图片
HTML CSS 学习3_第3张图片

无序列表

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

HTML CSS 学习3_第4张图片
HTML CSS 学习3_第5张图片

定义列表

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

容器元素

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

div元素

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

语义化容器元素

header

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

footer

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

article

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

section

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

aside

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

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

元素的包含关系

  以前块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外。实际上现在没有这种说法了,现在,元素的包含关系由元素的内容类别决定。
  例如,查看h1是否能够包含p元素,按照语义说法不成立,mdn 看他是什么内容类别的,允许内容,看见它是短语内容,看包含的元素有没有p元素。
例如这就是p元素的内容
HTML CSS 学习3_第6张图片
  所以现在的元素包含关系比以前更加复杂了。但不用去背诵,有问题可以去官网查询。
容器元素中可以包含任何元素,a元素几乎可以包含任何元素,某些元素只有固定的子元素。
  如ul>li ,ol>li ,dl>dt和dd。
  标题元素和段落元素不能相互嵌套,并且不能包含容器元素 。

你可能感兴趣的:(HTML,CSS)