HTML5与css3-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_56555617/article/details/120924744

本文详细介绍了HTML5的新特性，包括语义化标签如<header>、<nav>、<main>、<footer>，以及在表单、音频和视频操作上的增强。同时，探讨了HTML5在不同浏览器上的兼容问题。此外，还深入讲解了CSS3的边框、背景、文字效果以及过渡、贝塞尔曲线和自定义动画等新特性，对于开发者理解和使用这些技术提供了全面的指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5与css3

HTML5
css3

HTML5

HTML5新增的语义化标签

<header></header>3
       <!-- 头部 -->
       <nav></nav>
       <!-- navbar 导航 -->
       <main></main>
       <!-- main 主要  主要内容 -->
       <footer></footer>
       <!-- foot脚  底部 -->

HTML5兼容问题

IE9 行级元素设置宽度的时候会失效
IE8以下的版本，不支持语义化标签
IE8的内核，无法解析，只能用js替代

HTML5表单的新增

<!-- email -->
     邮箱：<input type="email">
     <!-- tel -->
     电话：<input type="tel">
     <!-- url -->
     网址：<input type="url">
     <!-- number -->
     数量：<input type="number" value="0" name="" id="" max="100" min="0">
     <!-- color -->
     颜色：<input class="color" type="color" name="" id="" >
     <!-- 颜色输入框的value 是当前颜色的十六进制 -->
     <!-- time -->
     时间：<input type="time" name="" id="">
     <!-- date -->
     日期：<input type="date" name="" id="">
     <br>

     <!-- datatime -->
     日期时间：<input type="datetime" name="" id="">
     <!-- 大多数浏览器不支持这个 -->
     日期时间：<input type="datetime-local" name="" id="">

HTML5对音频的操作（audio标签）

autoplay 如果有这个属性该音频会立即播放
controls 如果有这个则会向用户展示控件
loop 如果出现该属性则表示当音频结束后会重新开始
muted 当出现这个属性的时候静音
preload 在页面加载的时候预备播放和autoplay冲突

HTML5对视频的操作（video标签）

src 视频路径
controls 播放面板
autoplay 自动播放
loop 自动循环
poster 首次进入当前视频的封面图

css3

为了满足各个浏览器的兼容性所以我们也需要加前缀

-webkit-border-radius:20px;
            /* webkit指的是谷歌的浏览器内核 */
            -ms-border-radius:20px;
            /* ms指的是ie浏览器的内核 */
            -moz-border-radius:20px;
            /* moz指的是火狐浏览器的内核 */
            -o-border-radius:20px;
            /* o指的是opera浏览器的内核 */

透明度的表示方式

rgba（在css3.0中提出的表示颜色的方式,a指的是透明度）
opacity（透明度）
transparent 表示全透明
rgba的透密和opcity的透明区别
rgba的不会继承，opcity会继承

动画

transition

 /* 
                transition(参数1，参数2，参数3，参数4)
                参数1:发生变化的属性名
                参数2:变化的时间(动画时长)
                参数3:缓冲曲线
                参数4:等待时间

            */
            transition: all 3s ease 3s;

贝塞尔曲线

 /* 
            参数3：这个属性可以控制盒子宽度从100px变到400px变化的速度
            控制这个速度的变化的过程的算法就叫贝塞尔曲线
            特殊值：
            linear 匀速动画 cubic-bezier(0,0,1,1)/cubic-bezier(1,1,0,0)
            ease-in 先慢后块 cubic-bezier(0.25,0.1,0.25,0.1)
            ease-out 先快后慢 cubic-bezier(0,0,0.58,1)
            ease-in-out 慢快慢
            */

自定义动画

 /* 
            animation
            自定义动画名称
            动画时长
            缓冲曲线
            等待时间
            是否停留在终点
            播放次数(infinite  表示循环无穷次)
            是否交替运动(alternate)
            是否暂停（paused）
            */

像定义自定义动画 @keyframes就是关键词