目录
1. HTML语义化
HTML语义化是指使用恰当的HTML标签来传达文档结构的含义。好的语义化具有以下优点：
- 提升网页的可访问性
- 有利于SEO优化
- 提高代码的可维护性
- 让页面结构更加清晰
示例对比
下面通过对比来说明语义化和非语义化的区别：
非语义化写法使用大量无意义的div，而语义化写法使用恰当的HTML5标签来表达内容结构。
文章标题
文章内容
文章标题
文章内容
效果预览：
语义化结构效果：
文章标题
文章内容
3. HTML5表单新特性
HTML5为表单增加了多种新的输入类型和属性，使表单验证和用户体验更好。
新增输入类型
HTML5引入了多种新的输入类型，使表单输入更加便捷和规范：
实际效果：
新增表单属性
HTML5还添加了许多实用的表单属性，提升表单的功能性和用户体验：
实际效果：
使用建议：
- 合理使用 placeholder 提供输入提示
- 必填字段应该使用 required 属性
- 使用 pattern 进行客户端验证
- 考虑用户体验，适当使用 autofocus
4. 多媒体与图形
视频播放
实际效果：
Canvas绘图示例
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 100, 80);
// 绘制文本
ctx.font = '24px Arial';
ctx.fillStyle = '#000000';
ctx.fillText('Hello Canvas', 120, 50);
// 绘制圆形
ctx.beginPath();
ctx.arc(200, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = '#0000FF';
ctx.fill();
实际效果：
5. 新增JavaScript API
本地存储
// localStorage使用示例
localStorage.setItem('username', 'zhangsan');
const username = localStorage.getItem('username');
// sessionStorage使用示例
sessionStorage.setItem('token', 'abc123');
const token = sessionStorage.getItem('token');
实际效果：
地理定位
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
console.log(`位置：${latitude}, ${longitude}`);
},
error => {
console.error('获取位置失败：', error);
}
);
}
实际效果：
6. 最佳实践
语义化编写建议
- 使用适当的标签表达正确的内容含义
- 避免过度使用div和span
- 保持构清晰，适当使用嵌套
- 使用有意义的类名和ID
常见问题解决方案
Q: 如何处理旧浏览器的兼容性问题？
A: 可以使用现代化工具和polyfill：