目錄
HTML介紹
HTML(Hyper Text Markup Language)是超文本標記語言，並不是編程語言，它包括一系列標簽，通過這些標簽可以將網絡上的文檔格式統一，使分散的網絡資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令用來說明文字、圖像、視頻、表格、鏈接等，目前廣泛使用的是HTML5
CSS介紹
CSS(Cascading Style Sheets)是層疊樣式表，用來表現HTML文件樣式的標准語言。CSS用於定義網頁的樣式，包括針對不同設備和屏幕尺寸的設計和布局，描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題，通常保存在外部.css文件中，目前廣泛使用的是CSS3
CSS優先級：
行內樣式優先級最高，內部樣式和外部樣式為就近原則
行內樣式(寫在html的標簽里，即style屬性)、內部樣式(寫在HTML的head標簽內)、外部樣式(獨立的CSS文件)
JavaScript介紹
JavaScript(簡稱“JS”)是一種解釋性腳本語言，JS主要用來向HTML頁面添加交互行為，通常通過嵌入HTML中來實現自身功能，但寫成獨立的JS文件更有利於結構和行為的分離
完整的 JavaScript包括以下三部分：
ECMAScript，描述了該語言的語法和基本對象，JavaScript的語法標准，比如ES5、ES6、ES7等
文檔對象模型（DOM），描述處理網頁內容的方法和接口，比如HTML各類標簽
瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口，比如瀏覽器前進、后退、刷新、關閉等
HTML、CSS和JavaScript之間的關系
HTML、CSS和JavaScript三者被稱為前端三要素，在一個基本的網站中包含許多網頁，每個網頁都是由HTML、CSS和JavaScript組成，三者相輔相成。HTML是結構層，從語義的角度去搭建網頁結構；CSS是樣式層，從美觀的角度去修飾頁面樣式，JavaScript是行為層，從交互的角度去描述頁面行為。舉個栗子：HTML就像是一扇粗加工之后的門，CSS的作用是給門上油漆圖案，JavaScript的作用是給門上鎖和門把手
HTML使用
基本結構
<!--!DOCTYPE是文檔聲明,告訴瀏覽器要使用的規范-->
<!DOCTYPE html>
<!--html標簽是告訴瀏覽器整個網頁是從<html>這里開始的,到</html>結束-->
<html lang="en">
<!--head標簽對表示網頁頭部信息-->
<head>
<!-- meta描述性標簽,用來簡要描述網站的一些信息,通常用來做SEO,即搜索引擎優化-->
<meta charset="UTF-8">
<meta name="keyword" content="小白典的博客">
<meta about="summary" content="這里是小白典的博客,歡迎您的到訪!">
<!-- title標簽表示網頁標題信息-->
<title>小白典</title>
</head>
<!--body標簽對表示網頁主體,網頁內容都寫在body內-->
<body>
</body>
</html>
常用標簽
基本標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小白典</title>
</head>
<body>
您好!
<!--h1~h6標簽表示HTML六個級別的標題-->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<!--div標簽是塊級元素，通常和CSS一起使用來布局網頁-->
<div>
<!--p標簽表示段落-->
<p>對於某些事我們不在流淚了，是我們無情了還是堅強了？</p>
<!--span通常與行內元素組合使用並添加樣式，若沒有樣式，則視覺上與其他文本不會有任何差異-->
<p>在有能力，有時間在一起的時候，一定要好好珍惜，<span style="color:blue">愛情</span>也好，友情也罷!</p>
</div>
<!--hr是水平線,是單標簽,沒有結束標簽-->
<hr>
<!--br是換行符,也是單標簽,沒有結束標簽-->
微笑是改善容貌的簡單方式。<br>
<!--em標簽表示字體為斜體-->
<em>寧願一個人呆着，也不願跟不合拍的人呆一塊!</em>
<br>
<!--strong標簽表示字體加粗-->
<strong> 念往昔，繁華競逐!</strong>
<hr>
<!-- 表示空格,一個 表示一個空格-->
空 格
<br>
> 這是大於號 < 這是小於號 = 這是等號 © 版權符號 ⋅ 這是實心點
<hr>
<!--img標簽，src是圖片地址，分為相對路徑和絕對路徑，更推薦使用相對路徑-->
<img src="../resource/image/8.jpg" alt="若圖片獲取失敗則顯示此信息" title="光標落在圖片上則顯示此信息" width="500" height="500">
<!--視頻標簽-->
<video src="../resource/video/油菜花.mp4" controls autoplay height="200" width="300"></video>
<!--音頻標簽-->
<audio src="../resource/audio/I_lomo_you.mp3" controls ></audio>
</body>
</html>
超鏈接標簽
<!--a標簽是超鏈接，href指路徑，target指鏈接打開位置，默認是當前頁面，_blank表示在新窗口打開鏈接-->
<a href="https://www.cnblogs.com/dyd168/" target="_blank">百度</a><br>
<a href="html0.html">點擊跳轉到html0網頁</a><br>
<!--圖像鏈接-->
<a href="html0.html">
<img src="../resource/image/6.jpg" alt="圖片獲取失敗" title="一個人說話" width="100" height="100">
</a><br>
<!--錨鏈接，實現當前頁面跳轉，也可以實現頁面間的跳轉；1。先設置一個錨標記 2.點擊鏈接跳轉到標記處，頁面超出屏幕才能顯示出效果-->
<!--當前頁面跳轉，使用name做為標記-->
<a name="top">頁面頂部</a>
中間內容要足夠多，出現滾動效果才能顯示效果
<a href="#top">回到頂部</a>
<!--頁面間跳轉-->
<!--在html0頁面使用name做標記-->
<a name="bottom">頁面底部</a>
<!--在其它頁面設置跳轉到html0頁面標記的鏈接-->
<a href="HTML/html0.html#bottom">跳轉到html0頁面底部</a>
<!--功能性鏈接-->
<!--郵箱鏈接，點擊會調出郵箱客戶端-->
<a href="mailto:785288076@qq.com">發郵件給我</a>
<!--QQ推廣的鏈接，有些網頁右側的QQ聯系就是這種方式寫的-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=788888888&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:788888888:53" alt="點擊此處QQ聯系我" title="點擊此處QQ聯系我"/></a>
內聯框架
<!--iframe內聯框架，是在當前網頁打開另一個網頁-->
<iframe src="https://www.baidu.com/" frameborder="0" name="baidu" width="800" height="500"></iframe>
<!--使用內聯框架打開我的博客，target使用內聯框架的name，也就是自定義了鏈接打開位置-->
<a href="https://blog.csdn.net/Q0717168" target="baidu">點擊跳轉</a>
列表標簽
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>C</li>
</ol>
<!--無序列表-->
<ul>
<li>Java</li>
<li>Python</li>
<li>C</li>
</ul>
<!--自定義列表-->
<dl>
<dt>編程語言</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C++</dd>
</dl>
表格標簽
<!--table表格標簽，tr表示行，td表示列-->
<table border="3">
<tr>
<!-- colspan表示跨列，align表示對齊方式，左中右lift、center、right-->
<td colspan="3" align="center">語言</td>
</tr>
<tr>
<!-- rowspan表示跨行-->
<td rowspan="2">測試</td>
<td>Java</td>
<td>Python</td>
</tr>
<tr>
<td>Go</td>
<td>Php</td>
</tr>
</table>
表單
<!--表單-->
<!--action表單提交位置，可以是網站也可以是請求處理地址，method是提交方式-->
<form action="https://blog.csdn.net/Q0717168" method="post">
<!-- 文本輸入框，value是添加默認值，readonly表示只讀，hidden表示隱藏，disabled表示禁用-->
<p>登錄賬號：<input type="text" name="username" value="guest" readonly></p>
<!-- 密碼輸入框，placeholder是提示性信息-->
<p>登錄密碼：<input type="password" name="passwd" placeholder="請輸入密碼"></p>
<p>性別：
<!-- radio是單選類型，name一樣表示為相同組的，checked表示默認選擇項-->
<input type="radio" name="Sex" value="boy" checked>男
<input type="radio" name="Sex" value="girl">女
</p>
<p>愛好：
<!-- checkbox是多選類型-->
<input type="checkbox" name="hobby" value="swim">游泳
<input type="checkbox" name="hobby" value="travel" checked>旅行
<input type="checkbox" name="hobby" value="run">跑步
</p>
<p>
<!-- select是下拉框，selected表示默認選項-->
<select name="cars">
<option value="LX">理想</option>
<option value="XP">小鵬</option>
<option value="WL" selected>蔚來</option>
<option value="XM">小米</option>
</select>
</p>
<p>
<!-- textarea是文本域，required是非空判斷，還有pattern是使用正在表達式判斷，可以在所有文本框中使用-->
<textarea name="textarea" cols="30" rows="10" placeholder="請輸入內容" required></textarea>
</p>
<p>
<!-- file是文件域-->
<input type="file" name="file">
<input type="button" name="upload" value="上傳">
</p>
<p>
<!-- button是普通按鈕，submit是提交按鈕，reset是重置按鈕-->
<input type="button" name="btn" value="登錄">
<input type="submit" >
<input type="" value="clean">
</p>
<!-- type還有很多，除了以上列出的，還有search、url、email、date、range等請自行練習-->
</form>
CSS使用
使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 內部樣式-->
<style>
h1{
color: blue;
}
</style>
<!-- 外部樣式，或稱為外鏈式，推薦-->
<link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
<!--行內樣式，也叫做內嵌式，不利於代碼維護，不推薦-->
<h1 style="color: brown;font-size: 20px">這是使用了css的標題</h1>
<!--三種方式優先級是就近原則-->
</body>
</html>
常用屬性
本次CSS導入采用外部樣式，已在HTML文件head中添加外部CSS文件，<link rel="stylesheet" href="../CSS/style.css">
#style p,a{
/* 字體顏色*/
color: white;
/* 字體大小，常用單位有像素px，百分比%，em，也可以選擇其它單位*/
font-size: 20px;
/* 字體樣式，默認正常(normal)，如：文字斜體(italic)*/
font-style: italic;
/* 為文本設置字體樣式，多個樣式是防止文本不支持時選擇備用字體樣式*/
font-family: Arial,Consolas,'楷體','微軟雅黑',serif;
/* 字體粗細，默認正常(normal)，加粗bold，也可以使用數值表示加粗層度100~700，還有斜體之類的樣式*/
font-weight: bold;
/* 設置文字水平方向，有居中設置肯定也有靠左靠右left、right*/
text-align: center;
/* 行高，讓文字上下居中*/
line-height: 25px;
/* font屬性綜合寫法：包含五個單一屬性，字號和行高用斜杠分開，且字號行高及樣式必須位於最后按序書寫*/
font: italic bold 20px/25px "宋體";
/* 文本修飾，通常用於去除a標簽默認的下划線，可以添加上中下划線，overline、line-through、underline*/
text-decoration: none;
/* 盒子長寬、顏色、線型及邊框大小設置，常用單位是像素px，百分比%，em，也可以選擇其它單位*/
width: 300px;
height: 50px;
/* 若希望盒子高度隨內容多少而變化則，可以設置為auto*/
height: auto;
border-color: blue;
border-style: solid;
border-width: 5px;
/* border屬性綜合寫法：盒子邊框是5px寬的藍色實線*/
border: 5px blue solid;
/* 設置盒子圓角大小，50%時盒子為圓形，屬性值可以時百分比或者數值*/
border-radius:10px;
/* 文本內容超出高度時默認可見(visible)，隱藏(hidden)，是否超出都顯示滾動條(scroll)，文本超出后顯示滾動條(auto)*/
overflow: hidden;
/* 鼠標移上之后指針狀態，pointer表示一只手*/
cursor:pointer;
/* 背景色*/
background-color: red;
/* 背景圖，背景色和背景圖同時設置時都會顯示，只是圖片會蓋住背景色*/
background-image: url("../resource/image/16.jpg");
/* 是否重復使用背景圖進行渲染，默認重復，no-repeat表示不重復，repeat-x橫向平鋪，repeat-y縱向平鋪*/
background-repeat: no-repeat;
/* 背景定位，左中右(left/center/right)，上中下(top/center/bottom)，通常兩個組合使用，也可以使用像素法或百分比表示法*/
background-position: center top;
/* 設置背景圖是否雖頁面滾動，默認滾動(scroll)，fixed表示將圖片固定到瀏覽器左上頂點，不隨頁面滾動而滾動*/
background-attachment: fixed;
/* background屬性綜合寫法：包含1~5個屬性值，空格隔開，不指定順序*/
background: url("../resource/image/18.jpg") no-repeat left top fixed orange;
}
#float{
/* 浮動屬性是用於網頁並排布局的，它可以脫離標准文檔流，不受元素等級限制，既可以並排顯示，又可以設置寬高，屬性值left、right*/
float: right;
}
.display{
/* 顯示模式，對應元素的三種類型，塊元素(block)、行內元素(inline)、行內塊元素(inline-block)*/
display: block;
}
HTML文件body中的內容
<div id="style">
<p>我只是個普通人！<br> I'm just a ordinary people. </p>
<a href="../resource/audio/I_lomo_you.mp3">一念清凈，烈焰成池！</a>
</div>
<div id="float">
<p>世事茫茫難自料，春愁黯黯獨成眠！</p>
</div>
<div>
<p class="display">無風楊柳漫天絮，不雨<span style="color: aqua">棠梨</span>滿地花！</p>
</div>
<span class="display">松月生夜涼，風泉滿清聽！</span>
盒子模型
盒子模型是CSS的重要布局屬性，是核心基礎知識，理解了其概念才能更好的進行網頁排版與布局，盒子模型包含五個屬性，寬度(width)、高度(height)、內邊距(padding)、邊框(border)、外邊距(margin)
/*在瀏覽器中通過通過F12查看盒子模型圖*/
div {
/*若盒子不設置寬度則默認撐滿父盒子的寬度*/
width: 200px;
/*若盒子不設置高度則高度會跟隨內容多少變更*/
height: 100px;
/*內邊距指寬高到邊框的間距，不能加載內容，但可以設置背景*/
padding: 20px;
/*border屬性值有三個，上文已講到，此處為綜合寫法*/
border: 5px dashed #ce1212;
margin: 30px;
}
.test0{
width: 100px;
/*內邊距(padding)是一個綜合屬性，可以根據四個方向設置單一屬性*/
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
background-color: hotpink;
}
.test1{
width: 50px;
height: 100px;
/*內邊距(padding)使用綜合屬性寫法，四個方向都設置時分別是上、右、下、左*/
padding: 50px 60px 70px 80px;
}
.test2{
width: 100px;
height: 120px;
/*內邊距(padding)三值表示時分別是上、左右、下*/
padding: 10px 5px 15px;
}
.test3{
width: 100px;
height: 120px;
/*內邊距(padding)二值表示時分別是上下、左右*/
padding: 16px 18px;
}
#test{
width: 80px;
height: 100px;
background-color: cyan;
/*四條邊的顏色，同padding一樣有四值表示法*/
border-color: red blue pink orange;
/*四條邊的邊框寬度，同padding一樣有四值表示法*/
border-width: 10px 20px 30px 40px;
/*邊框樣式，dashed指虛線，solid指實線，double指雙線，dotted指點線，同padding一樣有四值表示法*/
border-style: dashed solid double dotted;
}
#test0{
width: 200px;
border: 5px dotted #ffe268;
/*外邊距(margin),同padding一樣有四值表示法*/
margin: 30px 40px;
}
外邊距(margin)和內邊距(padding)使用法師相同
選擇器
選擇器是CSS中的重點，選擇器可以讓網頁代碼更簡潔，結構更清晰，能夠避免起名重名的煩惱，選擇器就是很明確地告訴瀏覽器要去渲染HTML節點中哪個位置的樣式，可以理解為門牌號
基本選擇器
三者優先級：id選擇器 > 類選擇器 > 標簽選擇器，多種選擇器同時使用，形成復雜的選擇器時，優先級會出現變化，對於復雜選擇器，首先確認是否同時選擇同一元素，若為同一元素則需要數權重，若層級不同則采取就近原則，若權重層級都相同則后書寫的優先
1. 標簽選擇器
/*標簽選擇器會選擇頁面上所有的標簽元素*/
h2{
color: blueviolet;
background: darkgrey;
font-size: 20px;
}
p{
color: blue;
font-family: 華文行楷;
}
h3,em{
color: rgb(255,0,0);
height: 10px;
}
HTML文件body中的內容
<h2>這是經過修飾的二級標題</h2>
<p>這是藍色行楷字體</p>
<h3>這是經過修飾的三級標題</h3>
<em>這是經過修飾的斜體字</em>
2. 類選擇器
/*類選擇器，可以多個標簽歸類*/
.test{
color: #ff8882;
font-style: normal;
}
.label,.title{
color: #ce1212;
font-size: small;
}
HTML文件body中的內容
<p class="label">醉后不知天在水，滿船清夢壓星河！</p>
<p class="label">雪后燕瑤池，人間第一枝！</p>
<p class="test">半壕春水一城花，煙雨暗千家！</p>
<h3 class="title">若有清懷淡如水，便無濁念似墨濃！</h3>
3. id選擇器
/*id選擇器，id不可重復，必須保證全局唯一*/
#name{
color: #ffe268;
font-weight: normal;
}
#title{
font-family: 楷體;
color: cyan;
}
#nickname{
font-size: 2em;
color: darkgoldenrod;
}
HTML文件body中的內容
<p id="name">應是天仙狂醉，亂把白雲揉碎!</p>
<p id="title">獨出前門望野田，月明蕎麥花如雪!</p>
<h4 id="nickname">清曉長歌何處去，武陵溪上看桃花!</h4>
層級選擇器
/*后代選擇器(空格)，所選body元素內的所有p元素都會變化*/
body p{
color: #ce1212;
font-size: 0.2in;
}
/*子選擇器(>)，所選屬於body元素的子元素中所有p元素都會變化*/
body>p{
background: blue;
font-family: 華文行楷;
}
/*相鄰兄弟選擇器(+)，僅指緊隨其后的元素，*/
.section+p{
color: fuchsia;
background: darkgrey;
}
#summary+strong{
font-size: larger;
color: cyan;
background: brown;
}
/*通用兄弟選擇器(~)，匹配指定元素緊隨其后的所有同級元素*/
.section~p{
color: darkorange;
background: greenyellow;
font-size: 10px;
}
#summary~p{
color: #ff8882;
background: #ffe268;
font-family: 新宋體;
}
HTML文件body中的內容
<p>大鵬一日同風起，扶搖直上九萬里！</p>
<p class="section">一身轉戰三千里，一劍曾當百萬師！</p>
<p id="summary">寂寞空庭春欲晚，梨花滿地不開門！</p>
<strong>日暮北風吹雨去，數峰清瘦出雲來！</strong>
<p>滿目山河空念遠，不如憐取眼前人！</p>
<ol>
<li>
<p>唯有南風舊相識，偷開門戶又翻書！</p>
</li>
</ol>
偽類選擇器
/*選擇ul的第一個子元素*/
ul li:first-child{
color: #ce1212;
font-size: 20px;
}
/*選擇ul最后一個子元素*/
ul li:last-child{
background: cyan;
}
/*選擇所有p元素的父元素，根據順序選擇第二個p元素*/
p:nth-child(2){
color: darkblue;
font-size: 15px;
}
/*選擇所有p元素中的第一個p元素*/
p:nth-of-type(1){
color: hotpink;
background: gainsboro;
font-family: 新宋體;
}
/*光標落在文字上后字體顏色變化*/
p:hover{
color: black;
}
HTML文件body中的內容
<p class="name">別后相思空一水，重來回首已三生！</p>
<p id="title">連雨不知春去，一晴方覺夏深！</p>
<strong>人間萬事消磨盡，只有清香似舊識！</strong>
<p>離恨恰如春草，更行更遠還生！</p>
<ul>
<li>平蕪盡處是春山，行人更在春山外！</li>
<li>我來問道無余說，雲在青天水在瓶！</li>
<li>似此星辰非昨夜，為誰風露立中宵！</li>
</ul>
屬性選擇器
/*使用class選擇器，設置class="test"下所有a標簽的樣式*/
.test a{
color: white;
display: black;
float: left;
width: 100px;
height: 100px;
border-radius: 20px;
text-decoration: none;
text-align: center;
font: bold 50px/100px '楷體';
margin-left: 20px;
background-image: url("../resource/image/15.jpg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/*選擇存在id屬性的元素*/
a[id]{
background: cyan;
}
/*選擇id="article"的元素*/
a[id="article"]{
background: fuchsia;
}
/*選擇class="name"的元素*/
a[class="name"]{
background: yellow;
color: black;
}
/*選擇class中含有title的元素*/
a[class*="title"]{
background: blue;
}
/*選擇href中以http開頭的元素*/
a[href^="http"]{
background: darkorchid;
}
/*選擇href中以html結尾的元素*/
a[href$="html"]{
background: hotpink;
}
HTML文件body中的內容
<p class="test">
<a href="https://blog.csdn.net/Q0717168" class="name nickname title" id="article">壹</a>
<a href="https://www.cnblogs.com/dyd168" class="name nickname title" id="content" target="_blank">貳</a>
<a href="../resource/image/6.jpg" class="name nickname">叄</a>
<a href="../resource/image/8.jpg" class="name nickname">肆</a>
<a href="index.html" class="name title">伍</a>
<a href="index2.html" class="name title">陸</a>
<a href="../resource/video/油菜花.mp4" class="nickname title">柒</a>
<a href="../resource/audio/I_lomo_you.mp3" class="nickname title">捌</a>
<a href="../CSS/style.css" class="title">玖</a>
<a href="../CSS/style1.css" class="name" id="describe">拾</a>
</p>
默認樣式
很多標簽都有默認樣式，比如標題h1~h6，div、p標簽的默認邊距，ul、li的默認小圓點等，由於開發者的目的是還原設計圖上的功能，很多時候並不會使用默認樣式，甚至默認樣式影響到實際開發的效果，這時需要根據需求先清除不需要的默認樣式，然后再自定義一些默認樣式
/*清除默認樣式，或者直接使用*號清除所有默認樣式*/
body,div,span,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,th,td,input{
padding: 0;
margin: 0;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
font-size: 100%;
}
ul,ol{
list-style: none;
}
/*設置網頁默認樣式*/
body{
font-size: 20px;
font-family: Arial, Consolas, '楷體', '微軟雅黑', serif;
}
a{
color: black;
text-decoration: none;
}
/*自定義布局*/
.menu{
width: 600px;
height: 40px;
}
li{
width: 100px;
line-height: 40px;
float: left;
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
border-right: 2px solid wheat;
text-align: center;
}
HTML文件body中的內容
<div class="menu">
<ul>
<li><a href="https://www.baidu.com/">百度</a></li>
<li><a href="https://blog.csdn.net/Q0717168/article/details/115449824">首頁</a></li>
<li><a href="https://www.cnblogs.com/dyd168/p/14603495.html">科技</a></li>
<li><a href="https://blog.csdn.net/Q0717168">Blog</a></li>
<li><a href="https://www.cnblogs.com/dyd168/">新聞</a></li>
</ul>
</div>
定位
定位是讓盒子模型在指定位置加載，屬性是position，設置盒子模型針對某個參考元素進行位置偏移，常用的定位方式有三種：相對定位(relative)、絕對定位(absolute)、固定定位(fixed)，相對定位不會脫離標准流，而絕對定位和固定定位是會脫離標准流的
想要讓定位的元素發生位置偏移，必須搭配偏移量屬性設置，水平方向：left、right；垂直方向：top、bottom，偏移量屬性有正負之分，正數表示偏移方向和屬性名意思正好相反，負數才表示偏移方向和屬性名意思相同
相對定位
相對定位(relative)是不脫離標准流狀態的，盒子在新的指定位置加載后也不會讓出原始位置
div{
width: 100px;
height: 100px;
background-color: red;
margin: 5px auto;
}
.relative{
background-color: blue;
position: relative;
left: 100px;
top: 105px;
}
HTML文件body中的內容
<div></div>
<div class="relative"></div>
<div></div>
以自身為基准，向右移動100px，向下移動105px；向左移動100px，向上移動105px，移動后原位置還保留，下面的盒子並沒有擠上去
絕對定位
絕對定位(absolute)會脫離標准流，盒子在新的指定位置加載后原位置會被后面的標准流元素覆蓋，絕對定位偏移參考的是距離最近的有定位的祖先元素，若祖先元素都沒有設置定位則參考body
以body為參考時，參考點是根據偏移方向組成的body頁面首屏的四個頂點
以祖先元素為參考時，參考點和body的類似，都是四個頂點，只是范圍縮小到某個定位的元素上，祖先元素不區分類型，可以是相對定位、絕對定位或固定定位。后代和祖先組合方式有三種：子絕父相、子絕父絕、子絕父固，由於相對定位不脫離標准流，結構更加穩定，所以子絕父相的組合比較常用
#box0{
width: 350px;
height: 350px;
border: #2BD2FF dotted 5px;
margin: auto;
position: relative;
left: 100px;
top: 100px;
}
#box1{
width: 250px;
height: 250px;
border: 5px dashed blue;
position: absolute;
left: 100px;
top: 100px;
}
#box2{
width: 150px;
height: 150px;
border: 5px solid orange;
position: absolute;
left: 100px;
top: 100px;
}
.block{
width: 50px;
height: 50px;
background-color: purple;
position: absolute;
left: 100px;
top: 100px;
}
HTML文件body中的內容
<div id="box0">
<div id="box1">
<div id="box2">
<div class="block"></div>
</div>
</div>
</div>
固定定位
固定定位(fixed)也會脫離標准流並讓出位置，可以設置寬高，它的參考點是瀏覽器窗口的四個頂點，具體位置根據偏移組合方向而定
.backup{
width: 120px;
height: 60px;
background-image: url("../resource/image/17.jpg");
background-size: 150px;
background-position: center;
border-radius: 15px;
cursor: pointer;
position: fixed;
right: 50px;
bottom: 50px;
}
Javascript使用
本次使用ECMAScript 6標准（ES6），講到JavaScript的版本，實際上就是說它實現了ECMAScript標准的哪個版本，由於JavaScript存在的缺陷，建議開啟嚴格檢查模式(strict模式)，啟用strict模式是在JavaScript代碼的第一行寫上'use strict';
使用方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../CSS/style.css" type="text/css">
<!-- 外部引用方式-->
<script src="../JavaScript/JS1.js" type="text/javascript"></script>
<!-- 內部引用方式，既可以在head中，也可以在body中-->
<script></script>
</head>
<body>
<!-- 內部引用方式，既可以在body中，也可以在head中-->
<script></script>
</body>
</html>
數據類型、運算符及常量變量
Number // 數值，在Javascript中，不區分整數和小數
123; // 整數123
0.123; // 浮點數0.123
1.23e3; // 科學計數法表示1.23x1000，等同於1230
-100; // 負數
NaN; // NaN表示Not a Number，當無法計算結果時用NaN表示
Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示為Infinity
String // 字符串
'abc' "abc" // 用''或""括起來的字符表示
`abcd` // 多行字符串用反引號表示
'I\'m \"OK\"!'; // 若字符串內包含'和"時用轉義字符\來標識
Boolean // 布爾值
true; // 這是一個true值
false; // 這是一個false值
2 > 1; // 這是一個true值
1 > 2; // 這是一個false值
Array // 數組
[1, 2, 3.14, 'Hello', null, true]; // JavaScript的數組可以包括任意數據類型
new Array('test',1,'數組'); // 創建數組['test", 1, "數組"]
let arr = ['test', 1, '數組']; // 將數組賦值給變量arr
arr; // 返回["test", 1, "數組"]
arr[1]; // 返回索引為1的元素，即1
arr[3]; // 索引超出了范圍，返回undefined
arr[2] = 'Array'; // 數組值變為["test", 1, "Array"]
arr.sort(); // 對當前數組進行排序
arr.reverse(); // 將當前排列反向排序
arr.indexOf('test'); // 元素"test"的索引為0
arr.indexOf(2); // 元素2沒有找到，返回-1
arr.slice(0, 3); // 從索引0開始，到索引2結束，但不包括索引2，['test", 1]
arr.slice(3); // 從索引1開始到結束，[1, "數組"]
let a = arr.slice(); // 不給slice()傳遞任何參數時會截取所有元素，此操作相當於復制了一個數組
arr.length; // 返回數組的長度，3
arr.length = 5; // 直接給數組的length賦值會導致數組變化，["test", 1, "數組", empty × 2]
arr.unshift('a','B'); // 向數組頭部添加元素，返回Array新的長度: 4
arr.shift(); // 刪除數組的最后一個元素，pop()返回"a"，，連續刪除多次就多寫幾次一起執行
arr.push('ab','CD'); // 向數組末尾添加元素，返回數組新的長度: 5
arr.pop(); // 刪除數組的最后一個元素，pop()返回"CD"，連續刪除多次就多寫幾次一起執行
arr.splice(1,3,'測','E'); // 刪除1~3的索引后從該位置添加元素，返回刪除的元素["test", 1, "數組"]
arr.splice(0,1); // 只刪除，不添加，返回刪除的元素["B"]
arr.splice(3,0,'F','g'); // 只添加,不刪除，返回[],因為沒有刪除任何元素
add.concat(3,4,[5,6]); // 把當前的數組與其它數組連接起來，並未修改當前數組，只是返回了一個新的數組
add; // 返回結果是["測", "E", "ab", "F", "g", 3, 4, 5, 6]
arr; // 返回結果是["測", "E", "ab", "F", "g"]
arr.join('→'); // 使用指定字符把當前數組元素連接起來，返回連接后的字符串，"測→E→ab→F→g"
let arr1 = [[1,'a',2],['b',3],'c4']; // 將多維數組賦值給變量arr1
arr1[1][0]; // 獲取多維數組中的元素，返回"b"
Object // 對象，是一組由key-value組成的無序集合
let person = {
name: 'yadian',
age: 20,
language: ['js','python','java'],
'Mid-school':'No.3 Middle School', // 屬性名包含特殊字符時必須用''括起來
Car: true,
Code: null
};
person.name; // 獲取對象屬性，返回"yadian"
person['Mid-school'] // 獲取對象屬性，有特殊符號時不能使用.必須用[]括起來，返回"No.3 Middle School"
Symbol // 每個從Symbol()函數中返回的值都是唯一的，一個symbol值能作為對象屬性的標識符，這是此類型僅有的作用
let s = Symbol();
let ss = Symbol();
s === ss; // 結果是false，每創建了一個Symbol數據都是獨一無二的存在
null & undefined
null // 表示一個“空”的值，0是一個數值，''表示長度為0的字符串，而null表示“空”
undefined // 表示“未定義”，undefined應該只在判斷函數參數是否傳遞的時候使用
typeof // 查看數據類型
typeof s; // 結果"symbol"
typeof y; // 結果"number"
typeof person; // 結果"object"
// 邏輯運算，與或非
true && true; // 都為真結果為true
true || false; // 取最先計算的結果，此處結果為true
!true; // 取反，結果為false
// 算術運算符(+,-,*,/,%,**)
1+1; // 2
1-1; // 0
2*3; // 6
4/2; // 2
5%3; // 2
2**3;// 8
// 比較運算符(==,===,!=,>,<,>=,<=)
1 > 2; // false
2 >= 1; // true
false == 0; // true，==會自動轉換數據類型
false === 0; // false，強烈建議始終使用===進行比較
NaN === NaN; // false，NaN與所有其他值都不相等
isNaN(NaN); // true，唯一判斷NaN的方法是通過isNaN()函數
1/3 === 1-2/3; // false, 比較兩個浮點數是否相等，只能計算它們之差的絕對值，看是否小於某個閾值
Math.abs(1/3-1-2/3) < 0.0000001; // true
// 常量，名稱是大小寫英文、數字、$和_的組合，且不能用數字開頭，不得使用關鍵字，常量賦值后不可變更
const y = 1; // 申明了常量y並賦值1
const z_008 = '008'; // z_008是一個字符串
const Abc = true; // Abc是一個布爾值true
const def = null; // def的值是null
const g = 123; // g的值是整數123
// 變量，變量名是大小寫英文、數字、$和_的組合，且不能用數字開頭，不得使用關鍵字
let a; // 申明了變量a，此時a的值為undefined
let $b = 1; // 申明了變量$b，同時給$b賦值，此時$b的值為1
let c_007 = '007'; // c_007是一個字符串
let Answer = true; // Answer是一個布爾值true
let e = null; // e的值是null
let a = 123; // a的值是整數123，可以把任意數據類型賦值給變量，同一變量可以反復賦值且可以是不同類型的變量
a = 'ABC'; // a變為字符串
判斷、循環、Map、Set及iterable
// 條件判斷
let salary=8000;
if (salary === 9000){
console.log("平均數"); // 若salary >= 9000為true，則執行if語句塊
} else if (salary > 10000){
console.log("期望結果！"); // 若salary >= 10000為true，則執行else if語句塊
} else {
console.log("繼續加油吧！"); // 否則執行else語句塊
}
// for循環，通過初始條件、結束條件和遞增條件，循環執行語句塊
let a=0;
let i;
for (i=0;i<10;i++){
a=a+i;
if (i<5){
continue;
}else if (i>8){
break;
}
console.log(a); // 打印計算結果 15 21 28 36
}
// for...in循環，把對象中所有屬性依次循環出來
let b = {
name: 'duan',
age: 20,
city: '蘇州',
};
for (let key in b) {
if (b.hasOwnProperty(key)) { // hasOwnProperty()的作用是過濾掉對象繼承的屬性
console.log(key); // 打印結果 name age city
}
}
// 通過for...in循環出數組的索引，得到的是String類型，而非Number
let arr = [[1,'a',2],['b',3],'c4'];
for (let c in arr) {
console.log(c); // 打印結果 0 1 2
console.log(arr[c]); // 打印結果[ 1, 'a', 2 ] [ 'b', 3 ] c4
}
// while循環，只有一個判斷條件，條件滿足時不斷循環，否則退出循環
let d = 0;
let e = 100;
while (e > 0) {
d = e + d;
e = e - 2; // 變量e不斷自減至結果為-1時，循環退出
}
console.log(d); // 打印結果2550
// Map，就是跟Python中的字典是一樣
let sal = new Map([['小張',9000], ['小段',10000]]); // 設置Map
let sal = new Map(); // 設置空Map
sal.set('小紅', 8000); // 添加新的key-value，結果Map(1) { '小紅' => 8000 }
sal.set('小紅', 8500); // 對同一個key放入值，前面的會被覆蓋，結果Map(1) { '小紅' => 8500 }
sal.has('小劉'); // 是否存在key，結果為false
sal.get('小紅'); // 獲取小紅的值，結果8500
sal.delete('小紅'); // 刪除key，結果ture
sal.get('小紅'); // 再次獲取小紅的值，結果undefined
// Set，只有Key，且key不會重復，需要數組作為輸入或為空
let s = new Set([[1,'a',2],['b',3],'c4']);
s.add(1); // 添加元素1，結果Set(4) { [ 1, 'a', 2 ], [ 'b', 3 ], 'c4', 1 }
s.add(1); // 再次添加元素1，結果不變，依然是Set(4) { [ 1, 'a', 2 ], [ 'b', 3 ], 'c4', 1 }
s.delete('c4') // 刪除元素'c4'，結果Set(3) { [ 1, 'a', 2 ], [ 'b', 3 ], 1 }
// iterable迭代，Array、Map和Set都屬於iterable類型，用for ... of循環遍歷集合
let f = ['A', 1, 'B'];
let g = new Set(['C', 2, '密碼']);
let m = new Map([[1, 'D'], [2, '小張'], [3, '小劉']]);
for (let h of f) { // 遍歷Array
console.log(h); // 打印結果為A 1 B
}
for (let h of g) { // 遍歷Set
console.log(h); // 打印結果為C 2 密碼
}
for (let h of m) { // 遍歷Map
console.log(h[0] + '=' + h[1]); // 打印結果為1=D 2=小張 3=小劉
}
函數&&作用域
// 函數定義，方式一：普通函數
// function指出這是一個函數定義，abs是函數的名稱，(x)括號內列出函數的形式參數，多個形參以,分隔
// {...}之間的代碼是函數體，執行到return時函數執行完畢並返回結果，函數內部通過條件判斷和循環實現非常復雜的邏輯
function abs(x) {
if (typeof x !== 'number') { // 實參數據類型判斷
throw '參數錯誤，不是Number類型';
}
if (x > 10) {
return x;
} else {
return -x;
}
}
console.log(abs(8)); // 函數調用，傳遞實際參數，打印結果-8
abs(12); // 函數調用，傳遞實參，結果返回12
abs(9,10,11); // 函數調用，傳遞多個實參，因為形參只有一個，得到的結果是-9
abs(); // 函數調用，實參為空，結果返回NaN
abs('cs'); // 報錯提示"參數錯誤，不是Number類型"，若沒有實參判斷，結果返回NaN
// 函數定義，方式二：匿名函數
// function (x) {...}沒有函數名，將匿名函數賦值給了變量fun，通過變量fun調用此函數
let fun = function (y) {
if (y >10) {
return y;
} else {
return -y;
}
};
console.log(fun(12)); // 函數調用，傳遞實參，結果返回12，兩種方式等價，其它調用結果與方式一相同
// arguments參數，可以獲得調用者傳入的所有參數(包括未定義參數)，常用於判斷傳入參數的個數
function f1(z) {
console.log("打印Z→："+z); // 打印結果為打印Z→：1
for (let k=0;k<arguments.length;k++){
console.log(arguments[k])// 打印結果為123456
}
if(z>5){
return ('編號：'+z);
}else {
return ('編號：'+-z);
}
}
console.log(f1(1,2,3,4,5,6)); // 打印結果為編號：-1
// rest參數，前面用...標識且只能寫在最后
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5); // 函數調用，結果為 a = 1，b = 2，[ 3, 4, 5 ]，實參先綁定a、b，多余參數以數組形式交給變量rest
foo(1); // 函數調用，結果為 a = 1，b = undefined，[]
// map()方法，定義在數組中，調用數組的map()方法，傳入自己的函數就會得到了一個新的數組作為結果
function product(x) {
return x * x;
}
let num = [1, 2, 3];
let results = num.map(product);
console.log(results); // 打印結果[ 1, 4, 9 ]
console.log(num.map(String)); // 將number轉換為字符串，打印結果[ '1', '2', '3' ]
// reduce()方法，此函數必須接收兩個參數，reduce()把結果繼續和序列的下一個元素做累積計算
let numb = [1, 2, 3];
let o;
numb.reduce(function (x, y) {
return o= x + y;
});
console.log(o); // 打印結果6
// filter()方法，把傳入的函數依次作用於每個元素，然后根據返回值是true還是false決定保留還是丟棄該元素
let p = [1,2,3,4,5,6];
let r = p.filter(function (x) {
return x % 2 === 0;
});
console.log(r); // 打印結果[ 2, 4, 6 ]
// sort()方法，用於排序，默認把所有元素先轉換為String再排序，所以不要使用默認排序
let q=[2,8,3,2,10,-1];
q.sort(function (x, y) {
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
});
console.log(q); // 打印結果[ -1, 2, 2, 3, 8, 10 ]
// find()方法,用於查找符合條件的第一個元素，若存在則返回此元素，否則返回undefined
let arr1 = ['Apple','orange','Banana'];
console.log(arr1.find(function (s) {
return s.toLowerCase() === s;
})); // 打印結果orange, 因為orange全部是小寫
console.log(arr1.find(function (s) {
return s.toUpperCase() === s;
})); // 打印結果undefined, 因為沒有全部是大寫的元素
// forEach()方法，常用於遍歷數組，依次打印每個元素
let j = ['小段',[1,'E'],'fg'];
j.forEach(function (value, index) {
console.log(value+',index='+index); // 打印結果為小段,index=0 1,E,index=1 fg,index=2
})
// 作用域
// 若變量在函數體內部申明，則該變量的作用域為整個函數體，在函數體外不能是引用
function foo1() {
let x = 1;
x = x + 1;
}
x = x + 1; //報引用錯誤，ReferenceError: x is not defined
// 若兩個不同的函數各自申明了同一個變量，則該變量只在各自的函數體內起作用，不同函數內部的同名變量互相獨立，互不影響
function foo1() {
let m = 1;
m = m + 1;
}
function foo2() {
let m = 'A';
m = m + 1;
}
// 為嵌套函數時，內部函數可以訪問外部函數定義的變量，而外部不能訪問內部定義的變量
function fo1() {
let n = 1;
function dyd() {
let y = n + 1; // y=2
}
let z = y + 1; // ReferenceError: y is not defined!
}
// 函數查找變量時從自身函數定義開始，從“內”向“外”查找，若內部函數與外部函數變量重名，則取內部函數的變量值
function fo2() {
let x = 6;
function dyd() {
let x = 'A';
console.log('x in dyd() = ' + x); // 打印結果x in dyd() = A
}
console.log('x in fo2() = ' + x); // 打印結果x in fo2() = 6
dyd();
}
fo2();
// 應嚴格遵守在函數內部首先申明所有變量的規則
function foo() {
let
x = 1, // x初始化為1
y = x + 1, // y初始化為2
z, i; // z和i為undefined
...
for (i=0;i<100;i++) {
...
}
}
// 不在任何函數內定義的變量具有全局作用域,JS默認有一個全局對象Window，全局作用域的變量實際上被綁定到Window的一個屬性
function fo3() {
alert('fo3');// 彈窗顯示fo3
}
foo(); // 直接調用fo3()
window.foo(); // 通過window.fo3()調用
// 把自己的所有變量和函數全部綁定到唯一的名字空間MYAPP中，可減少全局變量沖突的可能
let Myapp = {}; // 唯一的全局變量Myapp;
Myapp.name = 'myapp';// 其他變量;
Myapp.version = 1.0; // 其他函數;
Myapp.fo4 = function () {
return 'foo';
};
// 局部作用域，用let申明一個塊級作用域的變量
function fo4() {
let sum = 0;
for (let i=0; i<100; i++) {
sum += i;
}
// 解構賦值，使用解構賦值可以減少代碼量
let [x, y, z] = ['Hello','JS','ES6'];
let [x, [y, z]] = ['hello', ['JS', 'ES6']];
console.log('x = '+x+', y = '+y+', z = '+z); // x, y, z分別被賦值為數組對應元素
// 方法，在一個對象中綁定函數，稱為這個對象的方法
let xd = {
name: '小段',
birth: 1996,
age: function () {
let age = this; // this變量始終指向當前對象(xd)，在方法內部一開始用age捕獲this
function getAge() {
let y = new Date().getFullYear(); // 獲取當前年份
return y - age.birth; // this.birth可以拿到xd的birth屬性，age已經捕獲this，這里要用age
}
return getAge();
}
};
console.log(xd.age()); // 獲取年齡，結果25
//apply()方法，指定函數的this指向哪個對象，有兩個參數，一個是需綁定的this變量，第二個是數組，指函數本身的參數
function getAge() {
let y = new Date().getFullYear();
return y - this.birth;
}
let xh = {
name: '小紅',
birth: 1998,
age: getAge
};
console.log(xh.age()); // 23
console.log(getAge.apply(xh, [])); // 23, this指向xh, 參數為空
console.log(getAge.call(xh, ));
// call()方法，與apply()類似
console.log(Math.min.call(null, 6, 7, 10)); // 結果6，call()把參數按順序傳入
console.log(Math.min.apply(null, [6, 7, 10])); // 結果6，apply()把參數打包成Array再傳入
// 閉包，在函數中定義新函數，內部函數引用外部函數的參數和局部變量，當外部函數返回內部函數時，參數和變量保存在返回的函數中
function count() {
let arr = [];
for (let i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
let result = count();
let t1 = result[0];
let t2 = result[1];
let t3 = result[2];
console.log(t1()); // 打印結果1
console.log(t2()); // 打印結果4
console.log(t3()); // 打印結果9
// =>箭頭函數，相當於匿名函數
let v= u => u * u; // 只有一條語句的箭頭函數
console.log('箭頭函數'+v); // 打印結果箭頭函數u => u * u
x => { // 多條語句的箭頭函數
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}
(x, y) => x * x + y * y // 兩個參數
() => 3.14 // 無參數
(x, y, ...rest) => { // 可變參數
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}
v => ({ foo: v }) // 使用箭頭函數返回對象
// genetator函數，由function*定義，除了return語句，還可以用yield返回多次
function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
標准對象及面向對象編程
let now = new Date(2021, 3, 27, 22, 50, 58, 850); // 自定義時間
now; // Tue Apr 27 2021 22:50:58 GMT+0800 (中國標准時間)
now.getFullYear(); // 2021, 年份
now.getMonth(); // 3, 月份，月份范圍是0~11，3表示四月
now.getDate(); // 27, 表示26號
now.getDay(); // 2, 表示星期一
now.getHours(); // 22, 24小時制
now.getMinutes(); // 39, 分鍾
now.getSeconds(); // 38, 秒
now.getMilliseconds(); // 850, 毫秒數
now.getTime(); // 1619535058850, 以number形式表示的時間戳
let aa = Date.parse('Tue Apr 27 2021 22:50:58 GMT+0800');
console.log(aa); // 轉換為時間戳，打印結果1619535058000
let ab = new Date(1619437937000);
console.log(ab); // 時間戳轉為UTC時間，打印結果Tue Apr 27 2021 22:50:58 GMT+0800
console.log(ab.toUTCString()); // UTC時間，與本地時間相差8小時，打印結果Tue, 27 Apr 2021 14:50:58 GMT
console.log(ab.toLocaleString()); // 本地時間，打印結果2021/4/27下午10:50:58
// 正則表達式，正則表達式非常強大，這里簡單記錄下，用時網上查吧
* // 表示任意個字符（包括0個）
+ // 表示至少一個字符
? // 表示0個或1個字符
^ // 表示行的開頭，^\d表示必須以數字開頭。
$ // 表示行的結尾，\d$表示必須以數字結束。
{n} // 表示n個字符
{n,m} // 表示n-m個字符
\d // 可以匹配一個數字
\w // 可以匹配一個字母或數字
\s // 可以匹配至少一個空格
i // 表示忽略大小寫
m // 表示執行多行匹配
g // 表示全局匹配
/^1[3|5|7|8][0-9]{9}$/ // 使用正則表達式進行簡單的手機號檢驗
// JSON是JavaScript Object Notation的縮寫，它是一種數據交換格式，如下，序列化后的JSON格式字符串，數據是鍵值對形式
{
"name": "小劉",
"age": 26,
"gender": true,
"height": 1.72,
"grade": null,
"middle-school": "\"No.1\" MIDDLE SCHOOL",
"skills": ["JS","JAVA","PYTHON"]
}
// JS通過原型（prototype）實現面向對象編程，原型繼承
let dyd = { // 原型對象
name: '小段',
height: 1.7,
doing: function () {
console.log(this.name + '學習中……！');
}
};
function creates(name) { // 基於dyd原型創建一個新對象
let ac = Object.create(dyd); // 初始化新對象
ac.name = name;
return ac;
}
let YD = creates('小段');
YD.doing(); // 結果：小段學習中……！
console.log(YD.__proto__ === dyd); // 打印結果：true
// class繼承，class的定義包含構造函數constructor和定義在原型對象上的函數hello()，沒有function，讓定義類更簡單
class xb {
constructor(name) {
this.name = name;
}
hello() {
console.log('Hello,' + this.name + '!');
}
}
let yd = new xb('小貝');
yd.hello(); // 結果：Hello,小貝!
BOM及DOM及表單操作
瀏覽器對象模型BOM
// navigator對象表示瀏覽器的信息，最常用的屬性如下
navigator.appName; // 瀏覽器名稱，Netscape
navigator.appVersion; // 瀏覽器版本，...Chrome/89.0.4389.114...
navigator.language; // 瀏覽器設置的語言，zh-CN
navigator.platform; // 操作系統類型，Win32
navigator.userAgent; // 瀏覽器設定的User-Agent字符串，Mozilla/5.0 (Windows NT 10.0; Win64; x64...
// screen對象表示屏幕的信息，常用的屬性如下
screen.width; // 屏幕寬度，以像素為單位，1494
screen.height; // 屏幕高度，以像素為單位，934
screen.colorDepth; // 返回顏色位數，24
// location對象表示當前頁面的URL信息，常用屬性如下
// 比如此URL，http://localhost:63342/Web/HTML/javascript.html?_ijt=eefuqvildlmkfbrjo77n045lee
location.protocol; // 協議，"http:"
location.host; // 主機，"localhost:63342"
location.port; // 端口，"63342"
location.pathname; // 路徑名，"/Web/HTML/javascript.html"
location.search; // 搜索信息，"?_ijt=eefuqvildlmkfbrjo77n045lee"
// document對象表示當前頁面，常用屬性如下
document.URL; // 當前頁面URL，"https://blog.csdn.net/Q0717168?type=sub&spm=1010.2135.3001.5348"
document.cookie // 獲取cookie，"uuid_tt_dd=10_188071950; dc_session_id=10_1619507552297.58...
document.title; // 獲取當前頁面標題，"Q0717168的博客_小白典_CSDN博客-領域博主"
document.title="我的博客" // 修改當前頁面標題，"我的博客"
文檔對象模型DOM
更新DOM，使用innerText、innerHTML、textContent屬性，也可以對樣式進行修改
<p id="b-id">這是一段文字！</p>
let ap = document.getElementById('b-id'); // 獲取元素id
ap.innerText = '將對應id的內容變為當前內容';
ap.innerHTML = '也是修改對應id內容為當前文本的作用';
ap.textContent= '同樣修改對應id內容為當前文本內容的作用';
ap.style.color = 'red'; // 修改文本顏色
ap.style.fontSize = '20px'; // 修改文本字體大小
插入DOM，使用appendChild屬性插入最后，使用insertBefore插入到指定位置
<p id="code">JS</p>
<div id="list">
<p id="python">Python</p>
</div>
// 把<p id="code">JS</p>添加到<div id="list">的最后一項
let ad = document.getElementById('code');
let list = document.getElementById('list');
list.appendChild(ad);
// 新增數據，並添加到最后一項
let list1 = document.getElementById('list');// 獲取元素id
let ja = document.createElement('p'); // 創建p標簽
ja.id = 'jav'; // 為p標簽添加id
ja.innerText = 'JAVA'; // p標簽內容為JAVA
list1.appendChild(ja); // 將新增的p元素內容添加到id為list元素下
// 在JAVA前插入C
let list2 = document.getElementById('list'),
java = document.getElementById('jav'),
c = document.createElement('p');
c.id = 'c';
c.innerText = 'C';
list2.insertBefore(c,java);
<!--經過插入子節點后，HTML變為以下結構，並按此順序排列-->
<div id="list">
<p id="python">Python</p>
<p id="code">JS</p>
<p id="c">C</p>
<p id="ja">JAVA</p>
</div>
刪除DOM，獲取該節點本身以及它的父節點，然后調用父節點的removeChild刪掉自己
let self = document.getElementById('code'), // 拿到待刪除節點
parent = self.parentElement; // 拿到待刪除節點的父節點
let remove = parent.removeChild(self); // 刪除子節點
console.log(remove); // 打印刪除節點，<p id="code">JS</p>
表單操作
<select> <!--下拉框-->
<input type="text"> <!--文本框-->
<input type="password"> <!--密碼框-->
<input type="radio"> <!--單選框-->
<input type="checkbox"> <!--多選框-->
<input type="hidden"> <!--文本隱藏-->
<input type="text" id="area">
let input = document.getElementById('area'); <!--獲取id為area的輸入框-->
input.value; <!--獲取輸入框中的值-->
input.value='abc'; <!--也可以直接修改輸入框中的值-->
<form id="login-form" method="post" onsubmit="form()"> <!--onsubmit表示當表單提交時執行JS-->
<input type="text" id="username" name="username">
<input type="password" id="input-password"> <!--此處因為沒有name屬性，輸入的內容不會提交-->
<input type="hidden" id="md5-password" name="password"> <!--隱藏用戶輸入的密碼並提交此內容-->
<button type="submit">提交</button>
</form>
<script>
function form() {
let input_pwd = document.getElementById('input-password');
let md5_pwd = document.getElementById('md5-password');
md5_pwd.value = toMD5(input_pwd.value); // 把用戶輸入的明文變為MD5
return true; // 告訴瀏覽器繼續提交，若輸入有誤，return false則不會繼續提交表單
}
</script>
jQuery
jQuery是JavaScript中使用最廣泛的一個庫，里面存在大量的JS函數，它可以幫我們做以下的事情：
- 消除瀏覽器差異：不再需要自己寫冗長的代碼來針對不同的瀏覽器來綁定事件，編寫AJAX等代碼
- 簡潔的操作DOM的方法：寫
$('#code')肯定比document.getElementById('code')來得簡潔 - 輕松實現動畫、修改CSS等各種操作
可以使用在線的，也可以下載后本地引用，首先搜索CDN jQuery，使用jQuery只需要在頁面的<head>引入jQuery文件
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="../lib/jquery-3.5.1.js"></script>
主要記着一個公式$('selector').action()，$()是代表jQuery，selector表示選擇器，action表示事件，舉個栗子：
<a href="" id="jQ-1">點我看彈窗</a>
<a href="" class="jQ-2">點我</a>
<script>
$('#jQ-1').click( function () {
alert('這是點我看彈窗！')
})
$('.jQ-2').click( function () {
alert('這是點我！')
})
</script>
更多教程請查看jQuery API中文文檔
Node.js
Node.js是一個開源與跨平台的 JavaScript 運行時環境，是底層平台，使用Node.js能夠能夠實現高性能的Web服務，具體還是看官方教程吧！點擊查看Node.js中文教程文檔