肉渣教程

HTML head

上一节 下一节

HTML <head> 元素

head元素是所有头部类型元素的容器,head元素和body元素都在html元素内,但是head元素在body元素前。<head>标签内的元素主要是CSS样式表、JS脚本以及其他一些原信息。<head>标签内一般可包括如下标签:<title><style><meta><link><script>以及<base>

HTML <title> 元素

<title>元素是用来定义文档的标题,在所有的HTML/XHTML文档中这都是必要的。 <title>元素: * 定义的标题会显示在浏览器的选项卡上 * 该页面被搜索引擎收录后,搜索引擎显示结果中的页面名称也就是来源title元素的内容 * 文档的标题即该页面被用户收藏在收藏夹中显示的名称

<!DOCTYPE html>
<html>

<head>
  <title>页面标题</title>
</head>

<body>
该网页文档的具体内容 bla bla bla ...
</body>

</html>

运行一下

HTML <style> 元素

<style>元素是用来定义具体的CSS样式表的。这里大致理解即可,具体在CSS教程中会学到。

<style>
  p {
    color:Tomato;
     }
 </style>

运行一下

HTML <link> 元素

<link>元素是用来定义外部CSS样式表,href属性即外部CSS样式表的链接地址。

<link rel="stylesheet" href="/static/css/bootstrap.min.css">

运行一下

HTML <meta> 元素

<meta>元素被用于定义元数据信息的,该元素是不会显示在页面内容里,其主要是在进行一种信息的声明。

大多情况下,meta元素可用来声明页面的描述、关键词、文档作者、文档主要语言以及其他元数据。浏览器、搜索引擎等程序会获取meta元素以进行进一步操作。

如下所示,使用meta声明文档编码格式为UTF-8格式:

<meta charset="UTF-8">

如下所示,声明对网页内容的描述:

<meta name="description" content="学习魔教功法">

如下所示,声明网页的关键词,方便搜索引擎索引:

<meta name="keywords" content="葵花宝典,吸星大法,化功大法,九阴白骨爪">

如下所示,声明网页的作者:

<meta name="author" content="邪王">

如下所示,声明文档每30秒自动刷新:

<meta http-equiv="refresh" content="30">

将上述综合起来,如下例所示:

<meta charset="UTF-8">
<meta name="description" content="学习魔教功法">
<meta name="keywords" content="葵花宝典,吸星大法,化功大法,九阴白骨爪">
<meta name="author" content="邪王">

运行一下

通过meta设置viewport

在做移动端自适应网站时,可利用meta来设置viewport(用户视窗部分的特性声明)。浏览器可以根据viewport这种元数据信息做出相应显示特性,width=device-width代表视窗大小就是设备宽度;initial-scale=1.0代表初始大小就是正常大小,不放大也不缩小;user-scalable=no就是代表不让用户缩小页面。

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, user-scalable=no">

HTML响应式设计里说了这问题,同时也可以参考这篇文章

HTML <script> 元素

<script>元素是被用来定义JavaScript脚本的,在前面的HTML JS章节已经说过了,这里就不展开而论了。备注:<head>标签里可以直接通过script元素来放js脚本,但是更多情况是用script元素来引入外部js脚本。

HTML <base> 元素

<base>元素是用来定义所有相对路径的url地址是相对哪个绝对路径的,以及还可以设置默认的target属性。

<base href="https://logo.zhuanfou.com/" target="_blank">

运行一下

<html> <head> <body> 缺失会怎样?

当然是不会怎么样!根据HTML5的标准,<html><head><body>丢失并不会影响浏览器对html代码的解析显示。如下例所示:

<title>页面标题</title>
<h1>H1标题</h1>
<p>段落</p>

运行一下

在专否沙盒的案例代码中,专否经常把<html> <head> <body>等元素省略,但是在正常编写html文档时专否绝对不推荐省略,专否之所以省略,只是为了突出案例要点。

总结一下

标签 描述
<head> 定义该文档相关信息
<title> 定义文档标题
<base> 定义默认所有对象链接的绝对路径和target属性
<link> 定义CSS外部样式表
<meta> 定义html文档相关的元数据信息
<script> 定义客户端JavaScript脚本
<style> 定义CSS内部样式表

HTML head

上一节 下一节