Django用戶界面模板

之前理解Django那篇文章中，我們學習了在Django中如何使用視圖?，F在，這篇文章將學習如何使用Django模板。模板是在Django項目中構建用戶界面的主要工具。讓我們學習一下在視圖中如何使用模板，以及Django的模板系統能夠提供什么特性。

設置模板

我們需要一個地方放置模板。模板是靜態文件，Django會在里面填充數據。為了使用那些文件，我們必須告訴Django在哪里可以找到它們。

像Django的大多數組成部分一樣，這項配置在項目的配置文件里面。在你執行startproject命令之后，你可在配置文件中找到一個叫TEMPLATES的小節。這個小節的內容像這樣：

Django的模板系統可以使用多個模板后端。這個后端決定了模板如何運行。我推薦使用Django默認的模板語言。這個模板語言對Django這個框架有最緊密的集成和最好的支持。

下一個需要注意的地方是APP_DIRS的值是True。對于Django的模板語言，將這個值設置為True將使Django在每個應用項目的templates目錄中查找模板文件。注意這將包括任何第三方應用，所以最好保持這個值為True。

那模板應該放到哪里？在Django社區，不同開發者對此有不同想法。一些開發者認為應該將所有模板都放在所在應用中。另一部分開發者將項目的所有模板放到一個單獨的目錄。我就是這第二種開發者。我發現將項目的所有模板放到一個單獨的目錄是很有價值的。

在我看來，將模板保存在單個目錄中使系統中所有布局和UI位置非常清楚。如果我們在Django中想使用該模式，必須設置DIRS變量包含這個目錄。我建議在項目的根目錄中保留一個templates目錄。如果你這樣做，DIRS變量值將變成類似這樣:

最后，還有OPTIONS變量。每個后端都能接受各種選項。startproject設置了許多上下文處理器。我們將在后面文章中回到上文處理器的話題上來。

模板設置好之后，你就可以繼續往下進行了！

配合渲染器使用模板

Django通過渲染模板的方式來構建用戶界面。渲染的思想是通過動態數據結合靜態模板文件來產生最終的輸出。

為了生成包含渲染輸出的HttpResponse, 我們使用render函數。讓我們看一個例子，

在這個例子中，這個視圖將使用路徑為templates/hello.txt的模板，它的內容：

當這個視圖對一個請求進行應答時，用戶將在它的瀏覽器中看到“Hello Johnny”。關于這個例子，這里有一些有趣的事情需要注意：

這個模板可以是任何類型的純文本文件。我們常用HTML來創建用戶界面，因此我們?？吹絪ome_template.html，但是Django模板系統可以渲染任何類型的純文本文件。
在渲染的過程中，Django使用上下文數據字典并以它的關鍵字作為模板中的變量名。由于特殊的雙花括號語法，在上下文中模板的后端把{{ name }}替換為字面值“Johnny”。

使用模板的核心觀念是將上下文和靜態布局相融合。文章的剩余部分會基于此觀念，并會展示Django模板語言還能帶來什么。

看到TemplateView，你可能會回想起上一篇文章。在那些例子中，我們提供一個模板名字，然后我說到Django會處理剩下的事情?，F在你開始理解Django獲取模板名字，然后調用類似render的代碼來生成一個HttpResponse。當時，那些例子缺少與模板結合起來的上下文數據。下面是一個完整的例子復現上述過程，代碼如下：

這個例子用 get_context_data, 因此我們能向渲染系統中插入我們的動態數據，來產生我們想要的應答。

在一個真實的應用中，我們需要專注寫大量的代碼來構建一個真正動態的上下文(context)。為了使模板系統的機制清晰，在這些例子中我使用的是靜態數據。當你看到所使用的上下文時，試著去想象使用更加復雜的數據來創建一個用戶界面。

以上這些是渲染的基礎。我們現在把我們的注意力轉向Django模板語言的能力。

模板實戰

當使用模板時，我們把上下文數據插入到模板里各個占位符的位置。

