千鋒教育2023新版javaweb速成全套教程，零基礎(chǔ)入門到企業(yè)項(xiàng)目實(shí)戰(zhàn)
html筆記內(nèi)容：
1、html簡(jiǎn)介
*什么是html?
-Hyper Text MarKup Language:超文本標(biāo)記語(yǔ)言，網(wǎng)頁(yè)語(yǔ)言。
**超文本：超出文本的范疇，使用html可以輕松實(shí)現(xiàn)這樣的操作
**標(biāo)記：html所有的操作都是通過(guò)標(biāo)記實(shí)現(xiàn)的，標(biāo)記就是標(biāo)簽<標(biāo)簽名稱>
**網(wǎng)頁(yè)語(yǔ)言：
*第一個(gè)html程序：
創(chuàng)建java 文件：.java 。**先編譯，在運(yùn)行。
html后綴是: .html .htm。**直接通過(guò)瀏覽器就可以運(yùn)行。
-代碼
??**這是我的<font size="5" color="red">第一個(gè)html程序！</font>
*html的規(guī)范（遵循）
1、一個(gè)html文件開始標(biāo)簽和結(jié)束標(biāo)簽<html></html>
???就像定義一個(gè)java方法{}
2、html包含兩部分內(nèi)容
???（1）<head>設(shè)置相關(guān)信息</head>
???（2）<body>是在頁(yè)面上顯示的內(nèi)容</body>
3、html 的標(biāo)簽有開始標(biāo)簽，也要有結(jié)束標(biāo)簽
????--<head></head>
4、html的代碼是不區(qū)分大小寫的
5、有些標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽，在標(biāo)簽內(nèi)結(jié)束
??--比如<br/>換行<hr/>分割線
*html的操作思想
??網(wǎng)頁(yè)中很多數(shù)據(jù)，不同的數(shù)據(jù)可能需要不同的顯示效果，這個(gè)時(shí)候需要使用標(biāo)簽把要操作的數(shù)據(jù)包起來(lái)
??（封裝起來(lái)）。
??通過(guò)修改標(biāo)簽屬性只實(shí)現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式變化。
??一個(gè)標(biāo)簽相當(dāng)于一個(gè)容器，想要修改容器內(nèi)數(shù)據(jù)的樣式，只需要改變?nèi)萜鞯膶傩灾?，就可以?shí)現(xiàn)容器內(nèi)
??數(shù)據(jù)樣式的變化。
?????
html中的常用標(biāo)簽
<文字標(biāo)簽和注釋標(biāo)簽
*文字標(biāo)簽：修改文字樣式
—<font></font>
??*屬性：
????size：文字的大小，取值范圍1-7，超出了7的話，默認(rèn)還是7。
????color：文字顏色，取值范圍：
??????????**英文單詞：red green blue yelllow
??????????**使用十六進(jìn)制數(shù)表示：#ffffff 例如：RGB—通過(guò)工具實(shí)現(xiàn)不同的
????????????顏色。
??*注釋標(biāo)簽：
????—java注釋有三種：//單行注釋?/*.....*/多行注釋??/**....*/文檔注釋
????—html 的注釋：<!--注釋-->
??*標(biāo)題標(biāo)簽
????<h1></h1><h2></h2>.....<h6></h6>
????—從h1到h6，大小是一次變小，同時(shí)會(huì)自動(dòng)換行
??*水平線標(biāo)簽
????—<hr/>
????—屬性
??????**size：水平線的粗細(xì)
??????**color：水平線的顏色
??*特殊字符
????—想要在頁(yè)面上顯示：<htlm>:是網(wǎng)頁(yè)開始；
????—需要對(duì)特殊字符進(jìn)行轉(zhuǎn)譯
????*<???<
????*>???>
????*空格?
????*&???&；???????
????*版權(quán)符?©；
????*注冊(cè)符?®；
????*雙引號(hào)?"；
??*列表標(biāo)簽
????—比如現(xiàn)在顯示這樣的效果
??????千鋒教育
????????財(cái)務(wù)部
????????學(xué)工部
????????人事部
????**<dl></dl>:表示列表的范圍
??????**在dl里面有<dt></dt>:上層內(nèi)容
??????**在dt里面有<dd></dd>:下層內(nèi)容
????--代碼
????<dl>
????<dt>千鋒教育</dt>
????<dd>財(cái)務(wù)部</dd>
????<dd>學(xué)工部</dd>
????<dd>人事部</dd>
????</dl>
????—想要在頁(yè)面上顯示這樣的效果：
??????1.財(cái)務(wù)部
??????2.學(xué)工部
??????3.人事部
??????a.財(cái)務(wù)部
??????b.學(xué)工部
??????c.人事部
??????I.財(cái)務(wù)部
??????II.學(xué)工部
??????III.人事部
????—屬性type：設(shè)置排列方式：1.（默認(rèn)）
????**<ol></ol>:有序列表的范圍
????**在ol標(biāo)簽里面<li>具體內(nèi)容</li>
????—想要在頁(yè)面上顯示這樣的效果：
??????特殊符號(hào)（方框）財(cái)務(wù)部
??????特殊符號(hào)（方框）學(xué)工部
????**<vl></vl>:表示無(wú)序列表的范圍。
??????屬性：type：空心圓 circle、實(shí)心方塊 square、默認(rèn)disc。
????**在vl里面有<li></li>
??*圖像標(biāo)簽
????**<img?src="圖片的路徑"/>
????—src：圖片的路徑
????—width：圖片的寬度
????—height：圖片的高度
????—alt：圖片上顯示的文字；
????**有些瀏覽器下不顯示（沒(méi)有效果）
6.路徑介紹
??*分類：兩類
????**絕對(duì)路徑：
??????—c:\users\asus\Desktop\0414\day01\a.jpg
??????—http://www.baidu.com/b.jpg
????**相對(duì)路徑：
??????—一個(gè)文件相對(duì)于另外一個(gè)文件的位置。
??????—三種：
????·????**html文件和圖片在一個(gè)路徑下，可以直接寫文件名稱。
????????**在html文件中，使用img文件夾下面的a.jpg
????????--c:\users\asus\Desktop\0413\day01\code\4.htlm
????????—c:\users\asus\Desktop\0414\day01\code\img\a.jpg
??????????***在html中使用圖片4.html和img在同一路徑下
????????img\a.jpg
????????圖片在html的下層目錄
??????**圖片在html的上層目錄
????????***圖片和html文件是什么關(guān)系？
??????????html文件所在目錄和圖片是一個(gè)目錄。
????????—c:\users\asus\Desktop\0414\day01\code\4.html
????????—c:\users\asus\Desktop\0414\day01\c.png
????????--圖片在html的所在目錄的上層目錄 day01
??????**怎么表示上層路徑??../
????????---/:day01
????????---../c.png
8.超鏈接標(biāo)簽（*****）
??*鏈接資源
????-<a href="鏈接到資源的路徑">顯示在頁(yè)面上內(nèi)容</a>
??????**href:鏈接的資源的地址。
??????**target:設(shè)置打開的方式：默認(rèn)是在當(dāng)前頁(yè)打開
????????----_blank:在一個(gè)新窗口打開
????????---_self:當(dāng)前頁(yè)打開
??????-當(dāng)超鏈接不需要到任何的地址在href里面加#
??*定位資源（錨點(diǎn)）
????**如果想要定位資源：定義一個(gè)位置
??????<a name="top">頂部</a>
????**回到這個(gè)位置
??????<a href="#top">回到頂部</a>
????**引入一個(gè)標(biāo)簽pre：原樣輸出。
9.表格標(biāo)簽
??*可以對(duì)數(shù)據(jù)進(jìn)行格式化，使數(shù)據(jù)顯示更加清晰。
??*<table></table>:表示表格的范圍
????屬性：
??????--border ：表格線
??????--bordercolor：表格線顏色
??????--cellspacing：?jiǎn)卧裰g的距離
??????--width：表格的寬度
??????--height：表格的高度
????**在table里面<tr></tr>
??????屬性：設(shè)置顯示方式：align：left center right
??????***在tr里有<td></td>
????????屬性：設(shè)置顯示方式：align：left center right
??????***<th></th>也可以表示單元格
????????---可以實(shí)現(xiàn)居中加粗。
??*畫圖分析法
????-首先定義一個(gè)表格的范圍使用<table></table>
????-定義一行使用tr
????-定義一個(gè)單元格使用td
??*表格標(biāo)題
????<caption></caption>
??*合并單元格
????-rowspan:跨行
????-colspan:??跨列?????
?????
10.表單標(biāo)簽
??*可以提交數(shù)據(jù)到開心網(wǎng)的服務(wù)器，這個(gè)過(guò)程可以使用標(biāo)點(diǎn)標(biāo)簽實(shí)現(xiàn)
???
??*<form></form>:定義一個(gè)表單的范圍
????—屬性：
??????**action：提交到地址，默認(rèn)提交到當(dāng)前頁(yè)面
**method:表單提交方式
-常用有兩種 get和post,默認(rèn)提交到當(dāng)前頁(yè)面
**面試題：get和post的區(qū)別
1、get請(qǐng)求地址欄回?cái)y帶提交的數(shù)據(jù)，post不會(huì)攜帶（請(qǐng)求體里面。第七天時(shí)候講http協(xié)議時(shí)候）
2、get請(qǐng)求安全級(jí)別較低，post較高
3、get請(qǐng)求數(shù)據(jù)大小的限制，post沒(méi)有限制
**enctype：一般請(qǐng)求下不需要這個(gè)屬性，做文件上傳時(shí)候需要設(shè)置這個(gè)屬性（第22天時(shí)候講到文件上傳）
????**輸入項(xiàng)：可以輸入內(nèi)容或者選擇內(nèi)容的部分
??????***輸入項(xiàng)里必須有一個(gè)name屬性
??????—大部分的輸入項(xiàng)使用<input type="輸入項(xiàng)的類型"/>
??????***普通輸入項(xiàng)：<input type="text"/>
??????***密碼輸入項(xiàng)：<input type="password"/>
??????***單選輸入項(xiàng)：<input type="radio" />
????????—在里面需要屬性?name
????????—name的屬性值必須要相同:sex
????????—必須有一個(gè)value值
??????**復(fù)選輸入項(xiàng)：<input type="checkbox"/ >
????????—在里面需要屬性?name
????????—name的屬性值必須要相同:sex
????????—必須有一個(gè)value值
??????***文件輸入項(xiàng)（在后面上傳時(shí)候用到）：
????????—<input type="file"/>
??????***下拉輸入項(xiàng)(不是在input 標(biāo)簽里面的)
????????<select name="birth">
??????????<option value="1991">1991</option>
??????????<option value="1992">1992</option>
??????????<option value="1993">1993</option>
??????????<option value="1994">1994</option>
????????</select>
??????***文本域
????????<textarea cols="10" rows="10"></textarea>
??????***隱藏項(xiàng)：（不會(huì)顯示在在頁(yè)面上，但是存在于html代碼里面）
????????<input type="hidden"/>
??????***提交按鈕
????????<input type="submit"/>
????????<input type="submit" value="注冊(cè)"/>
??????**參數(shù)攜帶
????????？輸入項(xiàng)name值=輸入值&輸入項(xiàng)name值=輸入值
***使用圖片進(jìn)行提交
<input type="image" src="圖片路徑"/>
***重置按鈕:回到輸入項(xiàng)初始狀態(tài)
<input type="reset"/>
***普通按鈕（明天和js一起使用）
<input type="button" value=""/>
11、html中的其他常用便簽的使用
b：加粗
s：刪除線
u：下劃線
i：斜體
pre：原樣輸出
sub：下標(biāo)
sup：上標(biāo)
p：段落標(biāo)簽
div：自動(dòng)換行
span：在一行顯示
12、html的頭標(biāo)簽使用
*html兩部分組成<head>和<body>
**在<head>里面的標(biāo)簽就是頭標(biāo)簽
**<title>標(biāo)簽：表示在標(biāo)簽上顯示的內(nèi)容
**<meta>標(biāo)簽：設(shè)置頁(yè)面的一些相關(guān)內(nèi)容
--<meta name="keywords" content="畢姥爺，熊出沒(méi)，劉翔">
<meta http-equiv="refresh" content="3;url=01-hello.html"/>
**base標(biāo)簽：設(shè)置超鏈接的基本設(shè)置
-可以統(tǒng)一設(shè)置超鏈接的打開方式
<base target="_blank"/>
**link標(biāo)簽：引入外部文件
**明天css，可以使用link標(biāo)簽引入css文件
13、框架標(biāo)簽的使用
*<frameset>
-rows：按照行進(jìn)行劃分
**<frameset rows="80,*">
-cols：按列進(jìn)行劃分
**<frameset cols="80,*">
*<frame>
-具體顯示的頁(yè)面
-<frame name="lower_left" src="b.html">
*** 使用框架標(biāo)簽時(shí)候，不能寫在body里面，使用了框架標(biāo)簽，需要把body去掉
*<frameset rows="80,*">//把頁(yè)面劃分成上下兩個(gè)部分
<frame name="top" src="a.html">//上面頁(yè)面
?<frameset cols="150.*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
??</frameset>
</frameset>
*如果在左邊的頁(yè)面超連接，想讓內(nèi)容顯示在右邊的頁(yè)面中
-設(shè)置超鏈接里面的屬性?target值設(shè)置成名稱
-<a href="01-hello.html" target="right">超連接1</a>
