技術標籤：【HTML+CSS】學習筆記

列表

1. 無序列表

<ul>
	<li>選項1</li>
	...
</ul>

2. 有序列表

<ol>
	<li>選項1</li>
	...
</ol>

3. 定義列表

<dl>
	<dt>選項1</dt>
	<dd>選項1解釋1</dd>
	<dd>選項1解釋2</dd>
	......
</dl>

結構元素

• header 歸納具有引導和導航作用的結構元素

<header>
 

    <h1>網頁主題</h1>
    ...
</header>

• nav 歸納導航性質的連結元素

<nav>
    <ul>
        <li> <a href="#">首頁</a> </li>
        <li> <a href="#">公司概況</a> </li>
        <li> <a href="#">聯絡我們</a> </
 
li>
    </ul>
</nav>

• article元素代表文件﹑頁面或者應用程式中與上下文不相關的獨立部分，該元素經常被用於定義一篇日誌﹑一條新聞或使用者評論等。
• aside元素用來定義當前頁面或者文章的附屬資訊部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等其他類似的有別於主要內容的部分。

aside元素的用法主要分為兩種:

1. 被包含在article元素內作為主要內容的附屬資訊。
2. 在article元素之外使用，作為頁面或站點全域性的附屬資訊部分。

• section元素用於對網站或應用程式中頁面上的內容進行分塊，一個section元素通常由內容和標題組成。

1. 不要將section元素用作設定樣式的頁面容器，那是div的特性。
2. 如果article 元素、aside 元素或nav元素更符合使用條件，那麼不要使用section元素。
3. 沒有標題的內容區塊不要使用section元素定義。

• footer元素用於定義一個頁面或者區域的底部，它可以包含所有通常放在頁面底部的內容。
  

分組元素

1. figure元素的內容應該與主內容相關，但如果被刪除，也不會對文件流產生影響。figcaption 元素用於為figure元素組新增標題，一 個figure元素內最多允許使用一個figcaption元素，該元素應該放在figure元素的第一個或者最後一個子元素的位置。
2. hgroup元素用於將多個標題(主標題和副標題或者子標題)組成一個標題組，通常它與h1~h6元素組合使用。通常，將hgroup元素放在header元素中。

1. 如果只有一個標題元素不建議使用hgroup元素。
2. 當出現一個或者一個以上的標題與元素時推薦使用hgroup元素作為標題元素。
3. 當一個標題包含副標題、section 或者article元素時，建議將hgroup元素和標題相關元素存放到header元素容器中。
4. 為了更好的說明各群組的功能，hgroup 元素常常與
   figcaption結合使用。

頁面互動元素

1. details元素和summary元素
   details元素用於描述文件或文件某個部分的細節。summary元素經常與details元素配合使用，作為details元素的第一個子元素,用於為details定義標題。標題是可見的，當用戶點選標題時，會顯示或隱藏details中的其他內容。
2. progress元素
   用於定義一個正在完成的進度條，這個進度可以是不確定的，只是表示進度正在進行，但是不清楚還有多少工作量沒有完成。

progress元素常用屬性值：
value：已經完成的工作量
max：總共有多少工作量

3. meter元素
   用於指定範圍內的數值。

常用屬性：

1. high 定義度量的值位於哪個點被界定為高的值
2. low 定義度量的值位於哪個點被界定為低的值
3. max 定義最大值，預設值是1
4. min 定義最小值，預設值是0
5. optimun 定義什麼樣的度量值是最佳的值。如果該值高於high 屬性，則意味著值越高越好。如果該值低於low屬性的值，則意味著值越低越好
6. value 定義度量的值

文字層次語義元素

1. time元素
   time元素用於定義時間或日期，可以代表24小時中的某一時間。time 元素不會在瀏覽器中呈現任何特殊效果，但是該元素以機器可讀的方式對日期和時間進行編碼。這樣，使用者能夠將生日提醒或其他事件新增到日程表中，搜尋引擎也能夠生成更智慧的搜尋結果。

常用屬性值：

1. datetime：用於定義相應的時間或日期。
2. pubdate：用於定義time元素中的日期/時間是文件(或article元素)的釋出日期。

2. mark元素
   mark元素的主要功能是在文字中高亮顯示某些字元，以引起使用者注意。該元素的用法與em和strong有相似之處，但是使用mark元素在突出顯示樣式時更隨意靈活。
3. cite元素
   可以建立一個引用標記，用於對文件參考文獻的引用說明，一旦在文件中使用了該標記，被標記的文件內容將以斜體的樣式展示在頁面中，以區別於段落中的其他字元。

全域性屬性

1. draggable屬性用來定義元素是否可以拖動，該屬性有兩個值：true和false，預設為false，當值為true時表示元素選中之後可以進行拖動操作，否則不能拖動。
2. hidden元素
   在HTML5中，大多數元素都支援hidden屬性，該屬性有兩個屬性值：true 和false。當hidden屬性取值為true時，元素將會被隱藏，反之則會顯示。元素中的內容是通過瀏覽器建立的，頁面裝載後允許使用JavaScript指令碼將該屬性取消，取消後該元素變為可見狀態，同時元素中的內容也及時顯示出來。
3. spellcheck屬性主要針對於input元素和textarea文字輸入框，對用，戶輸入的文字內容進行拼寫和語法檢查。spellcheck屬性有兩個值：true (預設值)和false，值為true時檢測輸入框中的值，反之不檢測。
4. contenteditable屬性規定是否可編輯元素的內容，但是前提是該元素必須可以獲得滑鼠焦點並且其內容不是隻讀的。