作者：劉婧怡
時間：2019.01.30
主機環境：MacBookPro
HTML語言
1. HTML簡介
- 什么是html？
-- HypeText Markup Language：超文本標記語言，網頁語言
** 超文本：超出文本的范疇，使用html可以輕松實現這樣的操作
** 標記：html所有的操作都是通過標記實現的，標記就是標簽，寫法 ：<標簽名稱>
** 網頁：瀏覽器打開的
- 第一個html程序
-- html的后綴是 .html 或 .htm
** 在MAC中創建 HTML 文件
· 在 Mac 上的“文本編輯”應用中，選取“文件”>“新建”，然后選取“格式”>“制作純文本”。
· 輸入 HTML 代碼。可直接輸入
這是一個html程序
· 選取“文件”>“存儲”，鍵入一個名稱，后跟擴展名“.html”（例如，輸入“index.html”），然后點按“存儲”。
· 當提示要使用的擴展名時，請點按“使用 .html”。
· 若打開后出現亂碼情況，則在程序中加入
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
· 保存好之后，直接雙擊打開為網頁形式。
-- 利用標簽修改html代碼
** 在上個代碼的基礎上加入<font>標簽
<font>這是一個html程序</font>
對比之后發現並沒有變化。
** 若想改變字體和顏色，則加入size和color標簽
<font size="5" color="red">這是一個html程序</font>
此時字體為5，顏色為紅色，如下圖所示
- html的規范（遵循）
-- 一個html文件要有開始和結束的標簽
** 開始：<html>
** 結束：</html>
-- html包含兩個部分
** 設置相關信息：
<head> 設置相關信息,如<title>這是一個標題</title>，此時將修改標題 </head>
** 顯示在網頁上的內容：
<body> 顯示在頁面上的內容都寫在body里面，如<font size="5" color="red">這是一個html程序</font> </body>
當前頁面為
-- html里要有開始標簽也要有結束標簽，即成對出現
-- html不區分大小寫
-- 有些標簽沒有結束標簽
** 換行標簽（在標簽內結束）：<br/>
** 水平線（在標簽內結束）：<hr/>
- html的操作思想（重要）
-- 使用標簽改變顯示效果
** 網頁中有很多數據，不同的數據可能有不同的顯示效果，這個時候需要使用標簽把操作和數據封裝起來，通過修改標簽的屬性值實現標簽內數據樣式的變化。
** 一個標簽相當於一個容器，想要修改容器內數據的樣式，只需要改變容器的屬性值，就可以實現容器內數據樣式的改變
<html> <head> <title>這是一個標題</title> </head> <body> <font size="5" color="red">這是一個html程序1</font><br/> <font size="5" color="green">這是一個html程序2</font><br/> <font size="5" color="yellow">這是一個html程序</font><br/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
2. 文字標簽和注釋標簽
- 文字標簽
-- 修改文字的樣式
** 用<font></font>
** 屬性：
size：文字的大小，取值范圍為1 - 7，超出7默認為7。
color：文字的顏色，兩種表示方式：英文單詞（red，green...) & 使用十六進制數表示（RGB，如#ffffff）
- 注釋標簽
-- 注釋寫法
<!-- 注釋 -->（英文輸入！）
3. 標題標簽、水平線標簽和特殊字符
- 標題標簽
--寫法
<h1></h1> 、<h2></h2> 、<h3></h3> ... <h6></h6>
-- 代碼實例
<html> <head> <title>事例</title> </head> <body> <!-- 演示標題標簽 --> <h1>標題一</h1> <h2>標題二</h2> <h6>標題六</h6> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
** 從h1到h6的大小一次變小
** 標題標簽會自動換行
- 水平線標簽
-- 寫法
<hr/>
-- 屬性
** size：水平線的粗細，范圍為1 - 7
** color：水平線的顏色，表示方法與文字標簽的一樣
--代碼
<html> <head> <title>事例</title> </head> <body> <!-- 演示水平線標簽 --> <hr size="5" color="red"/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
- 特殊字符（轉義）
-- 寫法（常用）
** 將 < 改為 <； 將 > 改為 >；（;為英文）
** 將一個空格改為 ；（;為英文）
** 將 & 改為 &；（;為英文）
-- 代碼
<html> <head> <title>事例</title> </head> <body> <!-- 演示特殊字符 --> <html>:這是 一個 網頁&的開始 </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下
4.列表標簽
- 定義列表
-- 寫法
** <d1> </d1>：表示列表的范圍
** 在dl里面 <dt></dt>：上層內容
** 在dl里面 <dd></dd>：下層內容
-- 代碼
<html> <head> <title>事例</title> </head> <body> <!-- 演示列表標簽 --> <dl> <dt>西安電子科技大學</dt> <dd>計算機科學與技術學院</dd> <dd>電子工程學院</dd> </dl> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
- 有序列表
-- 寫法
** <ol></ol>：有序列表范圍
** 在ol中有屬性type：1（默認），a，i
** 在ol標簽里面 <li>具體內容</li>
--代碼
<html> <head> <title>事例</title> </head> <body> <!-- 演示有序標簽 --> <ol type="1"> <!== 引號里可寫1，a，i ==> <li>計算機科學與技術學院</li> <li>電子工程學院</li> </ol> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
-無序標簽
-- 寫法
** <ul></ul>：表示無序列表的范圍
** 在ul里面有屬性type：空心圓circle，實心圓disc（默認），實心方塊square
** 在ul里面有 <li></li>
-- 代碼
<html> <head> <title>事例</title> </head> <body> <!-- 演示無序標簽 --> <ul type="circle"> <li>計算機科學與技術學院</li> <li>電子工程學院</li> </ul> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
5.圖像標簽（重要）
- 寫法
** <img src="圖片路徑"/>
** 屬性：scr（圖片的路徑），width（圖片的寬度），height（圖片的高度），alt（圖片上顯示文字，把鼠標移動到圖片上，停留片刻會顯示，有些瀏覽器不顯示）
- 代碼
<html> <head> <title>事例</title> </head> <body> <!-- 演示圖像標簽 --> <img src="/Users/liujingyi/javaWeb/javaweb之HTML(一)/1.png"/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
如果沒有該2.png這個圖片
<html> <head> <title>事例</title> </head> <body> <!-- 演示圖像標簽 --> <img src="/Users/liujingyi/javaWeb/javaweb之HTML(一)/2.png" alt="hh"/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
6. 路徑介紹
- 分類
-- 絕對路徑
** 如/Users/liujingyi/javaWeb/javaweb之HTML(一)/1.png
-- 相對路徑
** 一個文件相對於另一個文件的位置
** 當html文件與圖片在一個路徑下，可以直接寫文件名稱，如1.png
** 當圖片在html文件的下層目錄時，假設html文件的路徑為如/Users/liujingyi/javaWeb/hello.html，圖片的路徑為如/Users/liujingyi/javaWeb/javaweb之 HTML(一)/1.png，此時可寫為javaweb之HTML(一)/1.png
**當圖片在html文件的上層目錄時，假設html文件的路徑為如/Users/liujingyi/javaWeb/javaweb之HTML(一)/hello.html，圖片的路徑為如/Users/liujingyi/javaWeb/1.png，此時可寫為 ../1.png（../表示上層目錄）
7. 超鏈接標簽（重要）
- 鏈接資源
-- 寫法
** <a href="鏈接到資源的路徑" 顯示在頁面上的內容 </a>
** href：鏈接的資源的地址，#為默認，不打開任何資源，只是占位
** target：設置打開的方式，默認是在當前頁面打開，_black（在新窗口打開），_self（在當前頁打開）
-- 代碼
<html> <head> <title>事例</title> </head> <body> <a href="/Users/liujingyi/javaWeb/JavaWeb視頻教程_day1-資料源碼/code/05-列表標簽的案例.html" target="_black">這是一個超鏈接</a> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
點擊之后會彈出一個新頁面
- 定位資源
-- 定義位置
** 寫法：<a name="top"> 頂部 </a>
-- 回到該位置
** 寫法：<a href="#top" 回到頂部 </a>
-- pre標簽
** 作用：在<pre>輸出的內容</pre>中，內容是原樣輸出的，即程序怎么寫，網頁就如何顯示
8. 表格標簽（重要）
- 寫法
** <table></table>：表示表格的范圍
** table中有屬性border：表示表格線的粗細，bordercolor：表示表格線的顏色，cellspacing：表示單元格的間隙（若為0，則表示沒有間隙），height：表示表格的高，weight：表示表格的寬度
** 在table里面 <tr></tr>：表示一行
** 在tr中可以設置顯示方式align：left，center，right
** 在tr里面<td></td>：表示每行的一個單元格
** 在td中可以設置顯示方式align：left，center，right
** 將td改為th可以將單元格中的字體加粗並居中
** <caption></caption>：設置表格的題目，寫在table中
- 代碼
<html> <head> <title>事例</title> </head> <body> <table border="1" bordercolor="blue" cellspacing="0"> <tr> <td>姓名</td> <td>年齡</td> <td>學院</td> </tr> <tr> <td>哈哈</td> <td>20</td> <td>計算機科學與技術學院</td> </tr> </table> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
若不加cellspacing="0"，結果如下：
- 合並單元格
** rowspan：跨行
** colspan：跨列
** 代碼（跨列操作）：
<html> <head> <title>事例</title> </head> <body> <table border="1" bordercolor="red" cellspacing="0"> <tr align="center"> <td colspan="3">人員信息</td> <!-- 引號內填寫跨行或跨列的數目 --> </tr> <tr align="center"> <td>哈哈</td> <td>20</td> <td>計算機科學與技術學院</td> </tr> </table> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
9. 表單標簽（非常重要）
- 寫法
** <form></form>：定義一個表單的范圍
** 屬性：action屬性將提交結果送入該地址，並跳轉的該頁面
method屬性表示表單提交的方式，常用的有兩種：get（默認）和post，區別為a .get請求地址欄會攜帶提交的數據，post不會攜帶，b. get的請求的安全級別較低，c. get請求有數據大小的限制
enctype屬性（一般情況下不需要），在文件上傳的時候需要該屬性
** 輸入項：可以輸入或選擇的部分內容
- 大部分的輸入項使用 <input type="輸入項的內容"/>，必須要寫name屬性，不然不會提交
1.普通的輸入項：<input type="text"/>
2.密碼輸入項：<input type="password"/>
3.單選輸入項：<input type="radio"/>，需要有屬性name，並且屬性值必須相同，才能保證是單選，必須要寫value值區分不同選項
實現默認選中的屬性：checked="checked"
4.復選輸入項：<input type="checkbox"/> `，需要有屬性name，並且屬性值必須相同，必須要有value值
實現默認選中的屬性：checked="checked"
5.文件輸入項（用於文件上傳）：<input type="file"/>
6.隱藏項：<input type="hidden"/>
7.提交按鈕：<input type="submit"/>，按鈕中的內容可用屬性value
使用圖片提交：<input type="image" src="圖片路徑"/>
8.重制按鈕：<input type="reset" value=""/>，回到默認狀態
9.普通按鈕：<input type="button" value=""/>，和js在一起使用
- 不使用input
10.下拉輸入項：<select name=""></select>select中包括<option value=""></option>
實現默認選中：selected="selected"
11.文本域：<textarea cols="10" lows="10"></textarea>
- 代碼
<html> <head> <title>事例</title> </head> <body> <form> 手機號碼：<input type="text" name="tele"/><br/> 密碼：<input type="password" name="password"/><br/> 性別：<input type="radio" name="sex1" value="女"/>女 <input type="radio" name="sex1" value="男"/>男<br/> 愛好：<input type="checkbox" name="hobby" value="p"/>乒乓球 <input type="checkbox" name="hobby" value="y"/>羽毛球 <input type="checkbox" name="hobby" value="z"/>足球<br/> 文件上傳：<input type="file" name="file"/><br/> 隱藏項：<input type="hidden"/><br/> 生日：<select name="birth“> <option value="0">請選擇</option> <option value="1993">1993</option> <option value="1994">1994</option> </select><br/> 自我描述：<textarea cols="50" lows="10" name="dis"></textarea><br/> <input type="submit" value="注冊"/> </form> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
** 填寫之后點擊注冊按鈕，地址會變為tele=1542367892&password=123456&sex1=女&hobby=p&hobby=y&birth=1993&dis=我是一個學生，將數據按照name=value的方式提交
10. 其他常用標簽
** b、u、i、s標簽
代碼：
<html> <head> <title>事例</title> </head> <body> <u>西</u> <b>電</b> <s>學</s> <I>生</I> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下
** pre標簽：原樣輸出
** sub、sup標簽
代碼：
<html> <head> <title>事例</title> </head> <body> 3<sub>100</sub> 4<sup>200</sup> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
** div、span標簽（在css時使用）
代碼：
<html> <head> <title>事例</title> </head> <body> <div>這是div1</div> <div>這是div2</div> <div>這是div3</div> <span>這是span1</span> <span>這是span2</span> <span>這是span3</span> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
結果如下：
** p標簽：段落標簽，比br標簽多換一行
11. html頭標簽的使用
-
html由兩部分組成：head和body
** 頭標簽：在head里面的標簽就是頭標簽
** title標簽：表示在標簽上顯示的內容
** meta標簽：設置頁面相關的內容
<meta name="keyword" content="西安電子科技大學"/>
<meta http-equiv="refresh" content="3;url=地址"/>
三秒之后自動跳轉的url后的地址頁面
** base標簽：設置超鏈接的基本信息
<base target="_black"/>
所有的超鏈接都在新窗口打開
** link標簽：引入外部文件，在css中使用（用於引入css文件）
12. 框架標簽
-
<frameset>rows：按照行划分，
<frameset rows="80,*"/>，表示將頁面划分為兩行，*表示剩余部分cols：按照列划分
<frameset cols="80,*"/> -
<frame>：具體顯示的頁面<frame name="lower_left" src="頁面路徑"/>
-