HTML常用元素
阿新 • • 發佈：2020-12-16
HTML常用元素，如有遺漏請各種大佬補充
分享兩個html學習網站
W3C:http://www.w3school.com.cn/
MDN:https://developer.mozilla.org/zh-CN/
元素/標籤
1.a元素
(1)格式:<a href="url">內容</a> 超連結元素
(2)<a href="mailto:郵箱地址">傳送郵箱</a>
(3)<a href="tel:電話號碼">打電話</a>
(4)href="#" 空連結 target="_blank" 新視窗開啟目標連結 _self 預設值,當前視窗開啟
(5)錨點定位(點選標籤A,跳轉目標a)
使用id名標記跳轉目標 < 2.文字元素
(1)h1~h6 標題標籤
(2)p 段落標籤
(3)blockquote 整段的引用(引用別人的作品 自動首行縮排)
(4)q 小段文字的引用
(5)cite 對參考文獻的引用(文字斜體)
(6)abbr 對縮寫詞的引用
<abbr title="全拼">首字母拼</abbr> title為滑鼠放上去顯示內容
(7)<strong>加粗標籤 strong 重要的文字
(8)<i> 3.無語義元素
(1)div 表示頁面中的一塊區域
(2)span 僅用於給一小段文字新增樣式
(3)br 空元素 換行標籤
(4)hr 空元素 分割線
(5)pre 預格式化文字
(6)語義化標籤
<header>：頁首通常包括網站標誌、主導航、全站連結以及搜尋框。
< 4.常用實體字元
(1) 空格符 編號 
(2)> 大於符號> 編號<
(3)< 小於符號< 編號>
(4)& 並且符號& 編號&
(5)© 版權符號© 編號©
5.圖片
(1)格式:<img src="url" alt="替換文字">
(2)語義化標籤
<figute>
<img src="" alt="">
<!--圖片說明-->
<figcaption>
文字
</figcaption>
</figute>
(3)一張圖上點選不同區域跳轉不同地址
<img src="" alt="" usemap="#xx">
<map name="xx" id="xx">
<area shape="circle" coords="x,y,num" href="url"> 圓形 圓心座標和半徑
<area shape="rectangl" coords="x1,y1,x2，y2" href="url"> 矩形 左上角座標和右下角座標
<area shape="poly" coords="x1,y1,x2，y2，x3，y3 ···" href="url"> 多邊形
</map>
6.音訊 視訊
(1)<audio src="url" cantrols(顯示控制元件) loop(迴圈播放) autoplay(加載出來直接播放) preload(預備播放,如果使用 "autoplay"，則忽略該屬性。)></audio>
(2)<video src="url" cantrols(顯示控制元件) loop(迴圈播放) autoplay(加載出來直接播放) preload(預備播放,如果使用 "autoplay"，則忽略該屬性。)></video>
7.table 表格標籤（顯示資料）
(1)table>caption,thead,tbody,tfoot>tr>th(表頭單元格),td
th 表頭單元格
tr 表示一行
td 表示一個單元格
caption 表格標題
thead 表格頭部
tbody 表格正文
tfoot 表格腳註
(2)border-collapse=collapse 單元格間無距
border-spacing:10px 10px;行和單元格的邊框在橫向和縱向上的間距
合併單元格 rowspan 跨行合併| colspan 跨列合併——
(3)格式:
<table>
<caption>
標題
</caption>
<thead> //表頭
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody> //表格內容
<tr>
<td>A</td>
<td>B</td>
</tr>
</body>
</table>
8.列表標籤（佈局）
(1)ul(unorder list) 無序列表
ol(order list)有序列表
dl(defined list)自定義列表
(2)格式:
<ul><li></li><li></li></ul>
<ol><li></li><li></li></ol>
<dl><dt>名詞解釋</dt><dd>屬於名詞</dd></dl>
9.表單標籤（收集資訊）
(1)form表單域（收集資訊提交伺服器）
<form action="url"(表單資料提交地址) method="get/pust" name="">表單標籤</form>
(2)select 下拉列表
用法:<select mutiple #讓下拉列表變成多選,按住ctrl選擇多個>
<option selected="selected"(預設選中)>選項1</option>
<option>選項2</option>
...
</select>
(3)texterea 文字域(多行文字)
用法:<texterea cols='每行中顯示的字元數' rows='顯示的行數' name="" id="">
(4)控制元件
<input type="屬性" name="自定義文字" value="" placeholder="自定義文字"
size="大小" checked="checked" maxlength="數字"#控制最大字數
required #代表控制元件是必填項 readonly disabled>
1.placeholder="自定義文字" #提示文字,文字顏色為灰色,當用戶輸入內容後,提示內容會消失,對text、password、texterea都有效
2.checked="checked" 預設選中,用於單選和多選。
3.readonly 只讀 只對text、password、texterea有效
4.disabled 不能修改 針對所有
(5)控制元件型別 type
text--單行文字框、password--密碼框、radio--單選按鈕、checkbox--多選框、
button--普通按鈕、submit--提交按鈕、reser--重置按鈕、
image--影象式提交按鈕(必須包含src屬性)、file 檔案域(開啟檔案選擇)、color--選擇顏色、date--日期、range--體重、hidden--隱藏、
1.text別填寫value值
2.redio 使用時name一致
(6)label標籤 點選時被繫結的表單元素就會獲得輸入焦點
1.直接用label標籤包含表單元素
<label> 文字 :<inpit type="" name=""></label>
2.通過for id定位
<label for="xx"> 文字 </label>
<inpit type="" id="xx">