前段基础 HTML 第三章文字与段落标记----假期学习第二天
第3章 文字與段落標記
如何編排文字,控制文字顯示方式,讓文字看上去整齊美觀
3.1 標題字
????? ? 六級標題 <h1></h1>? ?<h2></h2>? ?<h3></h3>??<h4></h4>??<h5></h5>??<h6></h6>? ?一次遞減
3.1.1 標題字標簽 h
? ? <h1>到<h6>? ? h是headline簡稱
語法:
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
eg:
<html> <head><meta charset="UTF-8"><title>margin</title></head> <body><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6> </body> </html>運行結果:
3.1.2 標題字其屬性align
默認情況下網頁文字左對齊 ,想要其他對其方式 ,用align屬性
語法: <h1 align=對齊方式>? ? ??
說明: align 是<hn>標簽的屬性
eg:
<html> <head><meta charset="UTF-8"><title>margin</title></head> <body><h1>一級標題</h1><h2 align="left">二級標題左對齊</h2><h3 align="right">三級標題右對齊</h3><h4 align="center">四級標題居中對齊</h4> </body> </html>運行結果:
3.2 文本基本標記
? 強大的<font>標簽用來控制字體,字號，顏色等屬性 是html最基本標簽之一,掌握<font>標簽的使用是控制網頁文本的基礎
3.2.1 字體屬性face
????? ? 可以通過字體的face屬性設置不同的字體,設置的字體效果必須在瀏覽器中安裝相應的字體后才可以正確的瀏覽，否則有些特殊的字體會被瀏覽器的默認字體替代．因此在網頁中盡量減少使用較多特殊字體，以免在用戶瀏覽時無法看到正確效果．
語法： <font face="字體樣式">...</font>
說明: 字體樣式為字體名稱,若瀏覽器能在當前系統中找到該字體,則使用該字體顯示.
eg:
<html> <head><meta charset="UTF-8"><title>margin</title></head> <body><p><font face="宋體">我是宋體字</font></p><p><font face="華文行楷">我是華文行楷字</font></p><p><font face="隸書">我是隸書體字</font></p> </body> </html>運行結果:
ubuntu系統字體太少了,只能顯示成這樣,不過沒關系,因為在制作網頁時,網頁中字體一般以默認的宋體為主.
3.2.2 字號屬性size
????? ? size屬性設置字體大小
語法: <font size="文字字號">...</font>
說明: size屬性設置字體大小,值為7到1,依次減小.大于處理為7,小于1處理為1
eg:
<html> <head><meta charset="UTF-8"><title>margin</title></head> <body><p><font size="100">我是100號字</font></p><p><font size="7">我是7號字</font></p><p><font size="6">我是6號字</font></p><p><font size="5">我是5號字</font></p><p><font size="4">我是4號字</font></p><p><font size="3">我是3號字</font></p><p><font size="2">我是2號字</font></p><p><font size="1">我是1號字</font></p><p><font size="0">我是0號字</font></p><p><font size="-1">我是-1號字</font></p><p><font size="-2">我是-2號字</font></p><p><font size="-3">我是-3號字</font></p><p><font size="-4">我是-4號字</font></p> </body> </html>運行結果:
3.2.3 顏色屬性color
語法: <font color="顏色">...</font>
說明:font的各屬性之間可以混合使用,沒有先后之分,共同處理字體
eg:
<html> <head><meta charset="UTF-8"><title>margin</title></head> <body><p><font face="新宋體" size="7" color="red">仙劍奇俠傳七</font></p><p><font face="宋體" size="3" color="blue">仙劍奇俠傳三</font></p><p><font face="Garuda" size="1" color="green">仙劍奇俠傳一</font></p> </body> </html>運行結果:
3.3 文本格式化標記
????? ? 文本格式化標記設置文字以特殊方式顯示,如粗體,斜體,文字上下標
3.3.1 粗體標記b,strong
? <b>文字</b>和<strong>文字</strong>內的文字都是粗體,若缺少尾部,則從<b>或<strong>開始的所有文字都是粗體
語法: <b>加粗的文字</b>
????????????<strong>加粗的文字</strong>
說明: 粗體用<b>和<strong>標簽均可,都是行內元素,可以插入到一段文本的內部eg:
<html> <head><meta charset="UTF-8"><title>margin</title></head> <body><p><b>對文字進行加粗</b></p><p><strong>文字加粗</strong></p> </body> </html>運行結果:
3.3.2 斜體標記 i,em,cite
語法: <i>斜體文字</i>
???????????<em>斜體文字</em>
????? ? ???<cite>斜體文字</cite>
說明:三個都是設置斜體的元素
eg:
<html> <head><meta charset="UTF-8"><title>斜體</title></head> <body><p><i>斜體字i</i><p><em>斜體字em</em></p><p><cite>斜體字cite</cite></p> </body> </html>運行結果:
3.3.3 上標標記sup
????? ? 上標子體<sup>英文原名為superscript,<sup>是行內元素,可以嵌套.因此如果在<sup>里再用<sup>則會變成"上標的上標"
語法: <sup>上標內容</sup>
eg:
<html> <head><meta charset="UTF-8"><title>上標</title></head> <body><center><p>a<sup>2</sup>+b<sup>2</sup>=(a+b)<sup>2</sup>-2ab</p><p>三個9組成最大的數:9<sup>9<sup>9</sup></sup></p></center> </body> </html>運行結果:
3.3.4 下標標記 sub
????? ? 下標標記原名subscript,下標標記<sub>也可嵌套,成為下標的下標
語法: <sub>下標內容</sub>
eg:
<html> <head><meta charset="UTF-8"><title>上標</title></head> <body><center><p>H<sub>2</sub>SO<sub>4</sub> 硫酸化學式</p></center> </body> </html>運行結果:
3.3.5 大字號標記big
<big>所包含文字會在原來字號上增加一級.多個<big>元素作用于同一個文本,字號逐級放大.<big>為行內元素,可以成對出現在一段文字的任何位置
語法: <big>大字號內容</big>
eg:
<html> <head><meta charset="UTF-8"><title>字號增加一級</title></head> <body><center><p>水之潤下，無孔不入<br><big>火之炎上，無物不焚<br>雷之肅斂，無堅不摧</big><br><big><big>風之肆拂，無阻不透</big></big><br>土之養化，無物不融！<br></p></center> </body> </html>運行結果:
3.3.6 小字號標記 small
? <small>標簽包含的文字,比普通文字字號小一級,嵌套使用,逐級減小
語法: <small>字號減小一級</small>
eg:
<html> <head><meta charset="UTF-8"><title>字號增加一級</title></head> <body><center><font size="4">水之潤下，無孔不入<br><small>火之炎上，無物不焚<br>雷之肅斂，無堅不摧</small><br><small><small>風之肆拂，無阻不透</small></small><br>土之養化，無物不融！<br></font></center> </body> </html>運行結果:
3.3.7 下劃線標記 u
語法: <u>要加下劃線的文字</u>
說明:不可嵌套,嵌套沒有效果
eg:
<html> <head><meta charset="UTF-8"><title>字號增加一級</title></head> <body><center>水之潤下，無孔不入<br><u>火之炎上，無物不焚<br>雷之肅斂，無堅不摧</u><br><u><u>風之肆拂，無阻不透</u></u><br>土之養化，無物不融！<br></center> </body> </html>運行結果:
3.4 段落標記
文字有條理地顯示出來,離不開段落標記的使用
3.4.1 段落標記p
<p>是html文檔最常見的標記,<p>用來起始一個段落
語法: <p>段落文字</p>
說明:段落標記可以沒有結束標記</p>,而一個新的段落標記的開始,也意味著上一個段落標記的結束
eg:
<html> <head><meta charset="UTF-8"><title>字號增加一級</title></head> <body><p>萬物生而具備五靈</p><p align="right">就算是幼兒</p><p align="center">也有他們自己的方法感知外界</p><p>只是凡人懵憧，成年后反而自閉視聽，變得無感無知</p><hr>渺渺世間，不獨有人<p align="right">人要活下去，妖也是一樣<p align="center">為何彼此之間不能多一些理解呢？<p>至少我并不會認為妖都是猙獰可恨的，萬物皆是生靈，又哪里有天注定的貴賤善惡之分？<p> </body> </html>運行結果:
3.4.2 換行標記br
<br>不另起一段而強制換行
語法: <br>
以上演示好多了,不演示了.
3.4.3 不換行標記 nobr
????? ? 在網頁中如果某一行的文本過長,瀏覽器會自動對這段文字進行換行處理.可以使用nobr標記來禁止自動換行(底部會出現滾動條)
語法: <nobr>不換行文字</nobr>
eg:
<html> <head><meta charset="UTF-8"><title>不換行標記</title></head> <body><p>人既有七情六欲，彼此相處，發生爭執乃是尋常，不過只要今生今世還能見面，就一定有挽回的余地……最怕黯然分別，從此天各一方，直至老死，就算想求得對方的原諒，也永遠沒有機會了……（玄霄）什么人啊妖啊，有必要分那么清楚嗎？你看看這鬼界，一旦陽壽盡了，都是鬼魂，不分人與妖，說不定你今世是人，來世便要做妖，那你一直堅持的東西豈不可笑？！</p><hr><p><nobr>人既有七情六欲，彼此相處，發生爭執乃是尋常，不過只要今生今世還能見面，就一定有挽回的余地……最怕黯然分別，從此天各一方，直至老死，就算想求得對方的原諒，也永遠沒有機會了……（玄霄）什么人啊妖啊，有必要分那么清楚嗎？你看看這鬼界，一旦陽壽盡了，都是鬼魂，不分人與妖，說不定你今世是人，來世便要做妖，那你一直堅持的東西豈不可笑？！</nobr></p> </body> </html>運行結果:
3.5 水平線
水平線將段落與段落隔開,可以通過插入圖片實現,也可以更簡單的使用hr標記
3.5.1 插入水平線hr
語法: <hr>
eg:
<html> <head><meta charset="UTF-8"><title>不換行標記</title></head> <body><center><font color="red">仙劍奇俠傳四語錄</font></center><hr> <!--水平線--><p>人既有七情六欲，彼此相處，發生爭執乃是尋常，不過只要今生今世還能見面，就一定有挽回的余地……最怕黯然分別，從此天各一方，直至老死，就算想求得對方的原諒，也永遠沒有機會了……（玄霄）什么人啊妖啊，有必要分那么清楚嗎？你看看這鬼界，一旦陽壽盡了，都是鬼魂，不分人與妖，說不定你今世是人，來世便要做妖，那你一直堅持的東西豈不可笑？！</p> </body> </html>運行結果:
3.5.2 水平線寬度 width
語法: <hr width="寬度">
說明:寬度可以是確定的值,也可以是窗口百分比
?eg:
<html> <head><meta charset="UTF-8"><title>水平線寬度</title></head> <body><center><font color="red">仙劍奇俠傳四語錄</font></center><hr width="1000"> <!--水平線--><p>人既有七情六欲，彼此相處，發生爭執乃是尋常，不過只要今生今世還能見面，就一定有挽回的余地……最怕黯然分別，從此天各一方，直至老死，就算想求得對方的原諒，也永遠沒有機會了……（玄霄）什么人啊妖啊，有必要分那么清楚嗎？你看看這鬼界，一旦陽壽盡了，都是鬼魂，不分人與妖，說不定你今世是人，來世便要做妖，那你一直堅持的東西豈不可笑？！</p> </body> </html>運行結果:
3.5.3 水平線高度 size
語法: <hr size="高度">
說明:水平線高度屬性為size ,且高度值只能是像素值
eg:
<html> <head><meta charset="UTF-8"><title>水平線寬度</title></head> <body><center><font color="red">仙劍奇俠傳四語錄</font></center><hr size="50"> <!--水平線--><p>人既有七情六欲，彼此相處，發生爭執乃是尋常，不過只要今生今世還能見面，就一定有挽回的余地……最怕黯然分別，從此天各一方，直至老死，就算想求得對方的原諒，也永遠沒有機會了……（玄霄）什么人啊妖啊，有必要分那么清楚嗎？你看看這鬼界，一旦陽壽盡了，都是鬼魂，不分人與妖，說不定你今世是人，來世便要做妖，那你一直堅持的東西豈不可笑？！</p> </body> </html>運行結果:
3.5.4 水平線去掉陰影 noshade
語法: <hr noshade>
說明:
? ? noshade是bool值的屬性,它沒有屬性值,<hr>內寫了該屬性,瀏覽器不顯示立體形狀的水平線,反之無需設置該屬性.
eg:
<html> <head><meta charset="UTF-8"><title>水平線陰影</title></head> <body><center><font color="red">仙劍奇俠傳四語錄</font></center><hr size="50" width="50%" noshade> <!--水平線--><p>人既有七情六欲，彼此相處，發生爭執乃是尋常，不過只要今生今世還能見面，就一定有挽回的余地……最怕黯然分別，從此天各一方，直至老死，就算想求得對方的原諒，也永遠沒有機會了……（玄霄）什么人啊妖啊，有必要分那么清楚嗎？你看看這鬼界，一旦陽壽盡了，都是鬼魂，不分人與妖，說不定你今世是人，來世便要做妖，那你一直堅持的東西豈不可笑？！</p> </body> </html>運行結果:
3.5.5 水平線顏色color
語法: <hr color="顏色">
說明:顏色值為十六進制數或以定義顏色名
eg:
<html> <head><meta charset="UTF-8"><title>水平線顏色</title></head> <body><center><font color="red">仙劍奇俠傳四語錄</font></center><hr size="50" width="50%" noshade color="red"> <!--水平線--><p>人既有七情六欲，彼此相處，發生爭執乃是尋常，不過只要今生今世還能見面，就一定有挽回的余地……最怕黯然分別，從此天各一方，直至老死，就算想求得對方的原諒，也永遠沒有機會了……（玄霄）什么人啊妖啊，有必要分那么清楚嗎？你看看這鬼界，一旦陽壽盡了，都是鬼魂，不分人與妖，說不定你今世是人，來世便要做妖，那你一直堅持的東西豈不可笑？！</p> </body> </html>運行結果:
3.5.6? 水平線排列align
語法: <hr align="對齊方式">
說明:對其方式三種 center,left,right, 默認效果是center
eg:
<html> <head><meta charset="UTF-8"><title>水平線顏色</title></head> <body>默認對齊方式<hr width="50%">居中對齊<hr align="center" width="50%">右對齊<hr align="right" width="50%">左對齊<hr align="left" width="50%"> </body> </html>運行結果:
小結:<hr align="right" width="200" size="20" color="red">
3.6 其他標記
? ? 空格和特殊字符($%&#等)的輸入
3.6.1 插入空格
語法:  
eg:
<html> <head><meta charset="UTF-8"><title>空格的輸出</title></head> <body><p> 窗前明月光, 疑是地上霜.</p> <!--直接打空格沒有用--><p> 舉頭望明月, 低頭思故鄉.</p><p>??????窗前明月光, 疑是地上霜.</p><p>??????舉頭望明月,低頭思故鄉.</p> </body> </html>運行結果:
3.6.2 插入特殊符號
特殊符號&開始? ;結束? 中間內容不同,代表的符號不同
特殊符號大全
或者參考這篇博客:https://blog.csdn.net/dayu9216/article/details/75037604
| ? | ||||||||||||||||||||||||||||||||||||||||||||||||
| ? | ? |
最常用的字符實體
| ? | 空格 | |   |
| < | 小于號 | < | < |
| > | 大于號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號? | ' (IE不支持) | ' |
其他一些常用的字符實體
| ￠ | 分 | ¢ | ¢ |
| ￡ | 鎊 | £ | £ |
| ￥ | 日圓 | ¥ | ¥ |
| § | 節 | § | § |
| ? | 版權 | © | © |
| ? | 注冊商標 | ® | ® |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |
eg:
<html> <head><meta charset="UTF-8"><title>空格的輸出</title></head> <body><center>分:￠ <br>鎊:￡ <br>元:￥ <br>節:§ <br>版權:© <br>商標:® <br>乘號:× <br>除號:÷ <br><hr>空格:? <br>小于:< <br>大于:> <br>and:& <br>雙引號:" <br>單引號:'<!--IE不支持--> </center> </body> </html>運行結果:
本章小結:
標題字:?
?????<h1 align="left">一級標題左對齊</h1>
文本基本標記:? ?
?????<font face="宋體" size="7" color="red">文字</font>
文本格式化標記:
????文字加粗:? ? <b>粗體字</b>????????? ? <strong>粗體字</strong>
????斜體標記:<i>斜體字</i>? ? ? ? ? <em>斜體字</em>?????????????<cite>斜體字</cite>
? ? 上標:? <sup>2</sup>
? ? 下標:? <sub>2</sub>
? ? 字號加一級:<big>大</big>? ? ? (可嵌套)
????字號減一級: <small>小</small>
? ? 下劃線:? <u>下劃線文字</u>? ? ?(嵌套無效果)
段落標記:
? ? 段落標記:<p align="left">一段文字 左對齊</p>
? ? 換行標記:<br>
? ? 不換行標記:<nobr>? ? (瀏覽器下方可能出現滾動條)
? ?水平線標記:<hr width="50%" size="高度" noshade? color="red" align="right">? ? ? ?????(寫了noshade表示顏色填充整個水平線)(默認居中對其)
其他特殊符號:
? ? 空格
? ? ®? 商標 等
總結
以上是生活随笔為你收集整理的前段基础 HTML 第三章文字与段落标记----假期学习第二天的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 让我摘下星星送给你_想摘下星星给你，就摘
- 下一篇： JavaScript 原型 原型链