h5+c3进阶(1)

h5新增语义化标签

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

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

在这里插入图片描述

音频标签

在这里插入图片描述
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>

在这里插入图片描述
对于谷歌浏览器来说默认也是不支持autolpay,解决办法是先设置静音播放再设置自动播放
对于不同浏览器支持不同格式问题解决方法类似audio

新增表单标签与属性

在这里插入图片描述
在这里插入图片描述

css3属性选择器

在这里插入图片描述

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

结构伪类选择器

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

伪类选择器

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值