1、HTML头部元素
在元素中你可以插入脚本（scripts），样式文件(css)，及各种meta信息。可以添加在头部区域的元素标签为：
一、</span>:网页标题信息，会显示在搜索引擎结果页面中</p>
<p><strong>二、</strong><span style="color:#4da8ee;"><style></span>:定义样式文件引用地址，也可以在<span style="color:#4da8ee;"><style></span>元素中直接添加样式来渲染HTML文档</p>
<p>举例如下：</p>
<pre><code class="language-html"><DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {background-color:yellow}
</style>
</head>
</html></code></pre>
<p><strong>三、</strong><span style="color:#4da8ee;"><meta></span>:原数据元素meta用于指定网页的描述，关键字，文件的最后修改时间，作者，和其他原数据</p>
<p>举例如下：</p>
<pre><code class="language-html"><DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="xiaomo">
<meta name="keywords" content="HTML">
</head>
</html></code></pre>
<p>分别是字符设定，作者信息和搜索引擎提供的关键字。</p>
<p><strong>四、</strong><span style="color:#4da8ee;"><link></span>:定义文档与外部资源之间的关系，通常用于链接到样式表。</p>
<p>举例如下：</p>
<pre><code class="language-html"><DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html></code></pre>
<p><strong>五、</strong><span style="color:#4da8ee;"><script></span>:用于加载脚本文件，如：JavaScript。</p>
<p>举例如下：</p>
<pre><code class="language-html"><DOCTYPE html>
<html>
<script>
document.write("Hello,World!")
</script>
</html></code></pre>
<p><span style="color:#4da8ee;"><script></span>标签既可包含脚本语句，也可以通过“src”属性指向外部脚本文件。</p>
<h2>二、HTML区块</h2>
<p><strong>区块元素：</strong>在游览器显示时，通常会以新行来开始（和结束）如：<span style="color:#4da8ee;"><h1>,<p>,<ul>,<table></span>等</p>
<p><strong>内联元素：</strong>在显示时通常不会以新行开始，如：<span style="color:#4da8ee;"><b>,<td>,<a>,<img></span>等</p>
<p><strong><span style="color:#4da8ee;"><div></span>：元素</strong></p>
<p>区块元素，可用于组合其它HTML元素的容器；没有特定的含义，游览器会在其前后显示折行</p>
<p>与CSS一同使用，可用于对大的内容块设置样式属性；另一个常见的用途是文档布局</p>
<p><strong><span style="color:#4da8ee;"><span></span>：元素</strong></p>
<p>内联元素，可用作文本的容器；没有特定的含义；与CSS一同使用，可用于对文本设置样式属性</p>
<h2>三、HTML布局</h2>
<p>使用<span style="color:#4da8ee;"><strong><div></strong></span>进行页面布局，实现一个下图所示的布局。</p>
<p><a href="http://img.e-com-net.com/image/info8/b3df1f5bfd4a4d0b84ae63ce1e92aa27.jpg" target="_blank"><img alt="HTML基础学习第四课（HTML头部元素与布局）_第1张图片" height="371" src="http://img.e-com-net.com/image/info8/b3df1f5bfd4a4d0b84ae63ce1e92aa27.jpg" width="650" style="border:1px solid black;"></a></p>
<p>代码如下：</p>
<pre><code class="language-html"><DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>头部元素布局
