HTML與CSS學習基礎總結
第一天學習：
先了解學習的知識點有哪些：
HTML
HTML指的是超文字標記語言（Hyper Text Markip Language），它不是一種程式語言而是一種標記語言，通過使用標籤來描述網頁。
CSS
CSS （Cascading Style Sheets）是層疊樣式表用來定義網頁的顯示效果。
可以解決html程式碼對樣式定義的重複，提高了後期樣式程式碼的可維護性，並增強了網頁的顯示效果功能。
簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。
JS
JS 全稱（javascript）中文是java指令碼的意思 。
它的由來（在網際網路剛興起的時候，網路速度比較慢，而體驗又是放在伺服器端的，所以使用者體驗度非常差，為了瞭解這一難題，網景公司發明了livescript liverscript主要把表單驗證功能從後臺提升到了前端，因為不依賴網路，所以使用者體驗比較好。
但是由於知名度比較差，知道的人很少，後來由於sum公司的java語言一飛沖天，爆紅程式設計世界，為了跟風，博取知名度，網景公司把livescript 改成javascript. 後來微軟眼紅網景公司的成就，就發明了jscript。但是正因為此，導致了js的標準不同，所以給個大瀏覽器廠家帶來了很大的麻煩。
為了有一個統一的標準，js被提交到一個ecma組織，也正因為此，後來的js都是採用ecma標準（ECMAScript））
其次js的作用“增強頁面的趣味性，響應使用者的行為”； 特點（弱解釋指令碼語言，可以被瀏覽器直接解析 不需要編譯）
js的輸出，有兩種：
1.控制檯輸出（console.log()）不會對文件造成影響
2.文件中輸出 document.write("xxxx") 會對文件造成影響
順便插入瞭解javaEE
什麼是JAVAEE?
主要是面向企業級開發(基礎的概念，實際上遠遠不止如此)，對於我們來說
主要還是從事B/S架構的開發。
軟體結構的分類：
C/S架構的開發(客戶端到伺服器的開發):
例如:吃雞、QQ、LOL(有實體的應用客戶端)
特點:
1.有客戶端、必須要安裝客戶端程式
2.要進行客戶端的升級，除了伺服器進行程式碼的更新，客戶端也必須
重新安裝或者線上進行升級。
B/S架構的開發(瀏覽器到伺服器的開發):
例如:淘寶、天貓、騰訊網、網頁遊戲
特點:
1.不需要安裝任何的實體客戶端，只需要一個瀏覽器(核心)即可
2.要進行客戶端升級，只需要伺服器進行程式碼更新，客戶端不需要進行任何操作
其實，現在太部分的企業採用都是B/S架構(並不是說C/S比較少)
兩者來說，他們在各自的領域應該是怎麼樣的?
C/S:消耗的是你的系統資源(CPU/GPU/記憶體)，所以執行的速度會比較流暢
而且對於圖層渲染來說，B/S架構是永遠達不到C/S架構的地步，適合做有動畫效果
、啟動速度快等等軟體
B/S:無法直接獲取你的系統資源，所有的系統資源的調配其實是由瀏覽器來做的
但是，瀏覽器本質是上也是基於C/S，B/S不適合特大型的實體軟體(遊戲開發)
第二天學習：
1.什麼是前端？
1.前端其實就是將設計師設計好的效果圖，通過網頁的形式展現給客戶
2.什麼是網頁?
2.網頁是由圖片、文字、連結、視訊、音樂、輸入框、表單等組成
3.WEB標準
HTML: 結構標準 相當於建房子的地基和框架,相當於人的身體
CSS: 表現標準 相當於房子的裝修，相當於妹子化妝
JS: 行為標準 相當於房子裡面只智慧家居，相當於妹子跳舞
4.瀏覽器
瀏覽器的核心(渲染引擎):也就是瀏覽器所採用的引擎，這個渲染引擎決定了你的網頁的
顯示方式以及排版佈局等等相關資訊(遵循標準)
IE/谷歌/歐朋/火狐/蘋果(這樣就會造成瀏覽器相容的問題)
5.html
xhtml1.0 W3C推薦的版本 2000年釋出
xhtml2.0 因為改變太大，最終胎死腹中
HTML4.0 W3C推薦的版本1997年12月
HTML5 2004年提出，2006年開始火爆，而且這個版本跟之前所有的版本都不同，改變太大
而且是一個完全新的團隊在做(火爆的主要原因還是因為移動端)。
HTML:超 文字 標記 語言
文字:說明HTML是由文字組成
超:說明HTML是由超連結組成
標記語言:說明HTML是使用標記進行組合的(解釋性語言，由瀏覽器進行解釋執行)
6.HTML怎麼寫？
標準結構:
<!doctype html> //文件宣告(告訴瀏覽器以什麼標準來執行下面的程式碼)
<html> // HTML的根標籤 所有的HTML都必須寫在根標籤裡面
<head></head> //HTML的頭部標籤,裡面的內容不顯示在瀏覽器主體，一般用於設定、匯入等相關檔案
<body></body>// HTML的主體標籤，裡面的所有內容會直接的顯示在瀏覽器
</html>
7.HTML的標籤分類:
單標籤:<!doctype html> <br/> <img/>
雙標籤:<head></head> <body></body>
可單可雙:<a/>
包含關係:<head><title>這個程式碼賊棒棒</title></head>
並列關係:<head></head><body></body>
8.HTML的開發工具:
1.記事本(推薦使用)
2.DW(,給設計師用的 很老)
3.sublime(專業級開發，外掛式安裝 缺什麼補什麼)
4.webstorm(很牛逼，介面非常好看 但是收費，而且太智慧)
5.Hbuilder(你們必須得支援，國產的，而且是Java寫的 非常適合H5的開發，用著很舒服)
9.HTML的基礎標籤
9.1 文字標籤
文字加粗:<b></b> <strong></strong>
文字斜體:<i></i> <em></em>
下劃線:<u></u> <ins></ins>
刪除線:<s></s> <del></del>
注意:上面多個實現方式，在xhtml1.0版本當中，明確推薦使用後者
因為後者是語義化標籤，針對瀏覽器來說，更加喜愛後者。
9.2 功能標籤
換行:<br/>
水平線:<hr/>
9.3 標題標籤
<h1> ~ <h6>
h6以下的字型均為預設字型，h系列的標籤,具備加粗和換行的功能
9.4 段落標籤
<p></p>
段落標籤,在每一個段落都是單獨顯示，除了進行分段，他還是一個容器(使用頻率非常大)
影象標籤:
<img src="影象的路徑"
alt="當圖片無法載入所給予使用者的文字提示"
title="滑鼠懸浮至圖片所給予的文字提示"
width="設定圖片的寬度(可以是畫素也可以是百分比)"
height="設定圖片的高度(可以是畫素也可以是百分比)"
/>
超連結標籤:
<a href="路徑" target="開啟方式">點選我到百度</a>
開啟方式:
_blank:新開視窗
_self:預設視窗
注意:
如果需要訪問的是一個具體路徑，你直接寫路徑就可以了
如果需要訪問的是網路上的資源，則需要寫上資源的協議名(http://www.baidu.com / ftp://172.18.33.10)
同時，還可以下載指定的壓縮檔案
列表:
無序列表:
<!-- ul是對瀏覽器宣告，他的子項是無序列表
type="disc" 預設
type="square" 實心方塊
type="circle" 空心圓
注意:一般情況下，我們不會去設定列表項的顯示圖案，只會儘可能的幹掉他
-->
<ul type="circle">
<!--li是這個無序列表的每個列表項-->
<li>林月如</li>
<li>胡歌</li>
<li>趙麗穎</li>
</ul>
有序列表:
<!-- ol是對瀏覽器宣告，他的子項是有序列表
type="2" 預設
type="A/a" 使用字母
type="I/i" 使用羅馬字元
注意:一般情況下，我們不會去設定列表項的顯示圖案，只會儘可能的幹掉他
-->
<ol type="6-15">
<!--li是這個有序列表的每個列表項-->
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
</ol>
定義列表:
<dl>
<!--宣告為列表的標題-->
<dt>橘梨紗最愛的</dt>
<!--宣告為這個標題下面的內容-->
<dd>蘇緒</dd>
<dd>阿香</dd>
<dt>阿香的</dt>
<dd>蘇緒</dd>
<dd>阿香</dd>
</dl>
練習:
我的電腦檔案
<ul>
<li>我的電腦
<ul>
<li>本地磁碟C
<ul>
<li>我的電影</li>
<li>我的香格里拉</li>
</ul>
</li>
<li>本地磁碟D
<ul>
<li>我的資料</li>
<li>我的全家福</li>
</ul>
</li>
</ul>
</li>
</ul>
表格:
<!--說明這是一個表格的結構-->
<table>
<!--一個tr即代表表格的一行-->
<tr align="center" bgcolor="fuchsia">
<!--一個td即代表這個行裡面的一個單元格-->
<td bgcolor="aqua">香格里拉</td>
</tr>
</table>
表格的邊框:border="1"
表格的寬度:width="300px"
表格的高度:height="100px"
單元格與單元格之間的間距:cellspacing="0px"
單元格內容與單元格內間距:cellpadding="10px"
水平對齊的方式:align="center"(左/中/右)[如果是table設定，則設定的是表格的對齊的方式]
設定背景顏色:bgcolor="fuchsia"
設定邊框的顏色:bordercolor="red"
合併同一個行上的單元格:colspan="2"
合併同一個列上的單元格:rowspan="2"
表格語義化:
<table>
<thead></thead> -- 表頭
<tbody></tbody> -- 表身
<tfoot></tfoot> -- 表尾
</table>
表格語義化寫法和普通表格沒有任何區別，只不過表格語義化有益於搜尋引擎的摘取
網頁的常用設定:
<!--設定網頁關鍵字-->
<meta name="keywords" content="胡歌,最有涵養的明星,比較崇拜的之一,槍支迷藥" />
<!--設定網頁描述-->
<meta name="description" content="阿香何時離開的" />
<!--設定網頁的作者-->
<meta name="author" content="香格里拉" />
<!--設定網頁的字符集編碼-->
<meta charset="utf-8" />
<!--網頁重定向-->
<meta http-equiv="refresh" content="5,http://www.baidu.com" />
表單:
表單的作用:負責資料採集
表單主要分為：表單控制元件、提示資訊、表單域
表單控制元件:
包含了具體的表單功能，比如按鈕、輸入框、單選框、複選框、密碼框、下拉框等等
提示資訊:
一個完整的表單應該包含對於使用者的友好提示，或者一些能夠對事件進行解釋說明的文字
表單域:
其實就相當於一個容器，這個容器包含了所有的控制元件和提示資訊，可以通過定義相關控制元件
來處理不同的資訊，也可以將這些資訊傳送到伺服器後臺當中，如果不定義表單域，也就
意味著你這裡輸入的所有資訊是無法傳送到服務端。
表單怎麼寫?
表單域:
<form action="login.do" name="login" method="get/post">
</form>
action:用於提交表單資訊到服務端的某個(指令碼)程式
name:你這個表單域的名字，主要使用者後端進行獲取 前端並沒有多大用處
method：你這個表單的提交方式，預設引數為get
get:所有的資料以引數進行提交，所提交的引數會直接顯示在你的url(如果是敏感資料或者大容量資料，一般不建議使用get進行提交)
post:適合敏感資料和大容量資料的提交，他提交的方式為實體引數，url並不會直接顯示
表單控制元件:
<!--文字框 readonly-->
賬號:<input type="text" maxlength="6" name="username" value="請輸入你的賬號"/>
<!--密碼框-->
密碼:<input type="password"/>
<!--密碼框-->
性別:<input type="radio" name="y"/>男<input type="radio" name="y" />女
<!--複選框-->
愛好:<input type="checkbox" name="kl"/>喝可樂<input type="checkbox" name="lm"/>撩妹<input type="checkbox"/>愛林月如<input type="checkbox"/>學習JAVA
<!--下拉框-->
家庭住址:<select>
<option value="hn">湖南</option>
<option selected>廣東</option>
<option>湖北</option>
<option>福建</option>
<option>江蘇</option>
<option>北京</option>
</select> <select>
<option>湘潭</option>
<option>永州</option>
<option>深圳</option>
<option>湘西</option>
<option>長沙</option>
<option>張家界</option>
</select>
<!--上傳元件-->
請上傳文件:<input type="file" />
<!--提交按鈕-->
<input type="submit" value="提交" />
<!--重置按鈕-->
<input type="reset" value="重寫" />
<!--圖片-->
<input type="image" src="img/img.png" />
<!--普通按鈕-->
<input type="button" value="提交" />
關鍵字的功能解釋：
maxlength="6" 設定輸入框的輸入長度
name="username" 設定控制元件的名字,這個引數主要給後端工程師進行呼叫
value="請輸入你的賬號" 控制元件的實際內容，後端工程師所需要的其實就是這個內容
readonly="readonly" 設定控制元件只讀狀態(不可編輯)
selected="selected" 用於設定下拉框的預設選項
submit:提交後立即執行到伺服器
image:理論上跟submit一致，但是一般只配合js使用
button:普通按鈕，沒有任何效果，但是用的非常多 一般配合js使用
第三天學習
什麼是CSS?
1. CSS是指層疊樣式
2. CSS的作用是用於美化HTML頁面的中的內容(字型、顏色、高寬、大小)
3. CSS另外的作用就是可以對網頁進行佈局(CSS+DIV)
CSS的優勢?
1.內容與表現分離
2.網頁的表現形式高度統一，便於後期維護
3.具備極為豐富的樣式，頁面美化更加靈活
4.減少網頁的程式碼量，增加網頁的瀏覽速度 可以節省網路頻寬
5.用於獨立於頁面的CSS,有利於搜尋引擎的收錄
CSS如何去寫？
選擇器:就是你要選擇誰，然後改變什麼
CSS的匯入方式:
內部樣式:
位置:<head>範圍內
格式:
<style type="text/css">
...
</style>
特點:
適合同一個頁面的效果實現，其他頁面無效
行內樣式:
位置:所需要實現的標籤內
格式:
<p style="color:red">
特點:
適合某一個標籤的樣式修改
外部樣式:
獨立建立一個css檔案，這個檔案裡面不需要寫style,直接寫樣式即可
1.在head當中，<link href="css/style_demo.css" rel="stylesheet" type="text/css" />
2.在head當中的style當中,@import url("css/style_demo.css" );
一般來說只會使用第一種，第二種幾乎不用，因為link標籤是屬於xhtml的
而@import屬於css2.1的規則，如果瀏覽器不支援@import，也就意味著你的樣式無效
如果你使用的是link進行匯入，先載入CSS樣式，然後再去顯示整個網頁
如果你使用的@import，是先載入網頁，再去顯示CSS樣式
適合多個頁面共享一個CSS樣式
樣式表的優先順序:
行內樣式表 > 內部樣式表 > 外部樣式表
一般來說，我們只會使用外部樣式表
格式:
選擇器{
屬性:屬性值;
}
選擇器分類:
基礎選擇器:
標籤選擇器:
標籤名{
屬性:屬性值;
}
注意:屬性值後的分號，你可以不寫的 但是W3C的標準是必須要寫的，而大部分
瀏覽器都遵循了W3C的標準，如果不寫 可能會有部分瀏覽器無法使用。
特點:
一旦符合規則的標籤，全部會實現同樣的CSS效果
類選擇器:
<i class="class">類選擇器</i>
.類名{
屬性:屬性值;
}
特點:
所有符合類名的標籤，都會實現同樣的效果
類名不能以數字開頭
ID選擇器:
<p id="id">ID選擇器我</p>
#ID名{
屬性:屬性值;
}
特點:
所有符合ID名的標籤，都會實現同樣的效果
但是，在同一個頁面當中，標籤不能出現同名的ID(js會出現問題)
選擇器的優先順序:ID選擇器 > 類選擇器 > 標籤選擇器
練習：
望廬山瀑布:
詩正文使用14px字型，顏色為綠色
水調歌頭:
標題為紅色，字型大小為18px，
正文第一段字型大小為12px,字型為紅色
第二段字型顏色為黑色，字型大小為12px
如夢令:
使用標籤選擇器設定標題字型大小為20px
頁面當中所有段落的文字為16px
使用類選擇器設定譯文和正文內容字型顏色為綠色
想辦法將譯文字型顏色改變為藍色
複合選擇器:
指兩個及兩個以上的選擇器進行組合使用。
交集選擇器:
標籤選擇器+類(ID)選擇器{
屬性:屬性值;
}
特點:既要滿足是否使用了某個標籤選擇器，也要滿足是否使用了某個類或者ID選擇器(也就說明標籤選擇器和類或者ID選擇器必須同時滿足)
後代選擇器:
選擇器+空格+選擇器{
屬性:屬性值;
}
特點:無隔代限制，必須包含巢狀關係，例如p標籤下面的span標籤
子代選擇器:
選擇器>選擇器{
屬性:屬性值;
}
特點:子代必須是父類的直接子代，不能存在隔代關係
並集選擇器:
選擇器,選擇器,選擇器,選擇器,選擇器,選擇器{
屬性:屬性值;
}
特點:所有的選擇器都實現同一個效果。
CSS繼承性的問題:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在巢狀關係，父元素的屬性發生了改變，子元素也會隨之改變，
但是h標籤無法繼承父元素的字型大小，a標籤無法繼承父元素的顏色
文字樣式:
background: firebrick;
/*設定字型樣式*/
color: khaki;
/*設定水平對齊方式*/
text-align:center;
/*文字的首行縮排*/
text-indent:2em;
/*文字的樣式修飾 一般只用下劃線和取消下劃線*/
text-decoration:underline;
字型樣式:
/*文字大小*/
font-size:20px;
/*文字樣式*/
font-family:"宋體";
/*文字風格*/
font-style:oblique;
/*文字粗細*/
font-weight:bold;
/*字型連寫 字型風格 字型粗細 字型大小 樣式(順序不能亂)*/
/*font:oblique bold 36px "微軟雅黑";*/
超鏈偽類:
/ *滑鼠懸浮所觸發的樣式*/
.baidu:hover{
color: thistle;
font-size:10px;
}
/*當超連結被訪問之後的連結（雞肋）*/
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
/*當滑鼠點選當中所觸發的樣式*/
.tencent:active{
color: green;
}
/*未訪問之前的顏色*/
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
第四天學習
CSS+DIV
用途:
div+css是現在主流的web設計模式
div主要的作用:
對網頁進行佈局
對網頁內容進行對應的排版
div一般配合CSS，並且設定高和寬，否則無意義。
顏色的表示形式:
三原色:rgba(46,61,73,.4)
進位制:#000000
單詞:red
背景顏色:background-color:red;
圖片背景:background-image: url(img/timg.jpg);
背景重複方式:background-repeat:no-repeat;
repeat-x:沿著x軸平鋪
repeat-y:沿著y軸平鋪
no-repeat:影象不平鋪
repeat:影象平鋪
影象大小:background-size: 50%;
影象定位:
background-position-y:沿著y軸移動
background-position-x:沿著x軸移動
移動方式:
y%/x%:依照百分比來移動
ypx/xpx:依照畫素移動
x軸:left/center/right
y軸:top/center/bottom
背景連寫:顏色/路徑/x軸/y軸/平鋪方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
第五天學習
W3C:HTML 結構標準 / CSS 表現標準 / JavaScript 行為標準
世界上第一款瀏覽器 94年網景(Netscape Communications Corporation)公司開發。
95年和sun公司開發出Java
網景和sun進行了深度的合作 java+script= javascript
2003年之前，js其實很少有人使用，因為js就是垃圾廣告的代名詞。
2004年，一家偉大的公司徹底改變了js的命運，這就公司就谷歌，因為谷歌推出了一種
技術，這種技術一直沿用至今，仍然都是目前主流的技術(AJAX)
ajax:非同步載入
認識js：
1.js是什麼?
js一個可以嵌入到HTML網頁當中，是基於物件和事件驅動的指令碼語言
2.js的特點?
1.對於使用者有非常良好的互動性
2.具備非常強的安全性(對於使用者)，JS沒有任何的許可權可以訪問你的系統資源和磁碟
3.是跨平臺，因為是基於瀏覽器的
3.js能做什麼?
1.js能夠實時動態的修改你的CSS和你的HTML程式碼
2.能夠動態的校驗資料
4.js的組成
DOM(文件物件模型)
BOM(瀏覽器物件模型)
5.怎麼去使用js?
1.行內
<input type="button" value="我是個沒用的東西" onclick="alert('我被點選了')"/>
2.內部
<script type="text/javascript"/>
alert('我被載入了');
</script>
3.外部
<script type="text/javascript" src="../js/js_demo.js"/>
JS程式碼放在哪兒？
原則上,你JS放任意位置都沒問題，但是在不影響功能的前提下，建議越晚載入越好
二:JS的基本語法
typeof獲取當前資料的型別
js當中的原始資料型別:
number:數字
string:字串型別
boolean:布林型別
null:空型別
underfind:未定義
number/string/boolean 偽資料型別(等同於java的自動拆裝箱)
型別轉型:
number/boolean型別轉成string
toString();
string/boolean轉number
parseInt();
parseFloat();
string轉成number parseInt(x) 字串必須開頭包含數字，最後的結果就是開頭的數字
強制型別轉換:
Boolean(),強轉布林
數字如果轉成布林,false即0 true即1
字串如果轉成布林，空內容即false,有內容及true
Number()
布林轉數字，true即1 false即0
字串轉數字，不能轉
引用資料型別
java:Object ob = new Object();
js:var ob = new Number();
運算子:
賦值運算:
var x = 5;
算數運算:
+ - * /(操作跟java一致，你們不讓我講)
邏輯運算:
&& ||
比較運算:
< > <= >= != == ===
全等:需要資料型別和資料值完全匹配
三元運算:
3 > 2 ? 3 : 2;
void運算:
<a href="javascript:void(0)">點選我跳轉</a>
型別運算子：
typeof:獲取資料型別
instanceof:判斷某一個數據是否為某種資料型別
邏輯語句:
1.if
if(x > 5){
alert("大於");
}
2.if else
if(x > 5){
alert("大於");
}else{
alert('小於');
}
3.switch(){
case "css":
alert("xxx");
break;
default:
alert("xxx");
}
4.for
for(var a = 0;a < 5;a++){
alert(a);
}
5.for in
var arr = [1,56,1,5,"s"];
for(s in arr){
//alert(s);//索引編號
alert(arr[s]);
}