javaweb第一天筆記分析

1、day011、html的簡(jiǎn)介* 什么是html？- HyperText Markup Language：超文本標(biāo)記語言，網(wǎng)頁語言* 超文本：超出文本的范疇，使用html可以輕松實(shí)現(xiàn)這樣操作* 標(biāo)記：html所有的操作都是通過標(biāo)記實(shí)現(xiàn)的，標(biāo)記就是標(biāo)簽，* 網(wǎng)頁語言：* 第一個(gè)html程序。- 創(chuàng)建java文件.java* 先編譯，然后再運(yùn)行（jvm）- html后綴是 .html .htm* 直接通過瀏覽器就可以運(yùn)行- 代碼* 這是我的第一個(gè)html程序！* html的規(guī)范（遵循）1、一個(gè)html文件開始標(biāo)簽和結(jié)束的標(biāo)簽 - 定義一個(gè)java方法 2、html包含兩部分內(nèi)容 （1） 設(shè)置相關(guān)信息

2、（2） 顯示在頁面上的內(nèi)容都寫在body里面3、html的標(biāo)簽有開始標(biāo)簽，也要有結(jié)束標(biāo)簽- 4、html的代碼不區(qū)分大小寫的5、有些標(biāo)簽，沒有結(jié)束標(biāo)簽 ，在標(biāo)簽內(nèi)結(jié)束- 比如 換行 * html的操作思想（*理解）網(wǎng)頁中有很多數(shù)據(jù)，不同的數(shù)據(jù)可能需要不同的顯示效果，這個(gè)時(shí)候需要使用標(biāo)簽把要操作的數(shù)據(jù)包起來（封裝起來），通過修改標(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)簽2、文字標(biāo)簽和注釋標(biāo)簽* 文字標(biāo)簽：修改文字的樣式- - 屬性：* size: 文字的大小 取值范圍 1-7

3、,超出了7，默認(rèn)還是7* color：文字顏色- 兩種表示方式* 英文單詞：red green blue black white yellow gray.* 使用十六進(jìn)制數(shù)表示 #ffffff : RGB- 通過工具實(shí)現(xiàn)不同的顏色 #66cc66* 注釋標(biāo)簽- java注釋幾種？三種- html的注釋 ： 3、標(biāo)題標(biāo)簽、水平線標(biāo)簽和特殊字符* 標(biāo)題標(biāo)簽 - .- 從h1到h6，大小是依次變小，同時(shí)會(huì)自動(dòng)換行* 水平線標(biāo)簽- - 屬性* size: 水平線的粗細(xì) 取值范圍 1-7* color: 顏色- 代碼* 特殊字符- 想要在頁面上顯示這樣的內(nèi)容 :是網(wǎng)頁的開始！- 需要對(duì)特殊字符進(jìn)行轉(zhuǎn)義*

4、 >* 空格： * & : &4、列表標(biāo)簽- 比如現(xiàn)在顯示這樣的效果傳智播客 財(cái)務(wù)部 學(xué)工部 人事部* : 表示列表的范圍* 在dl里面 : 上層內(nèi)容* 在dl里面 ：下層內(nèi)容- 代碼傳智播客財(cái)務(wù)部學(xué)工部人事部- 想要在頁面上顯示這樣的效果 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)) a i * 在ol標(biāo)簽里面 具體內(nèi)容- 代碼財(cái)務(wù)部學(xué)工部人事部- 想要在頁面上顯示這樣的效果特殊符號(hào)（方框） 財(cái)務(wù)部特殊符號(hào)（方框） 學(xué)

5、工部* : 表示無序列表的范圍屬性： type: 空心圓circle 、實(shí)心圓disc 、實(shí)心方塊square ，默認(rèn)disc在ul里面 - 代碼財(cái)務(wù)部學(xué)工部人事部5、圖像標(biāo)簽（*）* - src: 圖片的路徑- width：圖片的寬度- height：圖片的高度- alt: 圖片上顯示的文字，把鼠標(biāo)移動(dòng)到圖片上，停留片刻顯示內(nèi)容* 有些瀏覽器下不顯示（沒有效果）6、路徑的介紹* 分類：兩類* 絕對(duì)路徑- C:UsersasusDesktop0413day01codea.jpg- * 相對(duì)路徑- 一個(gè)文件相對(duì)于另外一個(gè)文件的位置- 三種：* html文件和圖片在一個(gè)路徑下，可以直接寫文件名稱-