模板變量是使用上下文填充占位符最常見的形式。上節中我們展示了一個使用name變量的例子。上下文字典中包含一個name關鍵字，而雙花括號{{ name }}代表name值應該展示在哪里。

當上下文數據更加復雜時，我們也可以用點號獲取。例如像這樣的模板上下文：

Django模板不能使用常規的字典(例如{{ address['street'] }})獲取這個上下文數據。這時你應該用點號記法來獲取字典中的數據。

上面模板將渲染成：

Django模板同時努力適應不同類型的上下文數據。你也可以傳遞一個Python類的實例，比如和前面字典關鍵字一樣屬性的地址類。這時模板工作的效果是一樣的。

通過使用標簽的形式，核心模板語言提供了標準的編程邏輯關鍵字。模板標簽是這樣{% some_tag %}，然而模板變量是這樣 {{ some_variable }}。變量代表用于填入值的占位符，但是標簽提供了更多的作用。

我們可以從兩個核心標簽開始學習，if 和 for。

標簽if用于模板需要處理條件判斷的時候。

這個例子只包含一個當用戶登錄到應用時歡迎信息的HTML頭部標簽。我們用if標簽開始這個例子。注意觀察if標簽結尾需要一個endif標簽。模板必須認真對待空格，因為布局依賴那些空格。模板語言不能像在Python中那樣用空格來表示范圍，所以需要用結束標簽。你可能猜到了，在if/endif標簽對中間也可以有else和elif標簽。

在這個例子中，只有一個頭部標簽根據用戶是否驗證來渲染。

for循環標簽是另一個核心標簽。在Django模板中，for循環會像你想象到的那樣工作。

Django會循環遍歷像列表一樣的可迭代對象，并對每個可迭代對象的中的項讓用戶輸出模板響應。如果上面的例子中列表的內容像下面一樣：

對應的輸出的大概會是這樣：

有時在for循環中的某個特定的元素上，你可能想采取一些特別的操作。在模板中不能直接使用Python內建的enumerate函數，但是在for標簽中有一個叫forloop的特別變量可用。這個forloop變量有一些你可用的屬性像first和last，讓模板對某個循環對象做不同的處理。

這個例子會這樣生成：

有了變量、if標簽以及for標簽，你可以制作一些相當強大的模板，但是除了這些還有更多東西可以發掘。

更多關于上下文的內容

在整個模板的設置項中，我們沒有詳細講解上下文處理器。上下文處理器是當模板被渲染時可以用來擴展上下文的有效方式。

這是一組當你用Django的startproject命令時默認生成的上下文處理器配置。

上下文處理器是接收HttpRequest，處理后返回字典的函數（嚴格來說是調用者，不過這里關注的是函數）。返回的字典和其他上下文一起傳遞給模板。

我們看看包含在上述列表中request的上下文處理器的實際定義。

這就是定義！因為有上下文處理器，這個request對象可以在你項目的任何模板中當作變量使用。這個功能非常強大。

工具條

不要害怕去看項目依賴的源代碼。記住你最喜歡的框架都是普通人寫的。你可以從他們寫的代碼中學到有價值的東西。這些代碼最開始可能看起來比較嚇人，但是這沒有捷徑可走。

上下文處理器的副作用是它們會對所有的請求都執行。如果你寫了一個做大量計算運行緩慢的上下文處理器，每個請求都會受到這個性能的影響。

所以，需要小心謹慎地使用上下文處理器。

可復用的模板代碼

現在讓我們說說模板系統的一個強大特性：可復用的代碼片段。

想象一個網站，大部分的頁面有相似的外觀和感覺。他們通過重復大量相同的HTML實現，HTML是一種定義頁面結構的超文本標記語言。這些頁面使用相同的CSS（層疊樣式表），層疊樣式表是定義頁面元素外觀形狀的樣式。

想象你被要求管理一個網站，并且你需要創建兩個獨立的頁面。主頁看起來像這樣：

