HTML 头部

<head> 元素是所有头部元素的容器。可包含脚本、样式表,元信息等等。下面将介绍常用的几个标签。

标签描述
<title>标题
<link>定义文档与外部资源的关系
<style>定义 css 样式表
<script>定义 JavaScript 脚本
<meta>元信息
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />	
  <script type="text/javascript" charset="utf-8" src="index.js"></script>
  <title> pangugle 教程</title>
  <style type="text/css">
		p { color:blue }
  </style>
</head>

HTML - <title>元素

定义文档的标题,它是 head 部分中唯一必需的元素。

<title> pangugle 教程</title>

HTML - <link> 元素:

标签定义了文档与外部资源之间的关系,通常用于链接css样式表和设置网站小图标(*.ico)。

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

这里,rel:定义的是该文档与被链接文档之间的关系。
type:规定外部链接文档是什么打开类型。css:type="text/css"。网站小图标:type="image/x-icon"。

HTML - <style> 元素:

定义了HTML文档的样式。

<style type="text/css">
	p { color:blue }
</style>

HTML - <script> 元素:

用于加载脚本文件引用地址,如JavaScript。还可以用以下这种方式直接写脚本

<script type="text/javascript">
    console.log("你想打印的内容");
</script>
注:console.log 在控制台打印输出。

HTML - <meta> 元素:

  • meta 提供有关这份HTML文件的相关信息,称为元数据
  • 元数据也不显示在页面上
  • 通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据

1.设置编码方式,中文网站需要设置编码方式,不然页面容易乱码。

<meta charset="utf-8" />

2.name = "keywords" - 搜索引擎定义关键词

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

3.name = "description" - 网页定义描述内容

<meta name="description" content="pangugle.com 技术教程">

4.name = "author" - 定义网页作者

<meta name="author" content="pangugle.com">

5.name = "viewport" - 定义移动端页面显示

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

用移动端打开页面时,
width=device-width 页面宽度为移动端宽度
initial-scale=1.0 页面首次被显示时无缩放
maximum-scale=1.0 页面最大缩放级别为1,也就是页面不允许放大
user-scalable=no 页面不允许用户手指缩放
注:以上实例常用于页面适配 pc 端和移动端