HTML CSS：Web Page Construction

来源：互联网发布：windows xp 停止服务编辑：程序博客网时间：2024/05/17 08:49

本章知识点较多，分别有：

<q>和<blockquote>的区别；
inline element和block element的区别；
的用法
void element和普通element的区别；
列表的使用：<ol>和<ul>和<li>；
nest的概念；
character entity的概念；

1.<q>和<blockquote>的区别

<q>和<blockquote>的作用都是将文本的内容加上引用的标记。<q>能使它的内容加上双引号，但是<q>在不同的浏览器上表现不一定相同，有时候内容会被双引号标记，有时候可能只是变成了斜体字。一般<q>用于短句的引用标记。

<q>最直接的表现虽然只是在文本内容上加上了双引号，但是它的作用在我们使用CSS渲染时就凸显出来了，我们可以更规范快速地定义样式

<blockquote>的作用和<q>一样，但是它一般用与长文本、大段落的引用。

2.inline element和block element的区别

书中当我们使用<blockquote>时，我们分别在前后加上了</q>和<q>，以使被引用文本独立出来，之所以这么做与我们接下来要介绍的inline element和block element的概念和区别。

所谓inline element是指可以直接加入其他element的一种element，如书中的例子，<q>便嵌套在元素中。就是inline element、inline element的样式（字体、大小、颜色等）与被嵌套的元素保持一致。
而block element是一种独立的元素，如、<h>,block element之间有着明显的分段痕迹。而inline element除了样式变了之外，任然是段落的一部分，结构没有太大变化。

3. 的用法

在这里我们碰到了一个问题，书中91页中<blockquote>的诗词虽被独立出来，但是那一大段的引用却没有分行，从而破坏了诗词的美感，这里我们使用 来达到换行的目的。

只需要将 放在我们想要分行的句子后面，如下

<blockquote>Passing cars, <br>When you can't see, <br>May get you, <br>A glimpse, <br>Of eternity. <br></blockquote>

就能实现我们的目的。

4.void element和普通element的区别

那么又有疑问了，为什么 只有opening tag而没有content 和 closing tag。

其实如果大家仔细观察就能发现我们之前我们也是用过类似的元素，如<img>,这类元素我们称之为void element。它与普通元素的区别就在与，普通element是这样的

element=opening tag + content + closing tag

而void element却是

void element=opening tag

5.<ol>和<ul>和<li>

unordered list = ul
ordered list = ol
list item = li

我们需要用列表来表现出内容，使之更加结构化，这时就用到了<ul>和<ol>两个元素，还有<li>。

如果你的列表内容是无序的，可以使用<ul>加上<li>

<ol><li>Walla Walla, WA</li><li>Magic City, ID</li><li>Bountiful, UT</li><li>Last Chance, CO</li><li>Why, AZ</li><li>Truth or Consequences, NM</li></ol>

如果你的列表是有序的，就使用<ol>加上<li>

<ul><li>cell phone</li><li>iPod</li><li>digital camera</li><li>a protein bar</li></ul>

<ol>(<ul>)必须和<li>一起用；
<ol>(<ul>)中不能再加入其他元素；
另一种列表元素<dl>,用于定义与描述（书106页）；

6.nest的概念

例如

<html><head><title>Musings</title></head><body><p>To quote Buckaroo,<q>The only reasonfor time is sothat everythingdoesn't happenat once.</q></p></body></html>

则有<head>和<body>嵌套在<html>里面，而<title>和分别嵌套在<head>和<body>中。它们是父与子的关系，head是父而title是子。因为他们的关系而产生一种作用叫做继承，这是我们以后的内容。

7.character entity的概念

在我们的文本中可能会出现<、>和&，这些符号不会像逗号或句号一样被直接显示出来，而可能被编译系统误认为是命令语句而执行，导致我们无法正常打出<、>和&这几个符号，所以当我们需要打出这些符号时，需要使用character entity。

三个<、>和&符号对应的character entity是<,>,&amp

比如我们想要在浏览器打印出下面的内容：

The <html> & <head> element is good.

命令语句就是：

<p>The &lt;html&gt; &amp; &lt;head&gt; element is good.</p>

阅读全文

0 0