HTML5权威指南——用元数据元素说明文档

最新推荐文章于 2024-08-15 12:25:18 发布

gyypwrs

最新推荐文章于 2024-08-15 12:25:18 发布

阅读量183

点赞数

分类专栏： HTML5权威指南文章标签： html5 1024程序员节

本文链接：https://blog.csdn.net/gyypwrs/article/details/109247260

版权

HTML5权威指南专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了如何利用元数据元素设置文档标题、URL基准、说明文档和字符编码，以及如何通过link和script元素管理CSS和脚本资源。重点讲解了meta、base、link和script标签的使用及其在网页中的作用。

摘要由CSDN通过智能技术生成

元数据元素用来提供HTML文档的信息，一般放在head元素中。

设置文档标题

在浏览器的窗口或者标签页上显示该内容

<!doctype html>
<html>
	<head>
		<title>Example</title>
	<head>
	<body>
		<p> I like apples </p>
	<body>
<html>

设置URL的解析基准

base元素用来设置HTML文档中相对链接地址的解析基础。相对链接忽略了URL中的协议，主机和端口部分，base元素还设置了点击链接的打开方式，以及提交表单时浏览器作何反应

href属性指定基准URL
target属性指定浏览器打开URL的方式

<!doctype html>
<html>
	<head>
		<title>Example</title>
		<base href="http://titan/listings/" />
	<head>
	<body>
		<p> I like apples </p>
		<a href="page2.html">page2</a>
	<body>
<html>

用元数据说明文档

每个meta元素只能有一种用途，若想使用多个就要添加多个meta元素。

1.指定名/值元数据对
name属性用来表示元数据的类型，而content属性用来提供值

元数据名称	说明
application name	当前页所属的web应用系统名称
author	当前页的作者名
description	当前页的说明
generator	用来生成HTML的软件名称
keywords	逗号分隔，描述页面的内容

还有一些元数据扩展如robots，元数据类型有三个大多数大多数引擎都认识的值：noindex(表示不要索引本页)，nofollow(表示不要顺着本页的链接继续搜索下去)，noarchive(表示不要将本页存档或者缓存)

<html>
	<head>
		<title>Example</title>
		<meta name="author" content="hongyu"/>
		<meta name="description" content="a simple example"/>
		<meta name="robots" content="noindex"/>
	<head>
	<body>
		<p> I like apples </p>
	<body>
<html>

2.声明字符编码
声明字符编码的属性就是charset，他的值一般就是UTF-8，因为UTF-8编码能以最少的字节数表示所有的Unicode字符。

<meta charset="UTF-8"/>

3.模拟HTTP标头字段
http-equiv属性有三个值如下

属性值	说明
refresh	以秒为单位指定时间间隔，在此时间之后将从服务器重新载入当前页面，或者指定一个URL让浏览器载入
default-style	指定页面优先使用的样式表
content-type	另一种用来声明html页面所使用的字符编码的方式

<html>
	<head>
		<title>Example</title>
		<meta http-equiv="refresh" content="5">
	<head>
	<body>
		<p> I like apples </p>
	<body>
<html>

定义CSS样式

style元素可以用来定义HTML文档的内嵌CSS样式。
1.指定样式类型
即type属性，他的值一般就是text/css
2.指定样式的作用范围
使用scoped属性，那么其中定义的样式只作用于该元素的父元素以及所有的兄弟元素，若没有用则作用于整个文档。
3.指定样式适用的媒体
media属性的值如下：

设备	说明
all	将样式作用于所有的设备
aural	将样式作用于语音合成器
braille	将样式用于盲文设备
handheld	将样式作用于手持设备
projection	将样式作用于投影仪
print	将样式用于打印预览和打印页面
screen	将样式作用于将样式作用于计算机显示器屏幕
tv	将样式用于电视机
tty	将样式作用于电传打字机之类的等宽设备

<style media="screen" type="text/css">

media还可以用来设计更加具体的使用条件如下,以下两个样式分别作用于浏览器窗口宽度小于500px和大于500px时除了使用AND还可以使用NOT和表示OR的逗号，


<style media="screen AND (max-width:500px)"></style>
<style media="screen AND (min-width:500px)"></style>

指定外部资源

link元素可以用来指定外部资源，如CSS样式表或者为页面定义网站的标志图标或者是需要预先获取的资源。
以下是link元素的属性

属性	说明
href	指定资源的URL
hreflang	指定关联资源使用的语言
media	指定关联的内容用于那种设备
rel	说明文档与关联资源的关系类型
sizes	指定图标的大小
type	指定所关联资源的MIME类型，如text/css，image/x-icon

link元素中的rel属性设定决定浏览器对待link元素的方式，以下是rel属性的一些值

值	说明
alternate	链接到文档的替代版本
author	链接到文档的作者
help	链接到当前文档的说明文档
icon	指定图标资源
license	链接到当前文档的相关许可证
pingback	指定一个回探（pingback）服务器。
prefetch	预先获取一个资源
stylesheet	载入外部样式表

1.用link元素载入外部样式表

<link rel="stylesheet" type="text/css" href="style.css"/>

2.为页面定义网站标志
各种浏览器处理这种图标的方式不尽相同，常见的是将其显示在相应的标签页上或收藏夹前面。

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

3.预先获取资源
要求浏览器预先获取很快将要用到的资源

<link rel="prefetch" href="/page2.html"/>

使用脚本元素

与脚本相关的元素有两个，一个是script另一个是noscript（不读书果然啥都不知道）。前者用来定义脚本并控制其执行过程，后者用来规定在浏览器不支持脚本或这禁用脚本的情况下的处理办法（一般用户主动禁用脚本，或者是浏览器的安全级别很高，会禁用一些脚本）。script元素还可以放在html文档的任意位置。
以下是script元素的局部属性：

属性	说明
type	表示所引用或者定义的脚本类型，对于javascript脚本此属性可以省略
src	指定外部脚本的URL
defer/async	用来指定脚本的执行方式，只能与src属性一起使用
charset	外部脚本文件所使用的字符编码，该属性只能与src属性一同使用

1.定义文档的内嵌脚本

<script>
	document.write("This is from the script")
</script>

2.载入外部脚本库

<script src="simple.js"></script>

3.推迟脚本的执行
默认情况下，浏览器一遇到script元素就会停止处理HTML文档，转而载入脚本并执行其中的脚本。在脚本执行完毕之后，浏览器才会继续解析HTML文档。常会出现的一种情况就是实例还未在HTML文档中出现，但脚本已经执行完毕了，在用户看来这个脚本就像没有执行一样。为解决这个问题有两种方法一是将script元素放到文档的最后，第二种方法就是在script元素中加defer，浏览器遇到带defer属性的script元素就会将脚本的加载和执行放到HTML文档中的所有元素都已经得到解析之后。需要注意的是推迟脚本的执行，但是并没有推迟脚本的加载哦！

<script defer src="index.js"></script>

4.异步执行脚本
（在没看书之前我以为异步执行和推迟执行是一样的）浏览器对待script元素的默认行为是加载和执行脚本的同时暂停处理页面，各个script元素依次同步（在脚本加载和执行的过程不再管别的事情）执行。对于有一些脚本一般不需要与HTML文档中的元素相互作用可以采用async属性。但需要注意的是，使用async属性，脚本的执行不再按照定义他们的次序执行。（我曾见看过一篇文章大致讲的就是使用async属性，脚本的加载是按照顺序的，但是由于脚本的大小不一样，先加载完的就立即执行了，所以总的来看，执行的次序就不是定义的顺序啦）