HTML5与css3

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

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

HTML5

HTML5新增的语义化标签

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

HTML5兼容问题

  1. IE9 行级元素设置宽度的时候 会失效
  2. IE8以下的版本,不支持语义化标签
  3. 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标签)

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

HTML5对视频的操作(video标签)

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

css3

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

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

透明度的表示方式

  1. rgba(在css3.0中提出的表示颜色的方式,a指的是透明度)
  2. opacity(透明度)
  3. 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就是关键词

新增属性

新增边框属性

  1. border-color:为边框设置多种颜色
  2. border-image:图片边框
  3. border-radius:圆角边框
  4. box-shadow:阴影效果

新增背景属性

  1. background-size:指定背景图片尺寸
  2. background-origin:指定背景图片从哪里开始显示
  3. background-clip:指定背景图片从什么位置开始裁剪

新增文字效果

  1. text-shadow:文本阴影
  2. word-wrap:自动换行
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值