關(guān)于web前端入門
一、軟件結(jié)構(gòu)劃分
1、C/S結(jié)構(gòu):Client(客戶)-Server(服務(wù)器)之間的交互。特點(diǎn):客戶端的軟件必須升級才能使用服務(wù)器高版本的功能。例如:阿里巴巴等。
2、B/S結(jié)構(gòu):Browser(瀏覽器)-Server(服務(wù)器)之間的交互。特點(diǎn):瀏覽器端的軟件無需特定的升級就可訪問服務(wù)器端的網(wǎng)站。例如:網(wǎng)易新聞等。
JavaWeb/EE均基于B/S結(jié)構(gòu)。
二、網(wǎng)站基本認(rèn)識
基于B/S結(jié)構(gòu)的應(yīng)用都叫網(wǎng)站。組成:由很多的html標(biāo)簽組成。
三、W3C組織
規(guī)范了html、css、js(javascript)的寫法。其中:
html:結(jié)構(gòu)化標(biāo)準(zhǔn)。
css:美化網(wǎng)頁的樣式。
javascript:行為化標(biāo)準(zhǔn)。
四、HTML(Hyper Text Markup Language,超文本標(biāo)記語言)
1、HTML語言結(jié)構(gòu)
2、html常用標(biāo)簽
(1)常用文本標(biāo)簽
標(biāo)題標(biāo)簽:h2~h7(字體依次變?。?br/>縮進(jìn)標(biāo)簽:blockquote
段落標(biāo)簽:p
換行標(biāo)簽:<br/>
字體標(biāo)簽:font
上/下標(biāo)標(biāo)簽:sup/sub
水平線標(biāo)簽:hr
原樣輸出標(biāo)簽:pre
(2)圖像標(biāo)簽img
空標(biāo)簽體:<img/>
主要屬性如下:
src:鏈接到的資源圖片。
width:圖片寬度。兩種使用方式:a、指定像素;b、百分比(常用)。
height:圖片高度。
title:懸停狀態(tài)時顯示的文字。
alt:圖片失效時,用來解釋說明該圖片的文字。
(3)表格標(biāo)簽table
tr:行標(biāo)簽
td:單元格(列標(biāo)簽)
th:表頭標(biāo)簽(特點(diǎn):自動居中、自動加粗)
主要屬性如下:
border:邊框(1px)(必有屬性)。
align:當(dāng)前表格在瀏覽器中的對齊方式。屬性值:center、left、right。
bgcolor:背景顏色。
rowspan:行合并。
colspan:列合并。
width:表格寬度。
height:表格高度。
caption:標(biāo)題標(biāo)簽。必須放在<table>標(biāo)簽之后,且每個表格只能規(guī)定一個標(biāo)題。
(4)表單標(biāo)簽form(重點(diǎn))
作用:采集用戶輸入的數(shù)據(jù)。
應(yīng)用場景:a、登錄。輸入用戶名基本信息(用戶名、密碼等)→點(diǎn)擊登錄→提交到系統(tǒng)后臺→系統(tǒng)校驗(yàn)是否存在該用戶→若存在則登錄成功,否則失敗。b、注冊。采集用戶輸入信息→提交后臺→服務(wù)器數(shù)據(jù)庫查看是否有當(dāng)前用戶名,若有注冊失敗,若無則成功。
重要屬性:
action:提交的地址(資源文件或URL(統(tǒng)一資源定位符))。
method:提交方式,常用get、post。get與post區(qū)別如下:
get提交方式:a、將用戶信息戰(zhàn)士到地址欄中(不安全);b、提交的文件大小不能超過64kb。
post提交方式:a、不會將用戶的信息展示到地址欄中(安全);b、提交文件大小無限制。
onsubmit:表示當(dāng)前表單是否提交成功。true:提交成功。false:提交失敗。
name:表單標(biāo)簽中name屬性必須指定,用來給后臺提交。
舉例:
(5)超鏈接標(biāo)簽a
作用:a、連接到某個資源文件或資源地址(URL);b、作為錨鏈接使用。
在同一個html頁面下時:
a、打錨點(diǎn)<a name="錨點(diǎn)名稱">錨點(diǎn)名稱</a>
b、創(chuàng)建跳轉(zhuǎn)<a href="#錨點(diǎn)名稱">跳轉(zhuǎn)名稱</a>
在不同html頁面下時:
a、打錨點(diǎn)<a name="錨點(diǎn)名稱">錨點(diǎn)名稱</a>
b、創(chuàng)建跳轉(zhuǎn)標(biāo)記
c、跳轉(zhuǎn)名稱<a href="資源文件或資源地址#錨點(diǎn)名稱">跳轉(zhuǎn)名稱</a>
常用屬性:
href:連接到的資源文件或地址。
target:打開資源文件的方式。常用屬性值:_self(在當(dāng)前窗口直接打開)、_blank(新建窗口打開)。
常用協(xié)議:
file://本地文件協(xié)議。
http://自己執(zhí)行流程。通過查看hosts文件中有沒有該域名對應(yīng)的ip。若有,調(diào)用程序訪問,若無,聯(lián)網(wǎng)操作訪問。
thunder://迅雷協(xié)議。
mailto://郵件協(xié)議。
(6)轉(zhuǎn)義字符(必須加分號)
空格: ; <:⁢ >:> 注冊商標(biāo):®; 版權(quán)所有:©;
五、CSS(層疊樣式表Cascading Style Sheet)
1、三種使用方式
(1)行內(nèi)樣式
標(biāo)簽style屬性:指定樣式
弊端:style屬性和html標(biāo)簽混合使用,不利于后期維護(hù)
(2)內(nèi)部樣式(在head標(biāo)簽中,書寫style標(biāo)簽)
<style type="text/css">
標(biāo)簽名{
書寫樣式;
}
</style>
(3)外部樣式
a.創(chuàng)建一個獨(dú)立的后綴名為.css結(jié)尾的css文件
選擇器{
書寫樣式;
}
b.導(dǎo)入外部css文件
<link href="xxx.css" rel="stylesheet" type="text/css">
2、css選擇器
(1)標(biāo)簽選擇器
標(biāo)簽名稱{
css屬性:css屬性值;
}
(2)id選擇器
#id屬性值{
css屬性:css屬性值;
}
a、若一個標(biāo)簽同時被標(biāo)簽選擇器和id選擇器選中,id選擇器優(yōu)先級高于標(biāo)簽選擇器。
b、在同一個html頁面中,不能給多個標(biāo)簽指定同名id屬性。若同名,在js獲取標(biāo)簽對象時,無法獲取到。getElementById(”id屬性值“)。
(3)類選擇器
.class屬性值{
css屬性:css屬性值;
}
同一個html頁面下,多個標(biāo)簽可制定同名class屬性。
(4)并集選擇器(同時選中多個標(biāo)簽,標(biāo)簽之間為”,“)
選擇器1,選擇器2,......{
css屬性:css屬性值;
}
(5)交集選擇器(同時選中多個標(biāo)簽,標(biāo)簽之間為空格)
選擇器1 選擇器 ......{
css屬性:css屬性值;
}
(6)偽類選擇器(偽類表示一種狀態(tài))
![](https://s1.51cto.com/images/blog/201803/29/7171fe7d00dfdaea45adc18d23a5d4bd.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
3、css常用屬性
(1)文本屬性
![](https://s1.51cto.com/images/blog/201803/29/49920d48a5c837c40cde329f4aa12033.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
(2)字體屬性
![](https://s1.51cto.com/images/blog/201803/29/1296d2becb8266b6511c29fa6f7be75b.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
(3)背景屬性
![](https://s1.51cto.com/images/blog/201803/29/c981cf4cb4d5d3393469163c5dbfae35.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
(4)列表屬性
![](https://s1.51cto.com/images/blog/201803/29/dfc283640d493893e1d1184190100a21.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
(5)表格屬性
![](https://s1.51cto.com/images/blog/201803/29/5a2cb28dbe65526f6fe04ca102f08309.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
六、盒子模型(div塊標(biāo)簽+css網(wǎng)頁布局)
常用屬性:
容量:給div標(biāo)簽指定高度和寬度。
設(shè)置邊框:div{
border:尺寸 樣式 顏色;
width:寬度;
height:高度;
}
內(nèi)邊距:padding(盒子與內(nèi)容之間的距離)。padding-left:盒子內(nèi)邊距向右移動。其他移動方向以此類推。
外邊距:margin(盒子和盒子之間的距離),下外邊距。其他方向以此類推。簡寫屬性:margin:上 右 下 左; 給按鈕設(shè)置外邊距時情況特殊,應(yīng)當(dāng)作為一個塊,整體設(shè)置外邊距。
display屬性:常用屬性值:none(常用此元素不會被顯示,被隱藏)、block(此元素顯示為塊級元素,前后帶有換行符)、inline(此元素被顯示為內(nèi)聯(lián)元素,前后無換行符)。
float浮動屬性:常用屬性值:left(左浮動)、right(右浮動)。
clear屬性:設(shè)置一個元素側(cè)面是否有允許其他的浮動元素。常用屬性值:both(在當(dāng)前兩側(cè)都不允許有浮動元素)。
關(guān)于java入門
一、jdk安裝目錄的結(jié)構(gòu)
bin:全部是后綴名為.exe的可執(zhí)行文件。
db:針對開發(fā)工具包的一些核心的jar包(數(shù)據(jù)庫)。
include:以.h結(jié)尾的后綴文件,c文件。
lib:存放很多的核心類庫。
jre:包含了jvm(java虛擬機(jī))。(jdk包含了java運(yùn)行環(huán)境,jre包含了jvm)。
src.zip:java源碼。
二、基本格式
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
新聞標(biāo)題:web前端入門與java入門-創(chuàng)新互聯(lián)
URL鏈接:http://www.rwnh.cn/article42/dghghc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)站排名、移動網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容