专栏首页coding for loveCSS入门1-认识html之标签

CSS入门1-认识html之标签

(注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标签中的属性:(大多数标签的属性,尤其是一些公共属性,我会放到专门的章节去讲,特殊的属性我会直接在标签里面说明)

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

2.2.3 <meta>标签

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

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

  1. 指明文件的编码属性,如:
<meta charset="utf-8" /> 
  1. 把 content 属性关联到一个名称。如:
<meta name="author" content="Your Name"/>  
  1. 把 content 属性关联到 HTTP 头部。如:
<meta http-equiv="Refresh" content="5;url=http://www.jianshu.com/u/7a62ab344c39" />

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

  1. scheme 属性设置或返回用于解释 content 属性的值的格式。
<meta name="revised" content="2006-11-03" scheme="YYYY-MM-DD" />

2.2.4<style>标签

<style> 标签用于为 HTML 文档定义样式信息。详细的样式信息今后会慢慢讲到。

2.2.5link标签

<link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表,除此以外还有其他的用途。

  1. 链接外部样式表
<link rel="stylesheet" type="text/css" href="theme.css" />
  1. 为页面定义网站标志
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />  

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

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

  1. 预先获取资源 可以要求浏览器预先获取预计很快就要用到的资源。
<link rel="prefetch" href="/page2.html"/>  

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

2.2.6 <script>标签

<script> 标签用于定义客户端脚本,比如 JavaScript。 script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。

2.3 body标签能嵌套的标签

body 元素定义文档的主体。

body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。) 除了title,base,meta标签必须位于head,其余标签均可位于body,但是style和link标签最好位于head,因为html解析顺序是从上到下,可以防止闪屏。另外,这也是一种约定俗成,就像如果你拜托别人为你拿一杯水,你是希望对方用手递给你,还是用嘴叼给你呢?虽然效果一样,但肯定用手会更方便,感觉更好。

参考

W3school-HTML教程 HTML5: 理解head 其他参考链接在文中已给出。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS常用设计模式解析

    我想作为一个前端开发者,前期大多数只会关注代码的功能性。但是随着编程经验的增加,维护更大更复杂的代码模块,需要的就不仅仅只是代码功能性的实现,还需要关注代码的复...

    love丁酥酥
  • CSS常用布局实现01-水平居中

    居中是我们平常遇到的很常见的一种布局方式,主要分为水平居中,垂直居中,水平垂直居中。每种情况又分为,已知宽度,不知宽度,对块级元素居中,对行内替换元素水平居中,...

    love丁酥酥
  • 4-9 css 文件的代码分割

    本节主要是介绍 MiniCssExtractPlugin 插件,该插件用于将 css 提取成单独的文件。

    love丁酥酥
  • 【CSS选择符】后代选择符

    在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始...

    企鹅号小编
  • HTML标签分类

    在HTML页面中,带有“<>”符号的元素被称为HTML标签,如 <HTML>、<head>、<body>、<head>等都是HTML骨架结构标签。所谓标签就是放...

    爱知汇
  • 用户画像实践:神策标签生产引擎架构

    导读:用户画像是建立在数据基础之上的用户模型,是产品改进、精准营销等业务场景中不可或缺的重要基础。而构建用户画像的过程就是要给用户打上各种维度的标签,并基于标签...

    木东居士
  • HTML知识清单(附学习网站)

    上面知识点知识本人总结的,想要深入学习的话请跳转至http://www.w3school.com.cn/专业的前段技术学习网站,免费开源!!!

    时间静止不是简史
  • 用HTML写一篇简单的日记

    在这篇文章之前,已经初步的了解了HTML是怎么创建了,接下来,我们要用创建的文件去写我们进入前端的第一个demo,当然了,如果你忘记了,我之前的文章里也有详细的...

    守护最温柔的金木
  • 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地

扫码关注云+社区

领取腾讯云代金券