H5C3进阶—HTML5+CSS3新增标签

最新推荐文章于 2024-10-20 21:40:17 发布

luolin_forest

最新推荐文章于 2024-10-20 21:40:17 发布

阅读量395

点赞数 1

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/luolin_forest/article/details/125125609

版权

本文深入探讨了HTML5的新标签，如header, nav, article等，强调了多媒体标签audio和video的使用，包括属性设置和格式支持。此外，还详细介绍了CSS3的新增选择器，如属性选择器、结构伪类选择器和伪元素选择器，并讲解了2D转换、旋转、缩放和动画等特性。" 100559651,8402154,Dotfuscator：.NET应用程序的切除与水印保护,"['代码混淆', '软件保护', '软件加密']

摘要由CSDN通过智能技术生成

HTML5

一、HTML5的特性
在这里插入图片描述
二、H5新增语义化标签

header ：头部标签
nav ：导航标签
article :内容标签
section: 块级标签
aside :侧边栏标签
footer：尾部标签

2.1 多媒体标签
1、audio
在这里插入图片描述
属性：
controls="controls“
autoplay=“autoplay”
loop=“loop”
不同浏览器支持不同的格式，所以需要为音频准备多个格式
audio controls=“controls”
sourse src=“media/snow.mp3” type=“audio/mpeg”
sourse src=“media/snow.ogg” type="audio/ogg

2、video
一般准备Ogg和MPEG4格式
video src=“” controls=“controls”
source src=“media/video.mp4” type=“video/mp4”
source src=“media/video.ogg” type=“video/ogg”

在这里插入图片描述
注：谷歌浏览器禁用了自动播放，解决方案，给视频添加静音属性。
video autoplay=“autoplay” muted=“muted” loop=“loop”

2.2 input标签
在这里插入图片描述
举例：

 <form action="">
        <ul>
            <li>邮箱：<input type="email" /></li>
            <li>网址：<input type="url" /></li>
        </ul>
    </form>

表单属性
在这里插入图片描述
举例：
1、name=“username” autocomplete=“on”

CSS3新增选择器及案例

CSS3移动端支持优于PC端，在CSS2基础上新增样式。

3.1 CSS3属性选择器
在这里插入图片描述
举例：
button[disabled]{
cursor:default;
}
属性选择器的权重高于标签选择器（权重为1）。
类选择器、属性选择器、伪类选择器权重为10。

input[type="search"] {
            color: pink
        }
  div[class^="icon"]{
  color=red
  }(以icon开头)
    div[class$="icon"]{
  color=red
  }(以icon结尾)

3.2 CSS3结构伪类选择器
在这里插入图片描述
nth-child(n)
n可以是数字、关键字和公式，常见的关键词有even偶数、odd奇数。
2n 偶数
2n+1 奇数
5n 5的倍数
n+5 从第五个开始到最后
-n+5 前5个

    div span:first-of-type {
            background-color: #fff;
        }

3.3 CSS3伪元素选择器
在这里插入图片描述

.weilei::after{
        content: "小猪佩奇";
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: pink;
        }
    </style>

1、before和after必须有content属性。
2、before 在内容前面，after在内容后面。
3、在dom里面看不见刚才创建的元素，所以我们称为伪元素。
4、伪元素和标签选择器一样，权重为1。

p::after{
content:'\ea50'
}

3.4 CSS2 2D转换
1、transform
移动：translate, 不会影响其他元素的位置。
旋转：rotate，
缩放：scale
2D转换是改变标签在二维平面位置和形状的一种技术。
div{
width:200px;
transform:translate(x,y)
transform:translate(100px,0);
}
在这里插入图片描述
translant 对行内标签无效

2、旋转 rotate

transform:rotate(45deg)
角度为正，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

 img {
            width: 150px;
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写