黑馬程式設計師就業班第一天的總結以及自己的看法
阿新 • • 發佈：2018-12-23
1、html的簡介
（1）什麼是html？HyperText Mark-up Language ，超文字標記型語言，是網頁的語言。
* 超文字：超出文字的範疇
* 標記：理解為標籤，html中所有的操作都是通過標籤來實現的
* html是做網頁。
* 第一個html程式
= 程式碼 <font color="red" size="5">這是我的第一個html程式</font>
（2）html程式遵循一定的規範
第一個：html程式以<html>開始，同時</html>結束
* 比如建立java裡面方法，public void add() { 方法體 }
第二個：html程式包含兩部分內容：head和body
* <html>
<head>設定頁面資訊</head>
<body>顯示到頁面上的內容</body>
</html>
第三個：html的標籤有開始標籤，同時也要結束標籤
第四個：html的程式碼不區分大小寫的
第五個：有些標籤沒有結束標籤，需要在標籤內結束 <br/>
* 實現換行的操作，使用標籤實現的<br>, 沒有</br>
（3）html的操作思想
* 在網頁中可能有很多的資料，不同的資料可能需要不同的顯示效果，這個時候需要使用標籤把要操作的資料包起來
（封裝），通過修改標籤的屬性值來實現標籤內資料樣式的變化。標籤相當於一個容器，通過修改容器的屬性值，
實現容器內資料樣式的變化。
2、字型標籤
（1）文字標籤 <font>
* <font color="設定文字顏色" size="文字的大小">要操作的文字的內容</font>
** 常用兩個屬性
*** color：設定文字的顏色
**** 有三種表示方式
第一種：直接使用英文單詞進行表示 red green yellow......
第二種：使用十六進位制數字進行表示 #ffffff，
** 通過RGB
第三種：使用RGB顏色值配置 rgb(255,0,0)
*** size：設定文字的大小
**** 文字大小值範圍：1-7，如果值超過了7，使用還是7的效果
（2）標題標籤
* <h1></h1> <h2></h2>.......<h6></h6>
** 標題標籤可以自動換行，從h1到h6字型的大小依次變小的
（3）水平線標籤
* <hr/>
* 屬性
** color：表示設定水平線顏色
** size：設定水平線的粗細，範圍1-7
（4）註釋標籤
* 在java裡面有幾類註釋？三類註釋
** 單行註釋，多行註釋，文件註釋
* 在html中註釋 <!-- 註釋的內容 -->
** 使內容不在html頁面中進行顯示
（5）特殊字元
* 實現空格的操作
3、列表標籤
（1）想要實現：
傳智播客
java學院
人事部
學工部
* 首先需要使用 <dl></dl>: 定義列表的範圍
* 之後在dl標籤裡面，<dt></dt>: 定義上層內容
* 在dl標籤裡面， <dd></dd>: 定義下層內容
** 程式碼
<dl>
<dt>傳智播客</dt>
<dd>java學院</dd>
<dd>人事部</dd>
<dd>學工部</dd>
</dl>
（2）有序列表標籤
1.java學院
2.人事部
3.學工部
a.java學院
b.人事部
c.學工部
i.java學院
ii.人事部
iii.學工部
* 使用 <ol></ol>: 定義有序列表的範圍
** ol標籤上面有屬性 type：排序的方式
** type屬性裡面的值 1 a i
* 之後在ol標籤裡面：<li></li>: 封裝具體的內容
** 程式碼
<ol>
<li>java學院</li>
<li>人事部</li>
<li>學工部</li>
</ol>
（3）無序列表標籤
（特殊符號）java學院
（特殊符號）人事部
（特殊符號）學工部
* 首先使用標籤 <ul></ul>: 定義無序列表的範圍
** ul標籤上面有屬性 type：設定特殊符號
** type屬性裡面的值 disc circle square
* 之後在ul標籤裡面： <li></li>: 封裝具體的內容
** 程式碼
<ul>
<li>java學院</li>
<li>人事部</li>
<li>學工部</li>
</ul>
4、圖形標籤
（1）在html中顯示圖片
（2）標籤：<img src="圖片的路徑名稱"/>
（3）屬性：
* src：圖片的路徑名稱
* width：圖片寬度
* height：圖片的高度
* border：圖片的邊框的粗細
* alt: 顯示在圖片上面的內容
** 滑鼠移動到圖片上面，稍等片刻出現文字
** 如果圖片找不到，顯示alt的內容
*** 這個屬性在某些瀏覽器不能顯示的
5、超連結標籤
（1）什麼是超連結：點選開啟新的內容
（2）標籤：<a href="連結到的地址">顯示在頁面上的內容</a>
* 程式碼 <a href="hello.html">顯示在頁面上的內容</a>
（3）屬性
* href：連結到地址
* target：超連結的開啟方式
** 在預設的情況下，開啟方式在當前的頁面開啟
** target裡面的值：_self,當前頁面開啟； _blank，在新標籤頁開啟
6、表格標籤
操作技巧：
首先數表格裡面有多少行，數每行裡面有多少個單元格
（1）什麼是表格：對資料進行格式化，使資料顯示更加清晰，結構分明
（2）標籤
* 首先定義表格的範圍：<table></table>
** 屬性
*** border：設定表格線
*** bordercolor：設定表格線的顏色
*** cellspacing: 設定單元格之間的距離
*** cellpadding: 設定文字和單元格之間的距離
*** width: 設定表格的寬度
*** height：設定表格的高度
* 在table標籤裡面表示行： <tr></tr>
** 屬性
*** align：設定對齊方式，值 left center right
* 在tr標籤裡面表示列： <td></td>
** 屬性
*** align：設定某個單元格對齊方式
* 在tr標籤裡面也可以表示單元格：<th></th>
** 實現居中和加粗的效果
（3）合併單元格
* 是在td標籤上面進行的操作，使用兩個屬性
** rowspan：跨行
*** 程式碼 <th rowspan="4">人員資訊3人</th>
** colspan：跨列
*** 程式碼 <td colspan="3">統計資訊3人</td>
（4）標題標籤：<caption>標題內容</caption>
7、表單標籤
（1）什麼是表單？把輸入的資料提交到伺服器上（存到伺服器），這個過程稱為表單
（2）使用表單標籤實現資料提交到伺服器上這個過程
（3）form 標籤：如果寫表單，首先定義表單的範圍
* 屬性
** action：提交的伺服器的地址
** method：表單的提交方式（有很多種，常見的有兩種 get和post）
*** 程式碼
<form action="hello.html" method="get"></form>
** get和post提交，在預設情況下，提交方式是get提交
*** get提交方式會在位址列攜帶資料，安全性很差
*** post提交方式位址列不會攜帶資料，安全性比較高，資料在請求體裡面（講到http協議時候詳細說）
（4）輸入項：可以輸入內容或者選擇內容的地方
** 要求1：輸入項裡面必須要有name屬性
** 要求2：在單選輸入項和複選輸入項以及下拉選擇輸入項裡面
都需要有屬性value，設定的值
* 輸入項需要寫到form標籤裡面
* 大部分輸入項是通過標籤input進行封裝操作的
** <input type="輸入項的型別"/>
第一個：普通輸入項 <input type="text"/>
第二個：密碼輸入項 <input type="password"/>
第三個：單選輸入項 <input type="radio"/>
** 要求：單選輸入項裡面必須有name屬性，同時name的屬性值必須要相同
** 設定預設選中，使用屬性 checked="checked"
第四個：複選輸入項 <input type="checkbox"/>
** 要求：單選輸入項裡面必須有name屬性，同時name的屬性值必須要相同
** 設定預設選中，使用屬性 checked="checked"
第五個：檔案輸入項，上傳檔案的。<input type="file"/>
第六個：隱藏項，這個值不會顯示在頁面上，但是提交表單也可以提交到伺服器上
<input type="hidden"/>
第七個：普通按鈕 <input type="button"/>
*** 可以寫value屬性，設定輸入項的預設值
（5）下面的兩個輸入項不是使用input標籤進行封裝的
第八個：下拉選擇輸入項
* <select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
* 使用屬性 selected="selected" 預設選中
第九個：文字域
* <textarea cols="10" rows="5"></textarea>
（6）提交按鈕和其他的按鈕
* 提交按鈕： <input type="submit"/>
** 屬性 value：設定提交按鈕顯示的內容
** 點選提交按鈕：地址發生了變化
file:///C:/Users/asus/Desktop/javaweb/day01/程式碼/hello.html ?sex=on&love=on&love=on
** 在輸入項上面寫name屬性之後，提交表單
file:///C:/Users/asus/Desktop/javaweb/day01/程式碼/hello.html
?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test
** 在單選框、複選框和下拉選擇框裡面設定了value之後，提交表單
file:///C:/Users/asus/Desktop/javaweb/day01/程式碼/hello.html
?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test
* 重置按鈕：<input type="reset"/>
** 屬性 value：設定重置按鈕顯示的內容
** 不是做清空表單輸入項的操作，使表單輸入項回到初始狀態
* 使用圖片進行提交：<input type="image" src="圖片路徑"/>
8、其他的標籤的使用
（1）pre：原樣輸出
p：段落標籤
s：刪除線
u: 下劃線
b：加粗
i：斜體
（2）div : 自動換行
span：在一行進行顯示
9、案例：註冊頁面
（1）如果單元格里面沒有內容，使用佔位符替代（使用空格 ）
（2）想要一個超連結沒有效果，在href屬性值寫成#
（1）什麼是html？HyperText Mark-up Language ，超文字標記型語言，是網頁的語言。
* 超文字：超出文字的範疇
* 標記：理解為標籤，html中所有的操作都是通過標籤來實現的
* html是做網頁。
* 第一個html程式
= 程式碼 <font color="red" size="5">這是我的第一個html程式</font>
（2）html程式遵循一定的規範
第一個：html程式以<html>開始，同時</html>結束
* 比如建立java裡面方法，public void add() { 方法體 }
第二個：html程式包含兩部分內容：head和body
* <html>
<head>設定頁面資訊</head>
<body>顯示到頁面上的內容</body>
</html>
第三個：html的標籤有開始標籤，同時也要結束標籤
第四個：html的程式碼不區分大小寫的
第五個：有些標籤沒有結束標籤，需要在標籤內結束 <br/>
* 實現換行的操作，使用標籤實現的<br>, 沒有</br>
（3）html的操作思想
* 在網頁中可能有很多的資料，不同的資料可能需要不同的顯示效果，這個時候需要使用標籤把要操作的資料包起來
（封裝），通過修改標籤的屬性值來實現標籤內資料樣式的變化。標籤相當於一個容器，通過修改容器的屬性值，
實現容器內資料樣式的變化。
2、字型標籤
（1）文字標籤 <font>
* <font color="設定文字顏色" size="文字的大小">要操作的文字的內容</font>
** 常用兩個屬性
*** color：設定文字的顏色
**** 有三種表示方式
第一種：直接使用英文單詞進行表示 red green yellow......
第二種：使用十六進位制數字進行表示 #ffffff，
** 通過RGB
第三種：使用RGB顏色值配置 rgb(255,0,0)
*** size：設定文字的大小
**** 文字大小值範圍：1-7，如果值超過了7，使用還是7的效果
（2）標題標籤
* <h1></h1> <h2></h2>.......<h6></h6>
** 標題標籤可以自動換行，從h1到h6字型的大小依次變小的
（3）水平線標籤
* <hr/>
* 屬性
** color：表示設定水平線顏色
** size：設定水平線的粗細，範圍1-7
（4）註釋標籤
* 在java裡面有幾類註釋？三類註釋
** 單行註釋，多行註釋，文件註釋
* 在html中註釋 <!-- 註釋的內容 -->
** 使內容不在html頁面中進行顯示
（5）特殊字元
* 實現空格的操作
3、列表標籤
（1）想要實現：
傳智播客
java學院
人事部
學工部
* 首先需要使用 <dl></dl>: 定義列表的範圍
* 之後在dl標籤裡面，<dt></dt>: 定義上層內容
* 在dl標籤裡面， <dd></dd>: 定義下層內容
** 程式碼
<dl>
<dt>傳智播客</dt>
<dd>java學院</dd>
<dd>人事部</dd>
<dd>學工部</dd>
</dl>
（2）有序列表標籤
1.java學院
2.人事部
3.學工部
a.java學院
b.人事部
c.學工部
i.java學院
ii.人事部
iii.學工部
* 使用 <ol></ol>: 定義有序列表的範圍
** ol標籤上面有屬性 type：排序的方式
** type屬性裡面的值 1 a i
* 之後在ol標籤裡面：<li></li>: 封裝具體的內容
** 程式碼
<ol>
<li>java學院</li>
<li>人事部</li>
<li>學工部</li>
</ol>
（3）無序列表標籤
（特殊符號）java學院
（特殊符號）人事部
（特殊符號）學工部
* 首先使用標籤 <ul></ul>: 定義無序列表的範圍
** ul標籤上面有屬性 type：設定特殊符號
** type屬性裡面的值 disc circle square
* 之後在ul標籤裡面： <li></li>: 封裝具體的內容
** 程式碼
<ul>
<li>java學院</li>
<li>人事部</li>
<li>學工部</li>
</ul>
4、圖形標籤
（1）在html中顯示圖片
（2）標籤：<img src="圖片的路徑名稱"/>
（3）屬性：
* src：圖片的路徑名稱
* width：圖片寬度
* height：圖片的高度
* border：圖片的邊框的粗細
* alt: 顯示在圖片上面的內容
** 滑鼠移動到圖片上面，稍等片刻出現文字
** 如果圖片找不到，顯示alt的內容
*** 這個屬性在某些瀏覽器不能顯示的
5、超連結標籤
（1）什麼是超連結：點選開啟新的內容
（2）標籤：<a href="連結到的地址">顯示在頁面上的內容</a>
* 程式碼 <a href="hello.html">顯示在頁面上的內容</a>
（3）屬性
* href：連結到地址
* target：超連結的開啟方式
** 在預設的情況下，開啟方式在當前的頁面開啟
** target裡面的值：_self,當前頁面開啟； _blank，在新標籤頁開啟
6、表格標籤
操作技巧：
首先數表格裡面有多少行，數每行裡面有多少個單元格
（1）什麼是表格：對資料進行格式化，使資料顯示更加清晰，結構分明
（2）標籤
* 首先定義表格的範圍：<table></table>
** 屬性
*** border：設定表格線
*** bordercolor：設定表格線的顏色
*** cellspacing: 設定單元格之間的距離
*** cellpadding: 設定文字和單元格之間的距離
*** width: 設定表格的寬度
*** height：設定表格的高度
* 在table標籤裡面表示行： <tr></tr>
** 屬性
*** align：設定對齊方式，值 left center right
* 在tr標籤裡面表示列： <td></td>
** 屬性
*** align：設定某個單元格對齊方式
* 在tr標籤裡面也可以表示單元格：<th></th>
** 實現居中和加粗的效果
（3）合併單元格
* 是在td標籤上面進行的操作，使用兩個屬性
** rowspan：跨行
*** 程式碼 <th rowspan="4">人員資訊3人</th>
** colspan：跨列
*** 程式碼 <td colspan="3">統計資訊3人</td>
（4）標題標籤：<caption>標題內容</caption>
7、表單標籤
（1）什麼是表單？把輸入的資料提交到伺服器上（存到伺服器），這個過程稱為表單
（2）使用表單標籤實現資料提交到伺服器上這個過程
（3）form 標籤：如果寫表單，首先定義表單的範圍
* 屬性
** action：提交的伺服器的地址
** method：表單的提交方式（有很多種，常見的有兩種 get和post）
*** 程式碼
<form action="hello.html" method="get"></form>
** get和post提交，在預設情況下，提交方式是get提交
*** get提交方式會在位址列攜帶資料，安全性很差
*** post提交方式位址列不會攜帶資料，安全性比較高，資料在請求體裡面（講到http協議時候詳細說）
（4）輸入項：可以輸入內容或者選擇內容的地方
** 要求1：輸入項裡面必須要有name屬性
** 要求2：在單選輸入項和複選輸入項以及下拉選擇輸入項裡面
都需要有屬性value，設定的值
* 輸入項需要寫到form標籤裡面
* 大部分輸入項是通過標籤input進行封裝操作的
** <input type="輸入項的型別"/>
第一個：普通輸入項 <input type="text"/>
第二個：密碼輸入項 <input type="password"/>
第三個：單選輸入項 <input type="radio"/>
** 要求：單選輸入項裡面必須有name屬性，同時name的屬性值必須要相同
** 設定預設選中，使用屬性 checked="checked"
第四個：複選輸入項 <input type="checkbox"/>
** 要求：單選輸入項裡面必須有name屬性，同時name的屬性值必須要相同
** 設定預設選中，使用屬性 checked="checked"
第五個：檔案輸入項，上傳檔案的。<input type="file"/>
第六個：隱藏項，這個值不會顯示在頁面上，但是提交表單也可以提交到伺服器上
<input type="hidden"/>
第七個：普通按鈕 <input type="button"/>
*** 可以寫value屬性，設定輸入項的預設值
（5）下面的兩個輸入項不是使用input標籤進行封裝的
第八個：下拉選擇輸入項
* <select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
* 使用屬性 selected="selected" 預設選中
第九個：文字域
* <textarea cols="10" rows="5"></textarea>
（6）提交按鈕和其他的按鈕
* 提交按鈕： <input type="submit"/>
** 屬性 value：設定提交按鈕顯示的內容
** 點選提交按鈕：地址發生了變化
file:///C:/Users/asus/Desktop/javaweb/day01/程式碼/hello.html ?sex=on&love=on&love=on
** 在輸入項上面寫name屬性之後，提交表單
file:///C:/Users/asus/Desktop/javaweb/day01/程式碼/hello.html
?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test
** 在單選框、複選框和下拉選擇框裡面設定了value之後，提交表單
file:///C:/Users/asus/Desktop/javaweb/day01/程式碼/hello.html
?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test
* 重置按鈕：<input type="reset"/>
** 屬性 value：設定重置按鈕顯示的內容
** 不是做清空表單輸入項的操作，使表單輸入項回到初始狀態
* 使用圖片進行提交：<input type="image" src="圖片路徑"/>
8、其他的標籤的使用
（1）pre：原樣輸出
p：段落標籤
s：刪除線
u: 下劃線
b：加粗
i：斜體
（2）div : 自動換行
span：在一行進行顯示
9、案例：註冊頁面
（1）如果單元格里面沒有內容，使用佔位符替代（使用空格 ）
（2）想要一個超連結沒有效果，在href屬性值寫成#