黑馬程式設計師就業班第一天的總結以及自己的看法
阿新 • • 發佈: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屬性值寫成#