并且在網站背后有一個介紹公司的頁面。

這些例子有少量的HTML，但是如果你被要求把styles.css樣式表改為設計師制作的叫做 better_styles.css新的樣式表怎么辦？你需要在兩個頁面同時更新?，F在想象你有2000個頁面而不是兩個頁面，在這樣一個網站快速地做大量修改幾乎不可能。

Django通過用幾個標簽幫助你完全避免這樣的情形。讓我們寫一個取名base.html的新模板。

我們通過block標簽創建了一個可復用的模板！我們可以修改我們的主頁使用這個新模板。

這個新版主頁擴展了這個基礎模板。所有模板需要做的是定義自己的用于填充內容的main語句塊。我們可以對介紹頁面做相同的操作。

如果我們現在重新接到將styles.css樣式表替換為better_styles.css樣式表的任務時，我們可以在base.html中更新，然后將修改的內容應用到所有以它為基礎模板擴展的頁面。即使有2000個從base.html擴展的頁面，改變樣式表時依然是一行代碼就可以改變整個站點。

這就是Django模板擴展系統的強大之處。

另一個復用的強大的工具是include的標簽。當你想在多個地方引用一部分模板代碼時include標簽非常有用。你想用include來實現：

保持模板整潔。你可以將一個大模板拆分成多個更好管理的小片段。
在你網站的不同部分用其中某一個模板片段。你可能有一個模板片段可能只會在幾個頁面用。

回到我們網站的例子，想象base.html代碼行數增長到20000行。找到模板中你想改變的部分現在變得更加困難。我們可以將模板分解成更小的片段。

這個include標簽可以將那些額外的模板片段包含到所在位置。給模板取一個好的名字，如果你需要像導航一樣改變一些章節的結構，你可以通過合適名字找到所需要的模板。

block, extends和include是保持用戶界面代碼避免在大量重復中無序擴展的核心標簽。

接下來，讓我們討論更多Django的內置模板標簽，這些標簽使你更加熟練掌控UI。

模板的工具箱

Django的文檔中包含大量可用于項目的內置標簽。我們的內容無法覆蓋所有這些標簽，但是我將關注幾個標簽給你展示哪些東西是可用的。

除了我們已經講過的標簽外，其中最常用的一個內置標簽就是url標簽。回憶那篇關于URLs的文章，通過reverse函數你可以將URL與一個命名視圖聯系起來。如果你想模板中用URL怎么辦？你可以這樣做：

盡管這樣可以運行，但是所有URL必須通過上下文路由是令人厭煩的。然而，我們的模板可以直接創建所需要的URL。下面才是a_template.html應該有的樣子。

這個url標簽是模板中與reverse函數作用一樣的東西。像它的reverse一樣，url可以接受args或者kwargs參數，這些是期望用于路由的其他變量。url是一個極其有用的工具并且是很可能在創建用戶界面中用很多次的標簽。

另一個有用的標簽是now標簽。now是一個用于展示當前時間相關信息方便的方法。用Django中的格式說明符，你可以告訴模板怎樣去展示當前時間。想在網站里添加當前的版權年份嗎？一點問題都沒有！

最后需要學習的內建標簽是spaceless標簽。HTML對空格部分敏感。有一些令人沮喪的情形，當你構建用戶界面時，空格敏感性帶來的后果會非?？膳?。

當你用CSS的時候，在那些列表項前面縮進的空格（或者跟著它們的下一行字符）可能會給你帶來麻煩。意識到空格可能影響布局這個問題，我們可以像下面這樣使用spaceless標簽：

這個整潔的模板小標簽會移除所有HTML標簽中間的空格，所以效果是這樣的：

通過移除額外的空格，你在用CSS樣式表時獲得更多便利的體驗，并避免一些沮喪情緒。

這里還有另一種內建類型我們目前還沒有學習到。另一種內建函數叫做過濾器。過濾器改變你模板中變量的輸出。過濾器的語法有一點有趣。它看起來像這樣：

