HTML基礎知識

入門

HTML全稱：HyperText Markup Language。李爵士創立了HTML，離開公司後創辦了一個組織——W3C委員會。 W3C根據瀏覽器的實際情況總結制定HTML規範文檔。
HTML有很多版本，從HTML4.01到XHTML再到HTML5，版本類型由HTML文件頭部的DOCTYPE聲明，比如HTML5的聲明爲<!DOCTYPE html>。這裏注意我們現在常說的H5並不是指html5，H5是能運行在微信上的網頁的統稱，和實現技術無關。XHTML、HTML4.01、HTML5都可以。
在HTML5中，聲明的DOCTYPE一定要大寫，html可以小寫。即你可以寫成，或者是。我們知道一個完整的html5頁面應該是這樣

<!DOCTYPE HTML>
<html>
  <head></head>
  <body></body>
</html>

但是事實上，如果你的head裏邊沒有內容的話，head標籤是可以不寫上去的。這是符合規範的。具體你可以自己查文檔。不過就算你不寫，瀏覽器是會幫你補上的。不但是head，body你同樣可以不寫，瀏覽器也會自動補全。但是如果你寫了註釋的話，註釋不會被放在body裏邊，而是放在html裏邊，body和head外邊。不只如此，html標籤同樣是一個可省略的標籤。
div不可以寫在head裏邊，如果你寫了它也不會報錯，瀏覽器會將其自動放到body裏邊。head裏邊只放文檔屬性。
html沒有塊級元素和內聯元素的區別，比如div我們認爲它是塊級元素，但是事實上你可以用div{display:inline}使它表現爲內聯元素。所以HTML只用來定義這是什麼東西，比如告訴你這是一個section，只管內容不管樣式。樣式用css來修改。
html裏邊所有的特殊符號都要轉義，比如&需要用&amp來表示。所有的換行都會被壓縮成一個空格。
對於自學的小夥伴們如果想要找練手的可以上Dirbble找一些設計師作品仿。

常用標籤

a-----anchor
p-----paragraph
hr----水平分割線
br----line break 換行
ul----unordered list  
ol----ordered list
li----list item
dl----discription list 描述列表 一般用來描述鍵值對dt-dd
dt----description term(詞語)  描述
dd----description definition  對描述的定義（解釋）
div---divide 劃分
span--橫向劃分
kbd---keyboard 鍵盤
/*vh（單位，類似於px）---viewport height (與屏幕等高)*/

HTML中聲明編碼格式可以用<meta charset="utf-8">，也可以用<meta http-equiv="content-type" content="text/html;charset=utf-8">，當然，推薦前者，後者印象中是一個歷史遺留問題。equiv–等價物。

noscript

noscript標籤用於在當前頁面不支持script的時候展示。如果想要看到效果可以嘗試禁用瀏覽器的script。步驟如下：
1. 按F12進入開發者模式，點擊右上角的那三個點，進入setting。如下圖所示。

2. 找到debugger，選中禁用script。

img

img標籤是可替換標籤，裏邊不寫內容，內容靠外部src請求，因此它的表現與src關聯的資源圖片自帶的屬性有關。當然，我們可以使用img width=100 height=100 src="..." alt="..."來指定圖片的寬高屬性。注意這裏指定的是屬性不是內聯樣式。事實上，在實際開發中，我們不會直接指定元素屬性，而是通過css修改元素的寬高。css的優先級高於屬性，但是低於內聯樣式。因爲img是可替換標籤，很多人認爲它是塊級元素，但其實它雖然比較特殊，依舊是inline內聯元素。

contenteditable

contenteditable表示內容是否可編輯，比如你用<div contenteditable="true">hello</div>展現在瀏覽器上雖然是字符串hello，但是這個可以由用戶直接在瀏覽器上修改。用戶的不會被保存到源碼中，當你再一次進行刷新的時候依舊會顯示hello。

b strong em i

b(blod) strong em(emphasis) i(italic) 區別：b和strong默認表現形式相同，都是加粗顯示。i和em的默認表現形式相同，都是斜體顯示。但區別在於前者是一種物理狀態，後者是一種邏輯狀態。strong和em的區別在於strong表示內容的重要，而em表示加重語氣。

iframe

iframe標籤用來在當前頁面中嵌套另一個html頁面。frameborder屬性取值爲1時（默認值），會爲當前iframe繪製邊框。我們一般將它的值設爲0，不用邊框。<iframe src="#" frameborder="0"></iframe>iframe標籤還有一個重要的屬性——name。name屬性一般用於與a或者form標籤連用，比如

<iframe name=wcy src="#" frameborder="0"></iframe>
<a target=wcy href="http://qq.com">QQ</a>

點擊QQ的時候會在iframe裏邊打開qq的主頁。
iframe的src屬性裏邊一般爲網址或者是相對路徑。

a

對於a標籤，常用的屬性target有四個值，target=_blank表示在空頁面打開。target="_self"表示在當前頁面打開。target="parent"表示在父頁面打開，這個頁面由誰引出來的誰便是它的父頁面。target="_top"最初由誰引進來的就在那個頁面打開。
使用a標籤要看情況，有的時候就算它是一個button的樣式，但是它點擊之後會進入一個頁面然後進行下載，那它就應該是一個a標籤。
a標籤的download屬性。<a href="#" download>下載</a>。如果http響應爲content-type: application/octet-stream那麼瀏覽器就會以下載的形式接受這個請求而不是在頁面上展示。如果沒有寫content-type的話用a標籤的download屬性可以強制執行下載。
a標籤的href屬性
1. //qq.com 表示無協議的絕對地址，當前是什麼協議跳轉的就是什麼協議
2. ./xxx.html 相對地址
#xxx 跳轉到當前頁面的該錨點指向的部分，瀏覽器地址欄上的路徑會加上#xxx。錨點不會發起請求，錨點的作用是頁面跳轉。
?name=xxx 自動發送get請求。
3. 僞協議<a href="javascript:;">QQ</a>，javascript後邊直接寫js語句，可以執行。href裏邊基本都是協議，或者file或者http或者其它，除了這個僞協議。主要的作用就是讓a標籤點擊之後不要跳轉。a標籤不可以沒有href，裏邊什麼都不寫的話會刷新當前頁面，用#會跳到當前頁面開頭，所以爲了實現這種效果我們用僞協議。
a標籤的頁面跳轉使用的是get請求，form標籤默認也是get請求，但是我們一般用form實現post請求，因爲form表單一般用來上傳數據。form標籤也有target，規則與a標籤相同。

