2.2.1标记与元素
1.,,等都是标记
起始标记记为<…>,结束标记记为</…>
2.标记分为普通标记和空标记
（1）普通标记：成对出现，包含起始标记和结束标记
基本语法：控制的文字内容
起始标记告诉浏览器开始开始执行此标记的功能，结束标记告诉浏览器结束执行此标记。
注意：
标记可以成对嵌套但是不能交叉嵌套。
比如对于,,来说
可以成对嵌套,这是正确的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<hr/>
</body>
</html>
2.2.2HTML属性
属性：与标记相关的特性描述称为属性。此外还要为属性赋值。
1.超链接标记：…，href是它的属性，要为href赋值，赋的值是链接。
<a href = "https://mail.qq.com/">QQ邮箱</a>
2.空标记也可以加一些属性。就是一个空标记，src,width,height是它的属性。
<img src = "img\Stefanie Sun.jpg" width = 200 height = 100 />
<img src = "img\Stefanie Sun.jpg" width = 200 height = 100 />
所以总结以下它的基本语法：
对于普通标记：<标记名 属性1 = “” 属性2 = “” …>控制的文字内容</标记名>
对于空标记：<标记名 属性1 = “” 属性2 = “” … />
注意：属性放在起始标记的尖括号中(中)，控制的文字内容放在起始标记和结束标记之间。
属性之间没有先后顺序。
2.3HTML5文档的结构
2.3.1HTML5文档的基本结构
1.HTML5文档的基本结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
...
</body>
</html>
2.（1）HTML文档分为文档头和文档体。
（2）和之间存放头部信息，用来说明网页的基本情况。
（3）和之间存主体信息，用来描述网页的正文部分。
2.3.2网页标题
<title>中国传统文化</title>
2.3.3定义元数据meta
1.meta元数据是什么：元数据定义在文档的head部分,用来描述HTML文档的信息。这些信息通常包括对网页的描述，网页中的关键词等。
meta定义的数据不会显示在网页上，只在源程序中显示。
2.一些经常使用的元数据
（1）定义网页的字符集
<meta charset="UTF-8">
（2）定义搜索引擎关键字
<meta name = "keywords" content = "孙燕姿"/>
（3）对网页的描述
<meta name = "description" content = "我遇见谁，会有怎样的对白。"/>
(4)页面的最新版本，将属性值设置为revised，属性值写版本信息
<meta name = "revised" content = "九岁阿,2020/10/01"/>
(5)将属性http-equiv属性的值修改为refresh，content设置秒数，就可以是页面在几秒内刷新一次
<meta http-equiv = "refresh" content = "5"/>
3.元数据的综合应用
设置字符集是UTF-8，页面描述是“张旭简介”，页面关键词是“张旭，草圣，古诗”，10秒刷新一次。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "description" content = "张旭简介">
<meta name = "keywords" content="张旭，草圣，古诗"/>
<meta http-equiv="refresh" content = "10"/>
<title>元数据</title>
</head>
<body>
</body>
</html>
2.3.4HTML5新增的结构标记
1.header标记定义文档的页眉
2.footer定义文档的或章节的页脚
3.nva标记定义导航链接的部分
4.section用于分组与主题相关的内容，例如一本书中的各章，通常可以作为数据库的一部分。
4.综合应用，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增结构标记</title>
</head>
<body>
<header>
这里是页眉部分
</header>
<nav>
<a href = "https://weixin.qq.com/">微信</a>
<a href = "https://mail.qq.com/">QQ邮箱</a>
<a href = "https://www.foxmail.com/">Foxmail</a>
</nav>
<p>网页的其它部分内容</p>
<footer>
这里是页脚部分
</footer>
</body>
</html>
2.4综合案例——基本的HTML5网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "description" content = "关于HTML5"/>
<meta name = "keywords" content = "HTML5,CSS,网页设计"/>
<title>基本的html网页</title>
</head>
<body>
<header>
HTML5特性
</header>
<nav>
<a href = "https://weixin.qq.com/">微信</a>
<a href = "https://mail.qq.com/">QQ邮箱</a>
<a href = "https://www.foxmail.com/">Foxmail</a>
<a href = "https://www.tencent.com/zh-cn">腾讯</a>
</nav>
<section>
<p>正文部分的内容1</p>
<p>正文部分的内容2</p>
<p>正文部分的内容3</p>
<p>正文部分的内容4</p>
<p>正文部分的内容5</p>
</section>
<footer>
联系方式：175xxxxx42@qq.com
</footer>
</body>
</html>
