這次繼續學習《第四章 文本》的内容,包括div元素的作用、自閉合标簽、塊元素和行内元素的區别與聯系、網頁中特殊符号的輸入方法。
學無止境,樂在其中。關注我,一起進步!
1、div分區标簽
div是division的縮寫,分區的意思。如果把html文件比喻成一座小城,那麼div就是小區,p元素等就是樓房。用div标簽把p元素等分類,有兩個好處:一、提高代碼可讀性,二、便于用CSS控制元素外觀。div元素的使用示例如下:
2、自閉合标簽
html中的一般标簽都有開始和結束兩個部分(如<p> </p>),可以在其中插入其它标簽。自閉合标簽隻有一個部分,它的内部不能再插入其它标簽和文字。常見的自閉合标簽如下:
<meta/>定義網頁信息
<link/>引入外部CSS文件
<br/>換行标簽
<hr/>水平線标簽
<img/>圖片标簽
<input/>表單标簽
小發現:自閉合标簽中的斜線不寫也能正常顯示,如<br>也能正常換行。
3、塊元素(block)和行内元素(inline)
(1)塊元素在浏覽器顯示時獨占一行,其内部可以容納其它塊元素和行内元素。常見的塊元素有:
h1~h6标題元素
p段落元素
div分區元素
hr水平線
ol有序列表
ul無序列表
(2)行内元素在浏覽器顯示時可以與其它行内元素處于同一行,其内部可以容納其它行内元素,不能容納塊元素。常見的行内元素有:
strong粗體元素
em斜體元素
sup上标元素
a超鍊接元素
(3)塊元素與行内元素的本質區别是:塊元素定義的是顯示的實體(文字、圖片等),行内元素定義的是實體的外觀和性質(文字的粗細、位置、下劃線等)。塊元素和行内元素的代碼示例和顯示效果如下:
4、網頁中的特殊符号怎麼輸入
網頁中的特殊符号有對應的代碼表示法,開頭都是“&”,結尾都是“;”注意這是英語格式下的分号。
(1)易輸入的符号
(2)難輸入的符号,代碼和顯示效果如下圖:
5、編程作業——實現本章開頭的網頁效果
代碼如下:
<!DOCTYPE html>
<html>
<head>
<!--定義頁面編碼方式-->
<meta charset="utf-8"/>
<title>第四章編程作業</title>
</head>
<body>
<div>
<h1>各科小常識</h1>
</div>
<div>
<h3>語文</h3>
<p> 三國演義是中國四大古典名著之一,元末明初小說家羅貫中所著,是中國第一部章回體曆史演義小說,描寫了從東漢末年到西晉初年近100年的曆史風雲。</p>
</div>
<hr>
<div>
<h3>數學</h3>
<p> 勾股定理,對于直角三角形有:a<sup>2</sup> b<sup>2</sup>=c<sup>2</sup>。</p>
</div>
<hr>
<div>
<h3>英語</h3>
<p> No pain, no gain.</p>
</div>
<hr>
<div>
<h3>化學</h3>
<p> H<sub>2</sub>SO<sub>4</sub>是一種重要的化工原料,可用于制作化肥、洗滌劑等。</p>
</div>
<hr>
<div>
<h3>經濟</h3>
<p> 版權符号©<br> 注冊商标®</p>
</div>
</body>
</html>
顯示效果如下:
這一章要記憶的内容比較多,需要多花不少時間去熟練。另外增加了一些概念理解,例如div分區标簽的作用,自閉合标簽的概念,塊元素與行内元素的區别和聯系,而且強化了HTML語義化的實踐。對這些内容的理解都比标簽本身重要。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!