HTML通用屬性與常見標籤
HTML通用屬性和相關標籤的知識，其實感覺沒啥用，真不會的話，其實會到MDN上搜了。
一、通用屬性
下面得屬性是所有標籤都有得屬性。
classcontenteditablehiddenidtabindextitle
class
用於將標籤分類，方便做統一得事情，比如設定樣式。不同標籤得class可以重複；
注意：
1、class有倆個值得時候，代表一個整體；
比如下面div得class是middle bordered；不能理解成，這個div得class既是middle，又是bordered。
<div class="middle bordered"></div>
2、與style標籤使用時
（1）有倆個class值時，需要都寫上才能定位
<head>
<style>
[class="middle bordered"] {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="middle bordered">
</div>
</body>
（2）只要標籤含有這個class，就應用樣式
<head>
<style>
.middle {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="middle bordered">
</div>
</body>
contenteditable
使這個標籤變得可以編輯；
hidden
使這個標籤隱藏；
id
標籤得唯一標識；
1、注意
（1）儘量不要使用這個屬性，使用class
HTML不會檢查這id得唯一性；
所以即使你如果有重複，html也不會報錯；後期出現錯誤，難以定位這個錯誤；
2、用處
（1）與css結合使用
# id {
}
表示
id為xxx得標籤，將會應用這個樣式
（2）與js結合使用
xxx.style.border = '1px solid green'
可以直接寫標籤得id，就可以獲取這個標籤；
- 但這對
id值有限制，不能取保留字；即window下面得所有屬性都不行；不推薦使用這種方式獲取元素
style
用於定義該標籤得css樣式；優先順序比css樣式高；
js如果定義css樣式，那麼js中得優先順序最高；
tabindex
用於定義鍵盤中點選tab鍵，游標得移動位置
- 當值為正數時，不必是連續的；
- 當值為0時，表示最後才被 tab 訪問
- 當值為-1時，
tab鍵永遠都不會選中這個標籤
title
表示這個標籤文字過多，並且將其設定下面得css；即表示多餘得內容用省略號代替。當你滑鼠選中省略號，將會展示這個標籤得title值；
<head>
<style>
p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<p title="顯示這個標籤得所有內容">
這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話
</p>
</body>
常見標籤
章節標籤
通常來說，一個網頁就是表示一篇文章。下面得標籤可以理解成體現一個文章得結構，其實就是幫助計算機理解文章得結構。
- 頭部：
header - 標題：
h1~h6 - 章節：
section - 段落：
p - 腳部：
footer - 主要內容：
main - 旁支內容：
aside - 劃分：
div - 文章：
article
a標籤
該標籤用來跳轉到位置。這裡需要注意倆個點：可以跳轉到哪？新的頁面在哪裡顯示？
其中，可以跳轉到：
- 跳轉到其他頁面；
- 跳轉到頁面內部錨點；比如某個標籤
- 跳轉到其他偽協議；比如郵箱或電話等；
新的頁面也可以顯示在：
- 新得頁面；
- 頁面得某個內部、外部標籤；比如
iframe標籤。
相關屬性
href：【hyper + reference】：超級連結target：在哪個視窗開啟連結download：rel=noopener：
1、href
要跳轉連結地址；可以是網址、路徑、偽協議。
（1）網址
<body>
<a href="http://google.com">http協議跳轉</a>
<a href="https://google.com">https協議跳轉</a>
<a href="//google.com">自動選擇適配的協議來跳轉到連結</a>
</body>
//google.com會自動選擇適配的http、https協議，來跳轉。比上面倆個網址都好。
（2）路徑
<body>
<a href="/a/b/c.html">專案根目錄下的檔案</a>
<a href="a/b/c.html">相對檔案所在位置的相對位置</a>
<a href="index.html">相對檔案所在位置的相對位置</a>
<a href="./index.html">相對檔案所在位置的相對位置</a>
</body>
（3）偽協議
javascript:程式碼：會執行這個程式碼mailto:郵箱：tel:手機號：
<body>
<a href="javascript:;">點選不做任何事情</a>
<a href="#xxx">跳轉到id為xxx標籤所在的位置</a>
<a href="mailto:wangjie_fourth.163.com">給該郵箱傳送郵件</a>
<a href="tel:18888888888">給該電話號碼撥打電話</a>
</body>
聽說那個不做任何事情的用法，很有用處？
（4）#標籤id
跳轉到當前頁面 指定id的標籤
<body>
<h1 id="xxx">標籤一</h1>
<a href="#xxx">跳轉到id為xxx標籤所在的位置</a>
</body>
2、target
用於表示新開啟的連結，在哪裡展示。其值有：
_blank：表示在新視窗開啟連結_self：預設值，在當前視窗開啟連結；_top：當這個介面有多個介面時，當前裡面介面使用_top屬性值的時候，就會讓這個標籤在外面層級的重新整理_parent：如果有多層巢狀視窗的話，就指的是在父級視窗開啟超連結。
<body>
<input type="text" value="外層介面" />
<iframe src="/a_target_iframe.html"></iframe>
</body>
<body style="background: red;">
這是一個 iframe 標籤，裡面有一個 a 標籤
<a href="//google.com" target="_top">top</a>
</body>
這個時候巢狀裡面的超連結，就會在整個外層介面跳到到新標籤；如果裡面的a標籤的target屬性不是_top的話，就只會在裡面這個介面進行跳轉。
新的命名方式
window的nameiframe的name
（1）如果其值為xxx的時候，就會在這個視窗開啟連結
<a href="//baidu.com" target="xxx">百度</a>
<a href="//google.com" target="xxx">谷歌</a>
（2）在指定的iframe標籤中顯示新開啟的連結
3、download
表示下載這個連結得頁面；但不是所有遊覽器都支援，尤其是手機遊覽器