精通HTML 第一章开始阅读笔记

HH123_3

于 2023-02-21 10:04:15 发布

阅读量101

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_40084198/article/details/128974370

版权

精通HTML并不仅仅了解有哪些标签可以用、其具体意义是什么，了解HTML本身也同样重要——也就是说，要理解什么是标签、什么是属性以及如何使用它们。
掌握HTML和XHTML之间的区别，了解什么是doctype（文档类型）以及如何读取它等。
了解HTML不仅可以帮助你深入地理解它，还可以在大家一起讨论的时候帮助别人更好地理解你的意图。

1.1 (X）HTML术语

假如有人提到"title标签（标题标签）"，那么他指的是

显示在浏览器标题栏中的文档标题呢，
还是当光标停留在一个元素（通常是一幅图片或一个链接）上面时显示出来的提示信息（title属性）呢？
它所指的也有可能是出现在页面中的文本标题（heading），而此时很有可能是某一个<h1>元素的内容。

注意，这里有标签、元素和属性，而它们是完全不同的。

本节中解释在讨论（X）HTML时经常会遇到每一个术语的具体含义。
此外，我还会讨论其他一些有可能造成混淆的常用术语
- 部分（div）
- 跨度（span）
- 标识（id）
- 类别（class）
- 块（block）
- 行内（inline）

1.1.1 元素和标签

元素
- 是一种结构，通常由起始标签、可选属性、内容、结束标签组成。
- 每个元素可以嵌套任意数量的子元素，而这些子元素同样也可能由标签、属性、内容组成。
- 标签（tag）标明了一个元素的开始与结束。
  - 起始标签可以包含多个属性，但不能包含其他元素或标签。
  - 并不是所有元素都有结束标签。比如
    - <img>
    - <br>
    - <meta>
    - <hr>
  - 上面的标签都可以看做自结束标签（self-closing element）、空元素（empty element）或置换元素（replaced element）。这些元素都不是容器标签。
  - 在HTML中，通常将自结束元素简单地写成<img>、<br>、<meta>或<hr>。
  - 在XHTML中，要求自结束元素中有一个空格后面跟着一个斜杠，例如<img />、<br />、<meta />或<hr />。

示例:

<p class="example">Here is some text, some of which is <em>emphasized</em></p>

<p>元素包括尖括号（<）和结束括号（>）之间的任何内容
<em>元素包括起始标签<em>、结束标签</em>以及二者之间的所有内容。
一共出现四个标签：
- <p>
- </p>
- <em>
- </em>

1.1.2 属性

另外，我希望大家在学习完本书之后不再使用alt标签，干脆忘记它吧！

1.1.3 应该了解的其他术语

如果用得好的话，部分和跨度可以使页面的结构具有逻辑性，并且还可以为你留置一个钩子，
当需要的时候用它们来应用任何CSS或者DOM脚本。但如果用的不好，这两个标签会使文档变得凌乱不堪，标记、样式和脚本也会变的复杂。（将在第6章深入地讲解这两个标签。）

部分和跨度

部分（div）
- 用于划出一块内容，例如
  - 文档的主内容块 (maincontent)
  - 主导航栏(nav)
  - 页眉(header)
  - 页脚
- 我们可以将其看做是一个块（block）元素
  - 它可以嵌套子元素，如果需要还可以包含更多的div元素。

示例:

一个简单的网站可能包含一个页眉、一个主内容栏、一个次要内容栏和一个页脚。
然后，这些内容块能按照CSS样式的要求来进行放置和显示。

<div id="header">
...
</div>

<div id="maincontent">
...
</div>

<div id="secondaryContent">
....
</div>

<div id="footer">
<div>

跨度（span）
- 用于在块元素内部划分出区域，而有时也在另一个行内元素划分出区域。
- 它是一个行内（inline）元素，在这一点上<em>、<strong>或<a>都是一样的，只不过它没有任何语义——它只是一个通用容器。
- 它本身能进一步包含其他行内元素，例如包含更多的<span>。

示例:

将某一段首两个单词设置为红色而其余文字保持黑色不变，则可以使用<span>实现这种效果。

<p>
<span class="leadingWords">The</span> two words of this paragraph can now styled differently.</p>

块元素和行内元素

为了简化地描述，（X）HTML中的每个元素都包含在一个“盒子”中，这个盒子要么一个块级元素，要么是一个行内元素。
通过在CSS中设置边框和轮廓，就可以看到“盒子”的存在。

块级元素(block-level box)
- 在渲染的时候需要在文档中另起一行，并且强制后面的元素在该元素的下方另起一行开始渲染
- 这就意味着在没有样式的文档中，块级元素都是垂直堆叠在一起的，并沿所包含元素的左边排列。
- 它们还扩展填满所包含元素的宽度。
- 如果不使用CSS的话，就不可能将两个块元素并列放置在一起。
内级元素(inline-level box)
- 放置在文档的哪个地方，这些元素都能够渲染，并且不会强制要求换行。
- 除非在CSS中明确地要求行内级元素垂直或者用一个新的块级元素将它们隔开，否则这些行级元素都将沿着水平方向排列，而不是垂直排列。
- 行内元素只占内部所包含元素所使用的空间。
- 如果不使用CSS的话，不可能将两个临近的行内元素堆叠在一起。
- 如果某个元素为行内元素的话，当你将“margin-top/bottom”或者"padding-top/bottom"等格式应用到它上面去的时候，这些格式将会被忽略，只有水平方向上（向左或者向右）的内边距和外边距设置才有效。

注：根据上下文，ins或者del要么是行内元素要么是块元素。如果在其中一个元素中放置一个块元素，它们都将会成为块元素。但是如果将它们放到某个行内元素或者块元素内部，它们将成为行内元素。

id和class属性

当使用class和id属性的时候，人们容易根据元素的预期外观来给元素赋值，而不是根据元素本身的意义，我奉劝你最好不要这么做。
示例:

<div id="rightColum">
<strong class="redText">
</div>

应该写成这样

<div id="secondaryContent">
<strong class="import">
</div>

为什么呢？这是因为某天你可能发现需要将<strong>元素设置为蓝色而不是红色，或者你希望将次要内容从右侧栏移到左边。这样一来，class和id的值就没有意义了。

注：在XHTML中，id属性的开头不能是数字，所以类似于就是非法的，而id=“columns3”>

还可以将id和class同时应用到同一个元素上。

<body id="homepage" class="page">

#homepage{
	background: blue;
}
.page {
	color:white;
}

