溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Web如何格式化文字與段落”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Web如何格式化文字與段落”吧！
標題字(h2最大~h7最小)標記語法及屬性語法
文本格式化標記類型與作用
使用字體font標記
使用段落與排版標記
使用各類格式化標記設計簡易的Web頁面
簡潔：滿足人們的實用和需求為目標，要求簡練、準確。
一致性：網(wǎng)站中各個頁面使用相同的頁邊距，頁面中的每個元素與整個頁面以及站點的色彩和風格上的一致性。
好的對比度：對比度的目的強調(diào)突出關鍵內(nèi)容，以吸引瀏覽者，鼓勵他們?nèi)グl(fā)掘更深層次的內(nèi)容。
基本語法：
<body>在這里添加內(nèi)容</body>
語法說明：
body中定義文檔的主體。
body中包含文檔的所有內(nèi)容(如文本、超鏈接、圖像、表格、列表、聲音和視頻等)。
body標記所包含的內(nèi)容會顯示在頁面上。
標題是通過<h2> ~ <h7>等標記進行定義的。
基本語法：
<h2 align="lift|center|right|justify">1號標題 字</h2>
例如：
<h2 align="center">Web前端開發(fā)技術</h2> <h3 align="left">Web前端開發(fā)技術</h3> <h4 align="center">Web前端開發(fā)技術</h4> <h5 align="right">Web前端開發(fā)技術</h5> <h6 align="justify">Web前端開發(fā)技術</h6> <h7 align="center">Web前端開發(fā)技術</h7>
添加空格和特殊符號
在HTML文件中，添加空格的方式與其他文檔添加空格的方式不同，網(wǎng)頁中通過代碼控制來添加空格，而在其他編輯器中通過鍵盤空格鍵來輸入空格。
基本語法
<body> <®× </body>
注：在body標記內(nèi)無論輸入多少空格、回車符，頁面在顯示時都會忽略。
在HTML文件中，插入特殊字符
| 顯示結果 | 說明 | Entity Name | Entity Number |
|---|---|---|---|
| 顯示一個空格 | |   | |
| < | 小于 | < | < |
| > | 大于 | > | > |
| & | &符號 | & | & |
| " | 雙引號 | " | " |
| ? | 版權 | © | © |
| ? | 注冊商標 | ® | ® |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |
在HTML文件中，插入特殊字符案例
<!-- 在body標記內(nèi)無論輸入多少空格、回車符，頁面在顯示時都會忽略 --> <p>空格 </p> <p>大于></p> <p>小于<</p> <p>邏輯與&</p> <p>版權©</p> <p>注冊®</p> <p>乘號×</p> <p>除號÷</p>
文本修飾標記各類瀏覽器均支持，各類網(wǎng)頁開發(fā)工具中仍然有這類標記。常見的文本修飾標記如下表所示。
| 標記 | 說明 |
|---|---|
| <b>軟件工程專業(yè)！</b> | 定義粗體 |
| <i>軟件工程專業(yè)！</i> | 定義斜體 |
| <u>軟件工程專業(yè)！</u> | 定義下劃線 |
| <del>軟件工程專業(yè)！</del> | 定義刪除線 |
| <sup>軟件工程專業(yè)！</sup> | 定義上標 |
| <sub>軟件工程專業(yè)！</sub> | 定義下標 |
| <strong>軟件工程專業(yè)！</strong> | 定義粗體 |
| <em>軟件工程專業(yè)！</em> | 定義斜體 |
| <small>軟件工程專業(yè)！</small> | 變小字號 |
| <big>軟件工程專業(yè)！</big> | 變大字號 |
案例1：
<b>This text is bold<` <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 is contains<sub>subcript</sub> <br> This text is contains<sup>superscript</sup>
案例2：
<body> <h4 align="center">文本修飾標記應用</h4> <hr size="2" color="red"> <b>軟件工程專業(yè)全國就業(yè)最好</b><br> <i>軟件工程專業(yè)全國就業(yè)最好</i><br> <u>軟件工程專業(yè)全國就業(yè)最好</u><br> <del>軟件工程專業(yè)全國就業(yè)最好</del><br> x<sup>2</sup>+2x+5=b<br> x<sub>1</sub>=2<br> <small>軟件工程專業(yè)全國就業(yè)最好</small><br> <big>軟件工程專業(yè)全國就業(yè)最好</big><br> <strong>軟件工程!</strong><br> <em>軟件工程!</em> </body>
字體font標記：
<body> <strong>文本樣式為黑體，顏色#000fff，大小從-1~-7；</strong> <font face="黑體" size="-1" color="#000fff">-1字</font> <font face="黑體" size="-3" color="#000fff">-3字</font> <font face="黑體" size="-5" color="#000fff">-5字</font> <font face="黑體" size="-7" color="#000fff">-7字</font><br> <strong>文本樣式為宋體，顏色#ff0066，大小從1~7；</strong> <font face="宋體" size="1" color="#ff0066">1字</font> <font face="宋體" size="3" color="#ff0066">3字</font> <font face="宋體" size="5" color="#ff0066">5字</font> <font face="宋體" size="7" color="#ff0066">7字</font><br> <strong>文本樣式為隸書，顏色#000fff，大小從+1~+7；</strong> <font face="隸體" size="+1" color="#ff0066">+1字</font> <font face="隸體" size="+3" color="#ff0066">+3字</font> <font face="隸體" size="+5" color="#ff0066">+5字</font> <font face="隸體" size="+7" color="#ff0066">+7字</font> </body>
font標記用來改變默認的字體、顏色、大小等屬性，這些更改分別通過不同的屬性定義完成。
基本語法：<font face=" " size=" " color=" "> 內(nèi)容 </font>
屬性說明：
| 屬性 | 值 | 說明 |
|---|---|---|
| size | +1+7，-1-7 | 數(shù)字越大字號越大 |
| color | rgb、#rrggbb、color name | 規(guī)定文本的顏色。可以使用rgb函數(shù)、十六進制數(shù)、顏色英文名稱來表達 |
| face | 字體1，字體2，字體n | face屬性可以有多個值，用逗號分隔。字體使用方式為從左到右依次使用。只要前面的字體不存在，則使用后一個，都不存在則默認使用“宋體”。 |
案例：
計算機輸出標記：常用的計算機輸出標記如下表所示：
| 標簽 | 說明 |
|---|---|
| <code> </code> | 定義計算機代碼 |
| <kbd> </kdb> | 定義鍵盤碼 |
| <samp> </samp> | 定義計算機代碼樣本 |
| <tt> </tt> | 定義打字機代碼 |
| <var> </var> | 定義變量 |
| <pre> </pre> | 定義預格式文本 |
預格式化標記<pre>
<pre> </pre>標記對網(wǎng)頁中的文字段落進行預格式化，瀏覽器會完整保留設計者在源文件中所定義的格式，包括各種空格、縮進以及其他特殊格式。
基本語法：<pre> 預格式化文本 </pre>
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>預格式化</title> </head> <body> <h2> <pre> 春 曉 孟浩然 春眠不覺曉， 處處聞啼鳥。 夜來風雨聲， 花落知多少。 </pre> </h2> </body> </html>
引用和術語標記：常用的引用和術語標記如下表所示。
| 標記 | 主要用途 |
|---|---|
| <abbr>etc.</abbr> | 定義縮寫 |
| <address>江蘇南京市</address> | 定義地址 |
| <blockquote>長的引用</blockquote> | 定義長的引用 |
| <cite>引用、引證</cite> | 定義引用、引證 |
| <q>引用短語</q> | 定義短的引用語，IE看不到引號，其余可以 |
| <dfn>定義項目</dfn> | 定義一個定義項目 |
區(qū)別：
<q>：引用的是小段文字。
<blockquote>：引用的是大段的內(nèi)容塊。
<q>：q標簽是行內(nèi)元素，在內(nèi)容的開始和結尾處會包有引號。
<blockquote>：blockquote是塊級元素，默認帶有左右40px的外間距，不帶引號。
<blockquote>標簽和<q>標簽都表示“引用”
格式不同
語義不同
<abbr> </abbr>
通過對縮寫進行標記，您能夠為瀏覽器、拼寫檢查和搜索引擎提供有用的信息。
假如用了ABBR及ACRONYM標簽，只需要把鼠標指到縮寫詞上就會顯示完整的意思。
<body> <abbr>etc.</abbr> <abbr title="PageRank">PR</abbr> The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949. <br><acronym title="Client Server">CS</acronym> <address>江蘇省南京市</address> <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>
網(wǎng)頁的外觀是否美觀，很大程度上取決于其排版。在頁面中出現(xiàn)大段的文字，通常采用分段進行規(guī)劃，對換行也有極其嚴格的劃分。
段落標記<p>
段落<p>標記用來起始一個段落，它是一個塊級元素。段落p標記會自動在其前后創(chuàng)建一些空白，而<br>換行符前后沒有留白，另外<div>也是段落標記。
基本語法：<p align="left|center|right">段落正文內(nèi)容</p>
案例：
<body> <h6 align="center">段落p標記對齊方式</h6> <hr color="blue"> <p align="left">網(wǎng)頁的外觀是否美觀，很大程度上取決于其排版。</p> <p align="center">網(wǎng)頁的外觀是否美觀，很大程度上取決于其排版。</p> <p align="right">網(wǎng)頁的外觀是否美觀，很大程度上取決于其排版。</p> </body>
換行標記<br>
基本語法：<br> 換行
文檔中，<br>元素屬于單個標記，表示插入換行符。
例如：<p>段落正文內(nèi)容<br>另起一行</p>
水平分割線標記<hr>
<hr>元素可以讓瀏覽器顯示一條細線以分隔兩個區(qū)域。
基本語法：<hr size=" " color=" " width=" " align=" ">
| 屬性 | 值 | 說明 |
|---|---|---|
| width | 像素px或百分比 | 設置水平線寬度 |
| size | 整數(shù)，單位px | 設置水平線高度 |
| color | rgb函數(shù)、十六進制數(shù)、顏色英文名稱 | 設置水平線顏色 |
| align | left、center、right | 設置水平線對齊方式 |
案例：
<body> <h4>換行與水平分割線標記的應用</h4> <p>大小為3、寬度為60%、居中、藍色</p> <hr size="3" width="60%" align="center" color="blue"> <p>大小為5、寬度為600px、居右、綠色</p> <hr size="5" width="600" align="right" color="green"> </body>
段落縮進標記<blockquote>
段落縮進(也稱為“塊引用”)，blockquote標記引用的內(nèi)容必須是塊級標記，瀏覽器在blockquote標記前后添加了換行，并增加了外邊距。
一對blockquote標記能夠向右縮進5個英文字符的位置。
基本語法：<blockquote>需要縮進的內(nèi)容</blockquote>
案例：
<body> <h6>段落縮進標記的應用</h6> <hr color="green"> <p>這行文字沒有縮進</p> <blockquote>這行文字有5個字符縮進</blockquote> <blockquote> <blockquote>這行文字有10個字符縮進</blockquote> </blockquote> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>教育信息化"十三五"規(guī)劃報告</title> </head> <body> <h3 align="center">2016-2021年教育信息化行業(yè)深度分析及“十三五”發(fā)展規(guī)劃指導報告</h3> <hr size="3" color="red" width="100%" /> <br> <pre> 細分報告: 教育信息化市場研究報告 教育信息化市場調(diào)查報告 教育信息化前景預測報告 教育信息化市場分析報告 教育信息化市場評估報告 教育信息化重點企業(yè)報告 教育信息化發(fā)展前景報告 教育信息化投資規(guī)劃報告 教育信息化深度研究報告 教育信息化投資前景報告 教育信息化項目調(diào)研報告 </pre> <hr size="1" color="blue" width="100%" /> <h4>報告導讀</h4> <p> 本報告從國際教育信息化發(fā)展、國內(nèi)教育信息化政策環(huán)境及發(fā)展、研發(fā)動態(tài)、進出口情況、 重點生產(chǎn)企業(yè)、存在的問題及對策等多方面多角度闡述了教育信息化市場的發(fā)展，并在此基礎上對教育信息化的發(fā)展前 景做出了科學的預測，最后對教育信息化投資潛力進行了分析。 </p> <h4>鄭重聲明</h4> <p> <blockquote> 本報告由中國報告大廳出版發(fā)行，報告著作權歸宇博智業(yè)所有。本報告是宇博智業(yè)的研究與統(tǒng)計成果，有償提供給 購買報告的客戶使用。未獲得宇博智業(yè)書面授權，任何網(wǎng)站或媒體不得轉載或引用，否則宇博智業(yè)有權依法追究其 法律責任。如需訂閱研究報告，請直接聯(lián)系本網(wǎng)站，以便獲得全程優(yōu)質(zhì)完善服務。 </blockquote> </p> <hr size="1" width="100%" color="#000fff" /> <p align="center"> Copyrignt©中國報告大廳 京ICP備11010647號-2京公網(wǎng)安備11010502024380 </p> </body> </html>
感謝各位的閱讀，以上就是“Web如何格式化文字與段落”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Web如何格式化文字與段落這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
