教材:《Web前端開發技術——HTML、CSS、JavaScript(第2版)》
聶常紅 主編 王剛 潘正軍 唐遠強 副主編 這本書講得較淺，自學的話不推薦購買！對你有幫助的話記得點贊、關注哦！
我們是手機端考試。教這門課的老師很漂亮也很盡職，每節課我們都要用手機簽到、做課堂習題(鞏固剛講的內容)，課後還佈置適量作業，這些都計入平時成績。老師的PPT相比其他老師的更容易理解(可能是前端本身的原因)，講到什麼就運行該代碼，演示給我們看結果。雖然有些沮喪於我的期末成績並不高，但這位老師無疑給我留下了較深刻的印象。
這本書的HTML內容完完整整總結如下（書上有些屬性已過時）
本複習資料適合對前端有所瞭解的人，代碼複製到CSDN上有點排版錯誤，這是我手動調的(排版)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML學習總結</title>
<meta name="keywords" content="關鍵字1,關鍵字2,..." />
<meta name="discription" content="網站簡介" />
<meta name="copyright" content="本資料版權歸Pigeon所有。All Rights Reserved">
<meta http-equiv傳送HTTP通信協議標題頭="content-type" content="text/html定義文檔的MIME類型" />
<meta http-equiv鍵-值對="refresh" content="3" /><!--每隔3秒刷新一次-->
<meta http-equiv="refresh" content="刷新間隔時間;url=頁面地址" /><!--自動跳轉-->
</head>
<body background="圖片路徑" bgcolor="" bgproperties="fixed" link="" alink="" vlink="" leftmargin="">
"<!--"--> <<!--<--> ©<!--©--> ™<!--™-->
&<!--&--> ><!-->--> ®<!--®-->
<h2 align=""><font face="隸書" color="" size="">字號默認爲3</font></h2>
<b></b><strong>粗體</strong>
<i></i><cite></cite><em></em><var>斜體</var>
<sup>上標</sup><sub>下標</sub><big>大號字</big><small>小號字</small><u>下劃線</u>
<s></s><strike>刪除線</strike>
<p>單標記只跟上文產生一空行間隔，雙標記則與上下文都產生</p>
兩個<br />等效於一個<p>單標記
<pre>
預格式化標記
</pre>
<center>居中標記</center><blockquote>縮排標記</blockquote>
<hr width="" size="" align="" noshade="noshade" color="" />水平線
<ol type="1/a/A/i/I(前導符)" start="3(起始編號)">
<li>有序列表</li>
</ol>
<ul type="disc●/circle○/square■">
<li>無序列表</li>
</ul>
<dl><!--聲明定義列表-->
<dt>名詞一</dt>
<dd>解釋一</dd>
<dd>解釋二</dd>
</dl>
<img src="" width="" height="" alt="提示文本" vspace="垂直間距" hspace="水平間距" border="" />
<marquee direction="up/down/left/right滾動方向" behavior="scroll/slide/al滾動行爲" scrollamount="速值默認爲6" scrolldelay="默認100毫秒">滾動字幕</marquee>
<embed src="視頻路徑" width="" height="" hidden="hidden">嵌入視頻</embed>
<object classid="" codebase="url">
<param name="" value="動畫路徑" />
<embed pluginspage="http://www..." src="" type="application/x-shockwave-flash"></embed><!--專門針對Netscape網景-->
</object>
<bgsound src="音樂路徑" loop="-1循環播放"></bgsound><!--默認播放一次-->
<applet code="xx.class">Java小程序</applet>
<!--嵌套分割窗口-->
<frameset name="作爲超鏈接的target" cols="水平分割(像素/百分比)" rows="垂直分割" frameborder="默認1(0即no)" framespacing="" />
<noframes><body>瀏覽器版本過低，不支持框架</body></noframes>
<iframe name="" src="" noresize="省略時可調節窗口大小" scrolling="auto/no/yes" >若要使浮動框架在水平居中，需在外嵌套一個<div align="center"></iframe>
<a href="目標端點" target="_blank新窗口打開/_parent/_search/_self/_top忽略框架在整個窗口中打開"></a>
<!--http://——www進入萬維網
mailto:收件人郵址?subject=主題名&cc=抄送郵址&bcc=暗抄送郵址——E-mail啓動郵件發送系統
ftp://——FTP進入文件傳輸服務器
telnet://——Telnet啓動遠程登錄方式
news://——News啓動新聞討論組-->
<a name="#書籤名(內部書籤)/file_url#書籤名(外部書籤鏈接)" href="腳本鏈接/文件下載鏈接">
<img src="圖片鏈接" />
</a>
<!--圖像映射-->
<img src="地圖鏈接" usemap="#Map" />
<map name="Map">
<area shape="rect/circle" coords="x1,y1,x2,y2前兩個是頂點座標;後兩個是右下頂點/x,y,r前兩個是圓心;後一個是半徑" href="#Asia" alt="亞洲" />
</map>
<table border="像素" bordercolor="" bgcolor="" background="" cellpadding="內容邊距" cellspacing="間距默認爲2">
<caption align="left/center水平居中/right" valign="top/middle垂直居中/bottom">表格標題</caption>
<tr>
<th></th>
</tr>
<tr>聲明一行
<td>聲明一單元格</td>
</tr>
</table>
<form name="" action="" method="post/get(P116)" onsubmit="指定處理表單的腳本函數" enctype="設MIME類型,默認application/x-www-form-urlencoded;若需上傳文件到服務器時應改爲multipart/form-data">
<input type="text/password/file/hidden隱藏域傳遞value值/radio/checkbox/button默認沒字/submit/reset默認寫“重置”/image" name="" maxlength="最多可輸入" size="默認24" value="默認值" checked="checked" onclick="delete"/>
<script>
function delete(){
if(confirm("確定要刪除嗎？"))
window.location="delete.jsp";
}
</script>
<select name="fruits" size="2" multiple="multiple">
<option value="apple" selected="selected">選擇列表</option>
</select>
<textarea name="remark" rows="行數" cols="列數"></textarea>
</form>
<!--html(Hypertext Markup Language)超文本傳輸語言
http(Hypertext Transfer Protocol)超文本傳輸協議
URL(Uniform Resource Locator)統一資源定位符
W3C(World Wide Web Consortium)萬維網聯盟
CSS(Cascading Style Sheet)層疊樣式表-->
</body>
</html>
這本書的CSS內容總結（書本只列舉最常用的東西）
一、標記選擇器★
二、字體屬性
font-size(絕對大小、相對大小、百分數、具體值pt、px、in)
font-family
font-weight(normal、lighter、bold、bolder)
font-style(normal、italic=oblique)
三、文本屬性
text-indent首行縮進，常用單位是pt
line-height行間距，常用單位是pt
letter-spacing字間距，常用單位是pt
text-decoration(underline、overline、line-through、none)
text-align(left、center、right、justify兩端對齊)
四、列表屬性
list-style-image用圖像作爲列表項的引導符號
list-style-position決定縮進程度(outside列表貼近左側邊框顯示、inside列表縮進顯示)
list-style-type(none、disc●、circle○、square■、decimal普通數字、lower-roman小寫羅馬字、upper-roman大寫羅馬字、lower-alpha小寫英文、upper-alpha大寫英文)
五、顏色和背景
color
background-color
background-image
background-repeat(repeat-x橫向重複、repeat-y縱向、repeat、no-repeat)
background-position(left、right、center、top、bottom)
六、區塊
width、height、float讓文字環繞周圍、clear禁止浮動元素出現在所屬對象旁邊、padding內邊距、margin外邊距(top、bottom、left、right)
七、層屬性（允許盒子重疊）
top(單位px)、left、width、height、Z-index包含正負數，決定層的先後順序和覆蓋關係，值高的覆蓋較低的
clip限定只顯示裁切出來的區域，該區域是矩形。只要設置兩點即可(矩形左上角頂點由top和left設置、右下角由bottom和right設置)
overflow(visible當層內的內容超出層所能容納的範圍時可見、hidden、scroll、auto)
★定位流position(static靜態定位、relative相對定位、absolute絕對定位、fixed固定定位)
①static：默認屬性值，盒子按照標準流(包括浮動方式)進行佈局。
②relative：相對於自己以前在標準流中的位置偏移指定距離。通過left、right、top、bottom指定偏移量。
在相對定位中同一方向上的定位屬性只能使用一個；
∵相對定位是不脫離標準流的，會繼續在標準流中佔用空間 ∴區分塊級元素、行內元素、行內塊級元素且設margin、padding等屬性會影響標準流的佈局。
一般用於盒子位置的微調。
③absolute：相對於body或某定位流(非static屬性)中的祖先元素來偏移。默認是相對於body定位的，會隨着頁面的滾動而滾動。
∵脫離標準流，不會佔用標準流的位置 ∴不區分 ~
絕對定位元素會忽略祖先元素的padding
一般配合相對定位來使用，不會單獨出現 eg.做覆蓋效果
④fixed：盒子位置固定在瀏覽器窗口上。
∵脫離標準流，不佔位 ∴不區分
當給一個元素設置的寬高無效時，可以通過display將模式轉換：塊↔行內 ；塊、行內→行內塊
塊級元素display="block"：獨佔一行。可任意設置其大小、內外邊距（寬度默認爲所在容器的100%），是用於搭建網頁佈局的必須部分，使網頁結構更緊湊。常見的塊級元素有<div>、<h1>~<h6>、<p>、<ul>、<table>等，其中<div>是最常用最典型的。可容納行內元素和其他塊元素。特殊：文字類的塊級元素不能放塊元素，例如<p>/<h1>~<h6>/<dt>。
行內/內聯元素display="inline"：和相鄰的行內元素在同一行上。設置寬高無效（默認寬高是他自身內容的寬高）。水平方向的padding和margin屬性可以設置，但垂直方向上的無效。行內元素只能容納其他行內元素或者文本。特殊：<a>可以放塊級元素，但是鏈接裏面不能再放鏈接。
行內塊級元素display="inline-block"：和相鄰行內元素在同一行，但是之間會有空白縫隙。默認寬度是他本身內容的寬度。寬度、高度、行高、內外邊距和對齊模式都可以手動設置。如<img>、<input>、<td>。
八、盒子模型★
border-color
border-width
border-style：none、hidden、dotted、dashed、solid、double
padding設置1個屬性值：表示上下左右4個內邊距。
padding設置2個屬性值：前者表示上下內邊距，後者表示左右內邊距。
padding設置3個屬性值：前者表示上內邊距，中間者表示左右內邊距，後者表示下邊距。
padding設置4個屬性值：依次表示上、右、下、左內邊距(順時針)。
padding是內邊距，不會影響盒子的外部，而margin是外邊距，直接影響。
★兩個行內元素間的水平間距 = 左邊元素的右外邊距 + 右邊元素的左外邊距
★兩個塊級元素間垂直間距 = Max(上邊元素的下外邊距，下邊元素的上外邊距) 稱爲margin的"塌陷"現象，即較小margin塌陷到較大margin中了的塊級元素間的垂直定位。
★父子盒子嵌套，當子div的margin爲正值時：父盒子寬度隨瀏覽器自由延伸，子盒子寬度隨父盒子之變而變
當子div的margin爲負值時：①子盒子本身沒有寬度，會增加元素寬度 ②子盒子本身有寬度，會產生位移
情況① 
情況②
③margin-top= -100px 卻產生了向上50px的位移 （撓頭疑惑！
float：none、left、right，非none的屬性值將所有對象視作“塊對象block-level”，忽略它原有的display值，並脫離標準流。默認情況下，根據對象內容來決定其寬、高。非浮動對象會代替浮動對象在標準流中的位置，且其文字內容會圍繞浮動對象。
九、Div標記&Span標記
<div>是區塊容器標記，塊級元素，<div>內的元素會自動換行，這是與<span>的區別所在。<div>容器裝的是內容，CSS作爲裝飾內容的樣式。
<span>是相對<div>較小的容器，行內元素，在它前後不會自動換行，沒有結構意義，純粹應用CSS。
DIV+CSS佈局&表格佈局の比較：
●通過<table>各個單元格可輕鬆劃分模塊，製作簡單；CSS通過<div>來劃分模塊，同時需要調整各模塊間的位置及排列。
●各模塊放在<table>內，會隨着單元格的大小自動調整，背景顏色等設置比較簡單；DIV+CSS的模塊層層嵌套，背景顏色等樣式屬性設置比較複雜。
●單元格可加入CSS的margin和padding等屬性控制效果。
●表格佈局比DIV+CSS佈局維護要困難。eg.要對換left和right的內容，表格佈局的工作量與製作新的頁面相當，而DIV+CSS佈局只需修改位置即可。
十、鼠標屬性
cursor：default、pointer手形狀、crosshair十字交叉、text文本選擇、wait爲Windows的沙漏形、help問號、e-resize指向東的箭頭、ne-resize東北、n-resize北、nw-resize西北、w-resize西、sw-resize西南、s-resize南、se-resize東南）
十一、濾鏡屬性
filter：mark爲對象建立一個覆蓋於表面的膜、blur模糊效果、chroma設對象中指定的顏色爲透明色、dropShadow陰影效果、flipH水平翻轉、flipV垂直翻轉、glow光暈、invert對象的可視化屬性全部翻轉，包括色彩、飽和度和亮度、shadow在指定方向建立物體投影、wave把對象按垂直波紋樣式打亂、xray使對象產生X光片效果、alpha設透明度
十二、在HTML中用CSS★
解決CSS衝突：
●優先級：內聯式(直接在<body>標籤裏寫style="...") > 內嵌式(寫在<head>裏的<style>裏) > 外部鏈接(<link href="..." type="text/css" rel="stylesheet">實現了頁面框架代碼與CSS代碼完全分離，使得前期製作和後期維護都十分方便) > 導入式(在<head>中的<style>裏寫@import url(xx.css))
●在多個外部樣式中，後出現的樣式的優先級高於先出現的樣式
●在樣式中，選擇器的優先級：ID樣式 > class樣式 > 標記樣式
導入式&鏈接式の區別：
■被導入的HTML文件在初始化時，會將該CSS文件導入HTML文件中，作爲此HTML文件的一部分，類似於內嵌式。
■鏈接式是在HTML文件的標記需要CSS時纔會以鏈接方式被導入進來。
JavaScript目前我不想寫了
部分課堂作業（獻醜了,不放代碼,純屬留念）
實驗課實驗三作業（其它的沒保留）
1、將1~10之間的奇偶數分開，頁面呈現方式如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>將1~10之間的奇偶數分開</title>
<script type="text/javascript">
for(var i=1;i<=10;i++){
if(i%2==0){
document.write("i="+i+"是偶數"+"<br>");
}else{
document.write("i="+i+"是奇數"+"<br>");
}
}
</script>
</head>
<body>
</body>
</html>
2、任意輸入一個年份，判斷是否爲閏年。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>任意輸入一個年份，判斷是否爲閏年</title>
<script type="text/javascript">
function check(){
var date=year.value;
if(date%4==0 && date%100!=0){
alert(date+"是閏年");
}else if(date%400==0){
alert(date+"是閏年");
}else{
alert(date+"不是閏年");
}
}
</script>
</head>
<body>
請輸入年份：
<input name="year"type="text"id="year">
<input type="button"value="是否是閏年"onclick="return check()">
</body>
</html>
3、任意輸入一個字符串，單擊“確定”按鈕，輸出字符串的長度。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>任意輸入一個字符串，單擊“確定”按鈕，輸出字符串的長度</title>
<script type="text/javascript">
function measure(){
var s=string.value;
alert("字符串"+s+"的長度是"+s.length);
}
</script>
</head>
<body>
請輸入一個字符串：
<input name="string"type="text"id="string">
<input type="button"value="確定"onclick="return measure()">
</body>
</html>
4、設計實現一個帶開關的時鐘。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>帶開關的時鐘</title>
<script>
var a = 0; //0:開 1：關
function time() {
T = window.setTimeout("time()", 1000);
var today = new Date();
document.clock.disp.value = today.toLocaleString();
if (a == 1) {
document.clock.disp.value = '';
clearTimeout(T);
a = 0;
} else {
if (a == 0) {
var T = setTimeout('time()', 1000);
a = 1;
}
}
}
</script>
</head>
<body>
<form name="clock">
<input type="text" name="disp" value="" size=30 onFocus="this.blur()">
<br>
<input type="radio" name="sjq" value="off" onClick="time()" checked>
關
<input type="radio" name="sjq" value="on" onClick="time()">
開
</form>
</body>
</html>
5、設計實現一個頁面，要求如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>歡迎光臨</title>
<script language="javascript">
function check(){
var name= document.form1.name.value;
var pwd= document.form1.pwd.value;
if((name=="") || (name==null)){
alert("請輸入用戶名：");
document.form1.name.focus();
return;
}else if ((pwd=="") || (pwd==null)){
alert("請輸入密碼：");
document.form1.pwd.focus();
return;
}else{
document.form1.submit();
}
}
</script>
</head>
<body>
<h4>請輸入用戶信息：</h4>
<form name="form1" action="" method="post">
用戶名：<input type="text" name="name"><br/>
密碼: <input type="password" name="pwd" size="20"><br/>
性別: <input type="radio" value="female" name="gender"/>女
<input type="radio" value="male" name="gender"/>男<br/>
愛好:<input type="checkbox" value="music" name="m1"/>音樂
<input type="checkbox" value="swimming" name="m2"/>游泳
<input type="checkbox" value="playing" name="m3"/>遊戲<br/>
城市：
<select name="city">
<option value="city1"selected="selected">石家莊</option>
<option value="city2">老馬頭</option>
<option value="city3">北京</option>
</select><br/>
個人簡介：<textarea name="remark" row="30" cols="30">請在此處填寫自己相關信息</textarea><br/>
<input type="button" value="提交" onclick=" return check()">
<input type="reset" value="重置"/>
</form>
</body>
</html>
6、設計實現如下頁面：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>學生信息呈現</title>
</head>
<script>
var age;
function alter(){
var age = prompt("請輸入年齡","20");
document.form1.age.value=age;
}
</script>
<body>
<form name="form1">
張三的年齡爲：<input type="text" name="age" value="20"/>
<input type="button" value="修改年齡" onclick="alter()"/>
</form>
</body>
</html>
7、設計實現如下頁面：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計算喜歡的顏色</title>
</head>
<script type="text/javascript">
function form1(){
var x=document.getElementsByName("color");
var m=0;
var n=false;
for(var i=0;i<x.length;i++)
{
if(x[i].checked)
{
n=true;
m++;
}
}
alert("你喜歡"+m+"種顏色");
}
</script>
<body>
請選擇你喜歡的顏色: <br/>
<input type="checkbox" id="c" name="color" value="1"/>紅色
<input type="checkbox" id="c" name="color" value="2"/>綠色
<input type="checkbox" id="c" name="color" value="3"/>藍色<br/>
<input type="button" onClick="form1()" value="請單擊"/>
</body>
</html>
8、設計實現如下頁面：
<--index.html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>設計頁面</title>
</head>
<frameset cols="17%,*">
<frame src="menu.html"name="menu"/>
<frameset rows="15%,*">
<frame src="top.html"name="top"/>
<frame src="default.html"name="right"/>
<frameset/>
</frameset>
</html>
<--default.html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>default</title>
</head>
<body>
<center>
<h1><font color="red">Welcom</font></h1>
</center>
</body>
</html>
<--menu.html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menu</title>
</head>
<body>
<ul>
<li><a href="right.html"target="right">會員登錄</a></li>
<li><a href=""target="right">熱門優惠</a></li>
<li><a href="default.html"target="right">回首頁</a></li>
</ul>
</body>
</html>
<--right.html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>任意輸入一個字符串，單擊“確定”按鈕，輸出字符串的長度</title>
<script type="text/javascript">
function register(){
}
</script>
</head>
<body>
請輸入大名：
<input name="string"type="text"id="string">
<input type="button"value="填寫完畢"onclick="return register()">
</body>
</html>
<--top.html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>滾動字幕</title>
</head>
<body>
<marquee direction="right"behavior="alternate">親愛的<font color="red"><u>無名氏</u></font>會員,歡迎你!
</marquee>
</body>
</html>
9、設計實現如下效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時五秒後跳頁面</title>
<script>
function countDown(){
//獲取初始時間
var time = document.getElementById("Time");
//獲取到id爲time標籤中的數字時間
if(time.innerHTML == 0){
//等於0時清除計時，並跳轉該指定頁面
window.location.href="http://www.ccut.edu.cn/";
}else{
time.innerHTML = time.innerHTML-1;
}
}
//1000毫秒調用一次
window.setInterval("countDown()",1000);
</script>
<style>
#Time,#p{
font-size: 150px;
text-align: center;
}
#Font,#p{
font-size: 100px;
text-align: center;
}
</style>
</head>
<body>
<font color="yellow"><p id="Time" >5</p></font>
<h1>長春工業大學</h1>
<h2>http://www.ccut.edu.cn/</h2>
頁面跳轉倒計時:<span id="myspan">5</span>
<p id="Font">將跳轉至主頁</p>
</body>
</html>
期末考試最後兩大題（其它的沒保留截圖）
紙上寫代碼
