2018-05-10 HTML常用標簽簡介
阿新 • • 發佈：2018-05-12
con sub 服務器 也不會 radi btn type 完數 單元素 2.
4.
HTML常用標簽簡介
MDN中所列出的html標簽列表
1. 一些簡單的常見標簽
<h1>- <h6>標題元素<p>段落元素<ul>無序列表<ol>有序列表<small>不重要的文字<strongv重要的文字<kbd>鍵盤輸入元素<video>視頻元素audio>音頻元素<svg>可縮放矢量圖形<div>區塊元素<span>短語內容
2. <a>標簽 &&<ifram>
<a>錨點，在http中進行get請求，有以下常用屬性
（1）href 屬性：必需屬性，為錨定義一個超文本鏈接來源
==> href="qq.com" 會當成文件打開（因未設定打開協議）
==> href="//qq.com" 無協議絕對地址，當前時什麽協議就以什麽協議打開
==> href="index.html" 相對路徑，以ftp協議
==> href="#XX" 定義當前頁面的錨點
==> href="?xx=yy" 查詢參數
==> href="javascript:alert(‘1‘)" JavaScript偽協議
==> href="javascript:;" 為達到點擊鏈接不做跳轉的效果
（2）target 屬性：該屬性指定在何處顯示鏈接的資源，可以與<iframe>標簽連用，指向iframe的name
==> target=_blank 在新的頁面打開
==> target=_self 在自身打開
==> target=_top 若在iframe中，在其最外層打開
==> target=_parent 若在iframe中，在其上一層iframe打開
（3）download 屬性：當網頁的響應Content-Type設置為“application/octet-stream”時，可以不用download
當Content-Type設置為“text/html”時，若想下載如<a href="index.html" download>link</a>必須用download<iframe>內聯框架元素，有以下常用屬性
==> src 屬性 iframe指向的路徑
==> name 屬性 與標簽配合使用，用於標簽的指向鏈接
==> frameborder 屬性 iframe標簽外邊框，一般設置為0
3. 表單標簽
註：表單元素若要正常提交至服務器，需有name屬性
<form>在http中一般進行post請求
==> action 屬性 用於制定表單提交的目標
==> method 屬性 用於表示表單以何種方式發至目標
==> target 屬性 同標簽的target<input type="submit">&&<input type="button">&&<button>
PS：一個表單中，必須得有提交按鈕，否則表單數據無法提交
==><input type="submit">提交按鈕，輸入完數據 Enter 即可上傳表單數據
==><button>一個表單中若沒有提交按鈕，僅有button標簽，該標簽會自動升級為submit
==><input type="button">這麽寫就僅僅是一個普通的按鈕，即使表單沒有提交按鈕也不會自動升級<input typt="checkbox>"&&<label>
==><input type="checkbox">復選框
==> 達到點擊文字就可以選中復選框時可以和<label>連用，如：
<input type="checkbox" id="btn"> <label for="btn">apple</label>
不過常用下面這種寫法：
<label>apple<input type="checkbox"></label><input type="radio">單選框，也可以同復選框一樣與<label>標簽連用
若達到幾個單選框只能選擇一個的效果，要設置一樣的name屬性<select>下拉表單，常用的有name屬性，multiple（可多選）屬性<option>下拉表單中的選項，有以下常用屬性
==><optgroup>為多個option標簽劃分一個組，用label屬性設置組名，如:
==><optgroup label="x1"> <option value="1">10</option> <option value="2">12</option> </optgroup><option>標簽的常用屬性有value,設置選項上傳至服務器的值：
disabled 屬性，設置選型不可選；
selected屬性，設置該選項默認選中；<textarea>多行文本域
==> 雖然該標簽有cols屬性和rows屬性分別控制列數和行數，但都不是很準確，所以一般<texrtarea>標簽的大小用css的height和width來控制
==> 在css中，還可以設置其resize=none;用來控制該多行文本域不可被用戶拉動，防止影響網頁布局
4. <table>表格元素
-
表格標簽中只能有
<thead>、<tbody>、<tfoot>三種標簽。 - 如果沒有
<thead>和<tfoot>標簽，所有的內容默認添加在<tbody>標簽中，如果沒有<tbody>標簽，瀏覽器會自動添加。 - 在設置了
<thead>、<tbody>、<tfoot>三種標簽後，三種標簽在代碼中的順序將不會影響網頁渲染的效果，永遠以<thead>、<tbody>、<tfoot>順序進行展示。 <td>表示表的數據、<th>表示表頭(默認樣式包括加粗和居中)，<tr>表示每一行- 所有的
<td>、<th>標簽都要在<tr>標簽裏面 <colgroup>(有閉合標簽)、<col>(空標簽)
代碼實例參上，以觀標簽效果<table border=1> <colgroup> <col width=100> <!-- 控制第一列的寬度--> <col width=100 bgcolor="blue"><!-- 控制第二列的寬度和背景顏色--> <col width=100> <col width=100> </colgroup> <thead> <tr> <th>h1</th> <th>h2</th> <th>h3</th> <th>h4</th> </tr> </thead> <tbody> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tbody> <tfoot> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </tfoot> </table>css中，設置標簽的邊框合並
table{ border-collapse:collapse; }5. 常用的內容分區語義化標簽
<article>表示文檔、頁面、應用或網站中的獨立結構<aside>其通常表現為側邊欄或者嵌入內容<footer>表示最近一個章節內容或者根節點元素的頁腳<header>表示一組引導性的幫助，可能包含標題元素<nav>導航欄，描繪一個含有多個超鏈接的區域<section>表示文檔中的一個區域（或節），比如，內容中的一個專題組，一般來說會有包含一個標題<dl>、<dt>、<dd>
==><dl>是一個包含術語定義以及描述的列表
==><dt>用於在一個定義列表中聲明一個術語
==><dd>用來指明一個描述列表<dl>元素中一個術語的描述<main>表示文檔的主體內容，由與文檔直接相關，或者擴展於文檔的中心主題、應用的主要功能部分的內容組成。<address>可以讓作者為它最近的<article>或者<body>]祖先元素提供聯系信息。在後一種情況下，它應用於整個文檔。
2018-05-10 HTML常用標簽簡介