网页设计与制作教程Web前端开发（第7版）课件：HTML5基础-HTML5的基本结构和语法规则.pptx

本节介绍的基本结构，包括HTML的语法结构、文档结构、标签的格式以及代码的编写规范等。HTML5概述HTML5的基本结构和语法规则

目录HTML5概述1.1Web的基本概念1.2HTML5的基本结构和语法规则1.3编辑HTML文件1.4实训——制作社区网版权信息习题1

1.2.1HTML5文档的基本结构HTML5文档的基本结构如下。!DOCTYPEhtmlhtmllang=zh-CNheadmetacharset=UTF-8title文档标题/title/headbody文档正文部分/body/html1.2HTML5的基本结构和语法规则

1．!DOCTYPEhtml标签!DOCTYPE标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。文档类型声明的语法格式如下：!DOCTYPEhtml这行代码称为DOCTYPE（documenttype，文档类型）声明。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。!DOCTYPEhtml声明必须放在每一个HTML文档的最顶部，在所有代码和标签之前。1.2HTML5的基本结构和语法规则

2．html…/html标签html标签位于!DOCTYPE标签之后，称为HTML文档标签，也被称为根标签，用于告诉浏览器其自身是一个HTML文档。HTML文档标签的语法格式为：htmllang=zh-CNHTML文档的内容/htmlhtml处于文档的最前面，表示HTML文档的开始，即浏览器从html开始解释，直到遇到/html为止。每个HTML文档均以html开始，以/html结束。lang属性为文档设置语言，对于简体中文，设置为“zh-CN”。如果省略lang，将依据浏览器的设置。1.2HTML5的基本结构和语法规则

3．head…/head标签head标签用于定义HTML文档的头部信息，也称为头部标签，紧跟在html标签之后，主要用来封装其他位于文档头部的标签。HTML文档头标签的语法格式为：head头部的内容/head文档头部内容在开始标签html和结束标签/html之间定义，一个HTML文档只能含有一对head…/head标签。1.2HTML5的基本结构和语法规则

4．metacharset标签head…/head标签中的metacharset指定网页文档中的字符集，称为HTML文档编码，HTML5文档直接使用meta元素的charset属性指定文档编码，语法格式如下：metacharset=UTF-8为了被浏览器正确解释和通过W3C代码校验，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际的编码一致，否则就会呈现为乱码。对于中文网页的设计者来说，指定代码的字符集为“UTF-8”。1.2HTML5的基本结构和语法规则

5．title…/title标签HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。其语法格式如下：title网页标题/title1.2HTML5的基本结构和语法规则

6．body…/body标签body标签定义HTML文档要显示的内容，也称为主体标签。浏览器中显示的所有文本、图像、表单与多媒体元素等信息都必须位于body…/body标签内，body标签内的信息才是最终展示给用户看的。HTML文档主体标签的语法格式为：body网页的内容/bodybody标签定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在文档体中。1.2HTML5的基本结构和语法规则

1.2.2HTML5的基本语法1．标签（tag）（1）双标签其格式为：标签受标签影响的内容/标签开始标签标志一段内容的开始，结束标签是指与开始标签相对的标签。结束标签比开始标签多一个斜杠“/”。成对出现的标签也称闭合标签。例如，html表示HTML文档开始，到/html结束，从而形成一个HTML文档。1.2HTML5的基本结构和语法规则

（2）单标签单独出现的标签没有相应的结束标签的标签，其格式为：标签常见的单标签有area、base、basefont、br、col、hr、img、input、param、link、meta等。1.2HTML5的基本结构和语法规则

2．元素（element）（1）有内容的元素例如，title和/title是标签，下面代码是一个title元素：title淘宝网-淘！我喜欢/title（2）空元素“空元素”只有起始标签而没有结束标签，也没有元素内容。例如，br、hr（横线）元素就是空元素。1.2