- 介绍
HTML的基本结构：
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
-
head 标签
head标签与html标签、body标签一样是一个文档必须的元素。
head标签用于定于文档头部信息，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：base, link, meta, script, style, 以及 title。
注意:应该把 head 标签放在文档的开始处，紧跟在 html 后面，并处于 body 标签或 frameset 标签之前。 -
title 标签
title 定义文档的标题，它是 head 部分中唯一必需的元素。浏览器会以特殊的方式来使用标题，设置的内容不会显示在页面中，通常把它放置在浏览器窗口的标题栏或状态栏上，如设置为空标题展示当前页面的地址信息。
当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
(1) dir 属性
规定元素中内容的文本方向rtl、ltr。
(2) lang 属性
规定元素中内容的语言代码。 -
meta 标签
meta 元素往往不会引起用户的注意，但是meta对整个网页有影响，会对网页能否被搜索引擎检索，和在搜索中的排名起着关键性的作用。
meta有个必须的属性content用于表示需要设置的项的值。
meta存在两个非必须的属性http-equiv和name, 用于表示要设置的项。
比如,设置的项是Content-Security-Policy设置的值是upgrade-insecure-requests。
| 属性 | 值 | 描述 |
|---|---|---|
| http-equiv | content-type 、default-style 、refresh | 把 content 属性关联到 HTTP 头部。 |
| name | application-name、author、description、generator 、keywords | 把 content 属性关联到一个名称。 |
| scheme(H5 删除) | format/URI | HTML5不支持。 定义用于翻译 content 属性值的格式。 |
| charset( H5 New) | character_set | 定义文档的字符编码。 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
整体来看，HTML5之前，meta标签只有两个主要属性，分别是 name 属性和 http-equiv 属性。 HTML5新添加"charset".
4.1 http-equiv 属性
http-equiv一般设置的都是与http请求头相关的信息，设置的值会关联到http头部。也就是说浏览器在请求服务器获取html的时候，服务器会将html中设置的meta放在响应头中返回给浏览器。常见的类型比如content-type, expires, refresh, set-cookie, window-target, charset， pragma等等。
4.1.1 content-type
比如：可以用来声明文档类型，设置字符集，content-type几乎所有的属性都可以在meta中进行设置。
这样设置浏览器的头信息就会包含:
content-type: text/html charset=utf8
4.1.2 expires
用于设置浏览器的过期时间, 其实就是响应头中的expires属性。
<meta http-equiv="expires" content="31 Dec 2021">
expires:31 Dec 2008
4.1.3 refresh
该种设定表示5秒自动刷新并且跳转到指定的网页。如果不设置url的值那么浏览器则刷新本网页。
<meta http-equiv="refresh" content="5 url=http://www.baidu.com">
4.1.4 window-target
强制页面在当前窗口以独立页面显示, 可以防止别人在框架中调用自己的页面。
<meta http-equiv="window-target" content="_top">
4.1.5 pragma
禁止浏览器从本地计算机的缓存中访问页面的内容
<meta http-equiv="pragma" content="no-cache">
4.2 name 属性
name属性主要用于描述网页，与对应的content中的内容主要是便于搜索引擎查找信息和分类信息用的, 用法与http-equiv相同，name设置属性名，content设置属性值。
4.2.1 author
author用来标注网页的作者
<meta name="author" content="aaa@mail.abc.com">
4.2.2 description
description用来告诉搜素引擎当前网页的主要内容，是关于网站的一段描述信息。
<meta name="description" content="这是我的HTML">
4.2.3 keywords
keywords设置网页的关键字，来告诉浏览器关键字是什么。是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
<meta name="keywords" content="Hello world">
4.2.4 generator
表示当前html是用什么工具编写生成的，并没有实际作用，一般是编辑器自动创建的。
<meta name="generator" content="vscode">
4.2.5 revised
指定页面的最新版本
<meta name="revised" content="V2，2015/10/1">
4.2.6 robots
告诉搜索引擎机器人抓取哪些页面，all / none / index / noindex / follow / nofollow。
<meta name="robots" content="all">
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；
nofollow：文件将不被检索，页面上的链接可以被查询。
4.3 scheme 属性
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 head 标签的 profile 属性指定的概况文件中进行了定义。html5不支持该属性。
- base 标签
base标签定义了文档的基础url地址，在文档中所有的相对地址形式的url都是相对于这里定义的url而言的。为页面上的链接规定默认地址或目标。
<base href="http://www.w3school.com.cn/i/" target="_blank" />
base标签包含的属性。
(1) href
href是必选属性，指定了文档的基础url地址。
例如，如果希望将文档的基础URL定义为https：//www.abc.com，则可以使用如下语句：
<base href="http://www.abc.com">
如果文档的超链接指向welcom.html,则它实际上指向的是如下url地址：https://www.abc.com/welocme.html。
(2) target
定义了当文档中的链接点击后的打开方式_blank，_self，_parrent，_top。
- link 标签
link用于引入外部样式表，在html的头部可以包含任意数量的link，link标签有以下常用属性。
<link type="text/css" rel="stylesheet" href="github-markdown.css">
(1) type
定义包含的文档类型，例如text/css
(2) rel
定义html文档和所要包含资源之间的链接关系，可能的值有很多，最为常用的是stylesheet，用于包含一个固定首选样式的表单。
(3) href
表示指向被包含资源的url地址。
- style 标签
编写内部样式表的标签。
<style>
body {
background: #f3f5f9;
}
</style>
- script 标签
加载javascript脚本的标签。加载的脚本会被默认执行。默认情况下当浏览器解析到script标签的时候会停止html的解析而开始加载script代码并且执行。
<script src="script.js"></script>
(1) type
指示脚本的MIME类型。
<script type="text/javascript">
(2) async
规定异步执行脚本，仅适用于通过src引入的外部脚本。设置的async属性的script加载不会影响后面html的解析，加载是与文档解析同时发生的。加载完成后立即执行。执行过程会停止html文档解析。
<script async src="script.js"></script>
(3) charset
规定在外部脚本文件中使用的字符编码。
<script type="text/javascript" src="script.js" charset="UTF-8"></script>
(4) defer
规定是否对脚本执行进行延迟，直到页面加载为止。设置了defer属性的script不会阻止后面html的解析，加载与解析是共同进行的，但是script的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。
<script defer src="script.js"></script>
(5) language
规定脚本语言，与``type```功能类似，不建议使用该字段。
(6) src
外部脚本的地址。
<script src="script.js"></script>
- bgsound
网站背景音乐。
<bgsound src="music.mp4" autostart="true" loop="5">
(1) src
表示背景音乐的url值。
(2) autostart
是否自动播放ture自动播放，false不播放，默认为false。
(3) loop
是否重复播放，值为数字或者infinite，表示重复具体次或无限次。
扫一扫
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
