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 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

Eclipse常用快捷键,每个程序员都必须知道的

? Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率。小坦克我花了一整天时间, 精选了一些常用的快捷...

1847
来自专栏闻道于事

HTML表格表单综合——用户注册表

今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-/...

1.5K6
来自专栏jeremy的技术点滴

前端ReactJS技术介绍

4133
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

TakePhoto-轻量级Android照片处理框架V2.0发布

TakePhoto 简介 TakePhoto是一款用于在Android设备上获取照片(拍照或从相册、文件中选择)、裁剪图片、压缩图片的开源工具库,目前最新版本2...

4229
来自专栏惶心 - 技术博客

为博客标题自定义字体

最近 @Shawn 的群里超级多人问 Shawn 博客标题字体怎么弄的。(其实我的博客也弄了只不过他们不看而已)。

4084
来自专栏前端小叙

推荐两款简单好用的图片放大jquery插件

一、zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zo...

6139
来自专栏小狼的世界

Vimperator的有用操作

可以有一个变通的办法复制,先按下"Ctrl+V",然后再用快捷键复制,接下来Vim的快捷键又起作用了。现在还有一个困惑的地方是不用鼠标,如何选中网页中自己希望的...

893
来自专栏前端知识分享

第104天:web字体图标使用方法

  注意:新版iconfont支持多色图标,这些多色图标在Unicode模式下将不能使用,如果有需求建议使用Symbol的引用方式

1081
来自专栏疯狂的小程序

关于微信小程序内置组件swiper,circular使用分享

swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技...

64510
来自专栏DeveWork

阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了)。拿来调试DeveMobile 与EaseMobi...

2.8K10

扫码关注云+社区

领取腾讯云代金券