歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 《HTML5與CSS3基礎教程》學習筆記

《HTML5與CSS3基礎教程》學習筆記

日期:2017/3/1 9:17:03   编辑:Linux編程

HTML5與CSS3基礎教程(第8版)中文高清版 PDF 下載

http://www.linuxidc.com/Linux/2015-12/125734.htm

第一章

1、 郵箱地址的URL地址包括:mailto:+郵箱地址

2、 ../表示向上走一級,開頭直接使用/表示根目錄

第三章

1、 <header>:

role = “banner”【 適用於頁面級的頁眉】

2、 <nav>標記導航:

role = “navigation”不是必須的,提高可訪問性

3、 <main>主要區域,一個頁面只有一個,不能將main放在article、aside、footer、header、nav元素中。

role=”main”

4、 <article>創建文章,可以用於獨立的內容項,可以嵌套,比如:一篇博客條目/一則用戶提交的評論/一個交互的小部件/案例研究

5、 <section>定義區塊,相似主題的一組內容,通常包含一個標題,相對於article組織、結構性更強

6、 < aside >指定附注欄,放在main之後

role=”complementary”

7、 <footer>代表嵌套它的最近的元 素的頁腳。只有當它最近的祖先是 body 時,它才是整個頁面的頁腳

role="contentinfo"【只有頁面級頁腳有】

第四章

1、 各元素使用:

1) em 元素用於標識強調的文本

2) cite 元素用於標識對藝術作品、電影、圖書等內容的引用

3) small 表示細則一類的旁注(side comment),“通常包括免責聲明、注意事項、法律限制、版權信息等。有時我們還可以用它來表示署名,或者滿足許可要求。

4) strong 元素表示內容的重要性

5) b用於如文檔摘要裡的關鍵詞、評論中的產品名、基於文本的交互式軟件中指示操作的文字、文章導語

6) i 元素表示一塊不同於其他文字的文字,具有不同的語態或語氣,或其他不同於常規之處,用於如分類名稱、技術術語、外語裡的慣用語、翻譯的散文、西方文字中的船舶名稱

2、 創建圖:

1) <figure>添加圖像、 視頻、數據表格等內容

2) < figcaption >元素並不是必需的,但如果包含它,它就必須是 figure 元素內嵌的第一個或最後一個元素,並且只允許有一個figcaption。

3、 引述文本

1) blockquote:浏覽器默認對 blockquote 文本進行縮進,cite 屬性的值則不會顯示出來

2) 可以對 blockquote 和 q 使用可選的cite 屬性,cite=url(引用的地址)

3) q 元素引用的內容不能跨越不同的段落,在這種情況下應使用 blockquote

4、 指定時間

1) <time>

2) datetime="2014-07-16"等,atetime,文本內容就可以按你希望的任何形式表示日期、 時間或時間段了

5、 解釋縮寫詞

1) <abbr>

2) 屬性:title="縮寫詞的全稱"

6、 定義術語

1) <dfn>

7、 創建上標和下標

1) 輸入 <sub> 創建下標,或輸入 <sup>創建上標

2)

    /*
* 在所有浏覽器中防止sub和sup影響line-height
* gist.github.com/413930
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}

8、 添加作者聯系信息

1) <address>

9、 標注編輯和不再准確的文本(既可以包圍短語內容(HTML5 之前稱“ 行內元素”)又可以包圍塊級內容的元素,)

1) < ins >標記新插入文本

2) < del >標記已刪除文本

3) <s>標記不再准確或不再相關的文本

10、標記代碼

1) <code>

2) < kbd >標記用戶輸入指示

3) < samp >元素用於指示程序或系統的示例輸出

4) < var >元素表示變量或占位符的值

11、預格式化的文本

1) <pre>

2) 對 pre 的內容打開自動換行(IE<8不適用)

pre {
white-space: pre-wrap;
}

12、突出顯示文本

1) <mark>即加上黃色背景

13、其他元素

1) 浏覽器默認為 < u >元素添加下劃線

2) <wbr>:可以在必要的時候進行換行

3) 旁注標記:ruby、 rp 和 rt 元素

4) bdi(於內容的方向未知的情況。不必包含 dir 屬性,因為默認已設為自動判斷)

5) bdo(必須包含 dir 屬性並將屬性值設為 ltr(由左至右)或 rtl(由右至左),指定你希望呈現的方向)

6) meter:表示分數的值或已知范圍的測量結果

7) progress:它指示某項任務的完成進度。可以用它表示一個進度條

(1) max:任務的總工作量, 其值必須大於 0

(2) value :任務已完成的量

(3) form:添加 form 屬性並將其值設為該 form 的 id

第六章

1、 創建錨

在需要跳轉到元素添加id="anchor-name"

2、 創建鏈接到特定錨的鏈接

<a href="#anchor-name">

3、 錨位於另一個文檔,就使用 <ahref ="page.html#anchor-name"> 引 用 該區域。(在 URL 和 # 之間沒有空格。)

4、 錨位於另一台服務器上的頁面, 則需輸入

<a href="http://www.site.com/directory/age.html#anchor-name">(沒有空格)

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2016-04/130068p2.htm

Copyright © Linux教程網 All Rights Reserved