html 標籤學習(續)
一、基礎標籤補充
1、div 標籤和span標籤 （沒有特別的樣式，常用）
div標籤用來定義一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
span標籤用來定義內聯(行內)元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
<div>我是div</div> <div>我是div</div> <div style="width:100%;height :80px;background-color:red"> <div style="width:50%;height :30px;background-color:yellow"></div> <div style="width:50%;height :50px;background-color:green"></div> </div> <span>我是span<span>我是span</span></span> <span>我是span</span> <span>我是span</span>
2、img標籤
<img src="圖片的路徑"alt="圖片未載入成功時的提示" title="滑鼠懸浮時提示資訊" width="寬"
height="高(寬高兩個屬性只用一個會自動等比縮放)">
建議儘量使用本地圖片！！！
3、a標籤 （超連結標籤）
<a href="http://www.oldboyedu.com" target="_blank" >點我</a>
(1)href屬性指定目標網頁地址。該地址可以有幾種型別：
-
-
- 絕對路徑跳轉：指向另一個站點（比如：href="http://www.baidu.com"）
- 相對URL - 指當前站點中確切的路徑（href="index.htm"）
- 錨URL:在本頁面跳轉（#top 、#id）
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#sb">跳到sb哪裡</a> <a href="#sb1">跳到sb1哪裡</a> <div style="width: 100%;height: 1600px;background-color: aqua;"></div> <p id="sb">來這裡呀</p> <div style="width: 100%;height: 1000px;background-color: red;"></div> <a name="sb1">come on!</a> </body> </html>錨的製作示例
(2)target屬性：
-
-
- _blank表示在新標籤頁中開啟目標網頁
- _ self表示在當前標籤頁中開啟目標網頁
-
3、列表
（1）無序列表（ul）
<ul type="disc"> <li>第一項</li> <li>第二項</li> </ul>
type屬性：
（1）disc（實心圓點，預設值）
（2）circle（空心圓圈）
（3）square（實心方塊）
（4）none（無樣式）
（2）有序列表（ol）
<ol type="1" start="2"> <li>第一項</li> <li>第二項</li> </ol>
type屬性： start是從數字幾開始
1 數字列表，預設值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
4、標題列表
<dl> <dt>標題1</dt> <dd>內容1</dd> <dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> </dl>
5、表格（重點）
表格是一個二維資料空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數字符號、預置文字和其它的表格等內容。
表格最重要的目的是顯示錶格類資料。表格類資料是指最適合組織為表格格式（即按行和列組織）的資料。
<table border='1'> <thead> #標題部分 <tr> #一行 <th>序號</th> #一個單元格 <th>姓名</th> <th>愛好</th> </tr> </thead> <tbody> #內容部分 <tr> #一行 <td>1</td> #一個單元格 <td>Egon</td> <td>槓娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> </table>
屬性:
- border: 表格邊框.
- cellpadding: 內邊距 （內邊框和內容的距離）
- cellspacing: 外邊距.（內外邊框的距離）
- width: 畫素 百分比.（最好通過css來設定長寬）
- rowspan: 單元格豎跨多少行
- colspan: 單元格橫跨多少列（即合併單元格）
效果:
二、特殊字元
| 內容 | 對應程式碼 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權標識（寫公司網站的時候會用到） | © |
| 註冊（一個圓圈裡面有個R） | ® |
簡單展示幾個：其他的請直接百度搜 html特殊符號對照表
三、標籤巢狀原則
1、塊級標籤：該標籤獨佔一行；如（p，h1-h6,hr、div）
內聯標籤：該標籤不獨佔一行;如（b, i,u,s）
2、通常情況：
-
-
- 塊級元素可以包含內聯元素和部分塊級元素；
- 內聯元素不能包含塊級元素，可以包含某些內聯元素
-
注意：p標籤比較特殊，巢狀的時候巢狀部分有多少部分資料就顯示多少段。
四、input 標籤
1、使用者輸入 type="text"
2、密碼（密文）輸入：type="password"
3、日期輸入：type="data"
4、單選框：type="radio"
5、複選框：type="checkbox"
6、提交：type="submit"
7、普通按鈕：type ="button"
8、重置：type="reset"
9、隱藏按鈕：type ="hidden"
10、檔案：type="file"
表格彙總：
| type屬性值 | 表現形式 | 對應程式碼 |
|---|---|---|
| text | 單行輸入文字 | <input type=text" /> |
| password | 密碼輸入框（不顯示明文） | <input type="password" /> |
| date | 日期輸入框 | <input type="date" /> |
| checkbox | 複選框 | <input type="checkbox" checked="checked" name='x' /> |
| radio | 單選框 | <input type="radio" name='x' /> |
| submit | 提交按鈕 | <input type="submit" value="提交" /> #傳送瀏覽器上輸入標籤中的內容，配合form表單使用，頁面會重新整理 |
| reset | 重置按鈕 | <input type="reset" value="重置" /> #頁面不會重新整理，將所有輸入的內容清空 |
| button | 普通按鈕 | <input type="button" value="普通按鈕" /> |
| hidden | 隱藏輸入框 | <input type="hidden" /> |
| file | 文字選擇框 | <input type="file" /> （等學了form表單之後再學這個） |
屬性說明：
- name:表單提交時的“鍵”，注意和id的區別
- value：表單提交給伺服器的時對應項的值
- type="button", "reset", "submit"時，為按鈕上顯示的文字年內容
- type="text","password","hidden"時，為輸入框的初始值
- type="checkbox", "radio", "file"，為輸入相關聯的值
- checked：radio和checkbox 設定預設選中值
- readonly：text和password設定只讀
- disabled：設定不可更改，相當於凍結輸入視窗
五、form標籤（實現使用者與伺服器互動）
**記住form表單裡面有兩個屬性：action控制往哪裡提交資料、method控制用什麼方式提交。
1、功能：用於向伺服器傳輸資料，從而實現使用者與伺服器的互動
表單中可以包含input標籤，比如：文字欄位、複選框、單選框、提交按鈕等
表單還可以包含textarea、select、fieldset和 label標籤。
2、表單屬性大全
| 屬性 | 描述 |
|---|---|
| accept-charset | 規定在被提交表單中使用的字符集（預設：頁面字符集）。 |
| action | 規定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規定瀏覽器應該自動完成表單（預設：開啟）。 |
| enctype | 規定被提交資料的編碼（預設：url-encoded）。enctype="multipart/form-data" |
| method | 規定在提交表單時所用的 HTTP 方法（預設：GET）。 |
| name | 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。 |
| novalidate | 規定瀏覽器不驗證表單。 |
| target | 規定 action 屬性中地址的目標（預設：_self）。_blanck |
3、簡單的盜號原理
method=“get"
method="post"
時常聽到別人號被盜了，被盜的原理應該就是在這裡。當你登陸別人的私密連線的時候，你的資訊就在別人的伺服器接收到了你的賬號密碼的資訊，他們將資訊提取出來，就可以登陸你的賬號了。私密連結最好不好開啟哦。
4、form書寫規範
5、檔案提交資訊
六、select 標籤 （下拉選擇框）
<form action="http://127.0.0.1:8001" method="post"> <select name="city" id=""> <option value="1">北京</option> <option value="2" selected="selected">深圳</option> <option value="3">上海</option> </select> <input type="submit" value="提交"> </form>select 程式碼
七、labal標籤
1、定義：<label> 標籤為 input 元素定義標註（標記）如果不用這個label給input標籤一個標記，input會變黃
2、標籤新增的兩種方法
方法一：新增id索引
方法二：把需要新增的內容包裹在label標籤內部
八、text多行文字
<textarea name="memo" id="memo" cols="30" rows="10"> 預設內容 </textarea>
屬性說明：
- name：名稱
- rows：行數 #相當於文字框高度設定
- cols：列數 #相當於文字框長度設定
- disabled：禁用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://127.0.0.1:8001" method="get"> <div> <!--給id="uname"的元素新增標籤--> <label >使用者名稱： <input type="text" name="username" placeholder="此處賬戶輸入" > </label> </div> <div>密碼: <input type="password" name="passwd" > </div> <div>日期: <input type="date" name="date"> </div> <div>時間: <input type="time" name="time"> </div> <div>單選框: <input type="radio" name="sex" value="1"> 男 <input type="radio" name="sex" value="2"> 女 </div> <div>複選框： <input type="checkbox" name="hobby" value="1"> 女 <input type="checkbox" name="hobby" value="2">電影 <input type="checkbox" name="hobby" value="3"> 人妖 <input type="checkbox" name="hobby" value="4"> 大寶劍 </div> <!--提交--> <div>請選擇城市:</div> <!--<select name="citys" id="" multiple>--> <select name="citys" id=""> <option value="1">深圳</option> <option value="2" selected>北京</option> <option value="3">上海</option> </select> <div> <input type="submit" value="確認"> </div> <!--button:--> <div> <input type="button" value="普通按鈕"> </div> <div> <input type="reset" value="重置sb"> </div> <div> <input type="hidden" value="alex is a big boss" > </div> <div> <input type="file" > </div> </form> <!--下拉選擇框--> <form action="http://127.0.0.1:8001" method="post"> <select name="city" id=""> <option value="1">北京</option> <option value="2" selected="selected">深圳</option> <option value="3">上海</option> </select> <div> <textarea name="textbox" id="tt" cols="30" rows="10"></textarea> </div> <div><input type="submit" value="提交"></div> </form> </body> </html>input、select、form、textarea演示程式碼