html常用標簽學習筆記
阿新 • • 發佈：2018-04-01
打開 咖啡 名稱 name 後臺 eset 指示 必須 間隔
type=‘password‘時，是一個密碼輸入框
；input如果有value屬性,則作為輸入框的默認值；
type=‘button‘時，是一個按鈕
，這種按鈕主要是負責本地的“按鈕事件”
type=‘submit‘時，是一個提交表單的按鈕，主要負責向後臺提交表單，
,它可以提交表單form裏面的內容 ；
type=‘radio‘是一個單選框【name的值相同影響他們不能復選，只能單選】，
，如果需要有提示內容，需要在標簽後面填寫，value只是代表選定之後提交到後臺的結果
type=‘checkbox‘是一個復選框，
，如果需要有提示內容，需要在標簽後面填寫，value只是代表選定之後提交到後臺的結果
本文內容：
- 常見標準屬性
- p
- div
- span
- h系列
- input
- label
- form
- table
- textarea
- select
- a
- img
- ul
- ol
- 換行、水平線標簽
- 常見標準事件屬性
PS：html5新增的幾個標簽也比較火，後續可能會在其他博文補充。
首發日期：2018-04-01
常見標準屬性：
- id: id一般來說是唯一的（不唯一是不符合規定的），因為是唯一的，所以可以特定的標識某一個標簽。如果需要特定的使用某一個標簽，可以定義id
- class: 是標簽的類名，與id不同的是，class是可以重復的，一般用來用類選擇器選擇“某一些”標簽來定義css樣式
- style: 定義標簽的樣式
- 其他。。
p:
介紹：
- p標簽用來定義段落，一般會用一片空白來代表段落的結束，而且還會有不同段落之間還有一定間距。
- 效果：
屬性：p標簽沒有什麽特別的屬性，主要使用的屬性都是通用屬性
示例：
<p>一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一 大段文字一大段文字一大段文字一大段文字 一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字 一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
</p>
補充：
- 由於是段落，所以會認為是一起的文本，所以即使被p標簽包裹的是多行文本，也會忽略我們進行的換行。
div:
介紹：
- 有點類似p標簽，但沒有p標簽的自帶間隔這類屬性；一般用作定義“區塊”（這片區塊內容是這般這般）
屬性：div標簽沒有什麽特別的屬性，主要使用的屬性都是通用屬性
示例：
<div> 一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一 大段文字一大段文字一大段文字一大段文字 一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字 一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字</div>
span:
介紹：
- 有div有點類似，但這是一個行內標簽，定義的區塊只是行內的一塊。
屬性:span標簽沒有什麽特別的屬性，主要使用的屬性都是通用屬性
示例：
<span>一段文字</span><span>一段文字</span>
h系列：
介紹：
- 用來定義標題，每種標題都有固定的文本樣式
- h1用來定義一級標題
- h2用來定義二級標題
- h3用來定義三級標題
- h4用來定義四級標題
- h5用來定義五級標題
- h6用來定義六級標題
示例：
<h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6>
input ：
介紹：
- input是一個輸入框 （文本輸入框，選擇框，日期選擇框，文件選擇框等等），input的type屬性決定著是什麽輸入框
type屬性：
- 當type=‘text‘時，是一個明文輸入框
；
- 示例：
<input type="text" >
- 示例：
；input如果有value屬性,則作為輸入框的默認值；
- 示例：
<input type="password" >
，這種按鈕主要是負責本地的“按鈕事件”
- 示例：
,它可以提交表單form裏面的內容 ；
- 示例：
<input type="submit">
，如果需要有提示內容，需要在標簽後面填寫，value只是代表選定之後提交到後臺的結果
- 示例：
，如果需要有提示內容，需要在標簽後面填寫，value只是代表選定之後提交到後臺的結果
- 示例：
- type=‘data‘是一個日期選擇框，
- 示例：
<input type="date" />
- 示例：
- type=‘file‘,需要form裏面有enctype=‘multi‘屬性配合才能上傳文件。
- 示例：
<input type="file" />
- 示例：
-
input的其他常見屬性：
- value:定義input框的值
- 對於text", "password"，是定義input框的默認值
- 對於"button", "reset", "submit" ，是定義按鈕上的顯示的文本
- 對於"checkbox", "radio", "image" - 定義與輸入相關聯的值 (比如radio中點擊一個選項代表返回後臺的是一個什麽值)
- 對於text", "password"，是定義input框的默認值
- name:定義 input 標簽的名稱，可以用name來指示代表哪個input框，可以幫助後臺獲取指定input裏面的值
- 對於單選框，多個input框的name必須相同，不然無法”單選“
- readonly:規定input框是只讀的，不可寫
- checked：勾選選項，與‘checkbox‘或‘radio‘配合使用，checked="checked" 代表勾選上input框代表的指定選項
label:
介紹：
- label只是一個靜態文本,通常用來為input框進行標註。
屬性：
- for:用於將label綁定到input框，可以使點擊label相當於點擊對應的input框 for的值應為input框的id
<label for="t1">用戶名</label> <input id="t1" type="text" /> <label for="c1">男</label> <input id="c1" type="radio" checked="checked" />
form:
介紹：
- 定義表單，所有向後臺傳輸的數據都定義在表單中
屬性：
- method:定義向後臺傳輸數據的形式
- action:定義傳輸數據的方向
- target:定義打開提交表單後打開網頁的方式
- enctype:規定表單數據在發送到服務器之前應該如何編碼【傳輸文件時enctype="multipart/form-data"】
示例：
<form src="login.html" method="post"> <label for="t2">用戶名：</label> <input id="t2" type="text" /> <label for="t3">密碼：</label> <input id="t3" type="text" /> <input type="submit" value="提交表單" /> </form>
table:
介紹：
- table用來定義表格
子標簽：
- thead:定義“表頭”
- tr: thead中定義行
- th:thead中定義列，實際上也可以在thead外定義，比如有些是垂直表頭
- tbody:定義"表格體“
- td ：代表列
- tr：代表行
屬性：
- border ：設置邊框的寬度
- rowspan ：設置表格的行跨度
- colspan：設置表格的列跨度
- width:設置整個表格的寬度，但不建議使用，應該由css決定樣式
補充：
- 如果我們沒有定義tbody，網頁也會默認解析添加上，但不會添加thead
- 表格默認是沒有邊框，需要添加
- 對於沒有內容的，又想占據一個表格空間的，可以使用 
示例：
<table border="2" width="200"> <thead> <tr> <th>id</th> <th>姓名</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td rowspan="2">8班</td> <td>小明</td> <td>男</td> </tr> <tr> <td>小2</td> <td>男</td> </tr> </tbody> </table>
textarea:
介紹：
- 是一個多行文本輸入框
屬性：
- rows:規定文本區內的可見寬度。
- cols:規定文本區內的可見行數。
- wrap:設置輸入框的換行模式
- readonly:規定多行文本框是只讀的，不可寫 的
示例：
<textarea rows="4" cols="30"></textarea>
補充：
- 默認值：textarea的默認值要定義成標簽的內容
select:
介紹：
- 定義一個下拉選單
子標簽：
- option ：定義下拉選單
- optgroup：定義下拉選單組
屬性：
- size: 規定下拉列表中可見選項的數目。
- multiple：是否允許多選
- optgroup的label屬性：用於定義下拉選單的組名
- option標簽的屬性
- value：定義選中選項後傳到服務器的值
- selected:定義選項是否默認選擇,【selected="selected"】
示例：
<select name="cars"> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> </select> <select name="cars" size="2"> <optgroup label="文件"> <option value="1" selected="selected">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> </optgroup> </select>
a:
介紹：
- a標簽用來定義”錨點“，一般用來”跳轉“，可以跳轉到其他網頁，也可以跳轉到源網頁的其他位置
屬性：
- href ：定義超鏈接，定義跳轉的”方向“，為地址的時候會跳轉到指定地址；為id時，會跳轉到原網頁的指定id的標簽的位置，為name時，會跳轉到原網頁的指定name的a標簽的位置(都用#來做前綴，下面有示例)
- target：定義如何打開超鏈接 ，默認是在本標簽頁中打開
- _blank:代表在新窗口中打開
示例：
<a href="https://www.baidu.com" target="_blank">跳轉到百度</a> <a href="#a1">按我下去</a> <div > <a name="a2">大段文字</div> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <div id="a1"> 大段文字</div> <a href="#a2">按我上去</a>
補充：
- 還有功能性鏈接，比如點擊後調用本地郵件軟件發郵件
img:
介紹：
- img標簽用來在網頁中插入一個圖片
屬性：
- src: 定義圖片的源，可以為url，可以為本地地址
- alt: 定義如果沒有圖片的時候，顯示的替代文本
- border:定義圖片的邊框
示例：
（下面代碼實現需要圖片）
<img src="一個錯誤的路徑.gif" alt="假裝有圖片"/> <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" border="1">
ul:
介紹：
- 定義無序列表。
子標簽：
- li：定義列表項
屬性：無常用屬性或已不建議使用。
示例：
<ul> <li>1</li> <li>2</li> <li>3</li> <li>一個嵌套列表 <ul> <li>4.1.1</li> </ul> <ul> <li>4.3.1</li> </ul> </li> </ul>
補充：
- 列表可以嵌套：
<ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶</li> </ul> </li> <li>牛奶</li> </ul>
ol:
介紹：
- 定義有序列表
子標簽：
- li：定義列表項
屬性：
- type:定義順序,A,a ,I，i,1等順序
示例：
<ol> <li>1</li> <li>2</li> <li>3</li> <ol> <li>4.1</li> <li>4.2</li> <li>4.3</li> </ol> <li>5</li> </ol>
換行、水平線標簽：
- br: 換行
- hr:定義一條水平線
常見標準事件屬性：
- onclick: 定義標簽被點擊事件，值是一個函數，使得點擊該標簽就調用對應函數。
- ondblclick：定義標簽被雙擊事件，值是一個函數，使得雙擊該標簽就調用對應函數。
- onfucus: 定義標簽獲得焦點事件，值是一個函數，使得標簽獲得焦點事件就調用對應函數。
- onblur： 定義標簽失去焦點事件，值是一個函數，使得標簽失去焦點事件就調用對應函數。
- 其他。。。。
<input type="button" value="button" onclick="alert(555)">
html常用標簽學習筆記