HTML5 CSS3网页设计与制作（第2版）课件 第2章 初识HTML5.pptx

第2章初识HTML5《HTML5+CSS3网页设计与制作（第2版）》

学习目标/Target了解HTML5的优势，能够对其优势进行归纳总结了解标签的分类，能够阐述单标签和双标签的差异熟悉标签的关系，能够设置具有嵌套和并列关系的标签了解HTML5的基本结构，能够区分HTML5和XHTML的结构差异

学习目标/Target掌握标签属性的用法，能够为标签添加对应的属性掌握HTML文本控制标签的用法，能够使用不同类型的标签定义文本掌握HTML图像标签的用法，能够在网页中定义图像熟悉HTML5头部相关标签，能够归纳头部各类标签的作用

章节概述/Summary近年来，HTML5成为互联网行业的热门技术，它改变了Web应用的开发方式，在PC端和移动端都得到广泛应用。作为网页设计和制作人员，应该顺应时代潮流，掌握HTML5的相关技术。本章将从HTML5的优势、基本结构、标签概述、文本控制标签、图像标签等知识着手，详细讲解HTML5的相关内容。

目录/Contents010203HTML5的优势HTML5的基本结构标签概述04文本控制标签

目录/Contents0506图像标签阶段案例——制作新闻页面

HTML5的优势2.1

2.1HTML5的优势什么是HTML5？

2.1HTML5的优势HTML5经历了旧版本HTML和XHTML的发展，从某种意义上说，它是HTML标准更新的产物。因此，HTML5并没有给用户带来太大的冲击，HTML的大部分标签在HTML5中仍然适用。HTML5的优势主要体现在兼容性、合理性、易用性3个方面，本节将做具体介绍。

2.1HTML5的优势HTML5并不是对旧版本HTML颠覆性的革新，它的核心理念是保持与旧版本HTML的完美衔接，因此HTML5具有很好的兼容性。1.兼容性HTML5延续了HTML宽松的语法。HTML5中恢复了对大写标签的支持。HTML5制订了一个通用的标准。

2.1HTML5的优势HTML5中新增或删除的标签都是根据对现有网页和用户使用习惯的分析得出的结果。2.合理性例如分析大量的网站页面，可以发现很多网页制作人员使用divid=header来定义网页的头部区域，为了更准确地描述网页结构，HTML5直接引入了header标签。

2.1HTML5的优势作为当下流行的标签语言，HTML5遵循简单至上的原则，具有易用性。3、易用性简化的字符集声明。简化的DOCTYPE声明。以浏览器原生能力（浏览器自身特性功能）替代部分JavaScript代码。

HTML5的基本结构2.2

2.2HTML5的基本结构XHTML1.0的基本结构简化后的HTML5文档基本格式

2.2HTML5的基本结构!DOCTYPE位于HTML文档的最前面，用于向浏览器说明当前文档使用的HTML版本。html位于!DOCTYPE之后，称为根标签，用于标识HTML文档的开始和结束。head标签用于定用于设置网页文档的头部内容，称为头部标签，嵌套在html内部，主要用来容纳其他位于网页文档头部的标签。body用于定义网页文档要显示的内容，称为主体标签。在网页文档中，所有文本、图像、音频和视频等内容的代码都必须放在body内。!DOCTYPEhtmlheadbody

标签概述2.3

2.3标签概述在HTML页面中，使用带有“”的文本符号来表示HTML标签。例如，上面提到的html、head、body等都是HTML标签。HTML标签是一种用于描述网页内容与结构的代码。本节将详细讲解标签的分类、标签间的关系、标签的属性以及HTML5头部相关标签。

2.3.1标签的分类双标签单标签双标签由开始标签和结束标签组成。单标签也称空标签，是指用一个标签符号即可完整描述某个功能的标签。标签名内容/标签名标签名/表示该标签作用开始，称为开始标签表示该标签作用结束，称为结束标签注释标签注释标签是HTML文档中便于阅读和理解但又不需要显示在页面中的注释文字。!--注释语句--

2.3.1标签的分类多学一招：为什么需要单标签？为了方便和简化HTML的语法，引入了单标签，用来表示不需要包含任何内容或子元素的元素。相比于双标签，单标签的语法更加简洁明了。使用单标签的优势包括以下几点。简洁性：单标签不需要额外编写闭合标签，使得代码更加简洁、紧凑，提高了开发效率。易读性：单标签能够清晰地表达出元素本身的含义，不需要额外的内容或子元素。兼容性：单标签得到了广泛支持，能够在各种HTML解析器和浏览器中正常解析和显示。【总结】

2.3.2标签的关系嵌套关系也称为包含关系，可以简单理解为一个双标签里面又包含其他的标签。1.嵌套关系htmlhe