標籤：網站 開啟 多行 str 順序 先後 字型 click 操作
最近重新看了一遍html標籤的知識，有很多新的體會，對語義化有了一個新的理解。
那麼什麼叫做語義化呢，說的通俗點就是：明白每個標籤的用途（在什麼情況下使用此標籤合理）比如，網頁上的文章的標題就可以用標題標籤，網頁上的各個欄目的欄目名稱也可以使用標題標籤。文章中內容的段落就得放在段落標籤中，在文章中有想強調的文本，就可以使用 em 標籤表示強調等等。
語義化的好處主要有兩個方面:
1. 更容易被搜尋引擎收錄。
2. 更容易讓螢幕助讀程式讀出網頁內容。(螢幕助讀程式是一種軟體，用來將文字、圖形以及電腦介面的其他部分（借文字轉語音技術）轉換成語音及/或點字。)
下面是我對html標籤的一個理解總結：
標籤的文法:
1. 標籤由英文角括弧<和>括起來，如<html>就是一個標籤。
2. html中的標籤一般都是成對出現的，分開始標籤和結束標籤。結束標籤比開始標籤多了一個/。
3. 標籤與標籤之間是可以嵌套的，但先後順序必須保持一致，如：<div>裡嵌套<p>，那麼</p>必須放在</div>的前面。
4. HTML標籤不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程式員都以小寫為準。
html結構:
1. <html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤，頭部標籤在下一小節中會有詳細介紹。
3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裡的標籤中的內容會在瀏覽器中顯示出來。
1.<head>標籤
<head>標籤的作用。文檔的頭部描述了文檔的各種屬性和資訊，包括文檔的標題等。絕大多數文檔頭部包含的資料都不會真正作為內容顯示給讀者。
2.<title>標籤
<title>標籤：在<title>和</title>標籤之間的文字內容是網頁的標題資訊，它會出現在瀏覽器的標題列中。網頁的title標籤用於告訴使用者和搜尋引擎這個網頁的主要內容是什麼，搜尋引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
3.<body>標籤
在網頁上要展示出來的頁面內容一定要放在body標籤中。
4.<p>標籤
用於顯示文章內容，預設樣式為段落前後都會留有空白。
5.<hx>標籤
用於顯示文章的標題，一共有六個h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。預設樣式為字型加粗，字型大小從h1到h6依次變小。
6.<em>標籤
用於強調某些文字，帶有強調語氣，預設樣式為強調內容變為斜體。
7.<strong>標籤
用於強調某些文字，但強調語氣大於<em>標籤，預設樣式為強調內容加粗。
8.<span>標籤
沒有語義，用作為文字添加特定的樣式，無預設樣式。
9.<q>標籤
用作短文本的引用，不用為引用文字加引號，<q>標籤預設樣式會為引用文字自動添加引號。注意直接給引用文字加引號不同的是，使用<q>標籤使內容語義化，告訴瀏覽器這是引用別人的話，而直接加引號則沒有語義。
10.<blockquote>標籤
用作長文本的引用，預設樣式為左右縮排一定空白。
11.<br>標籤
<br />標籤作用相當於word文檔中的斷行符號。（在 html 代碼中輸入斷行符號、空格都是沒有作用的。在html文本中想輸入斷行符號換行，就必須輸入<br />）
<br>標籤有兩種寫法一種是 xhtml1.0寫法 <br />，另一種是 html4.01寫法<br>。現在一般使用 xhtml1.0 的版本的寫法（其它標籤也是），這種版本比較規範。
<br>標籤是一個空標籤，即沒有html內容。
12. 
在 html 代碼中輸入斷行符號、空格都是沒有作用的。在html文本中想輸入一個空格，就必須輸入 。
13.<hr>標籤
用於添加水平橫線，預設樣式線條比較粗，顏色為灰色。
<hr>標籤有兩種寫法一種是 xhtml1.0寫法 <hr />，另一種是 html4.01寫法<hr>。現在一般使用 xhtml1.0 的版本的寫法（其它標籤也是），這種版本比較規範。
<hr>標籤是一個空標籤，即沒有html內容。
14.<address>標籤
用於顯示一些網站的聯絡地址資訊，也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。預設樣式為斜體。
15.<code>標籤
用於添加一行代碼。
16.<pre>標籤
用於添加預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和分行符號。因此可以用來添加一大段代碼。
17.<ul>標籤
用於顯示沒有前後順序列表資訊，ul-li是沒有前後順序的資訊列表。預設樣式為每項li前都內建一個圓點。
18.<ol>標籤
用於顯示有前後順序列表資訊，預設樣式為每項<li>前都內建一個序號，序號預設從1開始。
19.<div>標籤
用於劃分一個獨立的邏輯部分（邏輯部分是頁面上相互關聯的一組元素），<div>標籤的作用就相當於一個容器。
20.<table>標籤
用於顯示表格資訊
1.建立表格的四個元素：table、tbody、tr、th、td
2.<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
3.<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格載入完後才顯示。加上這些表格結構， tbody包含行的內容下載完優先顯示，不必等待表格結束後在顯示，同時如果表格很長，用tbody分 段，可以一部分一部分地顯示。（通俗理解table 可以按結構一塊塊的顯示，不在等整個表格載入完後顯示。）
4.<th>…</th>：表格的頭部的一個儲存格，表格表頭。
5.<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
6.<td>…</td>：表格的一個儲存格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
7.表格中列的個數，取決於一行中資料儲存格的個數。
8.預設樣式table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的。表頭，也就是th標籤中的文本預設為粗體並且置中顯示。
9.<table summary="表格簡介文本">為表格添加摘要（摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內容，還可以使螢幕助讀程式更好的協助特殊 使用者讀取表格內容。）
21.<caption>標籤
用於為表格添加標題，顯示在表格上方。
22.<a>標籤
1.用於實現超連結，連結到另一個頁面。
2.<a href="目標網址" title="滑鼠滑過顯示的文本">連結顯示的文本</a>（title屬性的作用，滑鼠滑過連結文字時會顯示這個屬性的常值內容。這個屬性在實際網頁開發中作用很大，主要方便搜尋引擎瞭解連結地 址的內容（語義化更友好））。
3.<a>標籤在預設情況下，連結的網頁是在當前瀏覽器視窗中開啟，有時我們需要在新的瀏覽器視窗中開啟。<a href="目標網址" target="_blank">click here!</a>
4.<a>標籤還有一個作用是可以連結Email地址，使用mailto能讓訪問者便捷向網站管理者寄送電子郵件。
如果mailto後面同時有多個參數的話，第一個參數必須以“?”開頭，後面的參數每一個都以“&”分隔。
5.預設樣式為只要為文本加入a標籤後，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色）。
23.<img>標籤
用於插入圖片<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">
1.src：標識映像的位置（地址）
2.alt：指定映像的描述性文本，當映像不可見時（下載不成功時），可看到該屬性指定的文本。
3.title：提供在映像可見時對映像的描述(滑鼠滑過圖片時顯示的文本)。
4.映像可以是GIF，PNG，JPEG格式的影像檔。
24.<form>標籤
表單標籤用於把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。
1. <form method="傳送方式" action="伺服器檔案">
2.<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。
3.action ：瀏覽者輸入的資料被傳送到的地方,比如一個PHP頁面(save.php)。
4..method ： 資料傳送的方式（get/post）。
5.所有表單控制項（文字框、文本域、按鈕、單選框、複選框等）都必須放在 <form></form> 標籤之間（否則使用者輸入的資訊可提交不到伺服器上哦！）
25.<input>標籤
1.<input type="text/password/radio/checkbox/submit/reset" name="名稱" value="" />
2.當type="text"時，輸入框為文本輸入框;
3.當type="password"時, 輸入框為密碼輸入框。
4.當 type="radio" 時，控制項為單選框。value為選項的值。
5.當 type="checkbox" 時，控制項為複選框。value為選項的值。
6.當type值設定為submit時，表現為有提交作用的控制項按鈕。value值為按鈕上顯示的字
7.當type值設定為reset時，表現為有提交作用的控制項按鈕。value值為按鈕上顯示的字
8.name：命名，以備背景程式ASP 、PHP使用。作為單複選框時，同一組的選項按鈕，name 取值一定要一致，這樣同一組的選項按鈕才可以起到單選的作用。
9.value：為文本輸入框設定預設值。(一般起到提示作用)。
10.checked：作為單複選框時，當設定 checked="checked" 時，該選項被預設選中.
26.<textarea>標籤
1.<textarea rows="行數" cols="列數">文本</textarea>
2..用於在表單中輸入大段文字
3.cols 多行輸入欄位的列數。rows多行輸入欄位的行數。（這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替。）
27.<select>標籤
1.<select><option value="看書" selected="selected">看書</option></select>
2.用作實現下拉式清單，value值為向伺服器提交的值，設定selected="selected"屬性，則該選項就被預設選中。
3.在<select>標籤中設定multiple="multiple"屬性，就可以實現多選功能，在 windows 作業系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。
28.<label>標籤
label標籤不會向使用者呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控制項。就是說，當使用者單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上（就自動選中和該label標籤相關連的表單控制項上）。（標籤的 for 屬性中的值應當與相關控制項的 id 屬性值一定要相同。）
暫時更新到這裡。。。。。
html標籤及網頁語義化理解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
