官术网_书友最值得收藏!

  • HTML5+CSS3王者歸來
  • 洪錦魁
  • 557字
  • 2019-12-09 14:46:07

3-22 上標<sup>和下標<sub>元素

<sup>元素是上標元素,最常用作數學的次方,例如,X3代表X的三次方。

<sub>元素是下標元素,最常用作化學符號,例如,水的化學符號H2O。

程序實例ch3_25.html:sup和sub元素的應用。

執行結果

3-23 輸出特殊字符

在設計HTML文件時難免會遇上需要輸出空格符或特殊字符的情況,下表是常見的特殊字符及其處理方式。

常見特殊字符及HTML處理方式

程序實例ch3_26.html:測試實體名稱和以編碼方式輸出空格的方法。

執行結果

上述程序第9行“明志科大”與“視覺傳達系”字符串間沒有空格,第10行筆者測試空一格,第11行筆者測試空2格,讀者可以自行比較它們之間的差異。

程序實例ch3_27.html:常見特殊符號輸出的應用,所有特殊符號均使用實體名稱和編碼來輸出。

執行結果

3-24 HTML的樹狀結構

相信讀者學習到此已經具備了一定的HTML程序設計基礎了,在結束本節前,筆者想總結一下HTML文件的結構知識。其實HTML文件就是一個樹狀的文件結構,整個文件的根部就是<html>元素,在這個根部底下分別是<head>元素和<body>元素,而這兩個元素底下又有其他元素。我們通常使用下列名詞定義元素之間的關系。

父元素:假設A元素包含B元素,則稱A元素是B元素的父元素。例如,我們可以說<html>元素是<head>和<body>元素的父元素。

子元素:假設A元素包含B元素,則稱B元素是A元素的子元素。例如,我們可以說<head>和<body>元素是<html>元素的子元素。

在繼續解釋之前,筆者想舉一個更詳細的實例來說明HTML的樹狀結構。

程序實例ch3_28.html:HTML樹狀結構的說明。

執行結果

這個程序的重點并不是上述執行結果,而是意圖呈現整個樹狀結構。如果我們將上述程序依樹狀結構分析,可以繪制出下圖。

由上圖可知父、子元素又衍生出下列關系:

子孫元素:若是A元素是B元素的父元素,則所有B元素的更下層元素皆是A元素的子孫元素。以上圖為例,<meta>、<title>、<header>、<section>、<footer>、<h1>、<p>和<small>皆是<html>的子孫元素。

祖先元素:若是A元素是B元素的父元素,則所有A元素的更上層元素皆是B元素的祖先元素。以上圖為例,<body>元素是<h1>、<h2>、<p>和<small>的祖先元素。

手足元素:若是A元素是B元素和C元素的父元素,則B元素和C元素是手足元素。<header>、<section>和<footer>彼此之間是手足元素。

上述關系是學習HTML布局區塊觀念和各元素間衍生繼承關系的重要知識。

主站蜘蛛池模板: 蓝山县| 呼图壁县| 吴川市| 顺昌县| 禄丰县| 肥乡县| 双鸭山市| 池州市| 桦川县| 木兰县| 绩溪县| 辽宁省| 霞浦县| 图片| 融水| 万州区| 大兴区| 托里县| 波密县| 高陵县| 禹州市| 东乡县| 任丘市| 射洪县| 荥阳市| 蒙城县| 中超| 马关县| 景德镇市| 普洱| 平南县| 商丘市| 丰宁| 怀集县| 西盟| 象山县| 高要市| 安西县| 延吉市| 墨竹工卡县| 广东省|