嵌套,提升代码可读性与搜索引擎友好度。
1、新建一个文本文件,将后缀名改为.html,用浏览器直接打开验证效果。
2、在
内编写:
。
立即学习“前端免费学习笔记(深入)”;
3、接着添加:。
4、在浏览器中右键“查看页面源代码”,确认标签名称与嵌套层级是否符合规范。
二、使用HTML5原生多媒体标签嵌入音视频
无需依赖Flash插件,
1、准备一个MP4格式的视频文件(如demo.mp4),与HTML文件放在同一文件夹下。
2、插入代码:。
3、保存后刷新页面,检查视频是否可播放、是否显示控制条、是否支持全屏。
4、替换为
三、实践HTML5增强型表单控件与属性
HTML5新增email、url、number、date、required、placeholder等属性和输入类型,前端即可完成基础数据校验。
1、创建表单区域:。
2、添加日期选择器:,观察浏览器自动渲染的日历控件。
3、设置数值范围限制:。
4、在Chrome中提交空邮箱字段,确认浏览器是否弹出“请填写此字段”提示。
四、启用HTML5 Canvas绘图基础
Canvas提供位图画布,通过JavaScript API绘制图形、动画和交互内容,是前端可视化的重要入口。
1、在HTML中添加:。
2、在<script>标签内获取上下文:<strong><font color="green">const ctx = document.getElementById('myCanvas').getContext('2d');。</script>
3、绘制矩形:ctx.fillStyle = '#4CAF50'; ctx.fillRect(10, 10, 150, 80);。
4、刷新页面,确认绿色矩形是否出现在画布左上角指定坐标位置。
五、使用localStorage实现页面级数据持久化
localStorage允许在浏览器中长期保存字符串数据,关闭页面后仍可读取,适合缓存用户偏好或表单草稿。
1、在控制台(F12 → Console)中执行:localStorage.setItem('username', 'testuser');。
2、刷新页面后再次执行:console.log(localStorage.getItem('username'));,确认输出testuser。
3、在HTML中添加按钮,绑定点击事件:localStorage.removeItem('username');。
4、点击按钮后执行getItem验证,确认返回值为null。