1. HTML5 的核心新特性HTML5 引入了大量新元素、属性旨在减少对第三方插件如 Flash的依赖并更好地支持多媒体和图形内容。1.1 语义化标签HTML5 新增了一系列语义化标签使文档结构更清晰对搜索引擎和辅助技术更友好。!DOCTYPE html html head title语义化示例/title /head body header h1网站标题/h1 nav ul lia href#首页/a/li lia href#关于/a/li /ul /nav /header main article h2文章标题/h2 p文章内容.../p /article aside侧边栏/aside /main footer页脚信息/footer /body /html主要标签包括header,nav,main,article,section,aside,footer等。1.2 多媒体支持原生支持音频和视频无需插件。!-- 视频 -- video width640 height360 controls source srcmovie.mp4 typevideo/mp4 您的浏览器不支持 video 标签。 /video !-- 音频 -- audio controls source srcaudio.mp3 typeaudio/mpeg 您的浏览器不支持 audio 标签。 /audio1.3 图形与绘图通过canvas元素和 Canvas API 可以进行动态的、脚本化的位图绘制常用于游戏、图表等。canvas idmyCanvas width200 height100/canvas script // 注意script 标签仅用于示例实际 CKEditor 输出中应避免此处为代码块内容 var canvas document.getElementById(myCanvas); var ctx canvas.getContext(2d); ctx.fillStyle green; ctx.fillRect(10, 10, 150, 75); /script此外svg用于定义矢量图形。1.4 表单增强新增了多种输入类型和属性提升了用户体验和开发效率。新的输入类型email,url,number,range,date,color等。新的表单属性placeholder占位符,required必填,autofocus自动聚焦,pattern正则验证等。form label foremail邮箱/label input typeemail idemail placeholdernameexample.com required lt;label forquot;volumequot;gt;音量lt;/labelgt; lt;input typequot;rangequot; idquot;volumequot; minquot;0quot; maxquot;100quot;gt; lt;input typequot;submitquot; valuequot;提交quot;gt; /form2. CSS3 的革命性功能CSS3 将样式表模块化引入了众多令人兴奋的特性让视觉效果和布局控制达到了新的高度。2.1 选择器进阶CSS3 新增了强大的选择器可以更精确地定位元素。属性选择器input[typetext]伪类选择器:nth-child(n),:not(selector)伪元素选择器::before,::after/* 选择所有偶数行的列表项 */ li:nth-child(even) { background-color: #f2f2f2; } /* 为所有链接添加一个箭头图标 */ a::after { content: →; }2.2 盒模型与布局Flexbox弹性盒子和Grid网格布局彻底改变了 CSS 的布局方式使复杂布局的实现变得简单直观。/* Flexbox 示例水平居中排列 */ .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ gap: 10px; /* 子项间距 */ } /* CSS Grid 示例创建两列布局 / .grid-container { display: grid; grid-template-columns: 1fr 2fr; / 第一列占1份第二列占2份 */ gap: 20px; }2.3 视觉效果与动画圆角、阴影与渐变无需图片即可实现精美效果。.fancy-box { border-radius: 10px; /* 圆角 */ box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* 阴影 */ background: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变背景 */ }过渡与动画让元素状态变化更平滑或创建复杂动画序列。/* 过渡鼠标悬停时颜色渐变 */ .button { background-color: blue; transition: background-color 0.3s ease; } .button:hover { background-color: darkblue; } /* 关键帧动画 */ keyframes slidein { from { transform: translateX(-100%); } to { transform: translateX(0); } } .sliding-element { animation: slidein 1s ease-out; }2.4 响应式设计媒体查询是响应式设计的核心允许根据设备特性如屏幕宽度应用不同的样式。/* 默认样式移动端优先 */ body { font-size: 14px; } /* 平板设备及以上 */ media (min-width: 768px) { body { font-size: 16px; } .sidebar { display: block; } } /* 桌面设备 */ media (min-width: 1024px) { body { font-size: 18px; } .container { max-width: 1200px; } }3. 总结HTML5 和 CSS3 共同构成了现代前端开发的基石。HTML5 通过语义化、多媒体和本地存储等功能让网页结构更清晰、能力更强CSS3 则通过 Flexbox、Grid、动画和响应式设计让视觉表现和布局达到了前所未有的灵活性与精美度。掌握它们不仅是学习具体语法更是理解如何构建语义清晰、性能优良、体验卓越、维护方便的现代 Web 应用。随着 Web Components、CSS Houdini 等新技术的演进HTML 和 CSS 的生态仍在蓬勃发展持续学习是每一位 Web 开发者的必修课。