当前位置:首页>>h5+c3进阶(1)

h5+c3进阶(1)

h5新增语义化标签

语义化标签主要针对搜索引擎
新标签可以使用一次或者多次
在 IE9 浏览器中,需要把语义化标签都转换为块级元素
语义化标签,在移动端支持比较友好

<header>        这是一个头部标签,语义化标签    </header>
<nav>        导航标签    </nav>
<article>        内容标签    </article>
<section>        大号的div 块级标签    </section>
<aside>        侧边栏标签    </aside>
<footer>        尾部标签<br>    </footer>

h5+c3进阶(1)

音频标签

h5+c3进阶(1)
audio标签
在谷歌浏览器中一般autoplay属性是被禁止的
对于格式问题,因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件

<audio controls>
<source src="18.6.30陈一发儿-童话镇.mp3" type="audio/mp3">         
<source src="18.6.30陈一发儿-童话镇.ogg" type="audio/ogg" >            
你的浏览器不支持audio播放   
 </audio>

视频标签

用法video和auto差不多

<video src="./media/video.mp4" controls="controls"></video>

h5+c3进阶(1)
对于谷歌浏览器来说默认也是不支持autolpay,解决办法是先设置静音播放再设置自动播放
对于不同浏览器支持不同格式问题解决方法类似audio

新增表单标签与属性

h5+c3进阶(1)
h5+c3进阶(1)

css3属性选择器

h5+c3进阶(1)

 button[disabled] {  
           cursor: not-allowed;
                   }

结构伪类选择器

h5+c3进阶(1)
nth-child 详解注意:
本质上就是选中第几个子元素n 可以是数字、关键字、公式
n 如果是数字,就是选中第几个
常见的关键字有 even 偶数、odd 奇数
如果 n 是公式,则从 0 开始计算但是第 0 个元素或者超出了元素的个数会被忽略
nth-child 选择父元素里面的第几个子元素,从所有子元素中进行选择,如果是a b:nth-child(5)则可以说为从所有子元素中选择第五个元素,如果第五个元素是b则选择成功否则不能加以更改
nt-of-type 选择指定类型的元素 选择的范围都是该类型

伪类选择器

h5+c3进阶(1)
before 和 after 必须有 content 属性
before 在内容前面,after 在内容后面
before 和 after 创建的是一个元素,但是属于行内元素(需要转换为块级元素才能设置宽高)
创建出来的元素在 Dom 中查找不到,所以称为伪元素
权重为1

猜你喜欢