6、 * 圖片在html的下層目錄在html文件中，使用img文件夾下面的a.jpg- C:UsersasusDesktop0413day01code 4.html- C:UsersasusDesktop0413day01code imga.jpg* 在html中使用圖片 4.html和img在一個(gè)路徑下imga.jpg* 圖片在html文件的上層目錄- C:UsersasusDesktop0413day01 code4.html- C:UsersasusDesktop0413day01 c.png* html文件所在的目錄和圖片是一個(gè)目錄* 圖片和html文件是什么關(guān)系？- 圖片在html的所在

7、目錄的上層目錄 day01* 怎么表示上層路徑 ./- ./: day01- ./c.png* 想要表示上層的上層 ././7、案例一：列表標(biāo)簽的使用（作業(yè)：完成剩余的部分）8、超鏈接標(biāo)簽（*）* 鏈接資源(*)- 顯示在頁面上的內(nèi)容 * href: 鏈接的資源的地址* target：設(shè)置打開的方式 ，默認(rèn)是在當(dāng)前頁打開- _blank : 在一個(gè)新窗口打開- _self: 在當(dāng)前頁打開 默認(rèn)- 當(dāng)超鏈接不需要到任何的地址 在href里面加#- 這是一個(gè)超鏈接2* 定位資源* 如果想要定位資源：定義一個(gè)位置 頂部* 回到這個(gè)位置回到頂部* 引入一個(gè)標(biāo)簽 pre：原樣輸出9、表格標(biāo)簽（*重要的標(biāo)

8、簽*）* 可以對(duì)數(shù)據(jù)進(jìn)行格式化，使數(shù)據(jù)顯示更加清晰* : 表示表格的范圍- border：表格線- bordercolor：表格線的顏色- cellspacing：?jiǎn)卧裰苯拥木嚯x- width：表格的寬度- height：表格的高度* 在table里面 - 設(shè)置對(duì)齊方式 align： left center right * 在tr里面 - 設(shè)置顯示方式 align： left center right * 使用th也可以表示單元格- 表示可以實(shí)現(xiàn)居中和加粗* 代碼* 畫圖分析表格的寫法- 首先定義一個(gè)表格的范圍使用table- 定義一行使用 tr- 定義一個(gè)單元格使用 td* 操作技巧：-

9、首先數(shù)有多少行 ，數(shù)每行里面有多少個(gè)單元格* 表格的標(biāo)題* 合并單元格 - rowspan：跨行* 人員信息- colspan：跨列* 人員信息10、表單標(biāo)簽（*今天最重要的標(biāo)簽*）* 可以提交數(shù)據(jù)到開心網(wǎng)的服務(wù)器，這個(gè)過程可以使用表單標(biāo)簽實(shí)現(xiàn)* : 定義一個(gè)表單的范圍- 屬性* action： 提交到地址，默認(rèn)提交到當(dāng)前的頁面* method: 表單提交方式 - 常用的有兩種 get和post，默認(rèn)是get請(qǐng)求* 面試題目： get和post區(qū)別1、get請(qǐng)求地址欄會(huì)攜帶提交的數(shù)據(jù)，post不會(huì)攜帶（請(qǐng)求體里面。在第七天時(shí)候講http協(xié)議時(shí)候）2、get請(qǐng)求安全級(jí)別較低，post較高3、ge

10、t請(qǐng)求數(shù)據(jù)大小的限制，post沒有限制* enctype：一般請(qǐng)求下不需要這個(gè)屬性，做文件上傳時(shí)候需要設(shè)置這個(gè)屬性（第22天時(shí)候講文件上傳）* 輸入項(xiàng)：可以輸入內(nèi)容或者選擇內(nèi)容的部分- 大部分的輸入項(xiàng) 使用 * 在輸入項(xiàng)里面需要有一個(gè)name屬性* 普通輸入項(xiàng)：* 密碼輸入項(xiàng)：* 單選輸入項(xiàng)：- 在里面需要屬性 name- name的屬性值必須要相同- 必須有一個(gè)value值* 實(shí)現(xiàn)默認(rèn)選中的屬性 - checked=checked* 復(fù)選輸入項(xiàng)：- 在里面需要屬性 name- name的屬性值必須要相同- 必須有一個(gè)value值* 實(shí)現(xiàn)默認(rèn)選中的屬性 - checked=checked* 文

11、件輸入項(xiàng)（在后面上傳時(shí)候用到）- * 下拉輸入項(xiàng)（不是在input標(biāo)簽里面的）199119921993- 默認(rèn)選擇* selected=selected* 文本域* 隱藏項(xiàng)（不會(huì)顯示在頁面上，但是存在于html代碼里面）* 提交按鈕- file:/C:/Users/asus/Desktop/0413/day01/code/10-表單標(biāo)簽一.html ?sex=on&love=on&love=on&birth=1991當(dāng)在輸入項(xiàng)里面寫了name屬性之后 - file:/C:/Users/asus/Desktop/0413/day01/code/10-表單標(biāo)簽一.html?phone=2222&p

