（三）构建模块——Web页面建设

1.完成网页的基本过程：

①画一个粗略的草图作为页面构建的基础

②创建HTML的基本构建模块，把草图翻译成HTML的略图

③把蓝图翻译成真正的HTML文件

④在此基础上，做出改进，添加元素、样式等

2. <q>元素用于在HTML中增加简单的引用，引用的内容放在<q>和</q>中。例如：

<html>
  <head>
    <title>Quote Test Drive</title>
  </head>
  <body>
    <p>
	    You never know when you'll need a good quote, how about
		<q>To be or not to be</q>, or <q>Wherever you go,there 
		you are</q>.
    </p>
  </body>
</html>

这样和直接加双引号比起来，可以使页面更结构化、更有意义。另外，使用<q>元素便可以使用css设置引用文本的外观样式

3. 当引用一个段落或者引用的文本较长时，就需要使用<blockquote>元素了。<q>元素用于较短的引用，作为现有段落的一部分；<blockquote>用于较长的引用，需要单独显示。例如：

<h2>July 14, 2012</h2>
<p>
    I saw some Burma Shave style signs on the side of the road
    today:
</p>
<blockquote>
    passing cars, 
	when you can't see, 
	May get you, 
	A glimpse,
	Of eternity.
</blockquote>
<p>
    I definitely won't be passing any cars.
</p>

在块引用中显示多段可以把段落元素<p>放在<blockquote>中，一个段落对应一个段落元素。

4. ①<blockquote>和<q>是两种不同的元素，前者是块元素，单独显示，显示时前后总好像有一个空行；后者是内联元素，在页面文本流中总是在行内出现。类似<h1> <h2> ... <h6>和<p> <blockquote>都是块元素，<a> <q>和<em>都是内联元素。块元素总是"特立独行"，而内联元素则"随波逐流"

②块元素通常用作Web页面的主要构建模块，内联元素往往用来标记小段内容。设计页面一般先从较大的块元素开始，在完善页面时再加入内联元素。

③<br>元素用于提供换行符，在需要的时候增加一个<br>元素就会插入一个换行符：

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

④类似<br>这样设计为没有任何实际内容的元素叫做void元素，<img>也是void元素，或称为空元素。需要使用<br>或<img>只需要一个开始标记，这是一种方便的简写形式，可以减少HTML中标记的数量。

5.结合利用<li>元素和<u>或<ol>元素可以生成无序/有序列表。创建方法参考以下代码：

①创建列表前：

<h2>August 20, 2012</h2>
<img src="images/segway2.jpg">
<p>
    Well I made it 1200 miles already, and I passed through some
	interesting places on the way: Walla Walla, WA, Magic City,
	ID, Bountiful, UT, Last Chance, CO, Why, AZ and Truth or 
	Consequences, NM.
</p>

②创建列表的第一步，把每个列表项放在单独的<li>元素中：

<h2>August 20, 2012</h2>
<img src="images/segway2.jpg">
<p>
    Well I made it 1200 miles already, and I passed through some
	interesting places on the way: 
</p>
<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>(有序列表)或<ul>（无序列表）：

<h2>August 20, 2012</h2>
<img src="images/segway2.jpg">
<p>
    Well I made it 1200 miles already, and I passed through some
	interesting places on the way: 
</p>
<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>

④用<ul>的一个例子：

<h2>June 2, 2012</h2>
<img src="images/segway1.jpg">
<p>
    My first day of the trip! I can't believe I finally got 
    everything packed and ready to go. Because I'm on a Segway, 
	I wasn't able to bring a whole lot with me:
</p>
<ul>
    <li>cell phone</li>
    <li>ipod</li>
    <li>digital camera</li>
    <li>and a protein bar</li>
</ul>
<p>    
    Just the essentials. As Lao
    Tzu would have said, <q>A journey of a thousand miles begins
    with one Segway.</q>
</p>

⑤记忆：unorderedlist=<ul> 无序列表

orderedlist=<ol> 有序列表

listitem=<li> 列表元素

⑥<ol>和<li>或者<ul>和<li>总要一起使用，否则就无意义。列表实际上就是一组列表项，<li>元素标示每个列表元素，<ol>或<ul>把元素归为一组。且<ol>或<ul>只能包含<li>元素、嵌套另一个列表，不能嵌套其他元素或文本。在列表中嵌套列表例如下例：

<html>
  <head>
    <title>This is a Nest List Test</title>
  </head>
  <body>
    <ol>
        <li>Charge Segway</li>
        <li>Pack for trip
            <ul>
                <li>cell phone</li>
                <li>ipod</li>
                <li>digital camera</li>
                <li>a protein bar</li>
            </ul>
        </li>
        <li>Call mom</li>
    </ol>
  </body>
</html>

chrome中测试结果：

