HTML+CSS学习Day14笔记

Day14笔记

一、H5新增多媒体标记

<video width="800" height="">
    
<!--source标记 表示资源 src属性表示路径 作用：可以把相同视频的不同格式引入到这个标记里面,mp4/ogg/webm表示视频文件格式-->
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>

<!--object标记 表示对象 作用：引入flash-->
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">    
<!--param标记 表示参数 作用：引入不同的flash-->
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
<!--swf后缀名表示flash格式，已经被淘汰了，只需要了解-->	

</object>
    当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>

video属性：

src 路径

controls 视频控件（播放、暂停、音量、全屏切换等）

loop 循环播放

autoplay 自动播放 注意点：谷歌浏览器下把video标记的自动播放功能禁用了

muted 静音

poster 封面

preload 属性规定是否在页面加载后载入视频
注意：如果使用autoplay属性  preload将被忽略
<video preload="auto/metadata/none">
	auto 指示一旦页面加载，则开始加载音频/视频
	metadata 指示当页面加载后仅加载音频/视频的元数据
	none 指示页面加载后不应加载音频/视频

video标记支持的视频格式：
mp4
ogg
webm

audio音频标记

<video width="500" height="" controls="controls">
	<source src="video/wei28.mp4" type="video/mp4"></source>
</video> 

embed视频音频共用标记

<embed src="music/邓超%20-%20超级英雄%20(《奔跑吧兄弟》真人秀主题曲).mp3"></embed>

<embed src="video/c.mp4"></embed>

二、盒模型

盒模型分为两种：
1、标准盒模型（w3c）宽度 = 左右margin + 左右padding + 左右border + content（width）
2、怪异盒模型（IE）宽度 = 左右margin + content（width，因为怪异盒模型会自动计算盒子大小，宽度已经包括了border和padding）
3、怎么触发怪异盒模型：
a、在IE低版本浏览器里面不定义doctype时可以触发
b、怪异盒模型下可以使用了padding和border让浏览器自动计算
c、怪异盒模型有这样的特性，所以在css3里面给咱们提供了一个属性可以在高版本的浏览器里面把盒模型转成怪异盒模型

box-sizing属性：
1、border-box 把标准盒模型转成怪异盒模型
2、content-box 标准盒模型（默认值）

三、序列选择器

同级别的第几个

/*选中同级别中的第一个标签*/
:first-child

/*选中同级别中的最后一个标签*/
:last-child


/*选中同级别中的第n个标签*/
:nth-child(n)

/*选中同级别中的倒数第n个标签*/
:nth-last-child(n)

/*选中父元素中唯一的标签（比如有两个p标签，一个在div里面，一个随便在其他地方，使用这个选择器选中的是div中的p）*/
:only-child

同类型的第几个

/*选中同级别中同类型的第一个标签*/
:first-of-type

/*选中同级别中同类型的最后一个标签*/
:last-of-type

/*选中同级别中同类型的第n个标签*/
:nth-of-type(n)

/*选中同级别中同类型的倒数第n个标签*/
:nth-last-of-type(n)

/*选中父元素中唯一类型的某个标签*/
:only-of-type

四、属性选择器

/*通过标记的html属性可以选取元素*/
标记[属性]

/*通过标记的html属性的属性值选取元素*/
标记[属性="属性值"]

/*以html属性的属性值开头的内容选取元素*/
标记[属性^="属性值开头内容（不限字符数量）"]

/*以html属性的属性值结尾的内容选取元素*/
标记[属性$="属性值结尾内容（不限字符数量）"]

/*以html属性的属性值的任意内容选取元素*/
标记[属性*="属性值的任意内容（不限字符数量）"]

五、UI元素状态伪类

/*没有被禁用*/
/*（禁用属性：disabled）*/
enabled

/*选中时*/
/*可用在<input type="checkbox"/>*/
checked

/*被禁用*/
disabled

/*选中文字的时候*/
/*只能改变背景和文字颜色，其他的改变不了*/
/*前面必须加两个::*/
::selection

/*获取焦点时*/
focus

六、H5新增结构性标签

header  头部区域

main  网页主要内容。对于文档来说应当是唯一的。在一个文档中，不能出现一个以上的 main 元素。
main  元素不能是以下元素的后代：article、aside、footer、header 或 nav。

nav  菜单导航，链接导航

section  章节区域内容

article  文章主题内容（比如一篇博客、一段用户评论等）

aside  标记、侧栏、摘要、插入引用作为补充主体内容

figure  将多个元素组合并展示元素，常和figcaption一起使用（与dl用法一致）

footer  尾部区域内容