![Web前端学习笔记:HTML5+CSS3+JavaScript](https://wfqqreader-1252317822.image.myqcloud.com/cover/365/31304365/b_31304365.jpg)
1.3 HTML5的语法与结构
HTML5作为一门语言,它具有自己的结构和语法,主要是用标签来组织。本节对HTML5文档结构及部分标签进行相应说明。
1.3.1 HTML5的语法
学习一门语言的重点,就是学习这门语言的基本语法。当然学习HTML5也不例外,HTML5由一个个标签组合而成,标签又有自己的属性和属性值,接下来进入正题。
1.HTML5标签
标签是HTML5最基本单位和最重要的组成。使用“<”和“>”括起来,标签都是闭合的(规范)。标签分为单标记和双标记,单标记只有起始标记而没有结束标记,双标记是成对的开始标记和结束标记,基本语法如下:
<hr/> <!--单标记 也叫自结束标记-->
<title></title><!--标准标记,前面是开始标记,后面是结束标记,标记可以嵌套,但不能交叉嵌套-->
HTML5标签是有相应语义的(表1-3),语义是由浏览器来进行表现。
表1-3 部分HTML5标签
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-10.jpg?sign=1738905162-VnOjCBgsSnPdugIhelms9JBdtR9EZism-0-9231a4b0d18eadb5630d89238c506f6b)
2.HTML5标签属性
标签属性是标签的一部分,用于包含额外的信息。一个标签中可以有多个属性,并且属性和属性值成对出现,基本语法如下:
<img src=“../image/a.png”width=“100”height=“100”/>
<!--结构是 属性名=”属性值”-->
3.HTML5文档注释
注释是对文档的解释,浏览器不会对注释内容进行解析并呈现到页面上,只有查看HTML5文件源代码时才会看到注释,基本语法如下:
<!--这是HTML5注释-->
1.3.2 HTML5的文档结构
HTML5文件均以<html>标记开始,以</html>标记结束。一个完整HTML5文件包含头部和主体两个部分的内容,在头部标记<head></head>里可以定义标题、样式等,文档的主体<body></body>中的内容就是浏览器要显示的信息。
HTML4.01之前的文档声明,语法结构如下:
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML5已经对文档声明进行了简化,语法结构如下:
<!DOCTYPE html>
HTML5文档的基本结构,代码示例如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-11.jpg?sign=1738905162-afLLB3TJBdFrxwgAp0qt3QMnFl1PCZJF-0-a0e3e2d61b9251fe6a3b3c876337461b)
注意:页面中必须有文档声明,而且必须在文档页面的第一行!
1.头部内容
<head>标签用于表示网页的元数据,即描述网页的基本信息。其中主要包含以下标签:
1)<title>标签用于定义页面的标题,是成对标记,位于<head>标签之间。
2)<meta>标签用于定义页面的相关信息,为非成对标记,位于<head>标签之间。
3)<meta>标签可以描述页面的作者、摘要、关键词、版权、自动刷新等页面信息。
下面具体介绍<meta>标签的常用属性:
1)charset属性:设置文档的字符集编码格式。
HTML5中设置字符集编码,基本语法如下:
<meta charset="UTF-8">
HTML4.01之前的文档设置字符集编码,基本语法如下:
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8"/>
常见的字符集编码格式包括GB2312、GBK、UTF-8等。
GB2312是国标码,简体中文。GBK是扩展的国标码。UTF-8是一种针对Unicode的可变长度字符编码,也称万国码(常用)。
2)http-equiv属性:将信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值有Content-Type(文档类型)、refresh(网页定时刷新)、set-cookie(设置浏览器cookie缓存),需要配合content属性使用。http-equiv属性只是表明需要设置哪一部分,具体的设置内容需要放到content属性中。
基本语法如下:
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8"/>
3)name属性:将信息写给搜索引擎看。使用方法同http-equiv属性。
常用的属性值有author(作者)、keywords(网页关键字)、description(网页描述),它们在网页中必不可少。
基本语法如下:
<!--作者-->
<meta name="author"content="http://www.jredu100.com"/>
<!--网页关键字:多个关键字用英文逗号分隔-->
<meta name="keywords"content="HTML5,网页,Web前端开发"/>
<!--网页描述:搜索网站时,title下面的解释文字。-->
<meta name="description"content="这是我在杰瑞教育开发的第一个网页。"/>
使用<link>标签可以加载一个图片作为网页图标。<link>标签有如下属性:
1)rel属性:声明被链接文件与当前文件的关系,此处选icon。
2)type属性:声明被链接文件的类型,可以省略。
3)href属性:表示图片的路径地址。
基本语法如下:
<link rel="icon"type="image/x-icon"href="img/icon.jpg"/>
运行代码,在网页标签中的标题文字前显示一个小图片,这就是网页的图标。效果如图1-4所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-12.jpg?sign=1738905162-AhJ0Ysd1bTAXOx04oXbGICEF5AUDUh1e-0-a7594df144203a6c6232beff59f94d6c)
图1-4 网页图标
2.主体内容
标记<body></body>包含文档所有的内容,如文字、图像、表格、表单等元素。例如,在<body>中使用语义化标记设计网页,基本语法如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-13.jpg?sign=1738905162-fFBCLkTjkqqixzlilYESqWUjSQAV6iQa-0-45bd4415dc0fc9a05ef47404da59be4a)