[HTML]Web前端开发技术19（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，hgroup， figcaption，figure，section——喵喵画网页

最新推荐文章于 2025-12-04 17:59:42 发布
最新推荐文章于 2025-12-04 17:59:42 发布
阅读量2.6k 收藏 134
点赞数 156
CC 4.0 BY-SA版权
分类专栏： 喵喵画网页 文章标签： html 前端 html5 计算机学习 javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ormstq/article/details/135902686
本文介绍了HTML5的新结构元素，包括header、nav、article、section、aside、footer，并详细讲解了hgroup、figure与figcaption的使用。此外，还探讨了HTML5表单的新属性，如autocomplete、novalidate，并通过课后练习帮助读者掌握JavaScript在表单中的应用。

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

HTML5 文档结构

HTML5 页面结构

HTML5 新增结构元素

1．header 标记

2．nav 标记

3.article标记

4．section 标记

5．aside 标记

6．footer 标记

HTML5 新增页面元素

hgroup 标记

figure 标记与figcaption 标记

HTML5 表单

HTML5 新增的表单属性

1.form标记的新属性

2．input 标记的新属性

课后练习

网页标题：head中定义JS函数

网页标题：调用外部js文件的JavaScript函数

网页标题：告警框与确认框的应用

网页标题：提示框的应用

网页标题：数值类型数据的应用

总结

前言

这个章节比较长，我们慢慢地哇~

掌握 HTML5 页面结构。
学会使用 HTML5 新增元素和新增属性。
掌握 HTML5 新增表单元素及新增属性的设置方法。

