摘 要：HTML5 是最新一代的超文本标记语言，新增了许多功能强大的组件元素，大大降低了开发人员的劳动强度，提高了开发效率，HTML5 结合 CSS 3.0 和 JavaScript，能够设计出美观实用且功能强大的网站。文章基于 HTML5 设计开发了一个 Web 站点首页，页面由标题导航栏、主体和页脚三部分组成，标题部分实现了功能强大的轮播图，主体部分左侧是纯 CSS 可折叠菜单，右侧实现了鼠标移动可自动切换选项卡。
关键词：HTML5；轮播图；可折叠菜单；自动切换选项卡
DOI:10.19850/j.cnki.2096-4706.2023.06.018
中图分类号：TP393 文献标识码： A 文章编号：2096-4706（2023）06-0069-04
Design and Implementation of Web Site Based on HTML5
CHEN Zhaoyun
(School of Electronics and Information Engineering, Heyuan Polytechnic, Heyuan 517000, China)
Abstract: HTML5 is the latest generation of hypertext markup language, adding many powerful component elements, greatly reducing the labor intensity of developers, improving the development efficiency. HTML5 combines CSS 3.0 and JavaScript to design beautiful, practical and powerful websites. This paper designs and develops a Web site homepage based on HTML5. The page is composed of three parts: title navigation bar, body and footer. The title part realizes a powerful Carousel figure, the left side of the body is a pure CSS collapsible menu, and the right side realizes automatic switching tab by moving the mouse.
Keywords: HTML5; carousel figure; collapsible menu; automatic switching tab
参考文献：
[1] 莫小梅，毛卫英 . 网页设计与 Web 前端开发案例教程——HTML5、CSS3、JavaScript [M]. 北京：清华大学出版社，2019.
[2] 马科 .HTML5 App 商业开发实战教程 [M]. 北京：高等教育出版社，2016.
[3] 黑马程序员 .HTML5+CSS3 网页设计与制作 [M]. 北京：人民邮电出版社，2020.
[4] 黑马程序员 . 网页设计与制作项目教程 [M]. 北京：人民邮电出版社，2017.
[5] 闫睿 .DIV+CSS 网站布局案例精粹：第 2 版 [M]. 北京：清华大学出版社，2015.
作者简介：陈赵云（1982.05—），男，汉族，江西丰城人，讲师，硕士研究生，研究方向：物联网技术应用、Web 系统开发。