Web的入門
1 軟件的結(jié)構(gòu)劃分:
1) C/S結(jié)構(gòu):Client->Server之間的交互
典型特點(diǎn):1)客戶端的軟件必須升級才能使用服務(wù)器端高版本的功能
應(yīng)用:阿里巴巴 QQ,飛秋…
2) B/S結(jié)構(gòu):Browser-Server:瀏覽器端和服務(wù)器端之間的交互
特點(diǎn):瀏覽器端的軟件不需要特定的升級就可以訪問服務(wù)器的網(wǎng)站
應(yīng)用:大型游戲網(wǎng)站,網(wǎng)易新聞….
JavaWeb/EE --->都是基于B/S結(jié)構(gòu)的…
2 什么是網(wǎng)站
將基于B/S的應(yīng)用都叫網(wǎng)站.一個網(wǎng)站是由什么組成的?一個網(wǎng)站是有很多的html標(biāo)簽組成;
3 HTML
HTML:全稱:hyper Text Markup Language:超文本標(biāo)記語言
超文本標(biāo)記:
針對字體的顏色,大小
針對圖片,動畫,音頻,視頻等等進(jìn)行操作!
4 HTML語言的結(jié)構(gòu)
成都創(chuàng)新互聯(lián)公司始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)十余年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的營銷解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：柔性防護(hù)網(wǎng)等企業(yè)，備受客戶稱揚(yáng)。
轉(zhuǎn)義字符:
空格: ? 注意事項(xiàng)(分號一定要帶上)
<: < ; (letter than)
:>(greater than)
注冊商標(biāo):? ?
版權(quán)所有:? ?
表格標(biāo)簽
表單標(biāo)簽
作用:就是采集用戶輸入的數(shù)據(jù)
應(yīng)用場景:
登錄:--?用戶輸入用戶的基本信息(用戶名,密碼,郵箱等等)--?點(diǎn)擊登錄--->提交到系統(tǒng)后臺--?后臺校驗(yàn)是否存在該用戶-?存在,登錄成功,否則,給提示,用戶名或者密碼.其他錯誤!
注冊:--?采集用戶輸入的數(shù)據(jù)--?提交后臺--?服務(wù)器數(shù)據(jù)庫查看是否有當(dāng)前用戶名,有表示,注冊失敗;否則注冊成功!
表單標(biāo)簽中method提交方式和get的區(qū)別
CSS:
重慶分公司
重慶分公司
前端知識:w3c組織:規(guī)范了html,css,javascript(js)寫法
html:結(jié)構(gòu)化標(biāo)準(zhǔn)
css:網(wǎng)頁的樣式(美化網(wǎng)頁的)
javascript:行為化標(biāo)準(zhǔn)
CSS:全稱:Cascading style sheet:層疊樣式表
CSS的使用有三種方式:
1) 行內(nèi)樣式
標(biāo)簽 style屬性:指定樣式
弊端:style屬性它和html標(biāo)簽混合使用,不利于后期維護(hù)
2) 內(nèi)部樣式
書寫格式:
選中某個標(biāo)簽名{
書寫樣式;
}
講課使用的是內(nèi)部樣式
3) 外部方式
a) 創(chuàng)建css文件:指定標(biāo)簽的樣式
標(biāo)簽選擇器{
書寫樣式;
}
b) 需要外部導(dǎo)入該css文件
rel屬性:關(guān)聯(lián)層疊樣式表
總結(jié):
1 :軟件結(jié)構(gòu)的劃分:
兩種:C/S B/S
2 html語言:
熟練掌握幾個常用的標(biāo)簽:
段落標(biāo)簽:p
原樣輸出:pre
字體標(biāo)簽:font
上下標(biāo) 和轉(zhuǎn)義字符(注冊商品和版權(quán)所有):sup和sub ? ?
有序列標(biāo)簽
ol li列表項(xiàng)
無序列標(biāo)簽
ul li列表項(xiàng)
超鏈接標(biāo)簽
1) 連接到某個資源文件或者資源地址(URL)
2) 作為錨連接來使用
在同一個html頁面下:
1) 打錨點(diǎn):
2) 創(chuàng)建跳轉(zhuǎn)
開始跳轉(zhuǎn)
不同頁html頁面下:
1)打錨點(diǎn):
3) 創(chuàng)建跳轉(zhuǎn)標(biāo)記
4) 開始跳轉(zhuǎn)
表格標(biāo)簽:
table標(biāo)簽
屬性:border 表格的邊框 width 表格的寬度 height表格的高度
align:標(biāo)簽在瀏覽器中的對齊方式 bgColor:背景色
tr:行標(biāo)簽
td:列(單元格)
th:表頭標(biāo)簽(居中,加粗)
行合并:rospan
列合并:colspan
圖片標(biāo)簽:
表單標(biāo)簽:重點(diǎn)
form表單中的action提交的地址
method屬性:提交方式: get/post
表單項(xiàng)中必填name屬性:作為后臺標(biāo)記
文本輸入框
密碼輸入框
單選框
復(fù)選框
提交
1 CSS是使用方式
1) 行內(nèi)樣式
弊端:不利于維護(hù)(style屬性和html標(biāo)簽混合在一塊)
2) 內(nèi)部樣式
在head標(biāo)簽體中,書寫style標(biāo)簽
講課(習(xí)慣使用這種方式)
3) 外部樣式
A:創(chuàng)建一個獨(dú)立一后綴名為.css結(jié)尾的css文件
選擇器{
書寫樣式
}
B:導(dǎo)入外部css文件
書寫:
2 CSS的語法
選擇器(id選擇器,類選擇器,標(biāo)簽選擇,并集選擇器,交集選擇器,通用選擇器){
CSS屬性:CSS的屬性值; 分號可以省略,建議永遠(yuǎn)給出分號
CSS屬性(字體,背景,邊框,背景圖片的起始位置…(大小,顏色,邊框的樣式,邊框的尺寸left/center/right…)
}
3 CSS的選擇器
選擇器的分類:
a 標(biāo)簽選擇器(最普通一種方式)
書寫格式:
標(biāo)簽名稱{
CSS屬性:css屬性值;
}
b id選擇器
在標(biāo)簽中一定要給定一個id屬性,并且指定id屬性值
書寫格式:
#id屬性值{
書寫樣式;
}
注意事項(xiàng):
1) 一個標(biāo)簽同時被標(biāo)簽選擇和id選擇器選中,那么id選擇器的優(yōu)先級要高于標(biāo)簽選擇器
2)在同一個html頁面中,不要給多個標(biāo)簽指定同名id屬性,如果指定同名id屬性值,那么js的時候,獲取標(biāo)簽對象的時候,獲取不到:getElementById(“id屬性值”) ;
c 類選擇器
在一個標(biāo)簽中使用類選擇器,要指定一個屬性:class屬性
書寫格式:
.class屬性值(inputCls){
書寫樣式;
}
注意事項(xiàng):
在同一個頁面下,多個標(biāo)簽可以指定同名的class屬性
d 并集選擇器(同時選中多個標(biāo)簽)選擇器1,選擇器2,…{
書寫樣式;
}
e:交集選擇器
書寫格式:
選擇器1 選擇器2 選擇器3{
書寫樣式;
}
4 偽類選擇器
偽類表示一種狀態(tài):超鏈接標(biāo)簽a的幾種狀態(tài)
link:鼠標(biāo)沒有訪問過的狀態(tài)
hover:鼠標(biāo)經(jīng)過的狀態(tài)
active:鼠標(biāo)激活狀態(tài)(鼠標(biāo)點(diǎn)擊了,但是沒有松開的狀態(tài))
visited:鼠標(biāo)訪問過的狀態(tài)(已經(jīng)點(diǎn)擊了,并且松開的狀態(tài))
書寫格式:a:四個狀態(tài){….}
顯示的效果順序:link visited hover active
作業(yè):制作一個首頁
雖然在制作過程有些波折，并且沒有安排圖片，但是總算制作成功了！
