HTML 19 头部
一．文件类型定义(DTD，document type define。DOCTYPE即document type的简写)
为了告知浏览器我使用的html版本，防止浏览器以为我是旧版本，用“转换显示模式”显示我的内容，出现奇怪的效果。
1.XHTML 1.0
①过度类型(transitional)。浏览器对XHTML的解析较为宽松(但是要符合xhtml的写法)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
②严格类型(strict)。文档中不允许使用任何表现样式的标识和属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
③框架页类型(frameset)。网页使用框架结构时，声明此类型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
注：在使用xhtml时，在<html>中要加上：
<html xmlns="http://www.w3.org/1999/xhtml"> <!--该句为确定名字空间,仅xml中用到-->
2.XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
注：在使用xhtml时，在<html>中要加上：
<html xmlns="http://www.w3.org/1999/xhtml"> <!--该句为确定名字空间,仅xml中用到-->
3.HTML 4.01
①过度类型(transitional)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
②严格类型(strict)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4.HTML 5
<!DOCTYPE html>
二．语言属性lang
1. 简体中文页面：html lang=zh-cmn-Hans
2. 繁体中文页面：html lang=zh-cmn-Hant
3. 英语页面：html lang=en
注：zh中文；cmn国语，普通话；Hans简体；Hant繁体
详细见下文转载：网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？
三．head标签
<head> 元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script>以及<style>
四．title标签
title 元素能够：
1.定义浏览器工具栏中的标题
2.提供页面被添加到收藏夹时显示的标题
3.显示在搜索引擎结果中的页面标题
注：title 元素在所有 HTML/XHTML 文档中都是必需的。
五．base标签，为页面上的所有链接规定默认地址或默认目标（target）：
1.若没有用base设置href
<a href=”/a.gif”>中，地址是当前html文件/a.gif
2.若用base设置了<base href="http://www.w3school.com.cn/images/" />
<a href=”/a.gif”>中，地址是http://www.w3school.com.cn/images//a.gif
即：如果没有base的话，页面里的所有相对路径在生成绝对路径的时候都会以自己的物理位置作为默认的基础路径。
3.默认目标target，比如设置：<base target=_blank>
当前页面指向的链接在打开的时候都会以打开新tab为显示方式
六．link标签，常用与链接外部样式表。（js不用link）
<link rel="stylesheet" type="text/css" href="css文件地址" />
七．style标签，用于内部样式表和内联样式
内部样式表写在head里：
<style type="text/css">
p{}
···
</style>
内联样式写在body里：
<p style=””>···</p>
八．script标签，用于JavaScript
1.用内部JavaScript，写在head里，没有type
<script>
···
</script>
2.引用外部.js文件
①放在head里
<script src=”地址”></script>
②放在HTML文档的最后，</body>之前，这样能使浏览器更快的加载页面
<script src=”地址”></script>
九．meta标签
1.什么是mata标签
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们都能看到meta标签,不过浏览器的显示页面中是看不到的,也许你认为这些代码可有可无。其实meta标签很重要，会给你的网站带来实际的效果，例如网站描述()会在搜索引擎的索引中得到体现.例如使用meta标签设置网站的编码是gbk2312还是utf-8meta标签设定关键字
2.基本语法
①meta标签设定关键词
<meta name="keywords" content="关键字1,关键字2,关键字3....">
关键字标签作用是告诉搜索引擎网站的内容的是关于那些方面的内容,方便搜索引擎对网站的定义和索引.关键字和关键字之间使用英文输入法下的逗号隔开,关键字的长度一般不超过100个字符.
例如我们网站是关于Web开发技术学习的网站,关键字描述可以这么写:
<meta name="keywords" content="html教程,css教程,javascript教程">
当用户在搜索引擎搜索这些关键字时,你的网站就能在结果中出现.但是由于早期很多作弊者(黑帽SEO)利于关键字堆砌作弊,现在的搜索引擎(百度)对关键字不再那么敏感.
②meta标签设定描述
<meta name=“discription” content=“描述的内容”>
网页的描述很重要,直接能够在搜索引擎中得到体现.例如打开百度网站搜索"新浪"看到以下页面
然后我们打开新浪的首页,在空白的地方点击鼠标右键-查看源代码.如下：
<meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等，设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道，同时开设博客、视频、论坛等自由互动交流空间。" />
可以看到网页的描述和百度索引中的描述完全一致.
③meta标签设定字符集
<meta http-equiv =“content-type” content=“text/html; charset="编码格式”>
常见的编码格式有中文编码(gbk2312)和国际编码(UTF-8) ,gbk2312是中文编码,如果你的网站内容都是中文的就使用gbk2312 UTF-8是国际编码左右的文字通用(包括中文和英文).它们的主要区别是gbk2312是专门为中文打造的,一个汉字占2个字符. UTF-8是通用的一个汉字占3个字节.早期的网络带宽资源短缺所以使用gbk2312编码可以节省带宽,提高网页的打开速度,但是现在我们家庭带宽都是4Ｍ起完全忽略节省的那些字节．
示例:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
我们在浏览网页的时候,大多数人都碰到过乱码的页面把.编码格式是让浏览器以设定的编辑格式进行解析,如果编码格式不正确就会用出现乱码.所以我建议使用通用的UTF-8编码,这样全球所有的浏览器访问我们的网页都能正常显示.
④meta标签设定自动刷新时间
<meta http-equiv=“refresh” content=“刷新间隔的时间”>
刷新时间以秒为单位,例如论坛的页面只有刷新后才能看到新发布帖子,像这样更新速度很快的页面可以加入自动刷新的代码,保证可以看到最新的页面.
示例:
<meta http-equiv=“refresh” content=“3”>
这里我们演示把时间设定为3秒,请自行测试.
⑤meta标签设定自动跳转新页面
<meta http-equiv=“refresh” content=“跳转间隔的秒数； Url="新网页地址”>
示例:
<meta http-equiv=“refresh” content=“3； Url="http://www.adminwang.com”>
当浏览器打开此页面,3秒后将自动跳转到我们网站的首页.
⑥meta标签设定禁用缓存
<meta http-equiv="cache-control" content="no-cache" />
我们知道浏览器都有个缓存机制,就是打开一个网页会自动保存在本地,这样做的目的在一定的时间内再次访问会直接调用缓存中的文件提高访问速度.但是像论坛这种时时变化的页面我们不希望浏览器保存缓存文件可以加上这句代码. 在程序开发中还有一个用途,程序调试要时时查看代码修改后的效果可以使用此代码禁用浏览器缓存.
另外的一种写法：
<meta http-equiv="pragma" content="no-cache" >
网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？（转载）
一．单一的 zh 和 zh-CN 均属于废弃用法。
比如：zh(中文)；zh-CN(大陆)；zh-TW(台湾)；zh-HK(香港)：zh-SG(新加坡)是废弃用法。
二．现在最新的用法是：
cmn-Hans(国语简)；cmn-Hant(国语繁)
yue(粤语)
wuu(吴语)
因为zh 现在不是语言code了，而是macrolang，能作为语言code的是cmn（国语）、yue（粤语）、wuu（吴语）等。但是由于有不少软件和框架还没有据此更新，考虑到兼容性，建议写成zh-cmn而不是光写cmn（至少可匹配zh）
三．为何将zh和zh-CN等废弃
1.zh-CN多数情况下标记的是简体中文，但是不能标记繁体
2.不恰当的使用了地区，这导致同样用简体中文的 zh-SG（新加坡）等无法匹配。更典型的是zh-TW和zh-HK。所以其实应该使用zh-Hans / zh-Hant来表示简体和繁体。那么完整的写法就是zh-cmn-Hans，表示简体中文书写的普通话/国语。一般而言没有必要加地区代码，除非要表示地区特异性，一般是词汇不一样（比如维基百科的大陆简体和新马简体）。
四. 如何标记的例子：
1. 简体中文页面： html lang=zh-cmn-Hans2. 繁体中文页面： html lang=zh-cmn-Hant
3. 英语页面： html lang=en
4. 《 回来 》的音频，以国语演唱：audio lang=zh-cmn
5. 《 海阔天空 》的音频，以粤语演唱：audio lang=yue
6. 《 进来白相相 》的音频，以沪语演唱：audio lang=wuu
注意上述因为都是音频，所以不应加上 Hans/Hant 标记。
7. 《 最终信仰 》的音频，双语演唱，因此audio 不需要标记 lang （如果一定需要标记可以用 lang=mul ），但是每个段落的歌词可以分别用 p lang=en 和 p lang=zh-cmn 标记（根据简体或是繁体可用 zh-cmn-Hans 或 zh-cmn-Hant ）。
8. 《忐忑》的音频，没有歌词，因此不需要标记 lang （如果一定需要标记可用 audio lang=zxx ）。
9. 需要加地区代码的情况一般比较少，除非为了强调 不同地区汉语使用差异。比如：
<p lang="zh-cmn-Hans">
<b lang="zh-cmn-Hans-CN"> 菠萝 </b> 和 <b lang="zh-cmn-Hant-TW"> 鳳梨 </b> 其实是同一种水果。只是大陆和台湾称谓不同，且新马一带的称谓也是不同的，称之为 <b lang="zh-cmn-Hans-SG"> 黄梨 </b> 。
</p>
当然，由于历史原因，有时候不得不继续使用zh-CN 。比如中文维基百科，沿用了传统的 zh-CN/zh-HK/zh-SG/zh-TW （按照标准应该使用 zh-cmn-Hans-CN 、 zh-cmn-Hant-HK 、 zh-cmn-Hans-SG 、 zh-cmn-Hant-TW ）。这时候，合理的软件行为，是将 zh-CN 等转化为 zh-cmn-Hans （即转化为最常见的误用所对应的实际标准写法）。
实际上，各相关标准，也存在一定的滞后。例如CSS 的 :lang 选择器，不支持选择仅仅简体 / 繁体中文（而不管是 cmn 或是 yue 或是 min 等汉语方言）。理想情况是 CSS3 对 :lang 选择器的语法进行升级，即 BCP 47 中的高级匹配算法，支持 :lang(*-Hans) 这样的写法。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
