CSS入门1-认识html之标签

2017-11-21 本文已影响76人 love丁酥酥

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）

1. 概览

人体由各个器官部分组成，比如大的类别划分有头脑，身躯，四肢，小的有鼻子，眼睛，手指，每个器官都有自己的名字和作用。html网页与人体构成一样，只不过它是由一个个标签组成。大到head，body，小到p，span，每个标签都有其特性和功能。首先，我们来认识三个最基本的标签：html，head和body。这是一个html文件不可或缺的三个标签。

1.1 <html>标签

<html>
</html>

这是一个html文件最重要也是最容易忽略的标签，浏览器如何识别是html，还是xml或是其他类型的文件呢？就像你如何知道你身边的生物是一个人而不是其他种类的动物呢？不是通过后缀，而是这个标签html。html标签用来标识一个html文档，告诉浏览器用html的规则来进行解析，<html> 与 </html> 标签限定了文档的开始点和结束点。

那么如果你的文件只写了这一段代码，保存后用浏览器运行，会是怎样的呢？一片空白。可如果进入开发者模式，查看页面的元素类型。你会发现html标签内部增加了head和body两个标签。是的，正如人需要有头脑和身躯一样。html必须要有head和body。

1.1.png

1.2 <head>标签

<html >
<head>
</head>
</html>

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：base,link,meta,script,style,title。稍后我们会详细讲解各标签的具体作用。

1.3 <body>标签

<html >
<head>
</head>
<body>
</body>
</html>

body 元素定义文档的主体。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

2. 标签

2.1 为何有这么多标签

一个网页已经有三个标签了，尤其是head和body标签，为什么不把所有的内容都堆在这两个标签，而要创作那么多的标签呢？想象一下，你是用嘴喝水，用眼睛看东西，用手拿东西，用脚走路，那么我们为何没有统一称为用脑袋看东西，用脑袋吃东西呢，用身体拿东西，用身体走路？这么说是否会让你感觉奇怪，虽然这种表述没有错误，但是最大的缺点就是不够精确。比如，我需要你眨一下眼睛，我该怎么表述呢，脑袋眨一下吗？显然不可能。我们需要定义精细的标签来操纵具体的部位，浏览器也一样。

标签是嵌套的，正如脑袋上有嘴巴，嘴巴有牙齿一样。但是有的部位只能出现在特定的地方，比如嘴巴在脑袋上，有的却可以存在在任何地方，比如你的牙齿和你的手指头都有骨骼。那么对于html而言，哪些标签是特定出现在某些地方的，哪些又是可以存在于多个地方的呢？

2.2 head标签能嵌套的标签

head标签里除了title以外的内容不会显示，这一点使大多数人都忽略了head标签的重要性。很可能学习了前端很久的人，让他说清楚head里面具体能包含哪些标签，以及这些标签的作用的时候，大多数人能想到的就是，title，script，link，style，还有一部分人会想到meta，但是极少数人能说清楚meta标签的具体作用。至于base，能说出这个的真的是很棒了。当然它用得少，说不出来情有可原，但是头部的标签本就不多，了解他们能使你对head的理解更加全面深入。

2.2.1 <title>标签

用来定义网页的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。如图所示：

2.2.1.png

2.2.2 <base>标签

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

2.2.2.png

如图，大家不妨点一下页面中的链接，然后去掉base看一下效果。
这里说一下base标签中的属性：（大多数标签的属性，尤其是一些公共属性，我会放到专门的章节去讲，特殊的属性我会直接在标签里面说明）

href即为指定的基准URL。
target属性规定在何处打开页面上的所有链接，包括值：
1. _blank：在新窗口中打开被连接文档；
2. _self：默认，在相同的框架中打开被链接文档；
3. _parent：在父框架打开被链接文档；
4. _top：在整个窗口中打开被链接文档；
5. framename：在指定框架中打开被链接文档。

2.2.3 <meta>标签

meta标签可谓是head标签内部最重要的标签了，其拥有众多的属性，由于篇幅所限，这里简单介绍一下。详细了解可以参考这篇文章Http meta详解。当然，我说过再好的的东西那是别人的，自己理解下来并且重演一遍，才会收获属于自己的，下一篇我将专门讲解这个标签。

meta元素用来定义文档的各种元数据，meta元素可以有多种用途，但每个meta元素只能用于一种用途，如果需要使用不止一种，就需要在head元素中添加多个meta元素。下面来看一下其用途：

指明文件的编码属性，如：

<meta charset="utf-8" />

把 content 属性关联到一个名称。如：

<meta name="author" content="Your Name"/>

把 content 属性关联到 HTTP 头部。如：

<meta http-equiv="Refresh" content="5;url=http://www.jianshu.com/u/7a62ab344c39" />

5秒后会定义到我的简书主页。

scheme 属性设置或返回用于解释 content 属性的值的格式。

<meta name="revised" content="2006-11-03" scheme="YYYY-MM-DD" />

2.2.4<style>标签

2.2.5link标签

链接外部样式表

<link rel="stylesheet" type="text/css" href="theme.css" />

为页面定义网站标志

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

浏览器载入HTML页面时，会加载并显示网站标志。

注：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素，大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。shortcut icon，特指浏览器中地址栏左侧显示的图标，一般大小为16x16，后缀名为.icon。

预先获取资源
可以要求浏览器预先获取预计很快就要用到的资源。

<link rel="prefetch" href="/page2.html"/>

注：目前不是所有浏览器都支持该功能。

2.2.6 <script>标签

2.3 body标签能嵌套的标签