html 段落
通過<p>標簽來創(chuàng)建段落(paragraph)
<p>這是一個段落</p>
瀏覽器會自動在段落的前后添加空格
●如果你希望在不產(chǎn)生一個新段落的情況下進行換行(新行),請使用<br>標簽
<p>這是一個段落</p>
<p>這是另一個段落</p>
<p>這個段落<br>演示了換行的效果</p>
●<br>元素是一個空的html元素,它沒有結(jié)束標簽.效果如下:
二 html文本格式化
html使用標簽<b>與<i>對輸出的文本進行格式化,如:粗體(bold)和斜體(italic).這些html標簽被稱為格式化標簽
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>愛你的阿平</title>
</head>
<body>
<p><b>定義粗體文本</b></p>
<p><em>定義著重文字</em></p>
<p><i>定義斜體字</i></p>
<p><small>定義小號字<small></p>
<p><strong>定義重要的文本<strong></p>
<p><sub>下標字</sub></p>
<p><sup>上標字</sup></p>
<p><ins>定義插入字</ins></p>
<p><del>定義刪除字</del></p>
</body>
</html>
結(jié)果如下:
TML 段落
段落是通過 <p> 標簽定義的。
實例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>這是段落。</p>
<p>這是段落。</p>
<p>這是段落。</p>
<p>段落元素由 p 標簽定義。</p>
</body>
</html>
[/demo]
注釋:瀏覽器會自動地在段落的前后添加空行。(<p> 是塊級元素)
提示:使用空的段落標記 <p></p> 去插入一個空行是個壞習(xí)慣。用 <br /> 標簽代替它!(但是不要用 <br /> 標簽去創(chuàng)建列表。不要著急,您將在稍后的篇幅學(xué)習(xí)到 HTML 列表。)
不要忘記結(jié)束標簽
即使忘了使用結(jié)束標簽,大多數(shù)瀏覽器也會正確地將 HTML 顯示出來:
實例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.
<p>不要忘記關(guān)閉你的 HTML 標簽!</p>
</body>
</html>
[/demo]
上面的例子在大多數(shù)瀏覽器中都沒問題,但不要依賴這種做法。忘記使用結(jié)束標簽會產(chǎn)生意想不到的結(jié)果和錯誤。
注釋:在未來的 HTML 版本中,不允許省略結(jié)束標簽。
提示:通過結(jié)束標簽來關(guān)閉 HTML 是一種經(jīng)得起未來考驗的 HTML 編寫方法。清楚地標記某個元素在何處開始,并在何處結(jié)束,不論對您還是對瀏覽器來說,都會使代碼更容易理解。
HTML 折行
如果您希望在不產(chǎn)生一個新段落的情況下進行換行(新行),請使用 <br /> 標簽:
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
</body>
</html>
[/demo]
<br /> 元素是一個空的 HTML 元素。由于關(guān)閉標簽沒有任何意義,因此它沒有結(jié)束標簽。
<br> 還是 <br />
您也許發(fā)現(xiàn) <br> 與 <br /> 很相似。
在 XHTML、XML 以及未來的 HTML 版本中,不允許使用沒有結(jié)束標簽(閉合標簽)的 HTML 元素。
即使 <br> 在所有瀏覽器中的顯示都沒有問題,使用 <br /> 也是更長遠的保障。
HTML 輸出 - 有用的提示
我們無法確定 HTML 被顯示的確切效果。屏幕的大小,以及對窗口的調(diào)整都可能導(dǎo)致不同的結(jié)果。
對于 HTML,您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時,瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是,HTML 代碼中的所有連續(xù)的空行(換行)也被顯示為一個空格。
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>春曉</h1>
<p>
春眠不覺曉,
處處聞啼鳥。
夜來風雨聲,
花落知多少。
</p>
<p>注意,瀏覽器忽略了源代碼中的排版(省略了多余的空格和換行)。</p>
</body>
</html>
[/demo]
(這個例子演示了一些 HTML 格式化方面的問題)
HTML 標簽參考手冊
標簽 描述
<p> 定義段落。
<br /> 插入單個折行(換行)。
HTML 可定義很多供格式化輸出的元素,比如粗體和斜體字。
下面有很多例子,您可以親自試試:
HTML 文本格式化實例
文本格式化
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
</body>
</html>
[/demo]
預(yù)格式文本
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<pre>
這是
預(yù)格式文本。
它保留了 空格
和換行。
</pre>
<p>pre 標簽很適合顯示計算機代碼:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
[/demo]
“計算機輸出”標簽
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注釋:</b>這些標簽常用于顯示計算機/編程代碼。
</p>
</body>
</html>
[/demo]
地址
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
[/demo]
縮寫和首字母縮寫
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些瀏覽器中,當您把鼠標移至縮略詞語上時,title 可用于展示表達的完整版本。</p>
<p>僅對于 IE 5 中的 acronym 元素有效。</p>
<p>對于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
[/demo]
文字方向
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
如果您的瀏覽器支持 bi-directional override (bdo),下一行會從右向左輸出 (rtl);
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
[/demo]
塊引用
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
這是長的引用:
<blockquote>
這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。
</blockquote>
這是短的引用:
<q>
這是短的引用。
</q>
<p>
使用 blockquote 元素的話,瀏覽器會插入換行和外邊距,而 q 元素不會有任何特殊的呈現(xiàn)。
</p>
</body>
</html>
[/demo]
刪除字效果和插入字效果
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多數(shù)瀏覽器會改寫為刪除文本和下劃線文本。</p>
<p>一些老式的瀏覽器會把刪除文本和下劃線文本顯示為普通文本。</p>
</body>
</html>
[/demo]
如何查看 HTML 源碼
您是否有過這樣的經(jīng)歷,當你看到一個很棒的站點,你會很想知道開發(fā)人員是如何將它實現(xiàn)的?
你有沒有看過一些網(wǎng)頁,并且想知道它是如何做出來的呢?
要揭示一個網(wǎng)站的技術(shù)秘密,其實很簡單。單擊瀏覽器的“查看”菜單,選擇“查看源文件”即可。隨后你會看到一個彈出的窗口,窗口內(nèi)就是實際的 HTML 代碼。
文本格式化標簽
標簽 描述
<b> 定義粗體文本。
<big> 定義大號字。
<em> 定義著重文字。
<i> 定義斜體字。
<small> 定義小號字。
<strong> 定義加重語氣。
<sub> 定義下標字。
<sup> 定義上標字。
<ins> 定義插入字。
<del> 定義刪除字。
<s> 不贊成使用。使用 <del> 代替。
<strike> 不贊成使用。使用 <del> 代替。
<u> 不贊成使用。使用樣式(style)代替。
“計算機輸出”標簽
標簽 描述
<code> 定義計算機代碼。
<kbd> 定義鍵盤碼。
<samp> 定義計算機代碼樣本。
<tt> 定義打字機代碼。
<var> 定義變量。
<pre> 定義預(yù)格式文本。
<listing> 不贊成使用。使用 <pre> 代替。
<plaintext> 不贊成使用。使用 <pre> 代替。
<xmp> 不贊成使用。使用 <pre> 代替。
引用、引用和術(shù)語定義
標簽 描述
<abbr> 定義縮寫。
<acronym> 定義首字母縮寫。
<address> 定義地址。
<bdo> 定義文字方向。
<blockquote> 定義長的引用。
<q> 定義短的引用語。
<cite> 定義引用、引證。
<dfn> 定義一個定義項目。
網(wǎng)頁設(shè)計中,標題、段落和文本格式是構(gòu)成頁面內(nèi)容的基石。它們不僅有助于傳達信息,還能通過組織和強調(diào)內(nèi)容來提升用戶體驗。本文將詳細介紹這些元素的使用方法,并提供實際例子。
標題是用來定義網(wǎng)頁中不同部分的標題。在HTML中,標題標簽從<h1>到<h6>,其中<h1>表示最高的層級,通常用于主標題,而<h6>表示最低的層級。為了保證良好的SEO實踐和無障礙訪問,應(yīng)保證標題層級的邏輯順序。
<h1>歡迎來到我的博客</h1>
<h2>最新文章</h2>
<h3>Web開發(fā)的未來趨勢</h3>
<h4>前言</h4>
<h4>主要內(nèi)容</h4>
<h4>結(jié)論</h4>
<h3>如何提高JavaScript技能</h3>
在這個例子中,<h1>用于最主要的標題,<h2>用于區(qū)分頁面中的主要部分,<h3>用于文章標題,<h4>用于文章內(nèi)部的小節(jié)。
段落是文本的基本單元,用于組織和展示連續(xù)的文本內(nèi)容。在HTML中,<p>標簽用于定義段落。合理的段落分割有助于讀者更好地理解和吸收信息。
<p>在今天的數(shù)字時代,網(wǎng)頁開發(fā)已經(jīng)成為了一個不斷演變的領(lǐng)域。隨著新技術(shù)的出現(xiàn),開發(fā)者需要不斷學(xué)習(xí)和適應(yīng)。</p>
<p>JavaScript是構(gòu)建現(xiàn)代網(wǎng)頁不可或缺的一部分。為了成為一名更優(yōu)秀的前端開發(fā)者,提高JavaScript技能是非常重要的。</p>
在這個例子中,兩個<p>標簽分別定義了兩個獨立的段落,每個段落都是一個完整的思想單元。
文本格式用于強調(diào)或區(qū)分網(wǎng)頁中的文本內(nèi)容。HTML提供了多種標簽來改變文本的樣式和意義,包括但不限于加粗、斜體、下劃線、上標和下標等。
<strong>和<b>標簽用于加粗文本,但<strong>通常表示重要性,而<b>僅用于視覺上的加粗。
<p>重要提示:<strong>請不要在任何情況下泄露您的密碼。</strong></p>
<p>這是一個<b>加粗</b>的文本示例。</p>
<em>和<i>標簽用于斜體文本,<em>表示強調(diào),而<i>僅用于斜體樣式。
<p>當我們談?wù)?lt;em>用戶體驗</em>時,我們指的是用戶與產(chǎn)品交互的整體感受。</p>
<p>這是一個<i>斜體</i>的文本示例。</p>
``標簽用于下劃線文本,而<del>標簽用于顯示文本已被刪除或更改。
<p>請閱讀使用條款了解更多信息。</p>
<p>原價<del>99.99美元</del> 現(xiàn)價69.99美元。</p>
<sup>和<sub>標簽用于創(chuàng)建上標和下標文本,常用于科學(xué)公式和腳注。
<p>水的化學(xué)式是H<sub>2</sub>O。</p>
<p>愛因斯坦的質(zhì)能方程式E=mc<sup>2</sup>。</p>
合理使用標題、段落和文本格式可以極大地提升網(wǎng)頁內(nèi)容的可讀性和專業(yè)性。通過明確的層級結(jié)構(gòu)和強調(diào)重要內(nèi)容,你可以幫助用戶快速找到他們需要的信息。記住正確使用這些基本元素,你的網(wǎng)頁將更加吸引人且功能強大。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。