CSS元数据元素学习笔记

发表于 | 更新于 | 分类于

元素据元素即放置在 <head> 中的元素。其自身不属于文档内容，只提供关于 HTML 文档的信息，以及包含脚本和对外部资源的引用。

title

title 标签为文档设置标题。浏览器通常会将其内容显示在标签页上。是 head 中唯一必须的元素。每个 HTML 文档都应有且只有一个 title 元素。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>元数据元素</title>
</head>
<body>
	...
</body>
</html>

base

base 标签为页面上的所有链接规定基准地址及用户点击链接时的打开方式。基准地址可以让 HTML 文档中的相对链接在此基础上进行解析。有两个局部属性：href（必需）、target（可选）。

href属性

href 属性指定基准地址。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>元数据元素</title>
	<base href="https://myserve/webpage/">
</head>
<body>
	<a href="page01.html">page01</a>
</body>
</html>

当点击 a 标签时，浏览器将会从 https://myserve/webpage/page01.html 来加载文档。

target属性

target 属性设置用户点击链接时的打开方式。
有五个值：

值 说明
_blank 在新的标签页或窗口打开文档
_parent 在父窗口打开文档
_self 在当前窗口打开文档（默认）
_top 在顶层窗口打开文档
framename 在指定框架中打开文档

meta

meta 标签定义页面的元信息。一个 HTML 文档可以包含多个 meta 标签。
有四个局部属性：name（可选）、content（必需）、http-equiv（可选）、charset（可选）。

name/content

名/值对用来定义元信息。name 属性提供名/值对中的名称，content 属性提供名/值对中的值。
name 属性常用值：

值 说明
author 页面作者名
description 页面描述
keyword 页面关键字
generator 页面生成工具 
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
    <meta name="author" content="all4one4all">
	<meta name="description" content="a example page">
	<meta name="keyword" content="html,metadate">
</head>
<body>
	...
</body>
</html>

http-equiv/content

http-equiv 属性提供名/值对中的名称。用来改写 HTTP 标头字段的值。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
	<meta http-equiv="content-language" content="zh-cn,en"/>
</head>
<body>
	...
</body>
</html>

charset

charset 属性声明 HTML 文档内容所用的字符编码。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
    <meta charset="UTF-8">
</head>
<body>
	...
</body>
</html>

style

style 标签定义 HTML 文档的 CSS 内嵌样式。 有两个局部属性：type（必需）、media（可选）。

type

type 属性规定样式表的 MIME 类型。但浏览器支持的样式表类型只有 CSS 一种，所以 type 的值只能为 text/css。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
    <style type="text/css">
		...
	</style>
</head>
<body>
	...
</body>
</html>

media

media 属性为样式表规定不同的媒介类型。即控制文档在什么设备下使用该样式表。
media可用的设备类型：

设备类型 说明
all 用于所有设别（默认值）
aural 用于语音和音乐合成器
handheld 用于小型或手持设备
braille 用于小型或手持设备
print 用于打印机
projection 用于投影机
screen 用于电脑显示器屏幕
tty 用于打字机之类的等宽设备
tv 用于电视
embossed 用于凸点字符（盲文）印刷设备 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
    <style media="screen" type="text/css">
        ...
    </style>
    <style media="print">
        * {
            background: transparent;
            color: #000;
            box-shadow: none;
            text-shadow: none;}
        nav,aside {
            display: none;}
        body,article {
            width: 100%;
            margin: 0;
            padding: 0;}
        a {
            text-decoration: underline;}
    </style>
</head>
<body>
    ...
</body>
</html>

media常用的特性：

特性 说明
width height 指定浏览器窗口宽度和高度
device-width device-height 指定设备的宽度和高度
aspect-ratio device-aspect-ratio 指定浏览器或设备的像素宽高比
resolution 指定设备的分辨率
orientation 指定设备的屏幕方向

script

script 标签用来在页面中加入脚本。有五个局部属性：type（必需）、src（可选）、defer（可选）、async（可选）、charset（可选）。

type

type 属性表示引用或定义的脚本类型。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
    <script type="javascript">
		document.write("元素据元素");
	</script>
</head>
<body>
	...
</body>
</html>

src

src 属性规定外部脚本的地址。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
	...
</body>
</html>

defer与async

defer 与 async 属性控制脚本的执行方式。且只适用于外部脚本。
defer 属性规定对脚本的加载和执行进行延迟，直到页面加载完为止。
async 属性规定异步加载和执行脚本。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
	<script defer src="page01.js"></script>
	<script async src="page02.js"></script>
</head>
<body>
	...
</body>
</html>

noscript

noscript 标签规定在浏览器禁用或不支持脚本的情况下的处理。
一般可以显示提示信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
	<script src="page01.js"></script>
	<noscript>
		<p>提示：您需要开启Javascript</p>
	</noscript>
</head>
<body>
	...
</body>
</html>

也可以在浏览器禁用或不支持脚本时跳转另一个地址。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
	<script src="page01.js"></script>
	<noscript>
		<meta http-equiv="refresh" content="0;https://myserve/webpage/page02.html">
	</noscript>
</head>
<body>
	...
</body>
</html>

link

link 标签定义 HTML 与外部资源的关系。
link 元素有六个局部属性：href、hreflang、media、rel、sizes、type。

href

href 属性指定被链接文档的位置。

hreflang

hreflang 属性指定被链接文档的语言。

media

media 属性说明被关联文档用于什么设备。

rel

rel 属性说明当前文档与被链接文档之间的关系。

sizes

sizes 属性规定被链接资源的尺寸（仅适用于 rel="icon"）。

type

type 属性说明被链接文档的 MIME 类型。

链接样式表

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
	<link rel="stylesheet" type="text/css" href="https://myserve/webpage/css/reset.css">
	<link rel="stylesheet" type="text/css" href="https://myserve/webpage/css/page01.css">
</head>
<body>
	...
</body>
</html>

链接网站图标

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>元素据元素</title>
	<link rel="icon" type="image/x-icon" href="https://myserve/webpage/icon/favicon.ico" size="16x16">
</head>
<body>
	...
</body>
</html>