前端知识速记--HTML篇:HTML5的新特性

前端知识速记--HTML篇:HTML5的新特性

一、语义化标签

HTML5引入了许多新的语义化标签,如 <header><footer><article><section> 等。这些标签不仅提高了网页的可读性和结构性,还有助于SEO(搜索引擎优化)。

实例

html 复制代码
<article>
  <header>
    <h1>HTML5的新特性</h1>
  </header>
  <section>
    <p>HTML5引入了许多新的语义化标签,帮助开发者构建更加清晰的网页结构。</p>
  </section>
  <footer>
    <p>撰写者:前端开发者</p>
  </footer>
</article>

二、音视频支持

HTML5新增了 <audio><video> 标签,使得在网页中嵌入媒体内容变得更加简单,不再依赖于外部插件如Flash。

实例

html 复制代码
<video controls>
  <source src="example.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  您的浏览器不支持音频标签。
</audio>

三、Canvas元素

HTML5引入的 <canvas> 元素允许开发者通过JavaScript绘制各种图形,这使得图形和动画的实现变得简单高效。

实例

html 复制代码
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 50);
</script>

四、本地存储

HTML5新增的本地存储(Local Storage)和会话存储(Session Storage)功能,使得开发者可以在用户的浏览器中保存数据,而无需服务器的支持。

实例

javascript 复制代码
// 本地存储
localStorage.setItem("username", "前端开发者");
console.log(localStorage.getItem("username")); // 输出:前端开发者

// 会话存储
sessionStorage.setItem("sessionUser", "临时用户");
console.log(sessionStorage.getItem("sessionUser")); // 输出:临时用户

五、增强的表单功能

HTML5对表单元素进行了增强,新增了多种输入类型(如 email、date、url)以及更好的表单验证功能。

实例

html 复制代码
<form>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="birthday">生日:</label>
  <input type="date" id="birthday" name="birthday">
  
  <input type="submit" value="提交">
</form>


总结表格

新特性 描述 示例
语义化标签 提高网页可读性与SEO <header><article>
音视频支持 简化媒体内容嵌入,无需插件 <audio><video>
Canvas元素 通过JavaScript绘制图形 <canvas>
本地存储 支持在浏览器中存储数据 localStorage
增强的表单功能 新增输入类型,优化表单验证 type="email"
相关推荐
行者..................18 分钟前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_1 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员
golang学习记1 小时前
AI 乱写代码?不是模型不行,而是你的 VS Code 缺了 Context!MCP 才是破局关键
前端
星光不问赶路人1 小时前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
z_y_j2299704382 小时前
服务器中使用Docker部署前端项目
服务器·前端·docker·容器
迪丽热爱2 小时前
解决【npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。】问题
前端·npm·node.js
数字冰雹2 小时前
图观 流渲染场景服务器
服务器·前端·数据库·数据可视化
李明卫杭州2 小时前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-2 小时前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
zz-zjx3 小时前
Web接入层的“铁三角”---防盗链、反向代理,负载均衡(nginx)
前端·nginx·负载均衡