整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、web概念概述
1.1 JavaWeb：使用Java語言開發(fā)基于互聯(lián)網(wǎng)的項(xiàng)目
1.2 軟件架構(gòu)：
1.2.1 C/S: Client/Server 客戶端/服務(wù)器端
在用戶本地有一個(gè)客戶端程序，在遠(yuǎn)程有一個(gè)服務(wù)器端程序
如：QQ，迅雷...
優(yōu)點(diǎn)：用戶體驗(yàn)好
缺點(diǎn)：開發(fā)、安裝，部署，維護(hù) 麻煩
1.2.2 B/S: Browser/Server 瀏覽器/服務(wù)器端
只需要一個(gè)瀏覽器，用戶通過不同的網(wǎng)址(URL)，客戶訪問不同的服務(wù)器端程序
優(yōu)點(diǎn)：開發(fā)、安裝，部署，維護(hù) 簡單
缺點(diǎn)：如果應(yīng)用過大，用戶的體驗(yàn)可能會受到影響，對硬件要求過高
二、B/S架構(gòu)詳解
2.1 資源分類：
2.1.1 靜態(tài)資源：使用靜態(tài)網(wǎng)頁開發(fā)技術(shù)發(fā)布的資源。
特點(diǎn)：
所有用戶訪問，得到的結(jié)果是一樣的。
如：文本，圖片，音頻、視頻, HTML,CSS,JavaScript
如果用戶請求的是靜態(tài)資源，那么服務(wù)器會直接將靜態(tài)資源發(fā)送給瀏覽器。瀏覽器中內(nèi)置了靜態(tài)資源的解析引擎，可以展示靜態(tài)資源
HTML：用于搭建基礎(chǔ)網(wǎng)頁，展示頁面的內(nèi)容
CSS：用于美化頁面，布局頁面
JavaScript：控制頁面的元素，讓頁面有一些動態(tài)的效果
2.1.2 動態(tài)資源：使用動態(tài)網(wǎng)頁及時(shí)發(fā)布的資源。
特點(diǎn)：
所有用戶訪問，得到的結(jié)果可能不一樣。
如：jsp/servlet,php,asp...
如果用戶請求的是動態(tài)資源，那么服務(wù)器會執(zhí)行動態(tài)資源，轉(zhuǎn)換為靜態(tài)資源，再發(fā)送給瀏覽器
2.1.3 注意：我們要學(xué)習(xí)動態(tài)資源，必須先學(xué)習(xí)靜態(tài)資源！
三、HTML
3.1 概念：是最基礎(chǔ)的網(wǎng)頁開發(fā)語言
Hyper Text Markup Language 超文本標(biāo)記語言
超文本：超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網(wǎng)狀文本.
標(biāo)記語言:
由標(biāo)簽構(gòu)成的語言。<標(biāo)簽名稱> 如 html，xml
標(biāo)記語言不是編程語言
3.2 快速入門：
3.2.1 語法：
1. 創(chuàng)建html文檔，后綴名為.html 或者 .htm
2. 標(biāo)簽分類：
圍堵標(biāo)簽：有開始標(biāo)簽和結(jié)束標(biāo)簽。如 <html> </html>
自閉和標(biāo)簽：開始標(biāo)簽和結(jié)束標(biāo)簽在一起。如 <br/>
3. 標(biāo)簽可以嵌套：
需要正確嵌套，不能你中有我，我中有你
錯(cuò)誤：<a><b></a></b>
正確：<a><b></b></a>
4. 在開始標(biāo)簽中可以定義屬性。屬性是由鍵值對構(gòu)成，值需要用引號(單雙都可)引起來
5. html的標(biāo)簽不區(qū)分大小寫，但是建議使用小寫。
3.2.2 代碼：
<html>
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
3.3 標(biāo)簽學(xué)習(xí)：
3.3.1 文件標(biāo)簽：構(gòu)成html最基本的標(biāo)簽
1、html:html文檔的根標(biāo)簽
2、head：頭標(biāo)簽。用于指定html文檔的一些屬性。引入外部的資源
3、title：標(biāo)題標(biāo)簽。
4、body：體標(biāo)簽
5、<!DOCTYPE html>：html5中定義該文檔是html文檔
3.3.2 文本標(biāo)簽：和文本有關(guān)的標(biāo)簽
1、注釋：<!-- 注釋內(nèi)容 -->
2、<h1> to <h6>：標(biāo)題標(biāo)簽，h1~h6:字體大小逐漸遞減
3、<p>：段落標(biāo)簽
4、<br>：換行標(biāo)簽
5、<hr>：展示一條水平線
文本標(biāo)簽屬性：
color：顏色
width：寬度
size：高度
align：對其方式
center：居中
left：左對齊
right：右對齊
6、<b>：字體加粗
7、<i>：字體斜體
8、<font>:字體標(biāo)簽
9、<center>:文本居中
字體標(biāo)簽屬性：
color：顏色
size：大小
face：字體
屬性定義：
color：
1. 英文單詞：red,green,blue
2. rgb(值1，值2，值3)：值的范圍：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范圍：00~FF之間。如： #FF00FF
width：
1. 數(shù)值：width='20' ,數(shù)值的單位，默認(rèn)是 px(像素)
2. 數(shù)值%：占比相對于父元素的比例
3.3.3 圖片標(biāo)簽：
img：展示圖片
屬性：src：指定圖片的位置
相對路徑：以.開頭的路徑
./：代表當(dāng)前目錄
../:代表上一級目錄
代碼舉例：
<img src="./image/jiangwai_1.jpg">
<img src="../image/jiangwai_1.jpg">
3.3.4 列表標(biāo)簽：
有序列表：
ol:
li:
無序列表：
ul:
li:
3.3.5 鏈接標(biāo)簽：
a:定義一個(gè)超鏈接
屬性：
href：指定訪問資源的URL(統(tǒng)一資源定位符)
target：指定打開資源的方式
_self:默認(rèn)值，在當(dāng)前頁面打開
_blank：在空白頁面打開
代碼：
<a href="http://www.baidu.com">點(diǎn)我</a>
<a href="http://www.baidu.com" target="_blank">點(diǎn)我</a>
<a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>
3.3.6 div和span：
div:每一個(gè)div占滿一整行。塊級標(biāo)簽
span：文本信息在一行展示，行內(nèi)標(biāo)簽 內(nèi)聯(lián)標(biāo)簽
3.3.7 語義化標(biāo)簽：html5中為了提高程序的可讀性，提供了一些標(biāo)簽。
<header>：頁眉
<footer>：頁腳
3.3.8 表格標(biāo)簽：
table：定義表格
屬性：
width：寬度
border：邊框
cellpadding：定義內(nèi)容和單元格的距離
cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、
bgcolor：背景色
align：對齊方式
tr：定義行
bgcolor：背景色
align：對齊方式
td：定義單元格
colspan：合并列
rowspan：合并行
th：定義表頭單元格
<caption>：表格標(biāo)題
<thead>：表示表格的頭部分
<tbody>：表示表格的體部分
<tfoot>：表示表格的腳部分
osition: absolute;使元素完全脫離文檔流（原始位置不保留）
在設(shè)置flex布局之后，子元素的float、clear、vertical-align屬性都將失效
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
默認(rèn)值為：
row，主軸為水平方向，起點(diǎn)在左端。
row-reverse：主軸為水平方向，起點(diǎn)在右端。
column：主軸為垂直方向，起點(diǎn)在上端。
column-reverse：主軸為垂直方向，起點(diǎn)在下端
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
說明:flex-start：左對齊。
flex-end：右對齊。
center：居中。
space-between：兩端對齊，項(xiàng)目之間的間隔相等，即剩余空間等分成間隙。
space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等，所以項(xiàng)目之間的間隔比項(xiàng)目與邊緣的間隔大一倍
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
默認(rèn)值為 stretch，即如果項(xiàng)目未設(shè)置高度或者設(shè)為
auto，將占滿整個(gè)容器的高度。
flex-start：交叉軸的起點(diǎn)對齊。
flex-end：交叉軸的終點(diǎn)對齊。
center：交叉軸的中點(diǎn)對齊。
baseline: 項(xiàng)目的第一行文字的基線對齊
.container {
//定義多根軸線的對齊方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
偽類選擇器（如：hover）和屬性選擇器（如[type="input"]）與一個(gè)類選擇器的優(yōu)先級相同。通用選擇器（＊）和組合器（>、+、~）對優(yōu)先級沒有影響
通常最好讓優(yōu)先級盡可能低，這樣當(dāng)需要覆蓋一些樣式時(shí)，才能有選擇空間
在選擇器中不要使用ID
不要使用！important
創(chuàng)建一個(gè)用于分發(fā)的JavaScript模塊（比如NPM包）時(shí)，強(qiáng)烈建議盡量不要在JavaScript里使用行內(nèi)樣式
正確的做法是在包里包含一個(gè)樣式表。如果組件需要頻繁修改樣式，通常最好用JavaScript給元素添加或者移除類
繼承：
跟文本相關(guān)的屬性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing
有兩個(gè)特殊值可以賦給任意屬性，用于控制層疊：inherit和initial
width的默認(rèn)值就是auto； display: initial等價(jià)于display: inline
在CSS中，1em等于當(dāng)前元素的字號，其準(zhǔn)確值取決于作用的元素
em用在內(nèi)邊距、外邊距以及元素大小上很好，但是用在字號上就會很復(fù)雜
使用rem設(shè)置字號 rem是root em的縮寫。rem不是相對于當(dāng)前元素，而是相對于根元素的單位
一般會用rem設(shè)置字號，用px設(shè)置邊框，用em設(shè)置其他大部分屬性，尤其是內(nèi)邊距、外邊距和圓角（不過我有時(shí)用百分比設(shè)置容器寬度）
vh：視口高度的1/100。
vw：視口寬度的1/100。
vmin：視口寬、高中較小的一方的1/100（IE9中叫vm，而不是vmin）。
vmax：視口寬、高中較大的一方的1/100（本書寫作時(shí)IE和Edge均不支持vmax）
calc()函數(shù)內(nèi)可以對兩個(gè)及其以上的值進(jìn)行基本運(yùn)算。當(dāng)要結(jié)合不同單位的值時(shí)，calc()特別實(shí)用。它支持的運(yùn)算包括：加（+）、減（?）、乘（×）、除（÷）。加號和減號兩邊必須有空白
line-height、z-index、font-weight 無單位
css 變量： 變量名前面必須有兩個(gè)連字符--，塊內(nèi)聲明
使用 var(--xxx)
IE8+支持display: table,IE10+支持彈性盒子或者Flexbox，都默認(rèn)支持等高列
給容器設(shè)置display: flex，它就變成了一個(gè)彈性容器（flex container），子元素默認(rèn)等高
vertical-align聲明只會影響行內(nèi)元素或者table-cell元素
垂直居中指南
在容器里讓內(nèi)容居中最好的方式是根據(jù)特定場景考慮不同因素。做出判斷前，先逐個(gè)詢問自己以下幾個(gè)問題，直到找到合適的解決辦法。其中一些技術(shù)會在后面的章節(jié)中介紹，可根據(jù)情況翻閱對應(yīng)的內(nèi)容尋找答案。? 可以用一個(gè)自然高度的容器嗎？給容器加上相等的上下內(nèi)邊距讓內(nèi)容居中。? 容器需要指定高度或者避免使用內(nèi)邊距嗎？對容器使用display: table-cell和vertical-align: middle。? 可以用Flexbox嗎？ 如果不需要支持IE9，可以用Flexbox居中內(nèi)容。參見第5章。? 容器里面的內(nèi)容只有一行文字嗎？設(shè)置一個(gè)大的行高，讓它等于理想的容器高度。這樣會讓容器高度擴(kuò)展到能夠容納行高。如果內(nèi)容不是行內(nèi)元素，可以設(shè)置為inline-block。? 容器和內(nèi)容的高度都知道嗎？將內(nèi)容絕對定位。參見第7章。（只有當(dāng)前面提到的方法都無效時(shí)才推薦這種方式。）? 不知道內(nèi)部元素的高度？用絕對定位結(jié)合變形（transform）。參見第15章的例子。（還是只有當(dāng)前面提到的方法都無效時(shí)才推薦該方法。）還不確定的話，參考howtocenterincss網(wǎng)站。這個(gè)網(wǎng)站很不錯(cuò)，可以根據(jù)自己的場景填寫幾個(gè)選項(xiàng)，然后它會相應(yīng)地生成垂直居中的代碼
覽器的兼容性越來越好，移動端基本是清一色的webkit，經(jīng)常會用到css的不同尺寸/長度單位，這里做個(gè)整理。
絕對單位
px : Pixel 像素
pt : Points 磅
pc : Picas 派卡
in : Inches 英寸
mm : Millimeter 毫米
cm : Centimeter 厘米
q : Quarter millimeters 1/4毫米
相對單位
% : 百分比
em : Element meter 根據(jù)文檔字體計(jì)算尺寸
rem : Root element meter 根據(jù)根文檔（ body/html ）字體計(jì)算尺寸
ex : 文檔字符“x”的高度
ch : 文檔數(shù)字“0”的的寬度
vh : View height 可視范圍高度
vw : View width 可視范圍寬度
vmin : View min 可視范圍的寬度或高度中較小的那個(gè)尺寸
vmax : View max 可視范圍的寬度或高度中較大的那個(gè)尺寸
運(yùn)算
calc : 四則運(yùn)算
實(shí)例：
h1 { width: calc(100% - 10px + 2rem)單位比例
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
詳細(xì)
絕對單位
px - Pixel 像素
像素 px 相對于設(shè)備顯示器屏幕分辨率而言。
div { font-size: 12px }
p { text-indent: 24px }pt Points 磅
1 pt = 1/72 英寸
div { font-size: 10pt }
p { height: 100pt }pc Picas 派卡
十二點(diǎn)活字（印刷中使用的），相當(dāng)于我國新四號鉛字的尺寸。
div { font-size: 10pc }
p { height: 10pc }in Inches 英寸
div { font-size: 10in }
p { height: 10in }mm Millimeter 毫米
div { font-size: 10mm }
p { height: 10mm }cm Centimeter 厘米
div { font-size: 10cm }
p { height: 10cm }q Quarter millimeters 1/4毫米
div { font-size: 20q }
p { height: 100q }相對單位
% 百分比
相對于父元素寬度
<body>
em Element meter 根據(jù)文檔計(jì)算尺寸
相對于當(dāng)前文檔對象內(nèi)文本的字體尺寸而言，若未指定字體大小則繼承自上級元素，以此類推，直至 body，若 body 未指定則為瀏覽器默認(rèn)大小。
<body>
rem Root element meter 根據(jù)根文檔（ body/html ）字體計(jì)算尺寸
相對于根文檔對象（ body/html ）內(nèi)文本的字體尺寸而言，若未指定字體大小則繼承為瀏覽器默認(rèn)字體大小。
ex 文檔字符“x”的高度
相對于字符“x”的高度，通常為字體高度的一半，若未指定字體尺寸，則相對于瀏覽器的默認(rèn)字體尺寸。
至于為啥是x，我TM也不知道。
ch 文檔數(shù)字“0”的的寬度
同上，相對于數(shù)字“0”的寬度。
一張圖解釋：
vh View height / vw View Width - 可視范圍
相對于可視范圍的高度和寬度，可視范圍被均分為 100 單位的 vh/vw；可視范圍是指屏幕可見范圍，不是父元素的，百分比是相對于包含它的最近的父元素的高度和寬度。
假設(shè)設(shè)備可視范圍為高度 900px，寬度 750px，則， 1 vh = 900px/100 = 9px，1vw = 750px/100 = 7.5px
。
vmin / vmax 可視范圍的寬度或高度中較小/較大的那個(gè)尺寸
假設(shè)瀏覽器的寬度設(shè)置為 1200px，高度設(shè)置為 800px， 則 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px 。
如果寬度設(shè)置為 600px，高度設(shè)置為 1080px, 則 1vmin = 6px, 1vmax = 10.8px 。
假設(shè)需要讓一個(gè)元素始終在屏幕上可見：
.box {假設(shè)需要讓這個(gè)元素始終鋪滿整個(gè)視口的可見區(qū)域：
.box {em、rem 是實(shí)際生產(chǎn)中我們最常用到的單位，可以使用其配合媒體查詢改變 body 字體大小來實(shí)現(xiàn)響應(yīng)式的設(shè)計(jì)，vh、vw、vmin、vmax也可以很方便地幫助我們控制響應(yīng)尺寸，但實(shí)際的可控性可能不如前者，具體按照我們的業(yè)務(wù)需求去實(shí)踐吧！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