⑦除了有序列表和无序列表，还有一种定义列表，列表中每一项都有一个定义术语(dt)和定义描述(dd),定义列表如下所示：

<html>
  <head>
    <title>This is a Definition List Test</title>
  </head>
  <body>
    <dl>
      <dt>Burma Shave Signs</dt>
        <dd>Road signs common in the U.S. in the 1920s
        and 1930s advertising shaving products.</dd>
      <dt>Route 66</dt>
        <dd>Most famous road in the U.S. highway system.</dd>
    </dl>
  </body>
</html>

chrome测试结果：

6.把一个元素放在另一个元素中称为嵌套。例如<body>、<head>嵌套在<html>中，<p>、<h1>等嵌套在<body>中，<q>嵌套在<p>中，<title>嵌套在<head>中等等。HTML页面就是以嵌套的方式构造的。使用嵌套要确保元素标记正确匹配。

**小练习

A."扮演浏览器"：

错误①<head>没有结束标记

②<h1>没有结束标记

③</p>和</q>位置错误，<q>元素需嵌套在<p>元素中

④17行</em>标记错误，应为</li>

⑤22行多了元素结束标记</p>

⑥23、24行标记错误

⑦26-37行每行均缺少</li>结束标记

⑧25、38行列表标记不匹配

⑨最后缺少</html>结束标记

B."我是谁？"：

元素描述	名字	内联元素OR块元素
我是1级标题	<h1>	块元素
我时刻准备链接到另一个页面	<a>	内联元素
用我强调文本	<em>	内联元素
我是个列表，不过我不关心顺序	<ul>	块元素
我是真正的换行符	<br>	内联元素
我是放在列表中的列表项	<li>	块元素
我要保证我的列表项有序	<ol>	块元素
我的任务就是提供图像	<img>	内联元素
用我可以在段落中加引用	<q>	内联元素
用我来引用独立的文字	<blockquote>	块元素

7. 如果想输入特殊字符，比如<html>这几个字符而不想被浏览器误认为是html元素的开始，可以使用字符实体的简单缩写来指定。对于被认为"特殊"的字符，或者你想在web页面中使用某个你在编辑器里无法输入的字符，可以查找相应的字符实体缩写在HTML中直接输入。例如，<的缩写是<，>的缩写是&gt，在页面中输入:"The <html> element rocks."可以这样使用字符实体：“The <HTML> element rocks.”。如要显示&字符本身，则使用&。

8.本章源代码：

journal.html:

<html>
  <head>
    <title>My Trip Around the USA on a Segway</title>
  </head>
  <body>
    <h1>Segway'n USA</h1>
	<p>Documenting my trip around the US on very own Segway!</p>
	
	<h2>August 20, 2012</h2>
	<img src="images/segway2.jpg">
	<p>
	    Well I made it 1200 miles already, and I passed through some
		interesting places on the way: 
    </p>
    <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>
    
	<h2>July 14, 2012</h2>
	<p>
	    I saw some Burma Shave style signs on the side of the road
		today:
    </p>
	<blockquote>
	    passing cars, <br>
		when you can't see,<br> 
		May get you, <br>
		A glimpse, <br>
		Of eternity.<br>
	</blockquote>
	<p>
	    I definitely won't be passing any cars.
    </p>
	
	<h2>June 2, 2012</h2>
	<img src="images/segway1.jpg">
	<p>
	    My first day of the trip! I can't believe I finally got 
		everything packed and ready to go. Because I'm on a Segway, 
		I wasn't able to bring a whole lot with me:
    </p>
    <ul>
        <li>cell phone</li>
        <li>ipod</li>
		<li>digital camera</li>
        <li>and a protein bar</li>
    </ul>
    <p>    
        Just the essentials. As Lao
		Tzu would have said, <q>A journey of a thousand miles begins
        with one Segway.</q>
	</p>
	
  </body>
</html>

DefinitionList.html:

<html>
  <head>
    <title>This is a Definition List Test</title>
  </head>
  <body>
    <dl>
      <dt>Burma Shave Signs</dt>
        <dd>Road signs common in the U.S. in the 1920s
        and 1930s advertising shaving products.</dd>
      <dt>Route 66</dt>
        <dd>Most famous road in the U.S. highway system.</dd>
    </dl>
  </body>
</html>

NestList.html:

<html>
  <head>
    <title>This is a Nest List Test</title>
  </head>
  <body>
    <ol>
        <li>Charge Segway</li>
        <li>Pack for trip
            <ul>
                <li>cell phone</li>
                <li>ipod</li>
                <li>digital camera</li>
                <li>a protein bar</li>
            </ul>
        </li>
        <li>Call mom</li>
    </ol>
  </body>
</html>

来源：oschina

链接：https://my.oschina.net/u/2297516/blog/690023

标签

html文件