html標籤

一、圖片標籤（img）

　　<img  src="./images/pic.png" alt='圖片說明'  title='提示文字' >

二、連接標籤（a）

　　（1）跳轉

　　　　<a  href="http://www.baidu.com">跳轉到百度</a>

　　　　<a  href="http://www.baidu.com"  target="_blank">跳轉到新頁面打開連接地址</a>

　　　　target表示跳轉的目標，_blank表示在新的頁面中打開

　　（2）下載

　　　　<a  href="./html教程.doc"  download>下載html教程</a>

　　　　download後面不加名稱時，文件下載使用默認名稱

　　　　<a  href="./html教程.doc"  download="W3Chtml教程">下載W3Chtml教程</a>

　　　　download後面加上名稱時，文件下載使用download後面的名稱

　　（3）錨點

　　　　 <a  href="#goBottom">點擊連接跳到div標籤</a>

　　　　<div  id="goBottom"></div>

三、輸入框標籤（input）

　　（1）文本框（type = text）

 

　　　　 <input  type="text"  placeholder="請輸入用戶名"/>

　　　　屬性：placeholder用來設置 文本框提示文本的

　　（2）密碼框（type = password）

　　　　<input  type="password"   placeholder="請輸入密碼"/>

　　　　屬性：placeholder用來設置 文本框提示文本的

　　（3）單選框（type = radio）

　　　　<input  type="radio"  name="組名稱">

 

　　　　name值相同，說明2個單選按鈕是一組，這樣就能夠實現只能選一個

　　　　checked表示默認選中

 

　　　　<input  type="radio"  name="sex"  value="man'  checked>男

　　　　<input  type="radio"  name="sex"  value="woman">女

　　（4）複選框（type = checkbox）

　　　　<input  type="checkbox"  value="">

　　　　 checked表示默認選中

　　　　<input  type="checkbox"  value="henan">河南

　　　　  <input  type="checkbox"  value="beijing"  checked>北京

　　　　  <input  type="checkbox"  value="shanghai">上海

四、按鈕標籤（button）

 

　　<button>寫按鈕顯示的文本</button>

五、div標籤（div）

　　<div>塊級標籤，能夠將內容分紅一塊一塊的</div>

　　特色：獨佔一行，默認寬度佔滿屏幕，高度隨內容撐開

六、無序列表（ul）與有序列表（ol）

　　list-style: none;　　// 清除ul、ol標籤中的 圓點符號 和數字符號

　　 list-style:url(../img/aa.png) outside　　// outside表示符號顯示在li標籤外面

　　list-style:url(../img/aa.png) inside　 // inside表示符號顯示在li標籤裏面　　

七、外部樣式標籤（link）

　　<link  rel="stylesheet"  href="./css/style.css" />

　　 <link rel="shortcut  icon" href="favicon.ico">　　// 標題上的圖標

八、關聯標籤（label）

 

　　關聯標籤 通常關聯按鈕 或 文本框之類的標籤，關聯之後點擊label標籤就至關

 

　　於點擊的按鈕或文本框

　　第一種：<label>請輸入姓名：<input type="text"></label>

　　第二種：<label for="KK">請輸入姓名</label><input type="text" id="KK">

九、多行文本框（textarea）

　　<textarea  placeholder="請輸入留言"></textarea>

　　resize:both  寬度和高度均可以經過文本框右下角三角來進行調整

　　resize:horizontal  寬度能夠經過文本框右下角三角來進行調整

　　resize:vertical  高度能夠經過文本框右下角三角來進行調整

　　resize:none 寬度和高度都不能夠經過文本框右下角三角來進行調整

十、下拉列表標籤（select）

　　selected表示默認選中

　　<select>

　　　　<option>選擇城市</option>

　　　　<option>上海</option>

　　　　<option  selected>北京</option>

　　　　<option>深圳</option>

　　</select>

input、textarea、select 這些標籤在鼠標 選中或輸入的時候會出現 邊框，咱們能夠經過 outline:none去掉這個外框