前端入門筆記
1、html基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>題目</title>
</head>
<body>
<p>body</p>
</body>
</html>
2、網頁中用了 <!DOCTYPE html... 就表示該頁面采用了W3C標準，這樣做可以增強頁面的兼容性，降低對瀏覽器的依賴性。
3、<h1~6></h1~6>
標題標簽，只有1~6,數字越小字越大
4、在html中回車是不會換行的，無論是不是在標簽中
因此就有了段落標簽<p></p>,p標簽會在段落前後加入一些空白
換行標簽是<br>，br標簽不會
5、超鏈接標簽
<a href="http://www.baidu.com">點擊進入百度</a>
如果沒有加href屬性，就是普通的字段
6、插入圖片
<img src="/images/logo.png" alt="abc" width="500" height="100" />
src是圖片的地址，alt屬性是替代文本，圖片未加載時顯示替代文本，width是圖片寬度，height是圖片長度
7、<a href="http://www.baidu.com/" target="_blank"></a>
加入target這個屬性就可以打開新頁面而不是在原界面跳轉
8、<link rel="stylesheet" type="text/css" href="mystyle.css">
link元素通常存在head元素裏面，用於連接樣式表
9、<meta>標簽為網頁添加信息，如定義關鍵詞keywords，描述內容description，網頁作者author，刷新當前 頁面refresh
10、<style>
p{color:blue;}
</style>
style元素存在於head元素內，這種添加樣式的方式稱為內部樣式表
也可以直接為單個元素添加樣式，這種方式稱為內聯樣式
11、<map name="mapname">
<area shape="rect" coords="0,0,x,x" alt="sun" href="www.xx.com">
</map>
定義圖像地圖,coords是坐標
12、<table border="1" cellpadding="文本跟單元格的間距">表格
<caption>表的標題</caption>
<tr>行
<th></th>行頭或者列頭，文本中置，字體加粗
<td></td>列
</tr>
</table>
13、無序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
有序列表
<ol srart="10">
<li>x</li>
<li>x</li>
<li>x</li>
</ol>
14、form表單
<form action="http://www.baidu.com">
A: <input type="text" name="firstname"><br>
B: <input type="radio" name="B" value="B"><br>
C:<input type="checkbox" name="C" value="C">
D:<input type="submit" value="Submit">value就是按鍵上的字
</form>
type屬性可以有text，password，radio單選，checkbox多選,submit提交
文本默認寬度是20字符
input的name屬性可以在後臺收集到
下拉列表
<select name="food" id="5">
<option>1</option>
<option>2</option>
</select>
文本框：textarea標簽
15、css有class選擇器，也有id選擇器
class以.開頭，id選擇器以#開頭
p.demo{color:red;}
p是指只對段落有效，demo是指只對class名為demo的段落有效
16、鏈接css文件
在<head>中<link rel="stylesheet" type="text/css" href="demo.css">
樣式冒號後面不能加空格，這個是網站上的嚴格驗證
17、樣式具有優先級
內聯樣式 > 內部樣式表 > 外部樣式表 > 瀏覽器默認樣式
如果一個字段同時被內部樣式表和外部樣式表修飾，則優先選擇屬性更具體的那個，而那些一樣的屬性的值則是優先級更優先
18、body的屬性
background-color：red;背景顏色，bgcolor也可以
background-image:url(‘url‘);背景圖片
background-repeat:repeat-x;背景平鋪，只在水平方向（x）平鋪
background-repeat:no-repeat;不平鋪
background-position：right top;位置右上
也可以用百分比來確定位置，左上角是0% 0%，右下角是100% 100%，使用position屬性前要先設置attachment屬性
background-attachment:fixed;背景固定不動，如果是scroll則是默認的可以滾動
margin-right:200px;右邊距200px，只對塊狀元素有效
可以把所有背景屬性設置在一個聲明中，用空格隔開
body{
background：url("12.JPG") no-repeat fixed 50% 50%;
}
19、更詳細的樣式優先級更高
比如p.ex{color:red;}的優先級比body{color：blue;}高
20、文本修飾：
text-align:justify;實現兩端對齊文本效果
text-decoration:overline;文本上劃線
line-through;刪除線
underline；下劃線
text-transform：uppercase；所有大寫
lowercase；小寫
capitalize；首字母大寫
text-indent：50px；文本縮進
text-shadow：3px 3px 3px red;字體陰影：橫距，豎距，模糊距離，顏色
letter-spacing:2px;字體間隔
line-height:100%;行高
vertical-align:bottom;垂直對齊：底部
word-spacing:30px;單詞間隔
font-style:normal;正常顯示
italic;斜體
font-size:30px;字體大小
font-weight:normal;正常字體
lighter；瘦一點
bold；粗體
900；粗的像素
21、鏈接樣式：a:link
a:link{color:red;}未訪問
text-decoration:none;無下劃線
a:visited{color:blue;}已訪問
text-decoration:none；無下劃線
a:hover{color:yellow;}鼠標接觸時
text-decoration:underline；下劃線
a:active{color:green;}鼠標點擊時
text-decoration:underline；下劃線
hover要在link和visited之後，active要在hover之後
22、無序列表的樣式
ul.a {list-style-type:circle;}圓圈
square；方形
upper-roman；大寫羅馬字母
lower-alphq；小寫英文字母
ul{list-style-image:url(‘sqpurple.gif‘);}以圖片作為序列
23、表格填充
內邊距
padding:2px 7px 2px 7px;上右下左的順序
外邊距margin：25px；
24、表格邊框
table，td，th{border:1px soild block;}
表格和單元格各自有邊框,soild是實線的意思
table{border-callapse:collapse;}
邊框折疊，加上這個讓表格邊框和單元格邊框互相重疊
border-style:soild;邊框風格
border-width:1px;邊框寬度，單獨使用無效
border-top-style:soild;
-right
-bottom
-left
設置各個側面的邊框
border-style:上，右，下，左；
上，左右，下；
上下，左右；
全部；
25、輪廓outline
outline：green dotted；綠色虛線
outline-color
outline-style
outline-width
26、外邊距margin
margin：上，右，下，左；
上，左右，下；
上下，左右；
全部；
27、填充，就是內邊距padding
padding：上，右，下，左；
上，左右，下；
上下，左右；
全部；
28、嵌套選擇器
p{}對所有p元素有效
.asd{}對class為asd的元素有效
.asd p{}對class為asd的元素內的p元素有效
29、display and visibility顯示與可見性
display:none;不可見也不占據空間
visibility:hidden;不可見但是占據空間
30、塊元素和內聯元素display
display：block；把一個元素改變成塊元素
display：inline；把一個元素改變成內聯元素，顧名思義，行內元素
31、定位positioning
positioning：static；靜態流，即默認
fixed；固定的，會與其他重疊
relative；相對定位，相對原來正常的位置
left：-20px；從左側減去20像素
absolute；絕對定位，會相對於最近的已定位的父元素，如果沒有則相對於body元素，不占據空間
32、父元素就是上層元素，兄弟元素就是同級元素
33、元素重疊z-index
z-index:-1; 堆疊順序，數字大排前面，如無指定，後定位的顯示在前面
34、改變光標cursor
<span style="cursor:wait">wait</span>讓鼠標放上去改變光標
35、濾鏡屬性filter
img{
filter: grayscale(0%);
}
36、內容溢出
overflow：visible;默認，內容溢出
hidden；溢出部分不可見
scroll；溢出則顯示滾動條
37、設置字體類型
font-family：Serif，,Sans-serif，Verdana
如果瀏覽器找不到第一種字體，會找下一種
font-size：12px;字體大小
38、瀏覽器兼容性
Firefox:-moz-box
Safari,Chrome,Opera:-webkit-box
39.盒子中元素居中
box-pack:center;水平居中
box-align:center;垂直居中
40、偽類
就是css內植類css內部本身賦予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿來使用，當然你也可以改變它的部分屬性
語法selector:pseudo class { property: value; }
:link未被訪問的鏈接
：hover鼠標懸浮（鼠標接觸）的元素
：active被激活（鼠標點擊）的元素
：visited已被訪問的鏈接
：focus擁有鍵盤輸入焦點的元素
：first-child元素的第一個子元素
：lang帶有指定lang屬性的元素
其中first-child 偽類比較復雜，感覺挺不人性化的
比如：
p:first-child {font-weight: bold;}，匹配所有元素中，第一個子元素是p元素的那個p元素
p > i:first-child {font-weight:bold;} 匹配所有p元素中，第一個子元素是i元素的那個i元素
41、max-width:
一個塊元素，如果設置了width，那個這個元素的寬度就固定了，無論窗口怎麽改變，如果設置了max-width,
就說明了這個元素的最大長度，實際寬度可以在0~max-width之間，如果窗口小於這個長度，該元素也會自動調整大小
42、box-sizing: border-box;
設置了這個屬性，則內邊距和邊框不會增加元素的寬度
43、@media screen and（max-width:300px）{
}
@media screen and 是指如果寬度小於300px，就實現大括號裏的代碼
44、display：line-block；行內塊，每個塊在行內依次排開
也可以用浮動 float：left，實現困難
45、文本分列
column-count: 3;列數
column-gap: 20px;列之間的間隔
46、如果父元素的總寬度是300px，那麽這2個子元素的比例就是1：2，一個100px，一個200px
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */
box-flex:1.0;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari 和 Chrome */
box-flex:2.0;
}
父元素：display：flex；
子元素： -webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;空間足夠是200px，不夠可以最低減少到100px
-webkit-flex: none;
flex: none;
width: 200px;寬度200px保持不變
47、justify-content用於設置元素在橫軸的對齊方式、
justify-content:center;項目位於容器中心
space-around；項目四周留空白
align-content用於設置元素在垂直方向的對齊方式
48、顏色漸變
background: linear-gradient(red, blue);上下線性漸變
background: linear-gradient(to right, red , blue);左到右
background: linear-gradient(to bottom right, red , blue); 左上到右下
可以附帶有多個顏色的漸變
49、單詞拆分
word-break:keep-all;保持
break-all;拆分
50、
transform:translate(50px,100px);移動元素，距離左50px，距離上100px
transform:rotate(30deg);順時針30度，-30則是逆時針
transform: scale(2,3); 比例尺，寬度是原來2倍，高度是原來3倍
transform: skew(30deg,20deg);水平方向傾斜30度。垂直方向傾斜20度
51、
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
在文檔中以id為索引取得元素“demo”，替換新元素
document.write("<p>我的第一段 JavaScript</p>");
在js中寫html使用以上代碼，如果在文檔已完成加載後執行 document.write，整個 HTML 頁面將被覆蓋
document.write("Hello \
World!"); 文本換行要加反斜杠\
52、
js中所有變量都是var，文本加上單引號或者雙引號
變量的類型是動態的，隨時都可以改變，重新聲明就可以重新定義
數組聲明和初始化
var cars=new Array("奔馳","寶馬","大眾");第一個元素下標是0
javascript對象
var person={firstname:"Bill", lastname:"Gates", id:5566};鍵值對
引用方式：name=person.firstname;
name=pserson["firstname"];
undefined是沒有值得意思，null用來清空變量
document.getElementById("demo").innerHTML=myFunction(4,3);
這句話的意思是將id為demo的元素內容變成myFuntion(4,3)
使用了innerHTML，所有的內容都會被替換
53、
javascript的函數中在使用 return 語句時，函數會停止執行，並返回指定的值。
如果僅僅退出函數，直接return；
54、
如果您把值賦給尚未聲明的變量，該變量將被自動作為全局變量聲明。carname="Volvo";carname就是全局變量
局部變量在函數運行完就會刪除，全局變量在頁面關閉後刪除。
55、js中==和===的區別
（1）對於string,number等基礎類型：==看值是否相等，===看類型是否相等
（2）對於Array，Object等高級類型，都是進行指針地址比較
（3）對於高級與基礎類型的比較，==還是看值是否相等，===直接是false
56、for/in循環
用於循環遍歷對象的屬性
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
person[x]每次循環代表一個屬性。順序排列
57、break和comtinue
break會直接調出循環，後面的循環全部跳過
continue是結束本次循環，後面的循環繼續執行
58、接以上，break和continue如果是單獨使用的話，就只能出現在循環和switch中
但是如果加上了標簽引用，就可以用來跳過任何javascript代碼塊
例如break labelname；標簽名
59、捕獲異常
try{
throw "異常內容";
}catch(err){
return err;
}
60、表單驗證
61、
javascript可以通過3中方式找到對象
var x=document.getElementById("intro");通過id
var y=x.getElementsByTagName("p");找到"main"中的所有p元素
62、innerHTML inner：內部的
innerHTML屬性用於提取元素的內容
document.getElementById("3d").innerHTML；提取id為3d的元素的內容
document.getElementById("image").src;用於提取id為image的元素的src屬性
document.getElementById(id).style.color；提取元素的樣式中的顏色
63、
<h1 onclick="this.innerHTML=‘謝謝!‘">請點擊該文本</h1>這個話中的this指的是本元素
64、onload打開頁面時,onunload離開頁面時,onchange改變輸入字段時,onmouseover鼠標接觸時，onmouseout鼠標離開時，onmousedown鼠標按下時，onmouseup鼠標擡起時，onfocus字段獲得焦點時。
65、javascript的所有數字都是64位，8bit的浮點數
整數最多是15位，小數最大位是17位，數字前加0視為八進制，加0x視為16進制
66、正則表達式regexp
創建正則對象：var patt1=new Regexp("e");這個正則對象的模式是e這個字母
正則對象的方法：test（）如果有匹配為true，否則false
exec()匹配則返回匹配值，否則null
。。。
67、瀏覽器對象模型BOM
window.open()打開新窗口
window.colse()關閉
window.moveTo()移動
。。。
window.screen 包含用戶屏幕信息
screen.availWidth；用戶可用屏幕寬度
screen.availHeight；用戶可用屏幕高度
。。。
window.location包含當前網頁的網絡信息
location.hostname;web主機域名
location.href;返回整個url
location.pathname;返回當前頁面的路徑和文件名
。。。
window.history歷史信息
history.back() - 上一個url
history.forward() - 與在瀏覽器中點擊按鈕向前相同
。。。
window.navigator關於訪問者瀏覽器的信息
。。。
68、消息框
提示框alert（"xxx"）;
確認框confirm（"xxx"）;點確定就返回true，取消就是false
輸入框prompt（"文本","默認值"）;
69、延時器
t=setTimeout("JavaScript語句"，x毫秒)；在x毫秒後執行javascript語句
clearTimeout(t);取消標識為t的延遲代碼塊
70、escape（asd）;把asd變成一個字符串
71、
前端入門筆記