HTML5+CSS3+JavaScript Web前端开发实例教程课件 单元2 HTML5 基础.pptxVIP

单元2HTML5基础

【目录】2.1HTML5是什么2.1.1HTML5网页结构2.1.2HTML5元素2.2HTML5属性2.3HTML5标题2.4HTML5段落和换行【商业实例】“仿写淘宝首页”项目——编写网页元素任务一开发顶部导航区域任务二编写搜索框区域的HTML5代码任务三编写分类、轮播图和用户信息模块的元素【综合实训】设计黄山风景介绍网页【单元小结】目录

【学习导读】HTML作为“前端三剑客”之一，是网页的重要组成部分。它是一种用于创建网页的标记语言，目前几乎所有的网站都是通过HTML技术开发的，例如我们熟知的百度、网易、腾讯的网站。浏览器将HTML解析成各种各样的网站内容，它通过使用不同的元素和属性来定义网页的结构和内容，并与其他技术（如CSS和JavaScript）一起实现网页的交互功能。HTML是进行前端开发必须要掌握的内容，也是前端开发的基础。本单元将详细介绍HTML5的网页结构、HTML5属性等。学习导读

【学习目标】知识目标1．了解HTML5网页的基本结构。2．掌握HTML5属性和标题的使用方法。3．掌握HTML5段落的使用方法。能力目标1．能够给HTML5元素添加属性。2．能够开发不同级别的段落标题。素质目标1．培养学生的思维能力。2．培养学生的探索精神。3．培养学生良好的学习习惯。学习目标

思维导图

2.1HTML5是什么HTML5是HTML的第五个版本。HTML5是一种用于构建和呈现网页内容的标准，主要功能是控制网页显示的内容，它引入了许多新的功能和语义元素，以提供更好的网页体验。HTML5引入众多语义化标签，清晰描述页面结构，便于开发者编写与维护代码。HTML5无需第三方插件，借助video和audio标签可直接嵌入多种格式的音视频到网页中，增强多媒体展示效果。HTML5提供canvas元素用于编程绘图和创建动画，可创建高质量且无损缩放的图形与动画。HTML5提供了WebWorker，可在浏览器端创建独立后台线程处理复杂计算，不影响主线程运行，避免页面卡顿，提升网页性能。1234HTML5通过localStorage和sessionStorage在浏览器端存储数据，并有applicationcache支持离线应用，提升用户离线使用体验。5

2.1HTML5是什么2.1.1HTML5网页结构1．HTML5根元素HTML5文档的根元素是html/html，它包含整个HTML文档的内容。HTML5文档的头部包含一些元数据和定义，如文档标题、引入的外部资源等。头部用head/head标签表示。使用title/title标签来定义网页的标题，标签将显示在浏览器的标签页上。使用link标签来引入外部CSS。使用script标签来引入外部JavaScript脚本。2．头部部分3．网页标题4．引入外部样式表5．引入外部脚本

2.1HTML5是什么2.1.1HTML5网页结构6．其他元数据可以使用meta标签来定义其他元数据，如字符编码、视口设置等。HTML5文档的网页内容位于body/body标签中。可以在其中添加各种HTML5元素来组织和展示网页的内容，如标题、段落、图像、链接等。HTML5元素由开始标签（Openingtag）、内容和结束标签（Closingtag）组成。开始标签使用尖括号（）括起来，结束标签使用尖括号和斜线（/）括起来。一些元素可以省略结束标签，如br、img等。可以使用!----将HTML5中的注释括起来，以添加开发者的说明或解释代码的用途，注释不会被浏览器解析。7．网页内容8．HTML5元素9．HTML5注释

2.1HTML5是什么2.1.2HTML5元素HTML5元素是构成HTML文档的基本构建块。它们用于定义和组织网页的结构和内容。每个HTML5元素由一个开始标签和一个结束标签组成，中间包含元素的内容。元素的基本格式为元素内容/元素例如，p元素用于定义段落，其开始标签为p，结束标签为/p。在开始标签和结束标签之间可以插入文本、其他元素和属性等。

2.1HTML5是什么2.1.2HTML5元素HTML5元素可以嵌套在其他元素中，形成层次结构。例如，div元素可以包含多个p元素，形成一个段落的容器。代码如下所示（实例位置：单元2/2-1.html）。bodydivh1超文本标记语言/h1p欢迎来到HTML的世界/p/div/body运行效果

2.2HTML5属性HTML5元素具有属性，就像长方形具有长宽属性一样。每个元素的属性不一样，