[TOC] >[success] # HTML 標簽 ~~~ 1.語義是否良好： 當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性。 2.不管是誰都能看懂這塊內容是什么。 3.遵循的原則：先確定語義的HTML ，再選合適的CSS。 ~~~ >[success] # 排版標簽 ~~~ 1.排版標簽主要和css搭配使用，顯示網頁結構的標簽，是網頁布局最常用的標簽。 ~~~ ~~~ 1.<hn> 標題文本</hn> --- 作為標題使用，并且依據重要性遞減（1-6） 2.<p>文本內容 </p> --- 作為段落使用，就像寫作可以將段落中換行的內容以換行的形式展示 3.<hr />是單標簽 --- 在網頁中顯示默認樣式的水平線。 4.<br />是單標簽 --- 強制換行文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽 5.<div>沒有語義的盒子</div> --- 沒有語義的盒子 6.<span>沒有語義的盒子</span> --- 沒有語義的盒子 ~~~  >[success] # 文本標簽 ~~~ 1.在網頁中，有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用 到HTML中的文本格式化標簽，使文字以特殊的方式顯示。 ~~~ ~~~ 1.<b>加粗</b> <strong>加粗</strong> --- 文字加粗推薦 strong 語義化 2.<i>傾斜</i><em>傾斜</em> --- 文字傾斜推薦em 3.<s>加刪除線</s><del>加刪除線</del> --- 加刪除線推薦del 4.<u>加下劃線</u><ins>加下滑線</ins> --- 推薦使用ins ~~~ >[success] # 圖片標簽 -- img ~~~ 1.<img/> 是一個單標簽 --- 是用來展示圖片效果的 ~~~ * img 標簽中的屬性  >[success] # 連接標簽 -- a標簽 ~~~ 1.<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a> *href：用于指定鏈接目標的url地址，當為標簽應用href屬性時，它就具有了超鏈接的功能。 *target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認在當前窗口打開，_blank為在新窗口中打開方式。 ~~~ >[danger] ##### 錨點屬性 ~~~ 1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本。 2.使用相應的id名標注跳轉目標的位置。 ~~~ >[danger] ##### 設置base 控制整個頁面a標簽是否開啟新頁面 ~~~ 1.base 可以設置整體鏈接的打開狀態 ~~~  >[success] # 列表標簽 ~~~ 1.無序列表 --<ul><li></li><ul> 2.有序列表 -- <ol><li></li><ol> 3.自定義列表 -- <dl><dt>標題</dt><dd>詳細內容</dd></dl> ~~~ >[danger] #### 應用場景 * ul  * ol  * dl  >[success] # 表格 -- Table ~~~ 1.數據展示的容器，tr 為行，td為列，th為表頭標簽，thead用于定義表格的 頭部，tbody用于定義表格的頭部 2.跨行合并：rowspan 跨列合并：colspan 3.<caption>table的標題屬性</caption> 合并單元格的思想： 將多個內容合并的時候，就會有多余的東西，把它刪除。例如 把 3個 td 合并成一個， 那就多余了2個，需要刪除。 公式： 刪除的個數 = 合并的個數 - 1 <table> <tr> <td>單元格內的文字</td> ... </tr> ... </table> ~~~ * 常見屬性 ~~~ 1.border -- 做整個table的邊框設置 2.cellspacing -- 設置td 之間的距離 3.cellpadding -- 設置單元格的內邊距 4.width -- 設置table 的寬度可以設置百分百 5.height -- 設置table 的高度 6.align -- 設置table的位置 <table border="1" cellpadding="5" cellspacing="0" width="100%"> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> </table> ~~~  >[success] # HTML 的特殊字符  >[success] # 表單標簽 -- input ~~~ 1.spellcheck="true" -- 檢查單詞是否正確 2.當使用checkbox 和 radio 的時候使用name 屬性作為一組標記 ~~~  >[danger] ##### label標簽 ~~~ 1.用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點 ~~~ ~~~ 1.label 的for 屬性綁定的是 input 的id名稱 <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"> ~~~ >[danger] ##### 文本域 -- textarea ~~~ 1.如果需要輸入大量的信息，就需要用到textarea&gt;標簽。通過textarea控件可以輕松地創建多行文本輸入框，其基本語法格式如下： <textarea cols="每行中的字符數" rows="顯示的行數"> 文本內容 </textarea> ~~~ >[success] # 下拉菜單 -- select ~~~ 1.select -- 下拉菜單 2. <select></select>;中至少應包含一對<option></option>。 3. 在option 中定義selected =" selected "時，當前項即為默認選中項。 ~~~ >[success] # 表單域 -- form ~~~ 1.<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件 </form> 常用屬性： 1. Action 在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數據的服務器程序的url地址。 2. method 用于設置表單數據的提交方式，其取值為get或post。 3. name 用于指定表單的名稱，以區分同一個頁面中的多個表單。 注意： 每個表單都應該有自己表單域。 ~~~