HTML5和CSS3新增属性简要概括

HTML5和CSS3的出现极大地丰富了网页开发的功能和用户体验。它们引入了许多新属性和特性,使得网页设计更加灵活、语义化和交互性强。以下是对HTML5和CSS3新增属性的详细总结。

HTML5新增属性

1. 语义化标签

HTML5引入了一系列语义化标签,使网页结构更加清晰,便于搜索引擎优化(SEO)和辅助技术的理解:

  • <header>:页面或区块的页眉。
  • <nav>:导航链接组。
  • <section>:独立的内容区块。
  • <article>:独立的、完整的内容块。
  • <aside>:侧边栏或与主要内容相关的辅助信息。
  • <footer>:页面或区块的页脚。

2. 表单增强

HTML5为表单控件引入了新的输入类型和属性,提升了用户体验:

  • 新的输入类型:emailurlsearchdatetimerange 等,新增的属性可以帮助用户高效率的输入信息,也可以方便后台管理数据。

  • 新的表单属性:

    • autofocus:页面加载时自动获取焦点(自动获取光标)。
    • required:输入框不能为空(必填项)。
    • placeholder:提供输入提示。

3. 多媒体支持

HTML5原生支持音频和视频,无需依赖插件:

  • <audio>:用于播放音频文件,大多数浏览器都支持MP3。
  • <video>:用于播放视频文件,大多数浏览器都支持MP4。

CSS3新增属性

1. 外观与布局

CSS3引入了许多新属性,用于增强页面的视觉效果:

  • border-radius:实现圆角边框,我们可以美化一些元素。
  • box-shadowtext-shadow:分别为元素和文本添加阴影效果。

2. 新增选择器

CSS3增加了一些可以提高代码效率的选择器:

1.属性选择器:
CSS 复制代码
input[value] {
//选择具有value属性的输入框
}
div[class="box"] {
//选择类名为box的div盒子
}
input[type="password"] {
//选择类型为密码的输入框
}

当需要选择多个类名同根的元素时:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div[class^="box"] {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #f00;
      float: left;
      //选择类名以box开头的元素
    }

    div[class$="icon"] {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #0f0;
      float: left;
      //选择类名以icon结尾的元素
    }

    div[class*="Data"] {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #00f;
      float: left;
      //选择类名中含有Data的元素
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="first-icon"></div>
  <div class="second-icon"></div>
  <div class="third-icon"></div>
  <div class="fourth-icon"></div>
  <div class="first-Data-1"></div>
  <div class="second-Data-2"></div>
  <div class="third-Data-3"></div>
  <div class="fourth-Data-4"></div>
</body>

</html>

3. 动画与过渡

CSS3支持动画和过渡效果,无需JavaScript即可实现复杂的视觉效果:

  • transition:实现属性值的平滑过渡,给需要过渡的元素添加,代码规则如下:transition: width 1s ease 0s,对应的四个值是:需要过渡的属性、过渡时间、过渡曲线、开始时间(延时时间)
  • @keyframesanimation:定义动画的关键帧和控制动画行为。

关键帧的动画定义如下:

CSS 复制代码
@keyframes move {
    0% {}
    
    50% {
         width: 225px;
    }
    
    100% {
        width: 300px
    }
    //百分比表示运动时间的分段,表示在该时间分段时某个属性的变化到何值
}
//move是动画的名字,支持自定义
//调用时使用animation属性调用
div {
    width: 150px;
    high: 150px;
    animation: move;
}
//关键帧动画同样可以设置一些动画时间、动画曲线等等属性:
属性 意义
animation-name 动画名称 自定义的名称
animation-duration 动画时间 0.1s
animation-timing-function 动画曲线 ease等
animation-delay 开始时间(延时) 0s
animation-iteration-count 循环次数 数字或infinite(无限)
animation-fill-mode 终末状态 backwards/forwards返回或不返回
animation-play-state 动画状态 pause/running暂停或继续(通常搭配hover使用)

4. 3D和变换

CSS3支持2D和3D变换,以及更复杂的视觉效果:

  • transform:实现旋转、缩放、倾斜等变换。

后续会详细介绍一些转换的属性及特点。

相关推荐
爱泡脚的鸡腿7 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ23 分钟前
前端处理pdf文件流,展示pdf
前端·pdf
智践行25 分钟前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态31 分钟前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb6640 分钟前
框架修改思路
前端·javascript·vue.js
树上有只程序猿43 分钟前
Java程序员需要掌握的技术
前端
从零开始学安卓1 小时前
Kotlin(三) 协程
前端
阿镇吃橙子1 小时前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化