这两个属性不会绑定到一个特定的标签（如在左侧元素的标签或颜色为红色的元素的标签），尽管可以将其中一个属性或者两个属性同时设置到这个标签上。

1.2 XHTML和HTML

在一般的Web项目中，到底使用XHTML还是HTML，这通常并不是一个问题。因为今天的大多数Web设计师很自然地偏向于XHTML。

1.2.1 XHTML和HTML之间的区别

有几个规则适用于XHTML，但并不适用于HTML。

在XHTML中，<html>、<head>、<body>都是必需的标签。
所有的元素都必须结束。任何起始标签要么有一个对应的结束标签（如果它是一个容器标签的话），要么是一个自结束元素“空格加斜线（space-plus slash）”。
所有标签都必须是小写。
任何属性值必须要么用单引号引起来，要么用双引号引起来。
- 因此，class=page就是不合法的，而class="page"就是合法的。
所有属性必须有值。
- 有些属性，比如<option>标签的<select>属性，在HTML中可以使用简写形式，即<option selected>数据</option>，然而在XHMTL中，必须这样编写：<option selected=“selected”>数据</option>
“&”符号必须编码。
- 也就是说，应将将其写成“&amp”而不是仅仅写成“&”。不管是“&”在正文中还是URL中，这一点始终成立。

1.2.2 对XHTML和HTML的误解

实际上，除了前一小节所提到的一些小差别，XHTML跟HTML比较起来并没有太大的区别，要使用哪个版本更多地取决于如何使用它们编写代码。

1. XHTML的元素数目要比HTML（少）

可以说XHTML的元素数目比HTML多，也可以说XHTML的元素数目比HTML少，这取决于使用什么doctype来编写。

如果拿HTML 4.01 Strict和XHTML 1.0 Strict比较，那么后者中的元素数目比前者中的少。
- 因为HTML 4.01 Strict中已经不推荐使用的一些元素已经从XHTML 1.0 Strict中移除，它们是
  - <dir>
  - <s>
  - <u>
  - <iframe>
  - <noframe>
- 其中<iframe>（这个标签通常用来在页面中包含广告）可能是一个例外，除此之外，你不需要用到这写元素中的任何一个，因为他们已经有了更好的替代品——要么是更有意义的元素。
  - 使用<del>来代替<s>和<strike>
  - 使用CSS字体属性来代替<font>元素
