HTML中的文本元素(標題和段落和引用)


在HTML中有很多對純文本進行排版的元素統稱為文本元素,下面我們來學習一下。

第一個要學習的是<h1><h6>這六個元素,在HTML中這些元素用來設定文章的標題,

<h1>代表一級標題,<h2>代表二級標題,等等,請你先不要看答案,自己用html語言在瀏覽器里顯示如下內容

 

 

答案如下:

 

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <h1>Heading 1</h1>
 6 <h2>Heading 2</h2>
 7 <h3>Heading 3</h3>
 8 <h4>Heading 4</h4>
 9 <h5>Heading 5</h5>
10 <h6>Heading 6</h6>
11 
12 </body>
13 
14 
15 </html>
View Code

 

大家注意到沒有,每個標題雖然很短都會自己獨占一整行,並自動在它的上面和下面各空出一行,

這是因為<h1>到<h6>都是HTML中所謂的塊元素。塊元素的特點是:在橫向上,它的內容要占據整個網頁的寬度,不夠用空白填充。

在縱向上,它在上下要各留出一行空白。用盒子模型表示如下。

 在html中設定了文章標題后,那段落用什么元素呢?在英語里段落被稱為paragraph,大家一定可以猜出段落元素是<p>了吧

 

 

 請大家編程實現上面的效果。

答案如下:

1 <!DOCTYPE html>
2 <html>
3 <body>
4 <p>This is a paragraph.</p>
5 <p>This is a paragraph.</p>
6 <p>This is a paragraph.</p>
7 </body>
8 </html>
View Code

 從上面的例子看,顯然,<p>元素也是塊元素,塊橫跨整個網頁,上下各空出一行,用盒子模型表示如下:

在HTML中引用元素有兩種,分別是<q>和<blockquote> 元素。

<q>元素一般用在單句的引用上,看出<q>元素里面的內容要加上雙引號。

 

 

 請看下面的一個例子,可以看出,兩個<q>元素之間並沒有換行,而是在同一行里呈現。

和塊元素<p>不同,<q>是一個內聯元素並不獨占網頁的寬度,它上下也不留空行。

 

 

 <blockquote>元素一般用在整段話的引用上,<blockquote>元素里面的內容不加雙引號。

<blockquote>元素是塊元素,即要獨占網頁寬度,且上下空一行,另外,<blockquote>元素的內容默認居中。

 

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM