您的位置：首页 > Web前端 > CSS

HTML&CSS基础篇之六：HTML标准、规范

2017-07-17 17:20 483 查看
代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<p>
<img src="images/drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing
<a href="beverages/elixir.html">elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring Your Own Web Server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center
of downtown Webville.  If you need help finding
us, check out our
<a href="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>


浏览器显示之道

如果你编写的HTML准确无误，浏览器将会一致地显示你的网页，但是如果HTML书写错误或不符合标准，网页在不同的浏览器上显示的结果通常也不同。

针对不同版本的HTML，浏览器的解决问题的办法：

根据两套规则显示网页：一套处理旧的规则，一套处理新的。

当浏览器使用旧的规则时，称为使用“转换显示模式”。

如果你使用新版本的HTML，但你没有告诉浏览器，那么浏览器会认为你用的是旧版本，并且进入转换显示模式。

关于显示旧版内容的问题，并非所有浏览器都达成一致，但对于标准的HTML我们能做出一致的工作。

如果你使用标准的HTML，那么就把这个信息提交给浏览器。

解决之道，预先告诉浏览器你使用的是什么版本，浏览器就知道该用哪个规则去显示你的网页了。

DOCTYPE 文件类型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


告诉浏览器这是给网页指定一个文件类型

注意，这不是一个HTML元素，开始处。”<”之后有一个“！”。

解析：

html 这表示
<html>
是网页的首元素

PUBLIC 这表示HTML4.0.1标准是通用的。

“-//W3C//DTD HTML 4.01 Transitional//EN” 这部分是说明我们使用的是HTML4.0.1版本，另外，HTML标记是用英文写的。

“http://www.w3.org/TR/html4/loose.dtd” 这个指向一个文件，而这个文件用来识别通用的标准

文件类型定义告诉你的浏览器：网页使用HTML那个版本。

如果告诉浏览器使用的HTML某个指定版本，而实际上并非如此，那么浏览器将会发现网页使用的不是指定的HTML标准版本，并且回到转换显示模式。

规范化具体步骤

1.添加文件类型定义

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


2.W3C检验器

https://validator.w3.org/

问题：

1. HTML4.0.1中
<img>
元素中必须添加一个alt属性，添加alt属性解决。

2.必须告诉浏览器网页的字符编码，添加meta解决。

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<meta>
添加方法：

添加到HTML中
<head>
元素的首要组成部分添加进去。

这个标记告诉所有浏览器你的文件的内容类型和你编程用的字符类型。

meta 是我们告诉浏览器关于网页的一些信息

“Content-Type” 告诉浏览器更多关于网页内容类型的信息

content 属性用于指明内容类型的信息。

text/html 告诉浏览器它就是一个HTML文件。

charset 告诉浏览器使用某种类型的字符编码。

严格规范

DOCTYPE 有两种，一种是正向HTML4.0.1过渡的版本；另一种是严格的HTML4.0.1。

使用HTML 4.01过渡DOCTYPE，即使你使用旧版本遗留下来的一些东西，也可以通过校验。那样，你可以保证你的标记不会有明显的错误。

主要是基于解决历史遗留问题。旧版HTML和标准HTML4.0.1之间的过渡。

DOCTYPE严格的版本

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


内联元素必须包含与块元素中。

不能把内联元素嵌套在
<blockquote>
这个块元素中

好处：

标准的网页加载速度更快，并且在其他各种设备上运行地更好。更易被因视觉障碍而使用屏幕读取器的用户接受。

严格的HTML4.0.1手册

<html>
元素：必不可少的元素之一。

网页总是以一个DOCTYPE开始，紧接着，
<html>
元素必须出现在网页的开头和结尾。因此，在DOCTYPE之后，网页以
<html>
标记开始，以
<html>
标记结束，而网页的其他东西都包含在里面。

记得使用
<head>
和
<body>
让你的网页更好。

只有
<head>
元素和
<body>
元素可以直接包含于
<html>
元素，也就是其他任何元素都必须毫无例外地包含于
<head>
元素或
<body>
元素。

<head&g
4000
t;
元素里没有
<title>
元素会怎么样？

我们总是给
<head>
元素一个
<title>
元素，这是规则。不这么做将导致HTML不合法。
<head>
元素是可以放置
<title>
元素， 
<meta>
元素和
<style>
元素的唯一地方。

只使用有用的块元素填充
<body>
。

只能在
<body>
元素里直接放置块元素(
<h1>,<h2>,....<h6>,<p>, <blockquote>
等）。所有的内联元素和文本都必须在快元素中才能运行。

让块元素远离内联元素

只有文本和其他内联元素可以嵌入内联元素中，块元素在任何情况下都不允许包含在内联元素里。

块元素禁止包含在
<p>
元素中。

只有文本才能组成段落，所以块元素不允许包含在
<p>
元素中。当然，只要你喜欢，可以在段落里使用所有的内联元素（
<em>, <a>, <strong>,<img>,<q>
,等)。

列表只能包括列表项目。

只有
<li>
元素允许放在
<ul>
元素和
<ol>
元素里。因此，只有列表项才能放在有序或无续列表里。

列表项可以是任何内容。

Web镇对于
<li>
元素的规则很宽松：你可以添加文本、内联元素或块元素到列表项里面。

<blockquote>
只喜欢块元素。

<blockquote>
元素中要有一个或多个块元素。文本直接包含于块引用很常见，但在Web镇中这种做法不合法。请先把文本或内联元素置于块元素之内，再一起添加到
<blockquote>
。

内联元素相互嵌套时要小心

可以将任何内联元素嵌入到另一个内联元素中，但有两种情况例外。
<a>
元素决不能自我嵌套， 因为那样用户不易理解。另外，据规定空元素（如
<img>
)中不能嵌套其他内联元素。

要点

HTML4.0.1是最受浏览器广泛支持的HTML标准。

万维网联盟(W3C)是定义”标准HTML”公认的组织。

许多浏览器有两种显示HTML的模式：处理旧版HTML的”转换显示”模式和处理HTML4.0.1的标准模式。

如果你没有告诉浏览器你使用的是哪个HTML版本，许多浏览器将使用“转换显示”模式， 而这可能会导致在不同浏览器上有不一致的显示结果。

文档类型定义（DOCTYPE)用来告诉浏览器网页是使用哪个版本的HTML。

如果你写的是完全合法的HTML 4.01,就使用严格的DOCTYPE。

如果你用的是包含面向显示的元素和属性的过渡HTML，那就使用过渡的DOCTYPE。

元素里面的标记告诉浏览器关于网页的附加信息。

字符编码告诉浏览器网页中使用的字符类型。

现今计算机使用的大部分的西欧语言都可以用字符编码ISO-8859-1表示。

W3C校验器是一种校验网页是否符合标准的免费在线服务。

使用校验器校验以确保HTML的结构合理及元素和属性符合标准。

遵从标准将加速网页显示，并减少网页在不同的浏览器之间的显示差异。

基于Head First HTML整理
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html
相关文章推荐
新的分享
章节导航