从本节开始,正式进入HTML5的基础知识学习阶段。请准备好电脑和开发环境。
一、初识HTML基本文档结构
一张符合规范的网页会有DOCTYPE、html、head、body元素,这4个文档元素确定了HTML文档的骨架。
如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML文档结构</title>
<meta charset="UTF-8">
</head>
<body>
这是一个最基础的网页结构
</body>
</html>
二、庖丁解牛,探四元素
- DOCTYPE元素是一不同于其他元素的标签。这个声明的作用是告诉浏览器它要处理的是一份HTML文档。
- html元素是文档的唯一根节点元素,也是HTML内容开始的部分。
- head元素是文档中用来包含文档元数据的地方。比如title和meta都是文档元数据元素。
- body元素是用来包含文档具体内容的容器。在网页上看到的内容都是在body容器中。
注意:最好不要将元素的位置混乱的编写。按照示例代码中的结构编写HTML页面就好了。
三、玩转元数据元素
什么是元数据元素?最简单的理解即出现的head中的元素。元数据元素有什么用?元数据元素不属于HTML文档,它们主要是提供一些有关HTML文档的信息。
1、元数据元素速览
- title:设置网页的标题或名称。
- base:指定当前网页(文档)的基准URL。
- meta:这个元素比较特殊,它有3种用法,一种是指定k/v(键/值)形式的元数据;二是声明HTML文档内容所用的字符编码;三是模拟HTTP标头字段。
2、综合演示
<!DOCTYPE html>
<html lang="en">
<head>
<!--设置文档标题-->
<title>HTML文档结构</title>
<!--设置文档编码-->
<meta charset="UTF-8">
<!--K/V使用演示-->
<meta name="author" content="sugarYe">
<meta name="date" content="2017/09/09">
<!--模拟http标头,每隔5秒钟刷新页面-->
<meta http-equiv="refresh" content="5">
</head>
<body>
hello
</body>
</html>
PS:更多精彩用法等你来发现,赶快造起来!迫不及待想跟更多不谙世事的开发者一起玩耍的小伙伴。