1、HTML头部元素
在<head>元素中你可以插入脚本（scripts），样式文件(css)，及各种meta信息。可以添加在头部区域的元素标签为：
一、<title>:网页标题信息，会显示在搜索引擎结果页面中
二、<style>:定义样式文件引用地址，也可以在<style>元素中直接添加样式来渲染HTML文档
举例如下：
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {background-color:yellow}
</style>
</head>
</html>三、<meta>:原数据元素meta用于指定网页的描述，关键字，文件的最后修改时间，作者，和其他原数据
举例如下：
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="xiaomo">
<meta name="keywords" content="HTML">
</head>
</html>分别是字符设定，作者信息和搜索引擎提供的关键字。
四、<link>:定义文档与外部资源之间的关系，通常用于链接到样式表。
举例如下：
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>五、<script>:用于加载脚本文件，如：JavaScript。
举例如下：
<DOCTYPE html>
<html>
<script>
document.write("Hello,World!")
</script>
</html><script>标签既可包含脚本语句，也可以通过“src”属性指向外部脚本文件。
二、HTML区块
区块元素：在游览器显示时，通常会以新行来开始（和结束）如：<h1>,<p>,<ul>,<table>等
内联元素：在显示时通常不会以新行开始，如：<b>,<td>,<a>,<img>等
<div>：元素
区块元素，可用于组合其它HTML元素的容器；没有特定的含义，游览器会在其前后显示折行
与CSS一同使用，可用于对大的内容块设置样式属性；另一个常见的用途是文档布局
<span>：元素
内联元素，可用作文本的容器；没有特定的含义；与CSS一同使用，可用于对文本设置样式属性
三、HTML布局
使用<div>进行页面布局，实现一个下图所示的布局。
代码如下：
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>头部元素布局</title>
</head>
<body>
<div id="all" style="background-color:white;height:900px;width:1920px"> <!--id="all"定义名字-->
<div id="header" style="background-color:blue;height:100px;width:1920px"><!--style="background-color:white"指定页面背景为白色 -->
标题栏:
</div>
<div id="left" style="background-color:red;height:800px;width:300px;float:left"><!--float:left定义在最左边 -->
导航栏:
</div>
<div id="content" style="height:700px;width:1620px">
正文内容:
</div>
<div id="foot" style="background-color:green;height:100px;width:1620px;float:left">
底部:
</div>
</div>
</body>
</html>
<!--blue蓝色；red红色；green绿色-->