天學(xué)會(huì)html+css，第九天固定定位。
Redmi手機(jī)電視筆記本。
今天的學(xué)習(xí)目標(biāo)是右側(cè)懸浮工具欄用固定定位實(shí)現(xiàn)，它是相對于瀏覽器窗口的定位方式。
·盒子里的內(nèi)容用a標(biāo)簽，一個(gè)圖片加一行文字，此時(shí)它的位置在最底部。
·然后給它寫上固定定位樣式，右側(cè)距離0，下面距離70像素，加上背景顏色，看下效果。
·開始給a標(biāo)簽寫樣式，固定寬高，text-renderin默認(rèn)下劃線去掉，里面內(nèi)容居中，看下效果。
·圖片寫樣式之前也要加上這行代碼，然后讓它的尺寸變小一點(diǎn)，并且左右居中，看下效果。
·文字的顏色、大小也調(diào)整一下。
·最后給a標(biāo)簽加上邊框、內(nèi)邊距，讓里面內(nèi)容往下挪一挪。
到此，今天的學(xué)習(xí)完成。
天學(xué)會(huì)html+css，第六天橫向?qū)Ш健?/p>
今天的學(xué)習(xí)目標(biāo)是這部分橫向?qū)Ш讲藛巍?/p>
·找到中間盒子，在里面添加ul列表，結(jié)構(gòu)跟昨天的縱向?qū)Ш讲藛我粯印Ｎ谋緝?nèi)容快速添加，看下效果。
·然后從外到內(nèi)依次寫css樣式，ul的高度跟上一層一樣，默認(rèn)樣式黑點(diǎn)去掉，看下效果。
·給 li添加左浮動(dòng)，讓它們從縱向排列變成橫向排列。在給a標(biāo)簽寫css樣式之前，別忘了要添加這句代碼。
·接著去掉默認(rèn)樣式下劃線，文字顏色用黑色，文字水平居中的方法，讓高度和行高一樣，看下效果。
·再給每個(gè)a標(biāo)簽的右邊都加上一定的內(nèi)邊距，讓它們變寬，看起來就分開了。
·最后還有一個(gè)文字變色的效果，給a標(biāo)簽加上hove偽類，顏色設(shè)置為紅色，看下效果。
到此，今天的學(xué)習(xí)完成。
、系統(tǒng)結(jié)構(gòu)：
① B/S架構(gòu)：Browser/Server（瀏覽器/服務(wù)器的交互形式。）
- Browser支持的語言：HTML、CSS、JavaScript；S是服務(wù)器端Server支持的語言有：C、C++、Java等
- B/S架構(gòu)系統(tǒng)有什么優(yōu)點(diǎn)和缺點(diǎn)？ 優(yōu)點(diǎn)：升級方便，只升級服務(wù)器代碼即可，維護(hù)成本低。缺點(diǎn)：速度慢、體驗(yàn)不好、界面不炫酷
- 企業(yè)大部分使用B/S架構(gòu)
- B/S架構(gòu)的系統(tǒng)代表有：京東、百度、天貓等
② C/S架構(gòu)：Client/Server（客戶端/服務(wù)器的交互形式。）
- C/S架構(gòu)的優(yōu)點(diǎn)和缺點(diǎn)？
- 優(yōu)點(diǎn)：速度快、體驗(yàn)好、界面炫酷（娛樂性多數(shù)是C/S架構(gòu)）
- 缺點(diǎn)：升級麻煩、維護(hù)成本較高。
- C/S架構(gòu)的系統(tǒng)代表有：QQ、微信、支付寶等
2、 HTML概述
① 什么是HTML？② 怎么開發(fā)HTML？③ 怎么運(yùn)行HTML?
- ① HTML：Hyper Text Markup Language（超文本標(biāo)記語言）
?由大量的標(biāo)簽組成，每一個(gè)標(biāo)簽都有開始標(biāo)簽和結(jié)束標(biāo)簽。
?超文本：圖片、聲音、視頻等
- ② HTML開發(fā)使用普通的文本編輯器就行，創(chuàng)建擴(kuò)展名是.html或.htm
?編輯器有：HBuilder、vscode等
③ 直接采用瀏覽器打開HTML文件就能運(yùn)行
④ HTML是誰制定的？
- ④ W3C：世界萬維網(wǎng)聯(lián)盟
?W3C制定了HTML的規(guī)范：每個(gè)瀏覽器生產(chǎn)廠家都會(huì)遵守規(guī)范。HTML也會(huì)按照規(guī)范去寫代碼
?HTML規(guī)范目前最高的版本是：HTML5.0，簡稱H5
?我們現(xiàn)在主要學(xué)的HTML4.0（基本用法）
- 為了方便中國Web前端程序員開發(fā)，提供了大量幫助文檔。為開發(fā)提供方便。
?w3school：先出現(xiàn)的，和W3C無關(guān)
?w3cschool：后出現(xiàn)的，和W3C無關(guān)
?W3C制定了很多規(guī)范：HTML/XML/http協(xié)議/https協(xié)議……
3、 第一個(gè)HTML
4、基本標(biāo)簽
- p：段落標(biāo)記
- h1~h6：標(biāo)題字，與word的標(biāo)題字相同
- br：換行標(biāo)記（獨(dú)目標(biāo)記）
- hr：橫線（獨(dú)目標(biāo)記）
- color：橫線顏色
- width：橫線寬度（可以px和%）
- pre：預(yù)留格式
- del：刪除字
- ins：插入字（有下劃線）
- b：粗體字
- i：斜體字
- sup：上標(biāo)
- sub：下標(biāo)
- font：字體標(biāo)簽
- color：字體顏色
- size：字體大小（1~7）
頁面效果圖：
5、實(shí)體符號(hào)：為了避免和標(biāo)簽沖突，所以需要使用實(shí)體符號(hào)
- <：<
- >：>
- 空格：
- 注：html中按多個(gè)空格鍵，在網(wǎng)頁中只顯示一個(gè)空格。
6、HTML表格
- table：表格
- tr：行
- td：列
- th：列（比td加粗居中）
- 合并行：rowspan（一個(gè)格占兩個(gè)位置）
- 注：row合并的時(shí)候，刪除下面的單元格
- 合并列：colspan（一個(gè)格占兩個(gè)位置）
- 注：col合并的時(shí)候，刪除哪個(gè)沒有要求
7、thead、tbody、tfoot標(biāo)簽
- thead、tbody、tfoot不是必須的，便于后期JS編寫。
8、body的背景顏色和背景圖片
- bgcolor：背景色
- background：背景圖片
- 背景圖片在背景色的上面
9、img標(biāo)簽
- src：圖片的路徑
- 只設(shè)置width，height會(huì)等比例縮放
- 只設(shè)置height，不起作用
- title：鼠標(biāo)懸停時(shí)顯示的信息
- alt：設(shè)置圖片加載失敗時(shí)顯示的提示信息
10、 超鏈接或熱鏈接
- href：hot references 熱引用；
- 后面一定是一個(gè)資源的地址。
- 后面的路徑可以是絕對路徑也可以是相對路徑，可以是網(wǎng)絡(luò)某個(gè)資源的路徑。
- target：
- _blank：新窗口
- _self：當(dāng)前窗口（默認(rèn)）
- _top：頂級窗口
- _parent：父級窗口
超鏈接的作用：
通過超鏈接可以從瀏覽器向服務(wù)器發(fā)送請求。
11、request與response的概念
- request：瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)（請求）
- B --》S
- response：服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)（響應(yīng)）
- S--》B
12、列表
- 有序列表：ol
- type：1、A、a、I、i
- 無序列表：ul
- type：circle（○）、square（□）、disc（●）
13、表單（重點(diǎn)）
- action：寫提交的URL地址
- method：默認(rèn)get；還有post
- 表單有什么用？
- 答：收集用戶的信息。表單展現(xiàn)之后，用戶填寫表單，點(diǎn)擊提交。 （submit）
- 怎么畫一個(gè)表單？
- 答：用form標(biāo)簽
- 一個(gè)網(wǎng)頁可以有多個(gè)表單form
- 表單最終是需要提交數(shù)據(jù)給服務(wù)器的，form標(biāo)簽有一個(gè)action屬性，這個(gè)屬性用來指定服務(wù)器地址。
- action屬性用來指定數(shù)據(jù)提交給哪個(gè)服務(wù)器
- action屬性和超鏈接中的href屬性一樣。都可以向服務(wù)器發(fā)送請求（request）
- http://192.168.111.3:8080/oa/save 這是請求路徑，
- 表單提交數(shù)據(jù)最終提交給192.168.111.3機(jī)器上的8080端口對應(yīng)的軟件。
- input中的type取值:
- radio：單選控件
- checkbox：多選控件
- submit：提交控件
- reset：重置控件
- button：普通控件
- text：文本控件
- password：密碼控
- file：文件控件
- 上傳文件專用
- hidden：隱藏域
- 網(wǎng)頁上看不到，但是表單提交的時(shí)候數(shù)據(jù)會(huì)自動(dòng)提交給服務(wù)器。
- input中的value屬性用來指定按鈕上顯示的文本信息。
- 超鏈接a與表單form的區(qū)別？
- 答：表達(dá)form可以收集信息，而超鏈接a無法收集信息。
- 表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
- 表單是以什么格式提交數(shù)據(jù)給服務(wù)器的？
- 格式：action?name=value&name=value&name=value..
- HTTP協(xié)議規(guī)定的，必須以這種格式提交給服務(wù)器
- java中String split('&');
- 重點(diǎn)強(qiáng)調(diào)：表單項(xiàng)寫了name屬性的，一律會(huì)提交給服務(wù)器。不想提交就不要寫name屬性。
- 文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
- 當(dāng)name沒有寫的時(shí)候，該項(xiàng)不會(huì)提交給服務(wù)器
- 但是當(dāng)value沒有寫的時(shí)候，value的默認(rèn)值是空字符串"",將空字符串提交給服務(wù)器。java代碼得到的是：String s = "";
效果圖：
地址欄提交的信息：
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=
14、表單的說明：
- ① 用戶手動(dòng)輸入的文本框，都不需要給value賦值
- ② textarea沒有value屬性
- ③ radio、checkbox默認(rèn)選項(xiàng)需要使用，checked="checked"（簡寫：checked）
- ④ select中的option屬性：? selected="selected" 為默認(rèn)選中 ?size：顯示條目數(shù)量
- multiple="multiple" 支持多選(select的屬性)
- ⑤ input的屬性
- readonly和disabled：
- 都是只讀不能修改
- 數(shù)據(jù)不會(huì)提交
- maxlength：設(shè)置文本框中輸入的字符數(shù)量。
15、HTML中的結(jié)點(diǎn)
- 在HTML文檔中，任何元素（結(jié)點(diǎn)）都有id屬性，id屬性是該節(jié)點(diǎn)的唯一標(biāo)識(shí)。所以在同一個(gè)HTML文檔中id值不能重復(fù)。
- 注意：表單提交數(shù)據(jù)的時(shí)候，只和name有關(guān)系，和id無關(guān)
- id有什么作用？
- javascript語言：可以對HTML文檔中的任何節(jié)點(diǎn)進(jìn)行增刪改操作。
- 獲取節(jié)點(diǎn)時(shí)，通常通過id來獲取節(jié)點(diǎn)
- HTML文檔是一棵樹，樹上有很多節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)都有唯一的id（DOM樹）
16、div和span
- div和span有什么用？
- div和span都可以稱為圖層。
- 有什么用？
- 圖層的作用為了保證頁面可以靈活的布局。
- div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標(biāo)即可。
- div和span的區(qū)別？
- di獨(dú)占一行
- span不會(huì)獨(dú)占一行