這里面重要的元素是緊跟在每個變量后面的管道符號。這個符號是在告訴模板系統我們想要對變量做一些轉換。需要注意的是過濾器用在雙花括號中，而不是像使用標簽那樣的{%語法。

一個非常常見的過濾器是date過濾器。當你在上下文中傳遞Python的時間實例，你可用date過濾器來控制時間的格式。date過濾器的文檔中演示了在修改時間格式時可用的選項有哪些。

如果a_datetime是一個4月愚人節的實例，然后它會返回像2020-04-01的字符串。date過濾器有許多格式說明符，你可生成所能想到的絕大多數日期輸出格式。

當模板變量的值計算為False時，default是一個有用的過濾器。當你獲取到一個變量為空字符串時，這是完美的。下面這個例子中如果變量是非真值，將會輸出“Nothing to see here”。

length是一個簡單的列表過濾器。{{ a_list_variable | length }} 將會計算出一個數字。它功能和Django模板中的len函數一樣。

我非常喜歡linebreaks過濾器。如果你創建一個表格（下一篇文章我們會學習到）并且有一個文本區域用戶可以輸入新行，如果當渲染用戶數據時你想顯示那些新行，linebreaks過濾器會非常有用。HTML默認不會顯示換行的字符。linebreaks過濾器會將\n轉換為一個 HTML標簽，這很方便！

在繼續往下學習之前，讓我們學習兩個標簽。

當文本需要計算東西的個數時候，pluralize是一個方便的標簽。下面是計算項目數的例子。

如果列表中有0、1 或者更多的項目，pluralize標簽將計算出正確的結果。

在我們學習的旅程中，最后一個是yesno標簽。yesno適合將True|False|None轉換成有意義的文本消息。想象我們創作一個應用追蹤各種事件，用戶注意力集中在三個值中的某一個。我們模板可能看起來像這樣。

依賴于user_accepted這個值，模板將會展示一些有用的信息給用戶。

還有很多Django的內建功能，挑選我最喜歡的功能是非常困難的。你可以查一下完整的列表，看看哪些可能會你有用。

如果Django內置功能沒有覆蓋你想要的功能怎么辦？不要怕，Django允許你為自己定制標簽和過濾器。接下來我們看看如何來實現。

構建你自己的模板武器

當你需要構建你自己的模板標簽或者過濾器時，Django給你提供了制作它們的工具。

這里有三個主要的元素用來定制標簽：

在Django期望的地方定義你自己的標簽。
在模板引擎中注冊標簽。
在模板中加載標簽，這樣它們可被用。

第一步是將標簽放到正確的位置。為此，在Django應用中我們需要一個名為templatetags的Python包。我們也需要一個模塊在那個目錄里。要小心謹慎地給模塊命名，因為它會在稍后加載到模板時用。

下一步，我們需要制作標簽或者過濾器并且注冊它。讓我們從過濾器的例子開始。

現在，如果我們有一個message變量，我們可以給它提供一些pizzazz。為了用這個定制的過濾器，我們必須用load標簽把我們的標簽模板加載到模板。

如果我們的消息是“You got a perfect score!”，然后模板會選擇三個選項之一，顯示在這條信息之后，比如“You got a perfect score! Wowza!”。

簡單的定制標簽的編寫和定制過濾器非常的相似。這里代碼比語言描述的更好。

我們可以加載這個定制標簽，并且像其他內建標簽一樣用我們標簽。

這個搞笑的歡迎標簽會處理多個輸入變量并且根據提供的級別進行變化。這個例子的中會顯示“Hello great champion He-Man!”。

在我們的例子中，僅僅學習了最常見的定制標簽。還有許多更加高級的定制標簽特性，你可以在Django定制模板標簽文檔探索。

總結

現在我們已經學習了模板的實戰！我們已經學習的以下內容：

如何設置你網站的模板
從視圖中調用模板的方法
如何使用數據
如何處理邏輯
可用于模板的內置標簽和過濾器
使用你自己的代碼擴展定制模板

英文原文：https://www.mattlayman.com/understand-django/templates-user-interfaces/
譯者：穆勝亮

1-HTML基礎

第1章基礎語法

html是超文本標記語言
<head>,<title>標簽里的內容不會在網頁文檔中顯示
<hr/>標簽是水平線，不需要成對出現
注釋代碼：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
</head>
<body bgcolor="grey">
	<p>HELLO,everyone.This is my first page!</p>
</body>
</html>

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

第2章文章段落

2.1 文檔聲明和META標簽

<html>,<body>,<head>標簽是html文檔結構標簽，<!DOCTYPE HTML>不屬于html標簽，它用于定義文檔類型

網頁中不能正常顯示中文，出現亂碼現象，使用meta標簽設置編碼格式：<meta charset="utf-8">

<!DOCTYPE html>
<html>
<head>
	<title>第一個網頁</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	大家好，一起來學習html標記語言
</body>
</html>

3.如果想在html頁面中顯示空格，使用

標題標簽：<h1></h1>~<h6></h6>

段落標簽：

align對齊屬性值：

left:左對齊內容

right:右對齊內容

center:居中對齊內容

justify:對行進行延申，這樣每行都可以有相等的長度

換行標簽

5.一個標簽代表一個段落，兩個標簽中的文本內容不在同一行，在標簽中，使用 文本內容的位置只是換行，其實還是一個段落

6.<pre></pre>標簽用于預定義格式顯示文本，即文本在瀏覽器中顯示時遵循在HTML原文檔中定義的格式

<!DOCTYPE html>
<html>
<head>
	<title>練習1</title>
	<meta http-equiv="Content-Type" content="text/http;charset=utf-8"/>
</head>
<body>
	<h3 align="center">《早發白帝城》</h3>
	<p align="center">朝辭白帝彩云間，千里江陵一日還。</p>
	<p align="center">兩岸猿聲啼不住，輕舟已過萬重山。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>練習2</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<h1>敕勒歌</h1>
	<h2>朝代：南北朝</h2>
	<h3>作者：佚名</h3>
	<p>  敕勒川，<br/>
	     陰山下，<br/>
	     天似穹廬，<br/>
	</p>
	<pre>
  籠蓋四野，
   天蒼蒼，
   野茫茫，
風吹草低見牛羊。
	</pre>
</body>
</html>

2.2 文字和段落標簽

文字斜體：和
加粗：和
下標：
上標：

特殊符號

任務

<!DOCTYPE html>
<html>
<head>
	<title>任務</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p align="center">關于我們  |  招聘信息  |  聯系我們  |  意見反饋</p>
	<hr/>
	<p align="center">Copyright ? 2016 imooc.com All Rights Reserved</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>任務</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p>
</body>
</html>

第3章列表標簽

3.1 列表標簽-無序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ul type="disc">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ul>
	<ul type="square">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ul>
</body>
</html>

3.2 列表標簽-有序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ol type="a">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ol>
	<ol type="i">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ol>
</body>
</html>

3.3 列表標簽-定義列表

<dt><dd>是同級標簽

第四章圖像和超鏈接

4.1 圖像

圖像標簽

絕對路徑：

相對路徑：

效果圖

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>一幅圖像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p>
	<p>一幅動畫圖像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p>
</body>
</html>

4.2 超鏈接

超鏈接標簽

空鏈接：<a href="#"> </a>

4.3 錨鏈接

定義錨（同一頁面）

任務：

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p><a name="dingbu">這里是頂部</p>
	<p><a href="#shuiguo">水果</p>
	<p><a href="#shucai">蔬菜</p>
	<p><a href="#yundong">運動</a></p>
	<h3><a name="shuiguo">水果</a></h3>
	<ul>
		<li>香蕉</li>
		<li>蘋果</li>
		<li>葡萄</li>
		<li>梨</li>
		<li>西瓜</li>
		<li>櫻桃</li>
		<li>菠蘿</li>
		<li>橙子</li>
		<li>柚子</li>
		<li>芒果</li>
	</ul>
	<p><a href="#dingbu">返回頂部</a></p>
	<h3><a name="shucai">蔬菜</a></h3>
	<ul>
		<li>西紅柿</li>
		<li>黃瓜</li>
		<li>土豆</li>
		<li>芹菜</li>
		<li>蒜苔</li>
		<li>西葫蘆</li>
		<li>香菇</li>
		<li>菠菜</li>
		<li>豆角</li>
		<li>油菜</li>
	</ul>
	<a name="yundong"></a>
	<p><a href="#dingbu">返回頂部</a></p>
</body>
</html>

定義錨（不同頁面）

4.3 鏈接擴展功能

1. 電子郵件鏈接

2.文件下載

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="mailto:2539391306@qq.com.cn">郵箱鏈接</a>
	<a href="58ca5b6700018dfc02400135.zip">文件下載</a>
</body>
</html>

原文鏈接：https://blog.csdn.net/qq_43405634/article/details/103789819

TML 段落

段落是通過 標簽定義的。

實例

[demo]

<html>

<head>

</head>

<body>

這是段落。

段落元素由 p 標簽定義。

</body>

</html>

[/demo]

注釋：瀏覽器會自動地在段落的前后添加空行。（ 是塊級元素）

提示：使用空的段落標記 去插入一個空行是個壞習慣。用 標簽代替它?。ǖ遣灰? 標簽去創建列表。不要著急，您將在稍后的篇幅學習到 HTML 列表。）

不要忘記結束標簽

即使忘了使用結束標簽，大多數瀏覽器也會正確地將 HTML 顯示出來：

實例

[demo]

<html>

<head>

</head>

<body>

This is a paragraph.

不要忘記關閉你的 HTML 標簽！

</body>

</html>

[/demo]

上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。

注釋：在未來的 HTML 版本中，不允許省略結束標簽。

提示：通過結束標簽來關閉 HTML 是一種經得起未來考驗的 HTML 編寫方法。清楚地標記某個元素在何處開始，并在何處結束，不論對您還是對瀏覽器來說，都會使代碼更容易理解。

HTML 折行

如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 標簽：

[demo]

<html>

<head>

</head>

<body>

To break lines in a paragraph, use the br tag.

</body>

</html>

[/demo]

元素是一個空的 HTML 元素。由于關閉標簽沒有任何意義，因此它沒有結束標簽。

還是

您也許發現 與 很相似。

在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結束標簽（閉合標簽）的 HTML 元素。

即使 在所有瀏覽器中的顯示都沒有問題，使用 也是更長遠的保障。

HTML 輸出 - 有用的提示

我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調整都可能導致不同的結果。

對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。

當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。

[demo]

<html>

<head>

</head>

<body>

春眠不覺曉，

處處聞啼鳥。

夜來風雨聲，

花落知多少。

注意，瀏覽器忽略了源代碼中的排版（省略了多余的空格和換行）。

</body>

</html>

[/demo]

（這個例子演示了一些 HTML 格式化方面的問題）

HTML 標簽參考手冊

標簽描述

定義段落。

插入單個折行（換行）。

HTML 可定義很多供格式化輸出的元素，比如粗體和斜體字。

下面有很多例子，您可以親自試試：

HTML 文本格式化實例

文本格式化

[demo]

<html>

<head>

</head>

<body>

This text is bold

This text is strong

This text is emphasized

This text is italic

This text is small

This text contains

subscript

This text contains

superscript

</body>

</html>

[/demo]

預格式文本

[demo]

<html>

<head>

</head>

<body>

<pre>

這是

預格式文本。

它保留了空格

和換行。

</pre>

pre 標簽很適合顯示計算機代碼：

<pre>

for i=1 to 10

print i

next i

</pre>

</body>

</html>

[/demo]

“計算機輸出”標簽

[demo]

<html>

<head>

</head>

<body>

<code>Computer code</code>

<kbd>Keyboard input</kbd>

<tt>Teletype text</tt>

<samp>Sample text</samp>

<var>Computer variable</var>

注釋：這些標簽常用于顯示計算機/編程代碼。

</body>

</html>

[/demo]

地址

[demo]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.

Visit us at:

Example.com

Box 564, Disneyland

USA

</address>

</body>

</html>

[/demo]

縮寫和首字母縮寫

[demo]

<html>

<head>

</head>

<body>

在某些瀏覽器中，當您把鼠標移至縮略詞語上時，title 可用于展示表達的完整版本。

僅對于 IE 5 中的 acronym 元素有效。

對于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。

</body>

</html>

[/demo]

文字方向

[demo]

<html>

<head>

</head>

<body>

如果您的瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)；

