HTML基礎(chǔ)和Java基礎(chǔ)
Web的入門
1 軟件的結(jié)構(gòu)劃分:
1) C/S結(jié)構(gòu):Client->Server之間的交互
典型特點:1)客戶端的軟件必須升級才能使用服務(wù)器端高版本的功能
應(yīng)用:阿里巴巴 QQ,飛秋…
2) B/S結(jié)構(gòu):Browser-Server:瀏覽器端和服務(wù)器端之間的交互
特點:瀏覽器端的軟件不需要特定的升級就可以訪問服務(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)
<html>
<head> 編碼規(guī)范的(gbk/utf-8) -?頭文件標(biāo)簽
<title>標(biāo)題標(biāo)簽</title>
</head>
<body>
html主體部分:這些內(nèi)容最終會在瀏覽器中顯示
</body>
</html> -?有標(biāo)簽體的標(biāo)簽
5 HTML結(jié)構(gòu)的解釋
html:根標(biāo)簽-?標(biāo)簽體中會很多子標(biāo)簽
head:頭文件
body:網(wǎng)頁的主體部分,會顯示內(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),會顯示文字
alt:當(dāng)圖片失效的時候,用來解釋說明該圖片
height:圖片的高度
成都創(chuàng)新互聯(lián)公司始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)十余年累計超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的營銷解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：柔性防護(hù)網(wǎng)等企業(yè)，備受客戶稱揚(yáng)。
轉(zhuǎn)義字符:
空格: ? 注意事項(分號一定要帶上)
<: < ; (letter than)
:>(greater than)
<h2></h2>
注冊商標(biāo):? ?
版權(quán)所有:? ?
表格標(biāo)簽
表單標(biāo)簽
作用:就是采集用戶輸入的數(shù)據(jù)
應(yīng)用場景:
登錄:--?用戶輸入用戶的基本信息(用戶名,密碼,郵箱等等)--?點擊登錄--->提交到系統(tǒng)后臺--?后臺校驗是否存在該用戶-?存在,登錄成功,否則,給提示,用戶名或者密碼.其他錯誤!
注冊:--?采集用戶輸入的數(shù)據(jù)--?提交后臺--?服務(wù)器數(shù)據(jù)庫查看是否有當(dāng)前用戶名,有表示,注冊失敗;否則注冊成功!
表單標(biāo)簽中method提交方式和get的區(qū)別
- get方式提交：（1）將用戶的信息的信息展示到地址欄中（不安全）（2）get方式提交的文件大小有限制，不超過64kb.
post方式提交：（1）post提交方式不會顯示到地址欄中（2）該提交方式無大小限制。
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)層疊樣式表
<link href=”需要被導(dǎo)入的css文件” ref=”stylesheet”>
總結(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列表項
無序列標(biāo)簽
ul li列表項
超鏈接標(biāo)簽
1) 連接到某個資源文件或者資源地址(URL)
2) 作為錨連接來使用
在同一個html頁面下:
1) 打錨點:
<a name=”錨點名稱”></a>
2) 創(chuàng)建跳轉(zhuǎn)
<a href=”#錨點名稱”>開始跳轉(zhuǎn)</a>
不同頁html頁面下:
1)打錨點:
<a name=”錨點名稱”></a>
3) 創(chuàng)建跳轉(zhuǎn)標(biāo)記
4) <a href=”資源文件或者資源地址#錨點名稱”>開始跳轉(zhuǎn)</a>
表格標(biāo)簽:
table標(biāo)簽
屬性:border 表格的邊框 width 表格的寬度 height表格的高度
align:標(biāo)簽在瀏覽器中的對齊方式 bgColor:背景色
tr:行標(biāo)簽
td:列(單元格)
th:表頭標(biāo)簽(居中,加粗)
行合并:rospan
列合并:colspan
圖片標(biāo)簽:
<img src=”圖片資源文件” alt=”圖片的失效的時候替代文本” title=”懸浮狀態(tài)顯示當(dāng)前文字” width=”寬度”/>
表單標(biāo)簽:重點
form表單中的action提交的地址
method屬性:提交方式: get/post
表單項中必填name屬性:作為后臺標(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)建一個獨立一后綴名為.css結(jié)尾的css文件
選擇器{
書寫樣式
}
B:導(dǎo)入外部css文件
書寫:<link href=”xx.css” rel=”stylesheet”/>
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屬性值
<input type=”text” id=”inputId” >
書寫格式:
#id屬性值{
書寫樣式;
}
注意事項:
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屬性
<input type=”text” class=”inputCls”>
書寫格式:
.class屬性值(inputCls){
書寫樣式;
}
注意事項:
在同一個頁面下,多個標(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)點擊了,但是沒有松開的狀態(tài))
visited:鼠標(biāo)訪問過的狀態(tài)(已經(jīng)點擊了,并且松開的狀態(tài))
書寫格式:a:四個狀態(tài){….}
顯示的效果順序:link visited hover active
作業(yè):制作一個首頁
雖然在制作過程有些波折，并且沒有安排圖片，但是總算制作成功了！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首頁</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">注冊</a> <a href="#a">購物車</a>
</div>
</div>
<div id="c">
<a href="#a">首頁</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>
文章標(biāo)題：HTML基礎(chǔ)和Java基礎(chǔ)
瀏覽路徑：http://www.rwnh.cn/article2/ihjgic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計、品牌網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站制作怎么才能降低網(wǎng)站的跳轉(zhuǎn)率呢？ 2015-02-14
- 一個網(wǎng)站運(yùn)維人員，在網(wǎng)站制作完成上線后要做好哪些工作？ 2013-06-01
- 成都網(wǎng)站制作seo的5大誤區(qū) 2013-10-19
- 英文網(wǎng)站制作與中文的網(wǎng)站制作區(qū)別 2016-10-30
- 開源網(wǎng)站制作系統(tǒng)是不是企業(yè)網(wǎng)站建設(shè)的理想選擇？ 2016-12-26
- 成都網(wǎng)站制作需要哪些流程？ 2022-06-13
- 企業(yè)建設(shè)手機(jī)網(wǎng)站必須留意的事宜 2016-11-16
- 企業(yè)網(wǎng)站開發(fā)使用開源的好還是定制開發(fā)的好？ 2016-10-27
- 周口手機(jī)網(wǎng)站制作：建設(shè)手機(jī)網(wǎng)站這些問題必須要注意！ 2021-10-28
- 菏澤網(wǎng)站制作：網(wǎng)絡(luò)推廣SEO優(yōu)化將來照舊時代成長潮水的產(chǎn)品 2023-01-01
- 特色新穎、作用up的網(wǎng)站制作 企業(yè)值得擁有 2021-04-28
- 商丘網(wǎng)站制作開發(fā)：在開發(fā)制作網(wǎng)站之前做好網(wǎng)站定位非常重要！ 2021-10-24