html標籤認識的一些查漏補缺

標籤：

觀看了幾組介紹html標籤的視頻，雖然很基礎但認真瞧下去發現以往對這些標籤的認識還是有許多不到位的地方，現總結：

 

　　對於h1-h6標籤，由於預設樣式的原因每次使用都要特別的重新設定樣式，所以在寫網頁的時候我都是習慣使用span或層取代之，但其實這樣做是不對的，因為h1-h6設計的初衷是有其語義的，它是SEO重要的衡量指標。

 

　　文本突出從強到弱有三個標籤,分別是：

　　　　<mark>標籤：mark標籤存在的意義就是為了標示標識，如匹配搜尋項以及提示拼字錯誤等，例如我們頁面ctrl+f進行關鍵字搜尋時關鍵字會黃底高亮的效果一般，mark實現的就是這個效果。

　　　　<strong>標籤：strong標籤強調常值內容，但不改變其含義（此處說的含義大概是SEO對常值內容含義的理解吧），在頁面表現上是標籤內文本加粗。

　　　　<em>標籤：表示感情上的強調，增強了語氣（作用於機器搜尋以及盲人閱讀方面）。

 

　　p、div、span、img：

　　　　p：用於文章的分段，上下帶邊距。

　　　　div：主要用於布局工作，做一些分割容器。

　　　　span：行內書寫，與mark相似，但span無語義（主要用於改變局部樣式）

　　　　img：img是圖片標籤，其中的alt屬性的值是在圖片沒有成功載入時顯示常值內容。圖片的width屬性值是百分比的時候，指相對於父容器的百分比。

 

　　不知道有多少人像我一樣不管有序列表還是無序列表統統使用<ul>標籤，其實這樣做也是不標準的

　　在頁面用到有序列表的時候我們應該使用的標籤是<ol>，雖然ul通過樣式的設定也能展現出同ul一樣的頁面效果，但ol標籤實際上是語義標籤，自有設計它的理由存在，具體不表（其實就是我忘了）。

　　ol主要有三個屬性：

　　　　start：指定開始標籤的初始值

　　　　type：指定標籤的序號，可以是數字（預設）、大小寫字母以及大小寫羅馬數字

　　　　recersed：這個是HTML5新增的屬性，主要用於有序列表的逆序展示。

　　至於ul的話也是有type屬性的，但並不建議使用，可以用css進行設定，因為這是樣式層的東西，資料跟表現要分離

 

　　對於a標籤，一直以來我都以為它便是超連結的作用，今天才知道原來還有其它的應用，在此拓展一下：

　　1、href = ”malito:[email protected]“　　#當href賦值如右時，預設會開啟我們本地上的郵箱用戶端（沒有則開啟一個空白頁面）[我在Google上測過，確是沒有開啟空白頁面的，本地上沒有郵箱用戶端無從測試...周一上班倘若記起另測吧]

　　2、href = "#id"　　　　　　　　　　#這個是把a標籤當錨點使用，這個作用其實我還是有點印象的，遙記當時上課老師提過的，但過後便忘了，後來也沒有這方面的需求就也沒記起過，在此提下。

 

　　接下來談的是table，在此不得不提一句我們學校至少教網頁的老師真是渣得一塌塗地，幾乎現在所有人都鄙視的做網頁的行為在我們第一次接觸網頁的時候她便是讓我們如此做的，譬如用表格版面配置，使用DW拖拽控制項做網頁...諸如此類，而且，沒記錯的話，當時已經是13年的下半年了，以至於後來自己一知半解的在網上找資料時看到許多人對使用table的吐槽與鄙視竟然深以為然，一直到年初出來實習，看到公司項目竟然還在用table感覺到非常的不可思議，這不是網上人深惡痛絕，早已拋棄了的東西嗎？怎麼我們的項目還在使用，對此我還對我們主管提出過質疑，他給我的回答是該用的地方還是需要用的，我半解還疑。今天標籤介紹的視頻聽到系統的解釋才算是完完全全的釋疑！！

　　table是一種語義化標籤，當今網上許多人對使用table相當的鄙視，但其實這是不對的，使用表格版面配置確實是一種讓人鄙視的行為，但是在該用表格的地方非要使用層進行布局那也是相當愚蠢的。

　　另外，tr標籤是一種虛擬格式，表格的樣式應該寫在表格上，不要對tr進行樣式的設定，否則瀏覽器的相容可能會讓你很麻煩。

　　表格有兩個屬性是必須寫的：cellpadding、cellspacing，因為這兩個屬性在不同瀏覽器有不同的表現，為了相容各類瀏覽器，最後手動設值

 

　　html的全域屬性：

　　　　class：對html沒有任何意義（此處指的應該是對瀏覽器解釋沒有任何意義），主要是用於css設定樣式

　　　　contenteditable：HTML5新增屬性，使標籤可編輯。

　　　　data-*：自訂屬性，這也是HTML5新增屬性，HTML5有一套api能更好的讀取（相比較於命名隨便的自訂屬性而言）

　　　　dir：規定元素中內容的文本方向，HTML5新增屬性。[這個我實驗了一下並沒有生效，可能瀏覽器版本的問題吧]

　　　　id:頁面唯一定義標籤的屬性

　　　　draggable：規定元素是否可拖動

　　　　lang:規定元素內容的語言

　　　　spellcheck：規定是否對元素進行拼字和語法檢查[應該還是瀏覽器不相容的原因，我實驗的時候沒有看到相關效果]

　　　　style：規定元素的行內css樣式

　　　　tabindex：規定元素的tab鍵次序

　　　　title：規定有關元素的額外資訊

　　　　translate：規定是否應該翻譯元素內容

 

　　表單元素：

　　　　lable有個for元素用於綁定單選框|多選框

　　　　file標籤的accept屬性制定file控制項接受的檔案類型

　　　　image按鈕有提交表單的作用

　　　　隱藏欄位作用於js互動

　　　　option標籤上傳到伺服器上的值以value值為準

　　　　

　提交資料到伺服器是有兩種方法的：

　　　　1、表單（常規方法）

　　　　2、ajax

 

　外部資源的引入有兩種方式

　　　1、src　　替換網頁的內容

　　　2、href　　用於標示資源和文檔的關係

　

　iframe（現在用途有限）會建立一個包含另外一個文檔的內嵌架構，src屬性引入文檔（正常需求不會這麼做）。簡單的說該標籤作用就是在網頁中嵌套網頁

　

　meta標籤可提供有關頁面的元資訊，這個無須死記，稍作瞭解便可

　　　data-spm、設定字元集、縮放、關鍵詞、描述、語言...

　　經常使用到的大概就是上述幾個作用

 

說在最後：可能白天喝了大杯咖啡的原因，大晚上的翻來覆去睡不著，於是就著今天的學習起來總結了一下筆記，這些標籤雖然很基礎很基礎，但做了前端半年之久我對它們仍然有不少的錯誤理解，加粗的字型內容是我先前完全不知或理解有誤的內容，另外的便是我覺得羅列出來可能有利於初學者正觀的點。挺長的一頁，自我表揚下哇哢哢，望堅持(*^__^*) （哇嗚，肚子好餓怎麼破。。）

　　　　

　　

 

　　

　　

 

html標籤認識的一些查漏補缺