欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

h5+c3进阶(1)

程序员文章站 2022-07-14 10:19:59
...

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