HTML基礎和Java基礎
1 軟件的結構劃分:
1) C/S結構:Client->Server之間的交互
典型特點:1)客戶端的軟件必須升級才能使用服務器端高版本的功能
應用:阿裏巴巴 QQ,飛秋…
2) B/S結構:Browser-Server:瀏覽器端和服務器端之間的交互
特點:瀏覽器端的軟件不需要特定的升級就可以訪問服務器的網站
應用:大型遊戲網站,網易新聞….
JavaWeb/EE --->都是基於B/S結構的…
2 什麽是網站
將基於B/S的應用都叫網站.一個網站是由什麽組成的?一個網站是有很多的html標簽組成;
3 HTML
HTML:全稱:hyper Text Markup Language:超文本標記語言
針對字體的顏色,大小
針對圖片,動畫,音頻,視頻等等進行操作!
4 HTML語言的結構
<html>
<head> 編碼規範的(gbk/utf-8) -?頭文件標簽
<title>標題標簽</title>
</head>
<body>
html主體部分:這些內容最終會在瀏覽器中顯示
</body>
</html> -?有標簽體的標簽
5 HTML結構的解釋
html:根標簽-?標簽體中會很多子標簽
head:頭文件
body:網頁的主體部分,會顯示內容
6 文本標簽
標題標簽: h1~h6
水平線標簽:hr
換行標簽<br/>
段落縮進:blockquote
上下標標簽:sup和sub
原樣輸出標簽:pre
字體標簽:font
居中標簽:center
圖像標簽:
圖像標簽:img 空標簽體
<img/>
屬性:
src:鏈接到的資源圖片
width:圖片的寬度 兩種方式:一種指定px(像素) 第二種:百分比
title:懸停狀態,會顯示文字
alt:當圖片失效的時候,用來解釋說明該圖片
height:圖片的高度
轉義字符:
空格: ? 註意事項(分號一定要帶上)
<: < ; (letter than)
:>(greater than)
<h1></h1>
註冊商標:? ?版權所有:? ?
表格標簽
表單標簽
作用:就是采集用戶輸入的數據
應用場景:
登錄:--?用戶輸入用戶的基本信息(用戶名,密碼,郵箱等等)--?點擊登錄--->提交到系統後臺--?後臺校驗是否存在該用戶-?存在,登錄成功,否則,給提示,用戶名或者密碼.其他錯誤!
註冊:--?采集用戶輸入的數據--?提交後臺--?服務器數據庫查看是否有當前用戶名,有表示,註冊失敗;否則註冊成功!
表單標簽中method提交方式和get的區別
- get方式提交：（1）將用戶的信息的信息展示到地址欄中（不安全）（2）get方式提交的文件大小有限制，不超過64kb.
post方式提交：（1）post提交方式不會顯示到地址欄中（2）該提交方式無大小限制。
CSS:
前端知識:w3c組織:規範了html,css,javascript(js)寫法
html:結構化標準
css:網頁的樣式(美化網頁的)
javascript:行為化標準
CSS:全稱:Cascading style sheet:層疊樣式表
CSS的使用有三種方式:
1) 行內樣式
標簽 style屬性:指定樣式
弊端:style屬性它和html標簽混合使用,不利於後期維護
2) 內部樣式
書寫格式:
選中某個標簽名{
書寫樣式;
}
講課使用的是內部樣式
3) 外部方式
a) 創建css文件:指定標簽的樣式
標簽選擇器{
書寫樣式;
}
b) 需要外部導入該css文件
rel屬性:關聯層疊樣式表
<link href=”需要被導入的css文件” ref=”stylesheet”>
總結:
1 :軟件結構的劃分:
兩種:C/S B/S
2 html語言:
熟練掌握幾個常用的標簽:
段落標簽:p
原樣輸出:pre
字體標簽:font
上下標 和轉義字符(註冊商品和版權所有):sup和sub ? ?
有序列標簽
ol li列表項
無序列標簽
ul li列表項
超鏈接標簽
1) 連接到某個資源文件或者資源地址(URL)
2) 作為錨連接來使用
在同一個html頁面下:
1) 打錨點:
<a name=”錨點名稱”></a>
2) 創建跳轉
<a href=”#錨點名稱”>開始跳轉</a>
不同頁html頁面下:
1)打錨點:
<a name=”錨點名稱”></a>
3) 創建跳轉標記
4) <a href=”資源文件或者資源地址#錨點名稱”>開始跳轉</a>
表格標簽:
table標簽
屬性:border 表格的邊框 width 表格的寬度 height表格的高度
align:標簽在瀏覽器中的對齊方式 bgColor:背景色
tr:行標簽
td:列(單元格)
th:表頭標簽(居中,加粗)
行合並:rospan
列合並:colspan
圖片標簽:
<img src=”圖片資源文件” alt=”圖片的失效的時候替代文本” title=”懸浮狀態顯示當前文字” width=”寬度”/>
表單標簽:重點
form表單中的action提交的地址
method屬性:提交方式: get/post
表單項中必填name屬性:作為後臺標記
文本輸入框
密碼輸入框
單選框
復選框
提交
1 CSS是使用方式
1) 行內樣式 <input style=”書寫樣式” />
弊端:不利於維護(style屬性和html標簽混合在一塊)
2) 內部樣式
在head標簽體中,書寫style標簽
<style type=”text/css”>
書寫樣式;
</style>
講課(習慣使用這種方式)
3) 外部樣式
A:創建一個獨立一後綴名為.css結尾的css文件
選擇器{
書寫樣式
}
B:導入外部css文件
書寫:<link href=”xx.css” rel=”stylesheet”/>
2 CSS的語法
選擇器(id選擇器,類選擇器,標簽選擇,並集選擇器,交集選擇器,通用選擇器){
CSS屬性:CSS的屬性值; 分號可以省略,建議永遠給出分號
CSS屬性(字體,背景,邊框,背景圖片的起始位置…(大小,顏色,邊框的樣式,邊框的尺寸left/center/right…)
}
3 CSS的選擇器
選擇器的分類:
a 標簽選擇器(最普通一種方式)
書寫格式:
標簽名稱{
CSS屬性:css屬性值;
}
b id選擇器
在標簽中一定要給定一個id屬性,並且指定id屬性值
<input type=”text” id=”inputId” >
書寫格式:
#id屬性值{
書寫樣式;
}
註意事項:
1) 一個標簽同時被標簽選擇和id選擇器選中,那麽id選擇器的優先級要高於標簽選擇器
2)在同一個html頁面中,不要給多個標簽指定同名id屬性,如果指定同名id屬性值,那麽js的時候,獲取標簽對象的時候,獲取不到:getElementById(“id屬性值”) ;
c 類選擇器
在一個標簽中使用類選擇器,要指定一個屬性:class屬性
<input type=”text” class=”inputCls”>
書寫格式:
.class屬性值(inputCls){
書寫樣式;
}
註意事項:
在同一個頁面下,多個標簽可以指定同名的class屬性
d 並集選擇器(同時選中多個標簽)選擇器1,選擇器2,…{
書寫樣式;
}
e:交集選擇器
書寫格式:
選擇器1 選擇器2 選擇器3{
書寫樣式;
}
4 偽類選擇器
偽類表示一種狀態:超鏈接標簽a的幾種狀態
link:鼠標沒有訪問過的狀態
hover:鼠標經過的狀態
active:鼠標激活狀態(鼠標點擊了,但是沒有松開的狀態)
visited:鼠標訪問過的狀態(已經點擊了,並且松開的狀態)
書寫格式:a:四個狀態{….}
顯示的效果順序:link visited hover active
作業:制作一個首頁
雖然在制作過程有些波折，並且沒有安排圖片，但是總算制作成功了！
<!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" style="float: left"></div>
<div id="l" style="float: left"></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">手機數碼</a> <a href="#a">電腦辦公</a> <a href="#a">電腦辦公</a> <a href="#a">電腦辦公</a>
</div>
<div id="d"></div>
<div id="e">
<div id="n" style="float: left">最新商品</div>
<div id="o" style="float: left"></div>
<div id="p" style="float: left"></div>
<div id="q" style="float: left"></div>
<div id="r1" style="float: left"></div>
<div id="r2" style="float: left"></div>
<div id="r3" style="float: left"></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"style="float: left"></div>
<div id="r6"style="float: left"></div>
<div id="r6"style="float: left"></div>
<div id="r6"style="float: left"></div>
<div id="r6"style="float: left"></div>
<div id="r6"style="float: left"></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" style="float: left">最新商品</div>
<div id="o" style="float: left"></div>
<div id="p" style="float: left"></div>
<div id="q" style="float: left"></div>
<div id="r1" style="float: left"></div>
<div id="r2" style="float: left"></div>
<div id="r3" style="float: left"></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"style="float: left"></div>
<div id="r6"style="float: left"></div>
<div id="r6"style="float: left"></div>
<div id="r6"style="float: left"></div>
<div id="r6"style="float: left"></div>
<div id="r6"style="float: left"></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">關於我們</a>
<a href="#a">聯系我們</a>
<a href="#a">招賢納士</a>
<a href="#a">法律聲明</a>
<a href="#a">友情鏈接</a>
</div>
<div id="g">
Copyright<sup>©</sup> 西部開源 版權所有
</div>
</div>
</body></html>
HTML基礎和Java基礎