HTML5

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Web前端开发技术实验11 HTML5、CSS3与JavaScript基础
2302_78967568的博客
06-07 1036
采用HTML5和CSS3多列设计一个简易的HTML5页面
HTML5 基础与CSS3 应用
m0_75079074的博客
05-31 974
时 间和时区偏移是可选的。该标记能够以机器可读的方式对日期和时 间进行编码。该标记不会在任何浏览器中呈现任何特殊效果。
133.大学生HTML5期末大作业 —【培训机构公司网页】 Web前端网页制作 html5+css3
VX_L_5201314168的博客
11-07 673
本实例应用html5+css3，应用 Div、导航条、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
676. 大学生HTML5期末大作业 ―【高端的科技公司网页】 Web前端网页制作 html5+css3+js
A240307的博客
12-09 3644
本实例应用html5+css3+js： jQuery动画特效、图片轮翻、三级页面、下拉菜单、悬浮菜单等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
306.大学生HTML5期末大作业 —【简单大气的狗粮商城网页】 Web前端网页制作 html5+css3+js
VX_L_5201314168的博客
12-02 896
本实例应用html5+css3+js，带图片轮翻效果，代码简单，适用于大学生网页课程作业设计，本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
149.大学生HTML5期末大作业 —【潮流小游戏主题网页】 Web前端网页制作 html5+css3+js
VX_L_5201314168的博客
11-09 1244
本实例应用HTML5+CSS3+JS：Div、导航条、Banner、图片轮翻效果、鼠标滑动特效、Table、悬浮菜单、留言表单、注册页面、登录页面、背景特效等。适用于大学生网页课程作业设计，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
658. 大学生HTML5期末大作业 ―【蓝色大气的生产企业网页】 Web前端网页制作 html5+css3+js
A240307的博客
11-28 1027
本实例应用html+css+js：Jquery动画、图片轮翻、无缝滚动插件、鼠标滑动特效等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
52. Web前端网页案例——【高端的网站建设网页（ 11页）】 大学生期末大作业 html5+css3+js
2301_82212046的博客
11-29 1041
本实例应用html5+css3+js： 导航菜单、图片轮翻、三级页面、下拉菜单、注册等。👉温馨提示：这里所有的网页案例主要应用HTML、CSS、JS等关键技术知识，有静态网页，更有动态网页，所有网页案例都支持如DW、HBuilder、Vscode、Text 等任意HTML主流编辑软件进行编辑修改，亦支持包括IE、Chrome、Firefox、Safari主流浏览器浏览。
171. 大学生HTML5期末大作业 ―【Bootstrap 简单的摄影开课吧网页】 Web前端网页制作 html5+css3
2301_82212046的博客
02-20 1413
本实例应用html5+css3：Bootstrap、登录等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
656. 大学生HTML期末大作业 ―【Bootstrap框架科技企业响应式自适应网页】 Web前端网页制作 html5+css3+js
A240307的博客
11-27 1090
本实例应用html5+css3+js： 导航菜单、图片轮翻、三级页面、下拉菜单、无缝滚动插件、鼠标滑动特效、留言表单等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
221.大学生HTML5期末大作业 —【Bootstrap框架蛋糕店响应式自适应网页】 Web前端网页制作 html5+css3
VX_L_5201314168的博客
11-19 1098
本实例应用html5+css3： Bootsrap框架、导航栏、图片轮翻效果、登录页面等。响应式布局，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
208.大学生HTML5期末大作业 —【简单的家政服务公司响应式自适应网页】 Web前端网页制作 html5+css3+js
VX_L_5201314168的博客
11-17 821
​​本实例应用html5+css3+js： Div、导航栏、Banner、选项卡、无缝滚动插件、图片轮翻效果、鼠标滑动特效等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。响应式布局，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
html css js网页制作成品——娃娃html+css+js 4页附源码
卡拉米
12-01 85
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、关于篆刻、作品展示、历史渊源和联系我们等页面模块。文章详细说明了网站布局结构、程序语言选择、素材处理方法以及文件组织方式，并提供了核心HTML代码示例。网站设计兼容主流浏览器，适合修改为各类主题展示网站。作者还分享了编程学习建议，推荐初学者通过刷题巩固基础，并提供了获取更多前端开发资源的渠道。该网站可作为大学生毕业设计或期末作业的参考模板。
使用 HTML + JavaScript 实现手写签名功能
最新发布
QQ26843500的博客
12-04 711
本文介绍了一个基于HTML5 Canvas实现的手写签名网页应用。该应用主要功能包括： 提供米字格背景和范字（"海纳百川"）作为书写参考 支持鼠标和触摸屏两种书写方式 包含清空画布和下载签名图片两个功能按钮 技术实现上使用双Canvas叠加方案，底层Canvas绘制米字格和范字作为引导层，上层Canvas实现手写功能。通过JavaScript事件监听实现笔迹追踪，采用贝塞尔曲线平滑处理书写轨迹。响应式设计适配不同设备，并提供PNG格式的签名下载功能。整体界面简洁，采用蓝色标题栏和白色书写
【HTML Living Standard 01】HTML基础概述
风高秋月白，雨霁晚霞红
12-01 947
HTML-01 基础概念相关。
HTML DOM 对象
wjs2024的博客
12-02 465
DOM（Document Object Model）是一种抽象的模型，用于表示 HTML 和 XML 文档。通过 DOM，开发者可以访问和操作文档中的任何元素，如文本、图像、链接等。DOM 对象化地表示了网页的结构，使得开发者可以像操作对象一样操作网页内容。HTML DOM 对象是网页设计和开发的基础，掌握 DOM 对象的基本概念、常用方法和实际应用，将有助于提高开发效率和代码质量。本文对 HTML DOM 对象进行了简要介绍，希望对您有所帮助。
HTML 基础
wjs2024的博客
12-02 353
HTML是构建网页和网站的基础，掌握HTML基础知识对于成为一名优秀的网页开发者至关重要。本篇文章为您介绍了HTML的发展历程、基本结构、常用标签以及一些高级特性。希望您能够通过学习，更好地掌握HTML，为您的网页开发之路打下坚实的基础。
【HTML+CSS】使用HTML与后端技术连接数据库
2509_94101589的博客
12-01 834
HTML负责构建网页的骨架，提供用户交互的表单等元素。用户通过表单输入数据，并通过表单的提交（submit）事件将数据发送到后端。
【JavaWeb】HTML_常见标签_表单项标签
qq_43494013的博客
12-04 126
【JavaWeb】HTML_常见标签_表单项标签
HTML5与CSS3新特性解析：从基础到实战
"这份资料是关于HTML5与CSS3的基础教程PPT，主要涵盖了HTML5的新特性和一些基本概念。" HTML5是Web标准的重要更新，它不仅改进了原有的HTML4，还引入了一系列新特性，使得网页开发更加高效且功能强大。HTML5成为...
评论 130
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猫佛佛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值