HTML
1.什麼是html
是超文本標記語言，它規定了自己的語法規則，用來表示比“文本”更豐富的意義，比如圖片，表格，鏈接等。瀏覽器軟件知道HTML語言的語法，目前互聯網上的絕大部分網頁都是使用HTML編寫的。
2.html的結構
文件名：xxx.html或者xxx.htm，但是通常用xxx.html。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>：html5的文檔聲明
<html>：所有的html都要有這個標籤，表示文檔的開始和結束
<head>：用來存放html中的基本屬性信息，比如標題，編碼等
<body>：用來存放html中的頁面數據，在頁面中是可以顯示的
<title>：指定網頁的標題
<meta charset=UTF-8/>：指定瀏覽器的解碼格式
3.HTML語法
HTML是一門標記語言, 標記也叫做元素/標籤, 標籤分爲開始標籤和結束標籤, 如果標籤內沒有內容要修飾, 可以合併一個自閉標籤.
如: <meta/> <br/> <hr/> <input/> <img/>等等
註釋: <!--註釋內容 -->
如何在網頁中做一個空格或者做一個換行?
由於在網頁中多個連續的空白字符會被當成一個空格來顯示, 所以
如果要做一個空格, 可以用轉義字符 來代替;
如果要做一個換行, 可以用<br/>標籤來代替;
HTML 和 XML的區別:
xml對語法的要求非常嚴格, 如區分大小寫, 標籤不能交叉嵌套,標籤一定要關閉等
HTML對語法的要求非常不嚴格. 如: 標籤名可以大小寫混用, 標籤即使沒有結束或者交叉嵌套, 可能也會被瀏覽器正常解析(最好按照規範來書寫!!)
xml中允許用戶自己定義標籤
HTML中的標籤都是預定義好的, 不允許用戶自己定義
…
4.HTML標籤
通過不同的標籤，HTML文檔可以包含不同的內容。比如文本，鏈接，圖片，列表，表格，表單等。
可以通過W3Cschool來學習標籤，W3Cschool是一個專業的編程入門學習及技術文檔查詢應用
4.1.文本標籤<font></font>
文本標籤font，有三個屬性：
size：大小，範圍爲1-7
face：字體
color：顏色，有三種形式，英文、16色、RGB（RGB顏色部分瀏覽器不支持）
HTML文檔內容如下
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8/> <title>我是第一個網頁</title> </head> <body> <font size="1" face="楷體" color="red">我是font標籤</font><br/> <font size="5" face="楷體" color="#ff0000">我是font標籤</font><br/> <font size="7" face="楷體" color="rgb(255,0,0)">我是font標籤</font><br/> </body> </html> |
4.2.標題標籤<h1>--<h6>
標題標籤，從h1-h6依次變小，只有一個屬性
align：文本的位置,left居左（默認），center居中，right居右
HTML文檔內容如下
<h1 align="left">我是標題標籤</h1> <h2 align="center">我是標題標籤</h2> <h3 align="right">我是標題標籤</h3> <h4>我是標題標籤</h4> <h5>我是標題標籤</h5> <h6>我是標題標籤</h6> |
4.3.列表標籤<ul>/<li>
列表標籤:ul：定義一個無序標籤，無序指列表前無編號，屬性有：
type：表示列表前面的形狀，取值有disc（默認）：實心圓，circle：空心圓，square：方塊
li：定義列表中的項
HTML文檔內容如下
<ul type="disc"> <!-- --> <li>中國</li> <li>美國</li> <li>英國</li> <li>小日本</li> </ul> |
4.4.圖片標籤<img …/>
圖像標籤img：屬性
src:圖片網址或者路徑
width:寬度，可以是像素，也可以是百分比
hight：高度
alt：圖像的代替文本
border：邊框的寬度 px
HTML文檔內容如下
<img src="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg" width="500px" height="40%" alt="菊花"/> |
4.5.超鏈接標籤<a …></a>
超鏈接標籤a,屬性
href:用來指定跳轉網址
title：鼠標移到改標籤時所顯示內容
target：在何處打開目標url，常用有_self:當前頁面打開，_blank:新頁面打開，_top:回到頂部
如果需要回到指定位置，需要在指定位置加入<a name="place"/>
HTML文檔內容如下
<a href="http://www.tmooc.cn" title="一分鐘幫你搞定java" target="_blank">學習就上tmooc</a> <br/><br/> <a href="" target="_top">回到頂部</a> <a href="#place">回到指定位置</a> |
4.6.表格標籤<table>/<tr>/<td>
table – 用來定義一個表格
tr – 用來定義表格中的行
td – 用來定義表格中的單元格
th – 用來定義表頭
table屬性:
border：邊框
cellspacing：單元格之間的距離
cellpadding：邊框和內容之間的距離
bgcolor：背景顏色
width：定義表格的寬度
align：定義表格的位置
tr屬性:
bgcolor：背景顏色
align：定義表格的位置
td屬性:
bgcolor：背景顏色
align：定義表格的位置
width：定義單元格的寬度
height：定義單元格的高度
colspan：定義單元格橫跨的列數
rowspan：定義單元格豎跨的行數
</caption>-->標題
HTML文檔規則表格內容如下
<h3 align="center">我是一個表格</h3> <table border="1" cellspacing="0" cellpadding="10" bgcolor="pink" width="600px" align="center"> <!--<caption>我是表格</caption>--> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> <th>表頭4</th> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> </tr> </table> |
HTML文檔不規則表格內容如下
<h3 align="center">我是一個表格</h3> <table border="1" cellspacing="0" cellpadding="10" bgcolor="pink" width="600px" align="center"> <!--<caption>我是表格</caption>--> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> <th>表頭4</th> </tr> <tr> <td width="70" height="50">11</td> <td>12</td> <td bgcolor="red">13</td> <td>14</td> </tr> <tr> <td colspan="3" align="center">21</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td rowspan="2">34</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> </tr> </table> |
4.7.表單標籤<form>
4.7.1 瀏覽器向服務器發送數據的兩種方式
(1) 通過超鏈接向服務器發送數據
https://www.baidu.com/?user=zhangsan&password=123&like=lanqiu&like=zuqiu
其實就是在超鏈接後面通過?拼接參數將數據帶給服務器
參數和參數值之間用等號分隔, 參數可以有多個, 多個參數之間用&分隔, 並且參數的名字可以重複
(2) 通過表單向服務器發送數據
其實裏通過表單及表單項標籤, 用戶可以通過表單項輸入數據, 通過提交表單向服務器發送數據.
4.7.2 form標籤
<form action=”http://www.baidu.com” method=”GET”></form>
action 必須存在的屬性, 用來指定表單提交的目的地地址
method 可選屬性, 用來指定以何種方式來提交表單, 如果不指定, 默認是GET提交
HTTP協議中規定了7種提交方式, 其中5種都不常用, 只用GET和POST.
只有使用表單, 並且明確的指定了提交方式爲POST時, 纔是POST提交, 其他方式都是GET提交
GET和POST提交的區別: 主要區別在於請求參數傳輸過程的不相同
GET提交:
通過在地址欄拼接參數將數據發送給服務器
數據顯示在地址欄, 非常不安全
通過地址欄發送數據, 數據量不能太大, 不能超過1kb或者4kb
POST提交:
通過底層的流將數據發送給服務器
沒有將數據顯示在地址欄, 相對更安全
沒有通過地址欄發送數據, 數據量理論上沒有限制
4.7.3 表單中的項
表單中可以有多個輸入項，輸入項必須有name屬性纔可以被提交，如果輸入項沒有name屬性，則表單在提交時會忽略它
(1)<input> 輸入框
type屬性: type屬性的值可以有多個, 當type屬性的值不同時, input標籤的功能效果也不同, 例如:
type=”text” 文本輸入框
type=”password” 密碼框
通過size屬性設置框的寬度
type=”radio” 單選框 多個單選框的name屬性值必須一致纔可以單選, 並且需要通過value屬性指定被提交時的值
type=”checkbox” 複選框(多選框) 需要通過value屬性指定被提交時的值
type=”submit” 提交按鈕 用來提交表單
type=”reset” 重置按鈕, 將表單項重置到初始時的狀態
type=”button” 普通按鈕
type=”file” 文件上傳項, 可以選擇文件進行上傳
type=”hidden” 隱藏域，一般在信息修改的時候用來隱藏用戶id
通用的屬性:
readonly=”readonly” 設置表單項爲只讀, 只能讀不能寫, 但是可以被提交
disabled=”disabled” 設置表單項爲禁用, 不能被提交.
(2)<textarea> 文本域
<textarea cols=”30” rows=”5”>請輸入個人信息…</textarea>
屬性:
cols 設置列數, 即輸入框的寬度
rows 設置行數, 即輸入框的高度
(3)<select> <option>標籤
select 定義一個下拉選框
option 用來定義下拉選框中的選項
select屬性:
name屬性 -- name指定該項提交時參數的名字
size屬性 –- 指定可見選項的個數
multiple –- 指定支持多選
4.7.4.HTML中內容
<!--表單標籤--> <h3 align="center">註冊表單</h3> <form action="http://www.baidu.com" method="post"> <table border="1" bordercolor="red" cellspacing="0" cellpadding="10" align="center"> <tr> <td>用戶名:</td> <td> <input type="text" name="username"/> </td> </tr> <tr> <td>密碼:</td> <td> <input type="password" name="password"/> </td> </tr> <tr> <td>確認密碼:</td> <td> <input type="password" name="password2"/> </td> </tr> <tr> <td>手機:</td> <td> <input type="text" value="+86" readonly="readonly" size="3"/> <input type="text" name="phone"/> </td> </tr> <tr> <td>暱稱:</td> <td> <input type="text" name="nickname"/> </td> </tr> <tr> <td>性別:</td> <td> <input type="radio" name="sex" value="man"/>男 <input type="radio" name="sex" value="women"/>女 </td> </tr> <tr> <td>愛好:</td> <td> <input type="checkbox" name="like" value="lanqiu"/>籃球 <input type="checkbox" name="like" value="zuqiu"/>足球 <input type="checkbox" name="like" value="taiqiu"/>檯球 </td> </tr> <tr> <td>出生地:</td> <td> <select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">廣州</option> <option value="shenzhen">深圳</option> </select> </td> </tr> <tr> <td>頭像:</td> <td> <input type="file" name="photo"/> </td> </tr> <tr> <td>個人描述:</td> <td> <textarea cols="30" rows="5" name="description"></textarea> </td> </tr> <tr> <td>驗證碼:</td> <td> <input type="text" name="valistr"/><img src="E:\web\html\resouce\vc.jpg" alt="驗證碼" /> </td> </tr> <tr> <td colspan="2" align="center"> <input type="button" οnclick="alert('這裏是註冊須知')" value="註冊須知"/> <input type="submit" value="註冊"/> <input type="reset"/> </td> </tr> </table> </form> |
4.8. div、span、p標籤
這三個標籤都可以看作是一個容器, 可以用來包裹其他的 html內容, 被包裹起來的內容形成了一個組, 可以通過css樣式對這一組的內容統一設置樣式.
div: 獨佔一行，標籤可以把文檔分割爲獨立的、不同的部分。
span：並非獨佔一行，多個span會並排排列，直到一行排滿纔會換行，標籤被用來組合文檔中的行內元素。
p：獨佔一行，但是元素會自動在其前後創建一些空白，是段落標籤。
元素的類型:
塊級元素: 默認情況下獨佔一行的元素, 如: div p h1~h6 br hr
行內元素: 默認情況下, 多個行內元素可以處在同一行。如：span input font…
