當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/6/15 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了（三）构建模块——Web页面建设小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

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 roadtoday: </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 someinteresting 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 someinteresting 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 someinteresting 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 LaoTzu would have said, <q>A journey of a thousand miles beginswith 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 1920sand 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 someinteresting 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 roadtoday:</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 LaoTzu would have said, <q>A journey of a thousand miles beginswith one Segway.</q></p></body> </html>

DefinitionList.html:

NestList.html:

轉載于:https://my.oschina.net/u/2297516/blog/690023

總結

以上是生活随笔為你收集整理的（三）构建模块——Web页面建设的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：阅读鸟哥的风雪之隅PHP博客的笔记(1)
下一篇： HBase修改压缩格式及Snappy压缩