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

来源:http://www.cnblogs.com/qzccl/archive/2016/04/07/5365945.html
-Advertisement-
Play Games

第一章 1、 郵箱地址的URL地址包括:mailto:+郵箱地址 2、 ../表示向上走一級,開頭直接使用/表示根目錄 第三章 1、 <header>: role = “banner”【 適用於頁面級的頁眉】 2、 <nav>標記導航: role = “navigation”不是必須的,提高可訪問性 ...


第一章

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">(沒有空格)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一些常用的表單驗證的代碼 註冊驗證: <script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script> //驗證表單 function vailForm(){ var form = ...
  • 隨著瀏覽器的升級,CSS3已經可以投入實際應用了。 <!-- /div --><!-- div id="more" class="asset-more" --> 但是,不同的瀏覽器有不同的CSS3實現,相容性是一個大問題。上周的YDN介紹了CSS3 Please網站,該網站總結了一些常用功能的寫法。 ...
  • 時間到了2015年6月18日,ES6正式發佈了,到了ES6,前面的各種模擬類寫法都可以丟掉了,它帶來了關鍵字 class,extends,super。 ES6的寫類方式 以上定義了一個類,constructor 是構造器,這點和 Java 不同,Java的構造器名和類名相同。 和 Java 多象啊, ...
  • 大家可以通過谷歌瀏覽器以網易網站做為範例,通過網站頂部的導航菜單欄來查看relative和aboulute的區別 CSS的很多其他屬性大多容易理解,比如字體,文本,背景等。有些CSS書籍也會對 這些簡單的屬性進行大張旗鼓的介紹,而偏偏忽略了對一些難纏的屬性講解,有避重就輕的嫌疑。CSS中主要難以理解 ...
  • 在jQuery1.9版本中,已經去掉了live和delegate方法,從而將on方法的地位進一步提升。 jQuery如此推崇on方法,必有其牛逼的地方。那麼我們就有必要瞭解這個on,併在代碼中利用它,從而優化代碼和提高性能。 註:在jQuery1.7後,on方法就可以全面綁定任何事件了。 .on( ...
  • 標題取自《css禪意花園》一書,還記得當年讀此書時的情景,真的是內容和書名一樣的優秀,就以此標題作為自己在該文的一種追求吧,儘管我的水平和見解都和Dave Shea相去甚遠。該文算是對前兩年寫頁面工作的總結吧,現在比較少關註css了,可能觀點有狹隘的地方,同時文中也有一定的思考和理解,也許並不一定特 ...
  • 今天開始記錄每天所學的重點,為了加深印象也為了今後的複習。 今天學習的重點是引用類型中Array類型,Array類型中的棧方法,隊列方法,重排序方法,操作方法,位置方法,迭代方法,歸併方法。這幾個方法我感覺尤為重要,因此記錄下來,以便忘記了可以回顧。 (一)棧方法 首先要知道的是棧是一種後進先出的數 ...
  • 一、事件編程 1、基本事件(以方法形式存在的) 基本語法: 原生Javascript代碼中的事件綁定方式: DOM對象.事件 = 事件的處理程式 jQuery代碼中的事件綁定方式: jQuery對象.事件(事件處理程式) 2、常用的事件列表 blur(fn) :當失去焦點時觸發 change(fn)... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...