HTML5 基礎知識（二）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
</body>
</html><!DOCTYPE html>宣告頁面為HTML5文件
<html lang="en">其中en是頁面內容預設語言的程式碼
<meta charset="utf-8" /> 空格與斜槓是可選的，定義文件編碼格式為utf-8
<title></title> 標籤之間將包含頁面的標題
</head>結束頁面文件的頭部
<body></body>標籤之間存放頁面內容部分
</html> 結束頁面
在文件head部分，通常要指明頁面標題，提供為搜尋引擎準備的關於頁面本身的資訊，載入樣式表，以及載入JavaScript檔案（不過，出於效能考慮，多數時候在頁面底部</body>結束前載入JavaScript是更好的選擇）
title元素必須位於head部分，並且在指定字元編碼的meta元素後面。不能包含任何格式、html、影象或其他頁面的連結
分級標題hn n是1~6的數字 h1是最重要的標題 h6是最不重要的標題
不要使用h1~h6標記副標題、標語、以及無法成為獨立標題的子標題。
1、建立頁首header
如果頁面中有一塊包含一組介紹性或導航性內容的區域，應該用header元素對其進行標記。一個頁面可以有任意數量的header元素，他們的含義可以根據其上下文而有所不同。例如，處於頁面頂端或接近這個位置的header可能代表整個頁面的頁首或頁頭。包括網站標誌、主導航和其他全站連結，甚至搜尋框。
只在必要時使用header，大多數情況下，如果使用分級標題h1~h6能滿足需求，就沒有必要用header將它包起來。
header標籤不可巢狀
2、標記導航nav
nav中的連結可以指向頁面中的內容，也可以指向其他頁面或資源。無論是哪種情況，應該僅對文件中重要的連結群使用nav
如何判斷是否對一組連結使用nav呢？取決於內容的組織情況。至少，應該將網站全域性導航標記為nav。這種nav通常出現在頁面級的header元素裡面。
3、標記頁面的主要區域main
一個頁面中只有一個部分代表主要內容，可以將這樣的內容包在main元素中，該元素在一個頁面中僅使用一次。
如果建立的是web應用，則使用main包圍其主要的功能，不能將main放置在article、aside、footer、header或nav元素中。
最好在main的開始標籤中加上role=“main“，可以幫助螢幕閱讀器定位頁面的主要區域。
4、建立文章article
article元素表示文件、頁面、應用或網站中一個獨立的容器，原則上是可以獨立分配或可再用的，就像聚合內容中的各部分。article元素可以巢狀使用，一個頁面中可以有多個article元素。
5、定義區塊section
section元素代表文件或應用的一個一般的區塊。從語義上講，section標記的是頁面中的特定區域，而div則不傳達任何語義。
6、指定附註欄aside
儘管我們容易將aside元素看作側欄，但該元素其實可以用在頁面的很多地方，具體依上下文而定。在aside標籤中增加 role=“complementary”可以提高可訪問性
7、建立頁尾footer
footer元素代表巢狀它最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的頁尾。只有當它最近的祖先是body時，才是整個頁面的頁尾。footer標籤只有頁面級頁尾中才可以使用role=“contentinfo”，且一個頁面只能使用一次。
8、建立通用容器div
div對使用JavaScript實現一些特定的互動行為或效果也是有幫助的。在頁面中展示一張圖片或一個對話方塊，同時讓背景頁面覆蓋一個半透明的層，通常這個層就是一個div
9、使用ARIA改善可訪問性
WAI-ARIA無障礙網頁倡議-無障礙的富網際網路應用，簡稱ARIA，是一種技術規範，自稱有橋樑作用的技術。之所以這樣說，是因為在html提供相應的語義功能之前，它會使用屬性來填補一些語義上的空白。
地標角色可以幫助使用者識別頁面區域，從而讓螢幕閱讀器使用者可以直接跳轉到這些區域。對這些區域指定role屬性就可以了。
role=“banner" 橫幅 可新增在頁面級header標籤中，且只可用一次
role=”navigation“ 導航 可新增在nav標籤中
role=”main“ 主體 新增在main標籤中，只可使用一次
role=”complementary“ 補充性內容 可新增在aside或div元素
role=”contentinfo“內容資訊 可新增在頁面級footer標籤中，僅可使用一次
注意：不要在頁面上過多使用地標角色。過多的地標角色會讓螢幕閱讀器使用者感到累贅，從而降低地標的作用，影響整體體驗。
10、為元素指定類別或ID名稱
在元素的開始標籤中輸入 id=”name“，其中name是唯一標識該元素的名稱。name可以是任何字元，只要不是以數字開頭，不包含空格。
在元素的開始標籤中輸入 class=”name“ name是類別的名稱，如果指定多個類別，用空格將不同的類別名稱分開即可。
html文件中每個id都必須是唯一的。class可以分配給頁面中的任意數量的元素，並且一個元素可以有一個以上的class。在class和id名稱中，通常使用短橫線分割多個單詞。
11、為元素新增title屬性
在要新增的標籤中 新增title元素，輸入title=”label".其中label是訪問者將滑鼠移到這個元素上時希望出現在提示框裡的文字。
12、添加註釋<!-- -->
相關推薦
HTML5 基礎知識（二）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title></title> </head
10分鐘HTML5入門基礎知識（二）
html5開發與舊式瀏覽器的相容我們已經討論了HTML5許多很酷的新功能，包括新的語義元素、為畫圖而生的canvas標籤，以及音訊與視訊支援。你可能會想：這些東西是很好，但當用戶的瀏覽器不相容HTML5時，可能就沒法使用它們了。更不用說一些所謂的“支援”HTML5的瀏覽器，
HTML5基礎小結（二）——標簽小例
加速 支持 ide oat enter controls 畫圓 side tint 隨篇博客的思維導圖。繼續： 二。看下標簽的使用，這裏看幾個小樣例（效果圖不再給出）： 1。結構標簽的使用，這裏來看一個頁面的布局：<!doc
JavaScript基礎知識（二）
window ttr demo1 隨機數 put 意義 成員 poi pac 一、JavaScript事件詳解 1、事件流：描述的是在頁面中結束事件的順序 事件傳遞有兩種方式：冒泡與捕獲。 事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插
python基礎知識（二）
.py .com 數值類型 spa gbk 4.5 wal 編碼 nic 1.pycharm使用 快速搜索欄，蠻重要的 2.字符串格式化 %s 字符串類型 %d數值類型 msg = "我是%s,年齡%d,愛好%s" % (‘alex‘, 18, ‘boy‘) print(
.NET基礎知識（二）
處理 read 不能被繼承 c# 方法表 .net基礎 arr 如果 數據 1、new有幾種用法？ 答：1、new Class(); 2、覆蓋方法，public new XXXX(); 3、new() 約束指定泛型類聲明中的任何類型參數都必須有公共的無參數構造函數 2
多線程基礎知識（二）
必須 否則 closed form 自己 back play sender 重點 線程池 因為每次創建線程、銷毀線程都比較消耗 cpu 資源，因此可以通過線程池進行優化。線程池是一組已經創建好的線程，隨用隨取，用完了不是銷毀線程，然後放到線程池中，供其他人用。 用線程池之
Python 之 基礎知識（二）
break post elif true 滿足 賦值 隨機數 計數 spa 一、分支運算 在Python 2.x中判斷不等於還可以用<> if語句進階：elif if 條件1: ...... elif 條件2: ...... else:
Kafka基礎知識（二）
net pic 知識 2個 先後 orm 進行 進制 機器 Kafka進階知識 消息概念 消息指的是通信的基本單位。由消息生產者（producer）發布關於某個話題（topic）的消息。簡單來說：消息以一種物理方式被發送給了作為代理（broker）的服務器（可能是另外一臺機
線性代數基礎知識（二）——運算和性質【轉載】
這樣的 寫作 9.png 改變 通過 內容 你會 列空間 根據 3 運算和性質 在這一節中，我們將介紹幾種矩陣/向量的運算和性質。很希望這些內容可以幫助你回顧以前知識，這些筆記僅僅是作為上述問題的一個參考。 3.1 單位矩陣與對角矩陣 單位矩陣，記作I ∈ Rn×n，
第3章 RFID基礎知識（二）
1.電子標籤分為：有源電子標籤、無源電子標籤和半無源電子標籤。 2.電子標籤的儲存區域通常分為：保留區、EPC區、TID區、使用者區。 保留區：用於儲存標籤的滅活密碼以及訪問密碼，在沒有鎖定時可以進行讀寫操作，鎖定後不能讀取也不能修改。
儲存基礎知識（二）回滾的原理
雖然使用者開啟快照，可在通過建立時間點來保護修改的資料，但要回到修改之前的狀態就必須用到回滾。打個比方，我在t1時刻給畫板上畫了一棵樹，t2時刻又畫了一隻猴子，t3時刻畫的時候發現畫錯了，我不想要猴子和現在所畫的東西，我想回到那棵樹的時刻，就會用到回滾。 快照的回滾也是如此，使用者建立多個時
機器學習基礎知識（二）
深度神經網路： 深度學習實際指的是基於深度神經網路（ deep neural networks, DNN）的 學習，也就是深度人工神經網路所進行的學習過程，或稱作 Deep Learning。 這個 Deep 指 的是神經網路的深度（層數多）。 T
PHP基礎知識（二）
PHP表示式 一、常量： 1、自定義常量：define(name,value); 2、注意： （1）常量名前不加$符號。 （2）常量名的作用域是全域性的。 二、變數： 1、PHP的變數是區分大小寫的。 2、賦值： （1）傳值： （2）傳地址：
PostgreSQL基礎知識（二）
11、對錶中列的查詢。 SELECT 列名1，列名2，.... from 表名 ； 若要查詢所有 。 SELECT * FROM 表名 ； 12、為列設定別名 。 SELECT 列名1 AS 別名1， 列名2 AS 別名2 from
Pandas基礎知識（二）
Pandas的索引物件 index的物件是不可以修改的如執行index[1] = 'f'，會報錯"Index does not support mutable operations"。index的不可修改性保證了多個數據結構之間的安全共享。 index物件是pandas資料模型的重要組成部分。pand
JPA基礎知識（二）：使用JPA持久化物件的步驟
使用JPA持久化物件的步驟 1. 建立JPA工程 2. 導jar包 3. 建立persistence.xml 3.1 指定與xx資料庫的互動 3.2 指定JPA使用哪個持久化框架，以及配置框架的基本屬性 3.3 在檔案中配置持久化單元
C#入門基礎知識（二）
C#的常量和變數 1. C#的常量 常量，顧名思義，就是“不會改變的量”，我們平時書寫的數字、字元和字串，他們都屬於“字面常量”，編寫程式碼時我們常常會使用自定義變數。 請閱讀下面程式碼： namespace Test { Class Program {
資料結構基礎知識（二）
順序表 1.線性表 線性表：是N（N>=0）個資料元素組成的有限序列k0,k1,...,kn-1。 線性表中的各個資料元素要求是同一種資料型別。資料元素相同的線性表又稱為陣列或向量。資料元
數位電路基礎知識（二）
數位電路2 2018年9月4日 11:01 1.verilog實現D觸發器邏輯 //基本D觸發器 module D_EF(Q,D,CLK) input D,CLK; output Q; reg Q; //在a