- 于是，拿HTML 4.01 Strict跟XHTML 1.0 Strict做对比，答案就是XHTML 1.0中的元素数目更少，但是因为所有这些元素在HTML 4.01中已经不再推荐使用，所以在编码实践中不会产生任何实质上的差别。
如果doctype为Transitional，那么刚才提到的所有这些元素都是允许使用的，还有一些属性（比如target）可以用在<a>上。
如果你查看XHTML 1.1的话，你还会发现一些差别，它引入了Ruby元素，这些元素通常使用application/xhtml+xml这样的MIME类型。

2. 与HTML相比，XHTML具有更好的错误检查功能（更严格或者更健壮）

这既可以说是正确的，也可以说是错误的。答案取决于你打算干什么。

如果在XHTML页面将MIME设置为text/html，那么标记在健壮方卖性能不会超过HTML，并且浏览器会试图纠正XHTML标记中存在的任何错误，并尝试着按照它们所猜测的意思显示。
如果XHML页面的MIME类型设置为application/xhtml+xml，那么页面中最细微的错误都会导致页面中止，而且通常只会显示一条XML解析错误消息。

3. 与HTML相比，XHTML的语义性更强或者结构更强。

不正确。真正起作用的不是所用的技术，而是怎么使用技术。

4. 与HTML相比，XHTML更加简洁

不尽然。

有效的XML文档中，必须用引号将属性值引用起来，每个元素必须有结束标签，页面头部还要有一大堆完整的标签和属性，因此在总体上XHTML页面实际上要比等价的HTML页面更“臃肿”。
如果在编写XHTML文档的时候考虑到Web标准，则其开销确实要比旧式的混合标签（tag-soup）HTML文档更低，但这只是网页作者在方法学上的不同，而不是所有HTML版本的不同。

1.2.3 各种MIME

在讲述MIME之前，只需要记住两件事：

对于一般的Web设计师（或者Web设计部门经理）而言，MIME类型的主题不管是对他们还是对他们的网站的访问者都很少有直接影响（如果有影响的话）
它仍然值得了解一下。

尽管XHTML和HTML有着共同的词汇表，但是XHTML还是具有几项优势，包括以下几项：

使用XHTML技术，能够在文档中包含其他基于XML的技术，比如MathML。
如果XHTML文档格式不正确，就会很快发现，因为浏览器将会拒绝显示该页面，而是显示一个错误结果页面。
XHTML更够保证提供格式正确的文档。

上面的观点没有一个是完全正确的，但是当你使用MIME类型application/xhtml+xml的时候，它们就全部都是正确的。如果Web服务器正使用MIME类型text/html（实际上所有web服务器都将这样做）提供页面，那么将不能充分利用XHTML的优势。

内容协商

XHTML页面本该使用MIME类型application/xhtml+xml，但是这样做会导致一些不可预期的复杂问题，而如何继续使用MIME就不会在预见的将来有任何问题，但是这样做就不能充分利用XHTML的所有功能。

我的个人偏好是使用text/html类型来编写XHTML页面，尽管会遇到上面提到的问题。

关于内容协商的详细解释

1.2.4 选择XHTML还是HTML

万维网联盟推荐使用XHTML而不是HTML。那么在XHTML2公布的时候，就能够更好地将文档转换为XHTML 2。因此，这如果在你的计划中，那么现在就开始使用XHTML编写文档。
如果你发现自己必须考虑其他因素，比如老的应用程序或者产生HTML4文档（不需要将属性引起来，大写标签等）的CMS，那么这个时候使用XHTML doctype模板来包装输出就没有大多意思，所以此时应该选择使用HTML4。
如果你想节省带宽，请使用HTML4。

1.3 剖析XHTML文档

现在我们来看看一份严格的XHTML1.0文档的结构

<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "html://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Our title</title>
</head>
<body>
<p>Our content</p>
</body>

1.3.1 doctype声明

doctype声明指示将使用哪一个文档类型定义（Document Type Definition, DTD）来编写标记。
DTD基本上就是一个详细描述标记规则和语法的页面。

