前端知识速记--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"
相关推荐
岁月宁静1 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者2 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~2 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge2 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再2 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴2 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟3 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1234 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚4 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院4 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js