整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          html自學(xué)教程(二)html段落與文本格式化

          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)容來提升用戶體驗。本文將詳細介紹這些元素的使用方法,并提供實際例子。

          標題(Headings)

          標題是用來定義網(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é)。

          段落(Paragraphs)

          段落是文本的基本單元,用于組織和展示連續(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提供了多種標簽來改變文本的樣式和意義,包括但不限于加粗、斜體、下劃線、上標和下標等。

          加粗(Bold)

          <strong>和<b>標簽用于加粗文本,但<strong>通常表示重要性,而<b>僅用于視覺上的加粗。

          使用實例:

          <p>重要提示:<strong>請不要在任何情況下泄露您的密碼。</strong></p>
          <p>這是一個<b>加粗</b>的文本示例。</p>
          

          斜體(Italic)

          <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>
          

          結(jié)論

          合理使用標題、段落和文本格式可以極大地提升網(wǎng)頁內(nèi)容的可讀性和專業(yè)性。通過明確的層級結(jié)構(gòu)和強調(diào)重要內(nèi)容,你可以幫助用戶快速找到他們需要的信息。記住正確使用這些基本元素,你的網(wǎng)頁將更加吸引人且功能強大。


          主站蜘蛛池模板: 午夜福利一区二区三区在线观看| 国产精品免费视频一区| 亚洲精品伦理熟女国产一区二区| 国产色综合一区二区三区| 国产一区麻豆剧传媒果冻精品| www亚洲精品少妇裸乳一区二区| 不卡一区二区在线| 亚洲av福利无码无一区二区| 爆乳熟妇一区二区三区霸乳| 中文字幕一区二区人妻| 日本一区视频在线播放| 亚洲高清日韩精品第一区| 久久久久无码国产精品一区 | 一区二区三区四区在线播放| 国产一区二区三区乱码网站| 99久久精品国产高清一区二区| 国产伦精品一区二区三区免费下载 | 91精品国产一区二区三区左线| 国产精品va无码一区二区| 国精品无码A区一区二区| 精品人妻少妇一区二区三区| 国产精品无圣光一区二区 | 日韩精品一区在线| 国产成人高清亚洲一区91| 国产99视频精品一区| 国产短视频精品一区二区三区| 免费一区二区三区| 国产福利91精品一区二区三区| 国产精品久久久久一区二区三区| 激情啪啪精品一区二区| 狠狠色成人一区二区三区| 久久久久一区二区三区| 中文字幕一区二区三区永久 | 国产主播福利一区二区| 夜夜爽一区二区三区精品| 麻豆一区二区在我观看| 午夜精品一区二区三区在线观看| 久久青草精品一区二区三区| 亚洲国产AV无码一区二区三区 | 免费无码A片一区二三区| 日韩精品一区在线|