12、wd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=- file:/C:/Users/asus/Desktop/0413/day01/code/10-表單標(biāo)簽一.html?phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=* ?輸入項(xiàng)name的值=輸入的值&* 參數(shù)類似于key-value形式* 使用圖片提交* 重置按鈕： 回到輸入項(xiàng)的初始狀態(tài)* 普通按鈕(和明天講js在一起使用的)11、案例：使用表單標(biāo)簽實(shí)現(xiàn)注冊(cè)頁面- 使用

13、表格實(shí)現(xiàn)頁面效果- 超鏈接不想要他有效果 href=#- 如果表格里面的單元格沒有內(nèi)容， 使用空格作為占位符  - 使用圖片提交表單 12、html中的其他的常用標(biāo)簽的使用b : 加粗s ：刪除線u ：下劃線i ：斜體pre ：原樣輸出sub : 下標(biāo)sup : 上標(biāo)p ：段落標(biāo)簽 比br標(biāo)簽多一行=明天css時(shí)候一直使用div ：自動(dòng)換行span：在一行顯示13、html的頭標(biāo)簽的使用* html兩部分組成 head和body* 在head里面的標(biāo)簽就是頭標(biāo)簽* title標(biāo)簽：表示在標(biāo)簽上顯示的內(nèi)容* 標(biāo)簽：設(shè)置頁面的一些相關(guān)內(nèi)容- * base標(biāo)簽：設(shè)置超鏈接的基本設(shè)置- 可以

14、統(tǒng)一設(shè)置超鏈接的打開方式 * link標(biāo)簽：引入外部文件* 明天css，可以使用link標(biāo)簽引入css文件14、框架標(biāo)簽的使用（會(huì)用）* - rows:按照行進(jìn)行劃分* - cols:按照列進(jìn)行劃分* * - 具體顯示的頁面- * 使用框架標(biāo)簽時(shí)候，不能寫在body里面，使用了框架標(biāo)簽，需要把body去掉* /把頁面劃分成上下兩部分 /上面頁面 /把下面部分劃分成左右兩部分 /左邊的頁面 /右邊的頁面 * 如果在左邊的頁面超鏈接，想讓內(nèi)容顯示在右邊的頁面中- 設(shè)置超鏈接里面屬性 target值設(shè)置成名稱- 超鏈接115、a標(biāo)簽的擴(kuò)展（了解）- 百度是網(wǎng)絡(luò)資源- 當(dāng)a標(biāo)簽里面訪問網(wǎng)絡(luò)資源時(shí)候，必

15、須要加一個(gè)協(xié)議 http：表示一個(gè)網(wǎng)絡(luò)的公共協(xié)議， 如果加上http協(xié)議之后，自動(dòng)識(shí)別訪問資源是一個(gè)網(wǎng)絡(luò)資源- 當(dāng)瀏覽器里面找到相關(guān)協(xié)議，首先看這個(gè)協(xié)議是不是公共協(xié)議http。如果不是公共協(xié)議，會(huì)去本地電腦找支持這個(gè)協(xié)議的應(yīng)用程序。16、今天內(nèi)容的總結(jié)1、html操作思想（*）* 使用標(biāo)簽把要操作的數(shù)據(jù)包起來，通過修改標(biāo)簽的屬性值，來實(shí)現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式的變化2、font標(biāo)簽 屬性：size 取值范圍 1-7 color：英文單詞，十六進(jìn)制數(shù) #ffffff3、標(biāo)題標(biāo)簽 . : 從h1到h6越來越小，自動(dòng)換行4、注釋 5、列表標(biāo)簽* * 有序 * 無序 6、圖像標(biāo)簽(*)* alt:瀏覽器兼容性很差7、路徑（相對(duì)路徑）(*)* 在同一級(jí)目錄 ：直接寫* 在下一層目錄： images/1.jpg* 在上層目錄： ./8、超鏈接標(biāo)簽（*）顯示在頁面上的內(nèi)容- 打開方式 target=_self _ blank- 默認(rèn)是在當(dāng)前頁面打開9、表格標(biāo)簽（*） /加粗和居中- 技巧：先數(shù)有多少行，數(shù)每行里面有多少個(gè)單元格10、表單標(biāo)簽（* 今天最重要的標(biāo)簽*）