Here is some Hebrew text

</bdo>

</body>

</html>

[/demo]

塊引用

[demo]

<html>

<head>

</head>

<body>

這是長的引用：

這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。

</blockquote>

這是短的引用：

<q>

這是短的引用。

</q>

使用 blockquote 元素的話，瀏覽器會插入換行和外邊距，而 q 元素不會有任何特殊的呈現。

</body>

</html>

[/demo]

刪除字效果和插入字效果

[demo]

<html>

<head>

</head>

<body>

一打有 <del>二十</del> <ins>十二</ins> 件。

大多數瀏覽器會改寫為刪除文本和下劃線文本。

一些老式的瀏覽器會把刪除文本和下劃線文本顯示為普通文本。

</body>

</html>

[/demo]

如何查看 HTML 源碼

您是否有過這樣的經歷，當你看到一個很棒的站點，你會很想知道開發人員是如何將它實現的？

你有沒有看過一些網頁，并且想知道它是如何做出來的呢？

要揭示一個網站的技術秘密，其實很簡單。單擊瀏覽器的“查看”菜單，選擇“查看源文件”即可。隨后你會看到一個彈出的窗口，窗口內就是實際的 HTML 代碼。

文本格式化標簽

標簽描述

定義粗體文本。

<big> 定義大號字。