form

form表單中如果沒有提交按鈕就無法提交數據。除了form外HTML沒有提供其他的方法上傳數據。
我們用form表單的post方法上傳用戶名和密碼如下

 <form action="" method="post">
      <input type="text" placeholder="name" name="name">
      <input type="password" name="password" >
      <input type="submit" value="">
 </form>

輸入用戶名和密碼然後在瀏覽器查看錶單發起的請求我們可以看到下圖

其中第一個紅框表示的是請求的第四部分遵循的語法，第二個紅框標註的是請求的第四部分Form Data。123是我輸入的用戶名，wer是我輸入的密碼，中間用&符號連接。如果用戶名輸入的是中文的話中文會被轉換爲相應的十六進制編碼，每個字節前邊加百分號。如下圖。
.png).png)
這裏如果我們用的是get協議我們的用戶名和密碼會直接發送到查詢參數中，在路徑中顯示，而不會出現在請求的第四部分。
password雖然是用來輸入密碼的但是這個密碼只是讓人看不見，實際上只要是http協議依舊是可以在開發者工具中看見的。
post請求我們可以手動加查詢參數比如action="users?xxx=123"，這樣提交表單的時候會帶上查詢參數。但是我們沒有辦法讓get請求出現第四部分。
如果form表單中的button沒有聲明type="button"，那麼它默認是submit按鈕，效果等同於<input type="submit">。但是如果寫了type="button"就只是一個普通的按鈕。input和button的區別在於input是一個空標籤而button不是。
<input type="checkbox" id="xxx"><label for="xxx">點我選中</label>我們都知道checkbox是多選框，但是選擇的時候只能勾選那個小框未免太單調了，將label的for和input的id搭配使用使得我們點擊文字的時候也能夠選中。當然，還有另外一種方法也可以實現這個效果，講input標籤用label包裹住，像這樣<label><input type="checkbox">點我選中2</label>。注意上邊兩段代碼裏邊都缺了一個必須的屬性——name。如果沒有name屬性的話，值是提交不上去的。當然，如果沒有value屬性的話，就沒有值了。
對於單選按鈕radio，兩個radio button有同一個name的話就只能單選，否則是可以多選的。
select下拉列表，主要有5個屬性值

<form action="" method="post">
      <select name="number" multiple>
        <option value="">-</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" disabled>3</option>
        <option value="4" selected>4</option>
      </select>
      <input type="submit" value="submit">
    </form>

-代表值爲空
1，2和4都是可以選擇的
3設爲disabled不可選
4 selected是默認選中的選項
select後邊加multiple表示這是可以多選的
textarea可以隨便拉大小，但是如果真的讓它這樣隨便拉的話很容易打亂佈局，所以我們一般會用css將其長寬固定。<textarea style="resize:none" cols="30" rows="10"></textarea>用cols和rows可以手動設置寬高，但是不準。直接用css像素設置即可。

table

table裏邊的直接子元素。這四個元素在瀏覽器中渲染的順序不會改變，就算你把tbody放到thead前邊，展示的時候也會先展示thead裏邊的內容。tbody如果沒寫的話瀏覽器渲染的時候會自動補上，但是thead和tfoot不會，因爲瀏覽器不知道它應該放到哪裏，所以就直接都放在tbody裏邊。

    <table>
      <colgroup></colgroup>
      <thead></thead>
      <tbody></tbody>
      <tfoot></tfoot>
    </table>

colgroup需要與col連用,用法如下。width表示的是那一列的寬度。但是現在一般不用，因爲有css。

<colgroup>
        <col width="100">
        <col width="50">
        <col width="150">
      </colgroup>

除了上邊列出來的之外還有三個特別重要的

tr----table row  
th----table header 表的標題
td----table data   數據

其中th和td主要是爲了html的語義化。
table的border可以合併，用collapse。
下邊是一個完整的table

<table border="1" style="border-collapse:collapse">
      <colgroup>
        <col width="100">
        <col width="50">
        <col width="150">
      </colgroup>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年齡</th>
          <th>性別</th>
        </tr>
      </thead>
      <tbody>
          <tr>
            <td>瑤瑤</td>
            <td>18</td>
            <td>女</td>
          </tr>
          <tr>
            <td>花花</td>
            <td>9</td>
            <td>女</td>
          </tr>
      </tbody>
      <tfoot></tfoot>
    </table>

一些不常用的標籤

<meter min="200" max="500" value="350">350 degrees</meter>

HTML基礎知識

HTML基礎知識

入門

常用標籤

noscript

img

contenteditable

b strong em i

iframe

a

form

table

一些不常用的標籤

.NET開源強大、易於使用的緩存框架 - FusionCache

面試，有時候是個運氣活

bfc和ifc以及前端基礎的一些東西（未整理）

fiddler使用手冊

ionic項目開發問題整理

Node.js和EMMET簡單使用指南（未整理，慎入）

HTML基礎知識

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結