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 端和移动端