html语法

HTML5 和 CSS3新功能

概述

HTML5 和 CSS3 是 Web 开发领域中的两个重要标准,它们带来了许多新功能和改进,使得开发者能够创建更加丰富和交互式的网页应用。以下是这两个标准的一些重要特性和示例。

HTML5

1. 新的语义化标签

特性描述

HTML5 引入了许多新的语义化标签,用于更清晰地表达页面结构。这些标签不仅有助于提高网页的可读性,也有助于搜索引擎更好地理解页面的内容。

示例
html 复制代码
<article>
  <header>
    <h1>文章标题</h1>
    <p>发布日期: 2023-07-26</p>
  </header>
  <section>
    <p>文章正文...</p>
  </section>
  <footer>
    <p>作者: John Doe</p>
  </footer>
</article>

2. 媒体元素 <video><audio>

特性描述

HTML5 提供了 <video><audio> 元素,允许直接在网页中嵌入视频和音频文件而无需额外插件。

示例
html 复制代码
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

3. 绘图和图形 <canvas>

特性描述

<canvas> 元素提供了一种在网页上绘制图形的方法。它通常与 JavaScript 配合使用,通过脚本来绘制图像。

示例
html 复制代码
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 50, 50);
</script>

4. 表单增强

特性描述

HTML5 为表单提供了新的输入类型和属性,如 <input type="date"><input type="email">,以简化表单数据的处理和验证。

示例
html 复制代码
<form>
  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</form>

CSS3

1. 响应式设计

特性描述

CSS3 中的媒体查询使得网站可以根据不同的设备和屏幕尺寸自动调整布局。

示例
html 复制代码
/* 默认样式 */
body {
  font-size: 16px;
}
/* 小屏幕设备 */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

2. 圆角和阴影

特性描述

CSS3 提供了简单的语法来添加圆角和阴影效果,不需要使用图片。

示例
html 复制代码
.box {
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

3. 渐变

特性描述

CSS3 支持线性渐变和径向渐变,可以用来创建美观的背景和按钮。

示例
html 复制代码
.button {
  background-image: linear-gradient(to bottom, #f9f9f9, #e3e3e3);
  border: none;
  padding: 10px 20px;
}

4. 动画和过渡

特性描述

CSS3 允许使用 transitionanimation 属性来实现平滑的动画效果。

示例
html 复制代码
.box {
  transition: transform 0.5s ease-in-out;
}
.box:hover {
  transform: scale(1.2);
}
相关推荐
懒大王爱吃狼33 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js