html5和css3内容系列更新

最新推荐文章于 2022-06-15 23:01:57 发布

特别的琪

最新推荐文章于 2022-06-15 23:01:57 发布

阅读量235

点赞数 1

文章标签： css3 html5 html css

本文链接：https://blog.csdn.net/Yangjiaqi111/article/details/113917152

版权

html5 简介
3d效果新的css3
不被某些浏览器支持但是一种发展趋势
1.1 h5 的语义化标签
header 头部
nav 导航标签
article 内容标签
section 块级标签
aside 侧边栏
footer 尾部标签
针对搜索引擎、可以多次使用、在ie9中需要转化为块级元素、移动端使用更多
1.2 多媒体标签
audio 音频格式格式有限 ogg mp3 wav
属性：control 控制进度和声音 loop 结束时重新播放（循环） src 要播放音频的路径 autoplay 音频就绪后马上播放（谷歌禁用）
为音频准备多个格式 source是单标签
video 格式：ogg mpeg4 webm 前两种几乎涵盖所有的浏览器
常见属性：autoplay 自动播放（谷歌禁用）、muted 静音播放（解决兼容性问题）、
loop 循环播放、 poster 加载等待的图片
重点显示：视频自动播放、不用control控件、循环和设置大小
1.3 input表单属性
email 邮箱检测是否为邮箱地址
url 网址检测地址形式
date 日期
time
month
week
number 数字类型
tel
search 搜索框清除所有
color 选择颜色框
表单属性：required 内容不能为空
placeholder 占位符提示文本
autofocus 自动聚焦自动获取光标效果
autocomplete off/on on：提示输入过的内容 off：关闭必须有name 属性、成功提交
multiple 选择许多个文件中的内容进行提交

1
css3 现状
扩展样式，支持移动端，应用相对广泛
1.1 css3 属性选择器
disabled 禁用按钮
使用方法：button[disabled] 中间没有空格，选择的是既是button，又有disabled属性的元素
属性选择器权重高于标题选择器，类选择器、属性、伪类选择器权重为10，标题选择器权重为1
^= 开头
$= 结尾
*= 含有
只有= 即属性值等于
1.2 结构伪类选择器
e：first-child 首元素
last-child 尾元素
nth-child(n) even 偶数 odd 奇数； n是几就是几； n是公式的话，从0开始计算，第0个被忽略
n+5 从五个往后 -n+5 前五个
div span：nth-child（n）不指定孩子类型
first-of-type、last-of-type、nth-of-type(n)
1.3 伪元素选择器
::before
::after
必须有content属性在内容前后插入盒子权重为1
1.4 案例：文字图标的使用

2d转换transform
translate 类似定位 (x,y) 中间用逗号隔开对行内标签没有效果使用百分号是对于自身的效果
rotate 旋转度数+单位deg 正值为顺时针负值为逆时针
scale 缩放
三角可由直角旋转45度得来

案例1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
   
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        
        div img {
   
            transition: all 0.5s;
        }
        
        div img:hover {
   
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="img/18.png" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="img/18.png" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="img/18.png" alt=""></a>
    </div>
</body>

</html>

案例2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
   
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
        }
        
        div::before {
   
            content: "黑马";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 1s;
        }
        
        div:hover::before {
   
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div&g

最低0.47元/天解锁文章

特别的琪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5和css3内容系列更新

html5 简介3d效果新的css3不被某些浏览器支持但是一种发展趋势1.1 h5 的语义化标签header 头部nav 导航标签article 内容标签section 块级标签aside 侧边栏footer 尾部标签针对搜索引擎、可以多次使用、在ie9中需要转化为块级元素、移动端使用更多1.2 多媒体标签audio 音频格式格式有限 ogg mp3 wav属性：control 控制进度和声音 loop 结束时重新播放（循环） src 要播放音频的路径 autoplay..
复制链接

扫一扫