溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
Web的入門
1 軟件的結(jié)構(gòu)劃分:
1) C/S結(jié)構(gòu):Client->Server之間的交互
典型特點(diǎn):1)客戶端的軟件必須升級(jí)才能使用服務(wù)器端高版本的功能
應(yīng)用:阿里巴巴 QQ,飛秋…
2) B/S結(jié)構(gòu):Browser-Server:瀏覽器端和服務(wù)器端之間的交互
特點(diǎn):瀏覽器端的軟件不需要特定的升級(jí)就可以訪問服務(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)站.一個(gè)網(wǎng)站是由什么組成的?一個(gè)網(wǎng)站是有很多的html標(biāo)簽組成;
3 HTML
HTML:全稱:hyper Text Markup Language:超文本標(biāo)記語(yǔ)言
超文本標(biāo)記:
針對(duì)字體的顏色,大小
針對(duì)圖片,動(dòng)畫,音頻,視頻等等進(jìn)行操作!
4 HTML語(yǔ)言的結(jié)構(gòu)
<html>
<head> 編碼規(guī)范的(gbk/utf-8) -?頭文件標(biāo)簽
<title>標(biāo)題標(biāo)簽</title>
</head>
<body>
html主體部分:這些內(nèi)容最終會(huì)在瀏覽器中顯示
</body>
</html> -?有標(biāo)簽體的標(biāo)簽
5 HTML結(jié)構(gòu)的解釋
html:根標(biāo)簽-?標(biāo)簽體中會(huì)很多子標(biāo)簽
head:頭文件
body:網(wǎng)頁(yè)的主體部分,會(huì)顯示內(nèi)容
6 文本標(biāo)簽
標(biāo)題標(biāo)簽: h2~h7
水平線標(biāo)簽:hr
換行標(biāo)簽<br/>
段落標(biāo)簽:p
段落縮進(jìn):blockquote
上下標(biāo)標(biāo)簽:sup和sub
原樣輸出標(biāo)簽:pre
字體標(biāo)簽:font
居中標(biāo)簽:center
圖像標(biāo)簽:
圖像標(biāo)簽:img 空標(biāo)簽體
<img/>
屬性:
src:鏈接到的資源圖片
width:圖片的寬度 兩種方式:一種指定px(像素) 第二種:百分比
title:懸停狀態(tài),會(huì)顯示文字
alt:當(dāng)圖片失效的時(shí)候,用來解釋說明該圖片
height:圖片的高度
轉(zhuǎn)義字符:
空格: ? 注意事項(xiàng)(分號(hào)一定要帶上)
<: < ; (letter than)
:>(greater than)
<h2></h2>
注冊(cè)商標(biāo):? ?
版權(quán)所有:? ?
表格標(biāo)簽
表單標(biāo)簽
作用:就是采集用戶輸入的數(shù)據(jù)
應(yīng)用場(chǎng)景:
登錄:--?用戶輸入用戶的基本信息(用戶名,密碼,郵箱等等)--?點(diǎn)擊登錄--->提交到系統(tǒng)后臺(tái)--?后臺(tái)校驗(yàn)是否存在該用戶-?存在,登錄成功,否則,給提示,用戶名或者密碼.其他錯(cuò)誤!
注冊(cè):--?采集用戶輸入的數(shù)據(jù)--?提交后臺(tái)--?服務(wù)器數(shù)據(jù)庫(kù)查看是否有當(dāng)前用戶名,有表示,注冊(cè)失敗;否則注冊(cè)成功!
表單標(biāo)簽中method提交方式和get的區(qū)別
CSS:
前端知識(shí):w3c組織:規(guī)范了html,css,javascript(js)寫法
html:結(jié)構(gòu)化標(biāo)準(zhǔn)
css:網(wǎng)頁(yè)的樣式(美化網(wǎng)頁(yè)的)
javascript:行為化標(biāo)準(zhǔn)
CSS:全稱:Cascading style sheet:層疊樣式表
CSS的使用有三種方式:
1) 行內(nèi)樣式
標(biāo)簽 style屬性:指定樣式
弊端:style屬性它和html標(biāo)簽混合使用,不利于后期維護(hù)
2) 內(nèi)部樣式
書寫格式:
選中某個(gè)標(biāo)簽名{
書寫樣式;
}
講課使用的是內(nèi)部樣式
3) 外部方式
a) 創(chuàng)建css文件:指定標(biāo)簽的樣式
標(biāo)簽選擇器{
書寫樣式;
}
b) 需要外部導(dǎo)入該css文件
rel屬性:關(guān)聯(lián)層疊樣式表
<link href=”需要被導(dǎo)入的css文件” ref=”stylesheet”>
總結(jié):
1 :軟件結(jié)構(gòu)的劃分:
兩種:C/S B/S
2 html語(yǔ)言:
熟練掌握幾個(gè)常用的標(biāo)簽:
段落標(biāo)簽:p
原樣輸出:pre
字體標(biāo)簽:font
上下標(biāo) 和轉(zhuǎn)義字符(注冊(cè)商品和版權(quán)所有):sup和sub ? ?
有序列標(biāo)簽
ol li列表項(xiàng)
無(wú)序列標(biāo)簽
ul li列表項(xiàng)
超鏈接標(biāo)簽
1) 連接到某個(gè)資源文件或者資源地址(URL)
2) 作為錨連接來使用
在同一個(gè)html頁(yè)面下:
1) 打錨點(diǎn):
<a name=”錨點(diǎn)名稱”></a>
2) 創(chuàng)建跳轉(zhuǎn)
<a href=”#錨點(diǎn)名稱”>開始跳轉(zhuǎn)</a>
不同頁(yè)html頁(yè)面下:
1)打錨點(diǎn):
<a name=”錨點(diǎn)名稱”></a>
3) 創(chuàng)建跳轉(zhuǎn)標(biāo)記
4) <a href=”資源文件或者資源地址#錨點(diǎn)名稱”>開始跳轉(zhuǎn)</a>
表格標(biāo)簽:
table標(biāo)簽
屬性:border 表格的邊框 width 表格的寬度 height表格的高度
align:標(biāo)簽在瀏覽器中的對(duì)齊方式 bgColor:背景色
tr:行標(biāo)簽
td:列(單元格)
th:表頭標(biāo)簽(居中,加粗)
行合并:rospan
列合并:colspan
圖片標(biāo)簽:
<img src=”圖片資源文件” alt=”圖片的失效的時(shí)候替代文本” title=”懸浮狀態(tài)顯示當(dāng)前文字” width=”寬度”/>
表單標(biāo)簽:重點(diǎn)
form表單中的action提交的地址
method屬性:提交方式: get/post
表單項(xiàng)中必填name屬性:作為后臺(tái)標(biāo)記
文本輸入框
密碼輸入框
單選框
復(fù)選框
提交
1 CSS是使用方式
1) 行內(nèi)樣式 <input style=”書寫樣式” />
弊端:不利于維護(hù)(style屬性和html標(biāo)簽混合在一塊)
2) 內(nèi)部樣式
在head標(biāo)簽體中,書寫style標(biāo)簽
<style type=”text/css”>
書寫樣式;
</style>
講課(習(xí)慣使用這種方式)
3) 外部樣式
A:創(chuàng)建一個(gè)獨(dú)立一后綴名為.css結(jié)尾的css文件
選擇器{
書寫樣式
}
B:導(dǎo)入外部css文件
書寫:<link href=”xx.css” rel=”stylesheet”/>
2 CSS的語(yǔ)法
選擇器(id選擇器,類選擇器,標(biāo)簽選擇,并集選擇器,交集選擇器,通用選擇器){
CSS屬性:CSS的屬性值; 分號(hào)可以省略,建議永遠(yuǎn)給出分號(hào)
CSS屬性(字體,背景,邊框,背景圖片的起始位置…(大小,顏色,邊框的樣式,邊框的尺寸left/center/right…)
}
3 CSS的選擇器
選擇器的分類:
a 標(biāo)簽選擇器(最普通一種方式)
書寫格式:
標(biāo)簽名稱{
CSS屬性:css屬性值;
}
b id選擇器
在標(biāo)簽中一定要給定一個(gè)id屬性,并且指定id屬性值
<input type=”text” id=”inputId” >
書寫格式:
#id屬性值{
書寫樣式;
}
注意事項(xiàng):
1) 一個(gè)標(biāo)簽同時(shí)被標(biāo)簽選擇和id選擇器選中,那么id選擇器的優(yōu)先級(jí)要高于標(biāo)簽選擇器
2)在同一個(gè)html頁(yè)面中,不要給多個(gè)標(biāo)簽指定同名id屬性,如果指定同名id屬性值,那么js的時(shí)候,獲取標(biāo)簽對(duì)象的時(shí)候,獲取不到:getElementById(“id屬性值”) ;
c 類選擇器
在一個(gè)標(biāo)簽中使用類選擇器,要指定一個(gè)屬性:class屬性
<input type=”text” class=”inputCls”>
書寫格式:
.class屬性值(inputCls){
書寫樣式;
}
注意事項(xiàng):
在同一個(gè)頁(yè)面下,多個(gè)標(biāo)簽可以指定同名的class屬性
d 并集選擇器(同時(shí)選中多個(gè)標(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:四個(gè)狀態(tài){….}
顯示的效果順序:link visited hover active
作業(yè):制作一個(gè)首頁(yè)
雖然在制作過程有些波折，并且沒有安排圖片，但是總算制作成功了！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首頁(yè)</title>
<style type="text/css">
body{
border: groove #000;
width: 10o%;
height: 3000px;
}
#k{
background-image: url(../img/logo.gif);
width:150px ;
height: 50px;
background-repeat:no-repeat ;
background-position: left;
}
#l{
padding-left: 500px;
margin-left: 150px;
background-image:url(../img/header.jpg);
width: 320px;
height: 50px;
background-repeat:no-repeat ;
background-position: center;
}
#m{
padding: 20px 0 0 800px;
}
#c{
border: groove;
background-color:#000 ;
width:100% ;
height: 70px;
margin-top: 30px;
}
#c{
font:italic bold 24px "黑體" ;
color: #0f0;
line-height: 50px;
}
#d{
border: groove;
background-color:#000 ;
width:100%;
height: 800px;
background-image: url(../img/1.jpg);
background-repeat:no-repeat ;
background-position:center ;
}
#n{
font:normal bold 36px "黑體";
}
#o{
width: 90%;
height: 50px;
background-image: url(../img/title2.jpg);
background-repeat:no-repeat ;
background-position:left;
}
#p{
background-image: url(../img/big01.jpg);
background-repeat:no-repeat ;
background-position: left;
width: 4%;
height: 330px;
padding: 130px;
}
#q{
background-image:url(../img/middle01.jpg) ;
background-repeat:no-repeat ;
background-position: left top;
width:30% ;
height:400px ;
}
#r1{
background-image: url(../img/small08.jpg);
background-repeat:no-repeat;
background-position:left top ;
width: 10%;
height: 180px;
margin-left:80px ;
}
#r2{
background-image: url(../img/small08.jpg);
background-repeat:no-repeat;
background-position:left top;
width: 10%;
height: 180px;
margin-left:80px ;
}
#r3{
background-image: url(../img/small08.jpg);
background-repeat:no-repeat;
background-position: left top;
width: 10%;
height: 180px;
margin-left:80px ;
}
#r4{
width:40% ;
height: 30px;
padding: 50px 0 0 870px;
}
#r5{
width:40% ;
height: 190px;
padding: 200px 0 0 870px;
}
#r6{
background-image: url(../img/small08.jpg);
background-repeat:no-repeat ;
background-position: center top;
width:130px ;
height: 150px;
margin-left:50px ;
}
#r7{
width:90% ;
height: 30px;
padding: 150px 0 0 400px;
}
#r8{
width:90% ;
height: 30px;
padding: 10px 0 0 400px;
}
#f{
width: 100%;
height: 150px;
background-image:url(../img/ad.jpg) ;
background-repeat:no-repeat ;
background-position:left ;
}
#i{
width: 100%;
height: 50px;
text-align: center;
}
#g{
width: 100%;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="k" ></div>
<div id="l" ></div>
<div id="m">
<a href="#a">登陸</a> <a href="#a">注冊(cè)</a> <a href="#a">購(gòu)物車</a>
</div>
</div>
<div id="c">
<a href="#a">首頁(yè)</a> <a href="#a">手機(jī)數(shù)碼</a> <a href="#a">電腦辦公</a> <a href="#a">電腦辦公</a> <a href="#a">電腦辦公</a>
</div>
<div id="d"></div>
<div id="e">
<div id="n" >最新商品</div>
<div id="o" ></div>
<div id="p" ></div>
<div id="q" ></div>
<div id="r1" ></div>
<div id="r2" ></div>
<div id="r3" ></div>
<div id="r4">
<a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a>
</div>
<div id="r5">200 200 200</div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r7">
<a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a>
</div>
<div id="r8">200 200 200 200 200 200 200</div>
</div>
<div id="f">
<img src="../img/ad.jpg" width="100%">
</div>
<div id="e">
<div id="n" >最新商品</div>
<div id="o" ></div>
<div id="p" ></div>
<div id="q" ></div>
<div id="r1" ></div>
<div id="r2" ></div>
<div id="r3" ></div>
<div id="r4">
<a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a>
</div>
<div id="r5">200 200 200</div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r6"></div>
<div id="r7">
<a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a> <a href="#a">電飯煲</a>
</div>
<div id="r8">200 200 200 200 200 200 200</div>
</div>
</div>
<div id="h">
<img src="../img/footer.jpg" width="100%">
</div>
<div id="i">
<a href="#a">關(guān)于我們</a>
<a href="#a">聯(lián)系我們</a>
<a href="#a">招賢納士</a>
<a href="#a">法律聲明</a>
<a href="#a">友情鏈接</a>
</div>
<div id="g">
Copyright<sup>©</sup> 西部開源 版權(quán)所有
</div>
</div>
</body></html>
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