在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>
大家注意到沒有,每個標題雖然很短都會自己獨占一整行,並自動在它的上面和下面各空出一行,
這是因為<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>
從上面的例子看,顯然,<p>元素也是塊元素,塊橫跨整個網頁,上下各空出一行,用盒子模型表示如下:
在HTML中引用元素有兩種,分別是<q>和<blockquote> 元素。
<q>元素一般用在單句的引用上,看出<q>元素里面的內容要加上雙引號。
請看下面的一個例子,可以看出,兩個<q>元素之間並沒有換行,而是在同一行里呈現。
和塊元素<p>不同,<q>是一個內聯元素並不獨占網頁的寬度,它上下也不留空行。
<blockquote>元素一般用在整段話的引用上,<blockquote>元素里面的內容不加雙引號。
<blockquote>元素是塊元素,即要獨占網頁寬度,且上下空一行,另外,<blockquote>元素的內容默認居中。