（三）構建模塊——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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。