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

时间 2019-11-10

标签构建模块 web 页面建设栏目 HTML 繁體版

原文原文链接

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

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

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

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

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

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>用于较长的引用，须要单独显示。例如： ide

<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>都是内联元素。块元素老是"特立独行"，而内联元素则"随波逐流"spa

②块元素一般用做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>

⑥2三、24行标记错误

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

⑧2五、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>