定義著重文字。

定義斜體字。

定義小號字。

定義加重語氣。

定義下標字。

定義上標字。

<ins> 定義插入字。

<del> 定義刪除字。

<s> 不贊成使用。使用 <del> 代替。

<strike> 不贊成使用。使用 <del> 代替。

不贊成使用。使用樣式（style）代替。

“計算機輸出”標簽

標簽描述

<code> 定義計算機代碼。

<kbd> 定義鍵盤碼。

<samp> 定義計算機代碼樣本。

<tt> 定義打字機代碼。

<var> 定義變量。

<pre> 定義預格式文本。

<listing> 不贊成使用。使用 <pre> 代替。

<plaintext> 不贊成使用。使用 <pre> 代替。

<xmp> 不贊成使用。使用 <pre> 代替。

引用、引用和術語定義

標簽描述

<abbr> 定義縮寫。

<acronym> 定義首字母縮寫。

<address> 定義地址。

<bdo> 定義文字方向。

<blockquote> 定義長的引用。

<q> 定義短的引用語。

<cite> 定義引用、引證。

<dfn> 定義一個定義項目。

在線咨詢

上一篇：ORACLE 12C RAC安裝-數據庫安裝篇
下一篇：2015 iWeb峰會上海站迎來最大規?！扒岸苏衅浮?/a>

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Django用戶界面模板

1-HTML基礎

第1章 基礎語法

2.2 文字和段落標簽

特殊符號

任務

第3章 列表標簽

3.1 列表標簽-無序列表

3.2 列表標簽-有序列表

3.3 列表標簽-定義列表

第四章 圖像和超鏈接

4.1 圖像

4.2 超鏈接

4.3 錨鏈接

4.3 鏈接擴展功能

您的項目需求

第1章基礎語法

第3章列表標簽

第四章圖像和超鏈接