<!DOCTYPE
- 这只是doctype的开头。文档的根元素（<html>）紧随声明的开头之后。
<!DOCTYPE html
- 注意，我们可以使用html或者HTML，这取决于正在使用的（X）HTML的版本。
- 对于所有XHML doctype，根元素都应该小写，但是对于HTML doctype，根元素可以大写（如果其余的标签也是大写的话）。
PUBLIC
- 这将指出我们将要引用的DTD可以公开访问。
- 如果DTD是私有的，那么我们将使用SYSTEM而不是PUBLIC（“系统资源”，可以是在你的网络上某处的本地持有的资源）。
"-//W3C//DTD XHTML 1.0 Strict//EN"
- 正式公共标识（Formal Public Identifier, FPI），它描述的是DTD和DTD背后的阻止信息
- 开头的-意思是DTD的所有者并不是在国际标准化组织（International Orgnization for Standardization, ISO）注册的组织（W3C组织并没有在ISO注册）。如果所有者在ISO注册，就应该使用“+”而不是“-”。
- W3C指出这份DTD的所有者是W3C。
- DTD XHTML 1.0 Strict是类型或者类（DTD）后面跟着描述（XHTML 1.0 Strict）,描述又可以进一步划分成两部分：
  - 标签（XHTML）
  - 文档类型定义（1.0 Strict）
EN
- 这是“英语”的二字符语言代码

1. 可用的doctype

XTML 1.0共有3种doctype可用，此外还有一个XHTML 1.1 doctype。
这三种XHTML 1.0 doctype分别是

Strict
Transitional
Frameset（只有当你使用框架来为本文档进行布局的时候才会有用)

它们之间的差别只在于FPI和URL的不同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitonal//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 doctype与XHTML 1.0 doctype之间的差别也只是在于FPI和URL的不同，但是XHTML 1.1 doctype只有一种形式，而没有Strict和Transitional这些版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

还有一个XHTML Basic doctype，那些为移动设备（比如手机）而设计的页面常使用这种经过精简的XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-basic10.dtd">

2. doctype的用途

（X）HTML的doctype有两个重要的用途。

它们提醒用户代理（user agent）和验证程序该文档使用什么DTD。
- 这个动作是被动发生的。也就说，浏览器不是每次装载页面的时候都要去打开和下载DTD以检查文档标记是否合法，只有当你手动检查载入页面的时候它才会执行这个动作。
doctype提醒浏览器按照标准模式（standard mode）而不是怪异模式（quirks mode）来渲染文档。
- 第二个用途是最重要的用途。
- 如果没有doctype，就会触发怪异模式，这将会按照旧的不正确的方式来渲染标记。
  - 这里的假设是，如果作者没有在页面中包含doctype，那么他可能就没有编写标准的标记，因而就会按照一种非标准的方式对待这些页面，就好像这些页面是以前专门为有bug的浏览器编写的一样。

1.3.2 <html>、<head>和<body>元素

xmlns属性
- 这个属性被用来声明XML命令空间，描述了正常使用哪种标记语言。
根元素<html>开始之后，就是文档<head>部分，它包含<title>还可以包含<stype>…
<title>文档标题
- 是head中唯一的强制元素
- 能够为你提供更好的搜索引擎排名，能够为用户提供更好的使用体验。

1.3.3 XML声明

<?xml version="1.0" encoding="utf-8"?>

如果使用的话，这一行就会出现在开头的doctype之前。它就是人们所知的XML声明（XML declaration）,它的作用就是声明这份文档是一份XML文档、XML的版本，还（可选）有文档编码所使用的字符集。
虽然W3C的推荐中包含了这个声明（但这是可选的），但这样做将会产生一些负面影响，最糟糕的就是会导致IE切换到怪异模式。如果在doctype之前出现除了空格之外的任何内容，都会导致发生上述情况。因而，最好略去这一行。

1.3.4 剖析HTML文档

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

不需要明确编写html、head、body标签，但是仍然必须编写自己的标记，就像它们在那里一样，因为它们确实就在那里。
可以在JavaScript Dom查看器中查询类似的文档，或者为body元素编写CSS规则，你将会看到这些元素确实存在，即使你并没有在文档中明确地写入这些元素，因而一定要确保将任何head专用标记（比如<meta>或者<link>标签）放置在任何<body>标记之前。

HH123_3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精通HTML 第一章开始阅读笔记

如果你发现自己必须考虑其他因素，比如老的应用程序或者产生HTML4文档（不需要将属性引起来，大写标签等）的CMS，那么这个时候使用XHTML doctype模板来包装输出就没有大多意思，所以此时应该选择使用HTML4。这两个属性不会绑定到一个特定的标签（如在左侧元素的标签或颜色为红色的元素的标签），尽管可以将其中一个属性或者两个属性同时设置到这个标签上。为了简化地描述，（X）HTML中的每个元素都包含在一个“盒子”中，这个盒子要么一个块级元素，要么是一个行内元素。
复制链接

扫一扫