本周是培訓(xùn)的第五周驾荣，暫時告別python辩越，進入了前端知識模塊藐鹤，主要是針對HTML夹攒，CSS环形，JavaScript三部分進行學(xué)習(xí)亩进，其主要知識點如下：
1泉粉、HTML - Hyper-Text Markup Language（管內(nèi)容）
內(nèi)容梗概
<html>
<head></head>
<body>
文本 - h1-h6 / p / br / hr / sub / sup / strong / em / del / ins / q
列表 - ul / ol(li) / dl(dt/dd)
圖像 - img / figure / figcaption
鏈接 - a(頁面鏈接卵慰、錨鏈接沙郭、功能鏈接)
表格 - table / tr / td / th / thead / tbody / tfoot
表單 - form / input / select / textarea
音視頻 - audio / video(source)
</body>
</html>相關(guān)實例之表單處理
// action:服務(wù)器上的哪個程序來受理表單
// get:從服務(wù)器獲取資源 post:向服務(wù)器上傳數(shù)據(jù)
// 有文件上傳，必須要post,還要指定編碼enctype(enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進行編碼) multipart/form-data：不對字符編碼裳朋。在使用包含文件上傳控件的表單時病线，必須使用該值
<form action="" method="post" enctype="multipart/form-data">
// fieldset:劃分區(qū)域 legend:標(biāo)識區(qū)域名
<fieldset>
<legend>必填信息</legend>
// placeholder:占位符
姓名：<input type="text" name="username" placeholder="請輸入您的用戶名" required>
// 輸入的內(nèi)容會變成掩碼
密碼：<input type="password" name="password" placeholder="請輸入您的口令" required>
// 單選按鈕 checked:默認(rèn)選中
性別：<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
// 復(fù)選框
愛好：<input type="checkbox" name="hobby" checked>閱讀
<input type="checkbox" name="hobby">健身
<input type="checkbox" name="hobby">旅行
<input type="checkbox" name="hobby" checked>交友
生日：<input type="date" name="birthday">
// PC端如果郵箱地址中沒有@符號將會報錯，手機端會自動切換到有@符號的鍵盤
郵箱：<input type="email" name="email" placeholder="請輸入您的郵箱" required>
</fieldset>
<fieldset>
<legend>選填信息</legend>
// 下拉列表 select>option*5
籍貫：<select name="province">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
<option value="蘇州" selected>蘇州</option>
</select>
// 文本區(qū)
自我介紹：
<textarea name="introduce_self" rows="5" cols="30"></textarea>
上傳照片：<input type="file" name="pic">
</fieldset>
// submit: 向服務(wù)器提交數(shù)據(jù) reset:重置數(shù)據(jù)
<input type="submit" value="立即注冊">
<input type="reset" value="重新填寫">
</form>
相關(guān)實例之定義列表
// dl: 定義列表(常用于圖文混排的場景) dt:標(biāo)題(一個) dd:解釋內(nèi)容(可以很多項)
<dl>
<dt>閱讀</dt>
<dd>每天晚上十點開始</dd>
<dt>
// src:圖片地址 alt:替換文字 width:設(shè)定圖片寬度(不建議)
<img src="./images/pic_1.jpg" alt="game" width="30">
</dt>
<dd>這是一張圖片</dd>
</dl>相關(guān)實例之內(nèi)部窗口
// 內(nèi)部窗口 - 可以嵌別的頁面到主窗口上 scrolling="no":去除滾動條 frameborder="no":去除邊框
<iframe src="https://map.baidu.com/" width="400" height="300" scrolling="no" frameborder="no"></iframe>
2鲤嫡、CSS - Cascading Style Sheets（管顯示）
-
內(nèi)容梗概
1）選擇器：通配符選擇器 標(biāo)簽選擇器 類選擇器
2）樣式表：內(nèi)部樣式表（無需下載送挑，直接使用，速度快 首頁一般用內(nèi)部樣式表）暖眼；外部樣式表（實現(xiàn)了代碼的復(fù)用惕耕，保持網(wǎng)站風(fēng)格一致，浪費空間罢荡，節(jié)省了時間瀏覽器會將其下載到緩存中赡突，以后再用無需聯(lián)網(wǎng)下載）对扶；內(nèi)嵌(行內(nèi))樣式表（無法復(fù)用（不推薦使用），適合微調(diào)整）
3）三大原則：就近原則惭缰、具體原則浪南、重要性原則
4）轉(zhuǎn)義字符（實體替換符/字符實體）：如 <(小于號)，>(大于號)漱受，?（空格）等
5）字體：襯線字體（邊角經(jīng)過修飾）络凿；非襯線字體（筆畫粗細一致，邊角沒有修飾）昂羡。制作網(wǎng)頁時絮记，選擇安全字體（每個計算機都能顯示出來的字體），如若強制瀏覽器使用緩存中沒有的字體虐先，則可用下列代碼實現(xiàn)：
@font-face{ /強制使用指定字體怨愤，沒有則去指定路徑下載/
font-family: ""; /字體名稱/
src:url(); /字體下載路徑/
}6）塊級元素（如:div h1 p）的浮動與清除浮動，具體如下： /*將塊級元素按行級元素處理 塊級元素橫著放*/ display:inline-block; /*left:從左向右放置(沒有邊距) right:從右往左放置(沒有邊距) 脫離了正常的文檔流（從左往右蛹批，從上往下）*/ float: right; /*clear(清除浮動) left:清除左浮動 right:清除右浮動 both:清除左右浮動撰洗，恢復(fù)正常的文檔流，另起一行重新開始*/ clear: both; 7）z-index(z索引)：有重疊的情況腐芍， z-index值越大,放置的位置越靠上差导。如果沒有z-index值，body中先設(shè)置的先放置 8）定位：相對定位（position: relative; 相對原來位置進行調(diào)整）;絕對定位（position: absolute; 相對于整個文檔頁面（100%時的body）來進行位置的調(diào)整）猪勇；固定定位（position: fixed; 相對于瀏覽器窗口進行調(diào)整(廣告常用此模式))
3设褐、JS - JavaScript（管行為）
-
內(nèi)容梗概
1）函數(shù)的定義與調(diào)用（以計算兩個數(shù)的加減乘除運算為例），注意JS中沒有重載的概念泣刹，后定義的函數(shù)將覆蓋先定義的函數(shù)
<input type="text" id="number1" size="3" maxlength="5"/>
<select id="selected">
<option value="+">+</option>
<option value="-">-</option>
<option value=""></option>
<option value="/">/</option>
</select>
<input type="number" id="number2"/> // number:只能輸入數(shù)字
<button id="btn" onclick="calculate()">=</button>
<input type="text" id="number3" readonly /> // readonly:只讀 不能修改
<script type="text/javascript">
function calculate(){
var x = document.getElementById("number1").value;
var y = document.getElementById("number2").value;
var cal = document.getElementById("selected").value;
var result = 0;
// 評估函數(shù)eval：給定字符串表達式,自動識別并計算其值
result = eval(x + cal + y);
document.getElementById("number3").value = result;
}
</script>
2）數(shù)據(jù)類型：簡單數(shù)據(jù)類型（值保存在棧上助析，對象的引用在棧上）
number 、string椅您、boolean貌笨、null、undefined襟沮；復(fù)雜數(shù)據(jù)類型（對象的值在堆上）-- object锥惋。可用typeof()來查看變量的數(shù)據(jù)類型
3）變量命名規(guī)則：字母數(shù)字下劃線$號構(gòu)成, 數(shù)字不能開頭, 見名知意, 駝峰命名法
4）將函數(shù)與變量進行綁定开伏，輸出變量即自動調(diào)用函數(shù)膀跌，代碼如下：
function add(a, b, c=300){
return a + b + c;
}var sum = +function(a, b, c){ return a + b + c;}(2, 2, 2);
var sum_2 = (function(a, b, c){
return a + b + c;
}(3, 3, 3));alert(sum)
alert(sum_2)5）window常用的方法 window.alert("haha"); // 警告框 不必要不要亂彈框 會影響用戶體驗 var name = window.prompt("請輸入你的名字"); // 輸入提示框 顯示可提示用戶輸入的對話框 window.print(); // 調(diào)用打印功能 window.confirm("你確定要退出嗎？") ; // 確認(rèn)框 window.close(); // 關(guān)窗口 不一定每個瀏覽器都支持 window.open("http://www.baidu.com"); // 另開窗口顯示內(nèi)容 6）創(chuàng)建單個對象固灵，即創(chuàng)建對象的字面量語法（以單個學(xué)生對象的創(chuàng)建為例） var stu = { 'name' : "mike", 'age' : 18, 'watch_movie':function(){ window.alert(this['name'] + " is watching movie!"); }, 'study':function(course){ window.alert(this['name'] + " is studying " + course); } }; // 方法調(diào)用 stu.watch_movie(); stu.study("Chinese"); 7）創(chuàng)建多個對象齐蔽，即創(chuàng)建對象的構(gòu)造器方法（以多個學(xué)生對象的創(chuàng)建為例） // 當(dāng)要創(chuàng)建多個對象時议谷，將屬性綁定工作在Student方法內(nèi)完成 function Student(name, age){ this.name = name; this.age = age; }
// 創(chuàng)建多個對象時捏卓，將公共方法綁在學(xué)生函數(shù)的原型（模具）上，方法只會被定義一次
Student.prototype.study = function(courseName){
window.alert(this.name + " 正在學(xué)習(xí) " + courseName + " . ");
};
Student.prototype.watch = function(){
window.alert(this.name + " is watching movies. ");
};
// 如果沒有new祠汇，Student函數(shù)中的this表示瀏覽器窗口，對象與瀏覽器綁定在一起
var stu1 = new Student("jack", 20);
var stu2 = new Student("mike", 33);
stu1.study("English");
stu2.watch();
通過一周的學(xué)習(xí)熄诡，已基本能完成網(wǎng)頁前端的制作及一些響應(yīng)事件的處理可很，課下作業(yè)也均能獨立完成，內(nèi)容量與效果基本與大學(xué)期間一學(xué)期的網(wǎng)頁設(shè)計課程持平凰浮。如要制作一個完整的網(wǎng)站我抠，還需進行相應(yīng)后端知識的學(xué)習(xí)，并接觸常用框架來輔助自己的開發(fā)袜茧，希望通過本階段的學(xué)習(xí)后菜拓，能出一個完整的網(wǎng)站作品~
