HTML学习（一）-CSDN博客

本文链接：https://blog.csdn.net/Andrew_Lii/article/details/78357744

什么是HTML？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML文档=网页，而一套标签组成HTML文档，即：
我们学习HTML，也就是学习如何使用不同的标签组成一个完整的HTML文档，做出我们想要的网页。

一个最简单的html文档：

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

标签语言并不难，但是有许多的标签非常重要或者比较难于理解，我们应该重点学习这些标签，下面是我学习过程遇到的一些值得深究的标签

head标签：用于定义文档的头部，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：base, link, meta, script, style以及 title。
title定义文档的标题，它是 head 部分中唯一必需的元素

可用于head部分的标签都要好好学习

base标签：base>标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 base 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。
这其中包括 a、img、link、form 标签中的 URL

什么意思呢？URL有相对和绝对之分，设当前url为字符串a，相对url为字符串b，base标签中href元素指向的url为字符串c。当不存在base标签时，b会链接到a的后面，成为一个绝对url；当base标签存在时，c会取代a，b会链接到c的后面，成为一个绝对url。

举个栗子：

<html>
<head>
<base href="http://www.4399.com/" />
</head>

<body>
<a href="flash/77868.htm">黄金矿工</a>
<br />
<p>实际url为：</p>
<p>"http://www.4399.com/flash/77868.htm"</p>

</body>
</html>

http://www.4399.com/2333
scheme://host.domain:post/path.filename

scheme：定义internet服务类型，最常用http（超文本传输协议）
host：定义域主机（http默认域主机为www）
domain：因特网域名，例：4399.com
path：定义服务器上的路径（若省略，文档必须位于网站根目录）
filename：定义文档/资源名称

link标签：链接一个外部样式表

W3Schoo上的栗子：

<html>

<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>

</html>

备注：rel属性指定link链接的是哪种类型的文件。在用于样式表时，link标签得到了几乎所有浏览器的支持，但是几乎没有浏览器支持其他方面的用途。

style标签：用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是”text/css”。

举个栗子：

<html>
<head>
<style type="text/css">
h1 {color:red;font-style:italic}
p {color:blue;font-style:oblique}
</style>
<title>
style标签
</title>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

如果要链接外部样式表，则就要用到我们前面讲到的link标签了。

div标签:可以把文档分割成独立的，不同的部分。它可以作为严格的组织工具，并不予任何格式相连。

举个栗子：也就是我们可以把div标签看着是一个大盒子，而大盒子里面可以继续放小盒子。我们会把这个div标签当作一个一个的盒子，然后按照大盒子装小盒子的规律，来把div有层次的嵌套起来，这样我们再通过CSS样式来布局这个div盒子，就能让我们的网站前台展示的有模有样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
    <title>div标签</title>
    <style>
        .dahezi{
            width:500px;
            height:300px;
            background: #000;
        }
        .xiaoheizi_1{
            width: 250px;
            height: 150px;
            background: #000099;
            float: left;
        }
        .xiaoheizi_2{
            width: 250px;
            height: 150px;
            background: #006600;
            float: right;
        }
    </style>
</head>
<body>
    <div class="dahezi">
        <div class="xiaoheizi_1">
        </div>
        <div class="xiaoheizi_2">
        </div>
    </div>
</body>
</html>