當前位置：首頁 >

web前端（HTML的CSS样式和JavaScript）

發布時間：2024/1/8 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端（HTML的CSS样式和JavaScript）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML的CSS樣式和JavaScript

CSS
- CSS介紹
- - 概念和作用
  - 示例代碼
- CSS的規則和3種位置
- - CSS規則
  - CSS的位置
  - - 行內樣式
    - 內部樣式
    - 外部樣式
    - 三種樣式的代碼
- CSS基本選擇器(重點)
- - CSS選擇器作用
  - 語法格式
  - 選擇器的分類
  - 選擇器之間優先級
  - 代碼
- 擴展選擇器的使用
- - 什么是擴展選擇器
  - 常用的擴展選擇器
  - 示例代碼
- CSS背景樣式
- - 常用背景樣式
  - 示例代碼
- CSS常用文本樣式和字體樣式
- - CSS的文本樣式
  - CSS的字體樣式
  - 示例代碼
- CSS邊框樣式設置
- - 邊框的樣式
  - 示例代碼
  - 關于塊級元素居中
- 兩種盒子模型
- - 盒子模型概述
  - 盒子模型的屬性
  - 如何計算盒子的尺寸
  - 標準盒子計算方式
  - - 怪異盒子計算方式
  - 示例代碼
JavaScript
- JavaScript概述和體驗
- - JavaScript的基本概述
  - 網頁中各技術的作用
  - 示例代碼
  - JavaScript與Java的區別
- script標簽的使用說明(重點)
- - JavaScript語言組成
  - script標簽的說明
  - script標簽兩個屬性
  - 示例代碼
  - JavaScript的注釋
- JS變量的定義
- - 定義語法
  - 注意事項
  - 示例代碼
- JS五種數據類型
- - 五種數據類型
  - typeof操作符
  - 示例代碼
- JS數據類型的轉換函數
- - 全局函數
  - 示例代碼
- JS常用的運算符
- - 算術運算符
  - 賦值運算符
  - 比較運算符
  - 示例代碼
  - 邏輯運算符
  - 三元運算符
- JS流程控制：if語句
- - if 語句
  - if...else 語句
  - if...else if....else 語句
  - 非布爾類型作為條件
  - 示例代碼
- JS流程控制：switch語句
- - 語法一：case后使用常量，與Java相同
  - 語法二：case后使用表達式
  - 示例代碼
- JS流程控制：循環語句
- - while語句
  - do-while語句
  - for 語句
  - break和continue
  - 示例代碼
- JS命名函數和匿名函數(重點)
- - JS函數的概述
  - 命名函數的格式
  - 示例代碼
  - 匿名函數
  - 示例代碼
- JS函數不支持重載
- - 注意
  - 代碼
- JS變量的作用域
- 在瀏覽器中調試JS代碼
- - 設置斷點
  - 斷點調試的流程

CSS

CSS介紹

概念和作用

CSS: Cascading Style Sheet 層疊樣式表 樣式表,有很多的樣式,通過不同的樣式可以讓網頁根漂亮,樣式也可疊加得到最終的效果

CSS作用: 對網頁進行美化,讓網頁變得更漂亮

示例代碼

將一個表格中所有的單元格居中，如果不使用CSS，每個td或tr都要設置align屬性為center，而使用CSS則方便得多。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS介紹</title><style type="text/css">/*現在可以一次選擇所有td,設置相應的屬性*/td {text-align: center;color: blue;}</style> </head> <body><table border="1" width="400"><tr><td align="center"><font color="blue">111</font></td><td align="center"><font color="blue">111</font></td><td align="center"><font color="blue">111</font></td></tr><tr><td>222</td><td>222</td><td>222</td></tr><tr><td>333</td><td>333</td><td>333</td></tr></table> </body> </html>

CSS的規則和3種位置

就近原則：哪個離元素?較近，哪個就起作?，后?的樣式會覆蓋前?的樣式

CSS規則

規范說明

大括號	所有的樣式寫在大括號中
樣式名	左邊是樣式的名字，使用小寫。如果有多個單詞，使用-分隔
樣式值	每個樣式值都有固定的取值
樣式結尾	每條樣式以分號結尾
注釋	與Java的多行注釋一樣 /* */

CSS的位置

行內樣式

位置：樣式是出現在標簽開始位置，以style屬性存在。
特點：只有這個標簽有效(實際開發基本不同)

內部樣式

位置：寫在HTML文件內部，放在style標簽中。
特點：在本HTML文件種的多個標簽起作用

外部樣式

位置：以CSS文件的方式存在HTML的外部。
特點：可以給多個HTML使用，使用外部樣式較多

三種樣式的代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS的位置</title><style type="text/css">h2 {background-color: red;}</style><link rel="stylesheet" href="css/01_css.css" type="text/css"/></head> <body><h1 style="background-color: blue">我是h1</h1><h2>我是h2</h2><h3>我是h3</h3><h4>我是h4</h4><h5>我是h5</h5><h6>我是h6</h6> </body> </html>

css/01_css.css:

h3 {background-color: deeppink; }

CSS基本選擇器(重點)

CSS選擇器作用

?于選擇需要添加樣式的元素。在對??中的元素進?樣式設置之前，先選擇對哪些元素進?操作，選擇器就是?于選元素的。

語法格式

選擇器 { 樣式名: 樣式值; } <h1>我們是害蟲h1</h1> <h2>h2</h2> <h4 class="c4" id="i4">h4</h4>

樣式名和樣式值是固定的

選擇器的分類

選擇器名格式作用

通用	*	選中所有標簽
標簽	標簽名	選中指定名稱的標簽
類	.class值	選中指定class值的標簽
ID	#id值	選中指定id值的標簽

選擇器之間優先級

通用選擇器 < 標簽選擇器 < 類選擇器 < id選擇器

代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>基本選擇器</title><style type="text/css">/*標簽選擇器:選中所有的h1標簽*/h1 {color: red;background-color: blue;}/*類選擇器:選擇所有class屬性為aa的標簽*/.aa {color: orange;background-color: yellow;}/*ID選擇器:選中所有id為one的標簽*/#one {color: aqua;background-color: gray;}/*通用選擇器:選擇所有的標簽*/* {color: black;font-size: 20px;}h6 {color: magenta;}.cc {color: gray;}#three {color: red;}/*選擇器的優先級: 通用選擇器 < 標簽選擇器 < 類選擇器 < id選擇器*/</style> </head> <body> <h1>h1</h1> <h1>h1</h1> <h2 class="aa">h2</h2> <h2 class="aa">h2</h2> <h3 class="aa">h3</h3> <h3 class="aa">h3</h3> <h4 class="bb">h4</h4> <h5 id="two">h5</h5> <h6 class="cc" id="three">h6</h6> </body> </html>

擴展選擇器的使用

什么是擴展選擇器

在基本選擇器的基礎上，進行組合，實現更復雜的選擇

常用的擴展選擇器

擴展選擇器選擇器符號作用

層級	空格父選擇器子孫選擇器	父選擇器選中父元素,子孫選擇器選擇子孫元素
屬性	[] 標簽名[屬性名]	選擇指定屬性的標簽
偽類	: 標簽名:狀態	指定標簽在某種狀態下的樣式
并集	, 選擇器1, 選擇器2	多個選擇器同時有效

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>擴展選擇器</title><style type="text/css">/*層級選擇器符號: 空格作用: 選中父標簽的下子孫標簽*/ol li {color: red;}/*屬性選擇器符號: []標簽名[屬性名] 作用: 選擇標簽名中含有屬性名的標簽標簽名[屬性名=值] 作用: 選擇標簽名中含有屬性名=值的標簽*/input[type="text"] {background-color: blue;}/*偽類選擇器符號: :作用: 設置標簽在某種狀態下的樣式*//*正常狀態*/a:link {text-decoration: none;}/*訪問過的*/a:visited {color: green;}/*正在激活*/a:active {color: yellow;}/*鼠標懸浮*/a:hover {color: aqua;}/*得到焦點*/input:focus {background-color: pink;}/*并集選擇器符號: ,作用: 同時選中多個標簽*/p,span {color: gold;}</style> </head> <body> <ol><li>xxx</li><li>xxx</li> </ol> <div><ul><li>xxx</li><li>xxx</li></ul> </div>用戶名:<input type="text"><br/> 密碼:<input type="password"><br/> qq:<input ><br/> <hr/> <a href="#1">這是鏈接1</a><br/> <a href="#2">這是鏈接2</a><br/> <a href="#3">這是鏈接3</a><br/> <a href="#4">這是鏈接4</a><br/><p>aaa </p><span>xxxxxxx</span> </body> </html>

CSS背景樣式

常用背景樣式

屬性名屬性取值

background-color	背景顏色
background-image	背景圖片
background-repeat	背景平鋪方式
background-position	背景的起始位置
background-size	背景的大小

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta>charset="UTF-8"><title>背景樣式</title><style type="text/css">body {/* !*背景色*!background-color: pink;!*背景圖片*!background-image: url("img/xxx.jpg");!*平鋪的方式*!background-repeat: repeat;!*平鋪起始位置*!background-position: 50px 50px;*//*背景色 alt+enter *//*背景圖片*//*平鋪的方式*//*平鋪起始位置*/background: pink url("img/xxx.jpg") repeat 50px 50px;/*修改背景圖片大小*/background-size: 100px 100px;}</style> </head> <body> <h1>女生</h1> </body> </html>

CSS常用文本樣式和字體樣式

CSS的文本樣式

屬性名作用

color	設置顏色
line-height	設置行高
text-decoration	文本的修飾,可以搞下劃線,中劃線,上劃線
text-indent	段落縮進: 2em,縮進2個文字
text-align	文本對齊方式

CSS的字體樣式

字體樣式會改變文字的形狀

屬性名作用

font-family	設置字體
font-size	文字大小,單位是像素
font-style	italic 斜體
font-weight	bolder 加粗

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>初相遇</title><style>div {/*詩放在div的層中，寬400px，全文字體大小14px*/width: 400px;font-size: 14px;}h1 {/*標題文字大小18px，顏色#06F，居中對齊*/font-size: 18px;color: #06f;text-align: center;}p {/*每段文字縮進2em*/text-indent: 2em;/*段中的行高是22px*/line-height: 22px;}/*"胸懷中滿溢著幸福，只因你就在我眼前",加粗，傾斜，藍色*/#xiong {font-weight: bolder;font-style: italic;color: blue;}/*最后一段，顏色#390; 下劃線，鼠標移上去指針變化。*/p:last-child {color: #390;text-decoration: underline;cursor: pointer;}/*美字加粗，顏色color:#F36，大小18px;*/.mei {color: #f36;font-size: 18px;}/*文席慕容，三個字，12px，顏色#999，不加粗*/h1 span {font-size: 12px;color: #999;font-weight: normal;}</style> </head> <body> <div>。。。 </div> </body> </html>

CSS邊框樣式設置

所有的元素都可以設置邊框

邊框的樣式

屬性邊框樣式

border-style	邊框線的樣式,實線,虛線,點線
border-width	邊框線的寬度
border-color	邊框的顏色
border-radius	邊框的圓角

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS邊框樣式</title><style>/*1.寬和高分別是200px，邊框使用double線形，紅色，10px粗細*//*2.對div整個居中*/div {width: 200px;height: 200px;/*邊框的線形*//*border-style: double;border-width: 10px;border-color: gray;*/border-radius: 20px;/*邊框的線形,顏色,寬度可以合起來寫*/border: solid lightcoral 20px;/*塊級元素居中:margin: auto;*/margin: auto;}</style> </head> <body> <div>div.... </div> </body> </html>

關于塊級元素居中

兩種盒子模型

盒子模型概述

網頁上任何一個元素都是一個盒子

任何一個網頁元素包含由這些屬性組成：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)，這些屬性可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模型。

內容（content）就是盒子里裝的東西
內邊距(padding)就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；
邊框(border)就是盒子本身了；
外邊界(margin)則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出。

盒子模型的屬性

網頁中的每一個元素都是一個盒子

屬性作用

width	寬度
height	高度

padding	內間距,內容到邊框的間距
border	邊框

如何計算盒子的尺寸

盒子模型分為兩種，分別是：標準盒模型(content-box) 和 怪異盒模型(border-box)。絕大多數元素的尺寸默認是按照標準盒模型計算的。下面是元素的尺寸分別在兩種盒模型下計算規則：

盒子模型的樣式名樣式值

box-sizing	標準盒子模型：content-box 設置寬高內容的寬高,整個盒子被撐大
box-sizing	怪異盒子模型：border-box 設置寬高邊框的寬高,內容被壓縮

標準盒子計算方式

內容不變，盒子被撐大

實際寬度 = 設置寬度 + 左右內邊距 + 左右邊框實際高度 = 設置高度 + 上下內邊距 + 上下邊框

怪異盒子計算方式

盒子不變，內容被縮小

實際寬度 = 設置寬度實際高度 = 設置高度

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>盒子模型</title><style>/*標準盒子: 內容不變,寬高被撐大*/.one {box-sizing: content-box; /*默認就是標準盒子*/border: 15px solid gray; /*邊框的樣式:粗細線型顏色*/width: 200px;height: 200px;padding: 10px;}/*怪異盒子: 寬高就是指定大小,內容會被縮小*/.two {box-sizing: border-box;border: 15px solid gray;width: 200px;height: 200px;padding: 10px;}</style> </head> <body><div class="one">標準盒子 </div><div class="two">怪異盒子 </div> </body> </html>

JavaScript

JavaScript概述和體驗

JavaScript的基本概述

JavaScript簡稱JS。JavaScript是在1995年時，由Netscape公司在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。
JavaScript是一種屬于網絡的腳本語言，已經被廣泛用于Web應用開發，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。

網頁中各技術的作用

技術作用

HTML	編寫網頁的內容骨架
CSS	對網頁進行美化
JavaScript	可以讓網頁動起來

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS代碼</title> </head> <body>  <script type="text/javascript">for (var i=0; i<5; i++) {// 輸出到文檔(網頁)上document.write("<h1>Hello World!</h1>");} </script> </body> </html>

JavaScript與Java的區別

特點JavaJavaScript

面向對象	完全面向對象：繼承，封裝，多態	基于對象，不完全符合面向對象的思想
運行方式	編譯型語言，生成中間文件	解釋型語言，沒有中間文件。
跨平臺	可以運行在不同的系統上，安裝JVM	跨平臺，運行在瀏覽器。只要系統有瀏覽器就可以執行。
數據類型	強類型語言。如：int n = “abc”; //錯誤	弱類型語言，變量名可以賦值不同的數據類型
大小寫	區分大小寫	區分大小寫

script標簽的使用說明(重點)

JavaScript語言組成

組成部分作用

ECMA Script	瀏覽器腳本語言規范，制定所有腳本語言核心基礎語法。
BOM	Browser Object Model 瀏覽器對象模型，操作瀏覽器中各種對象。
DOM	Document Object Model 文檔對象模型，操作網頁中各種元素。

script標簽的說明

同一個HTML中可以有多個script標簽，每個標簽都會執行

可以出現在網頁中任何的位置

每條代碼以分號結束，如果一行只有一條語句，分號可以省略。不建議省略

引用外部js文件的

script標簽兩個屬性

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>HelloWorld</title><script type="text/javascript">// 所有的腳本語言要寫在script標簽中for (var i = 0; i < 5; i++) {// 輸出到文檔(網頁)上document.write("Hello World" + i + "<br/>");}</script> </head> <body> </body> </html> document.write("我是外部腳本" + "<br/>");

JavaScript的注釋

JS變量的定義

定義語法

數據類型Java中定義變量JS中定義變量

格式	數據類型變量名 = 值;	var 變量名 = 值;
整數	int i = 5;	var i = 5;
浮點數	float f = 3.14f; 或 double d = 3.14;	var d = 3.14;
布爾	boolean b = true;	var b = true;
字符	char c = ‘a’;	JS沒有字符，只有字符串
字符串	String str = “abc”;	var str = “abc”; 或 var str=‘abc’;

注意事項

在JS中的字符和字符串引號

在JS中沒有字符和字符串的區別，都是字符串，既可以使用雙引號也可以使用單引號

關于弱類型

一個變量可以賦值為不同的數據類型

var定義變量的特點

var關鍵字可以省略，建議不要省略。

同一個變量可以重復定義。

在大括號外也能使用大括號中定義的變量。

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS變量</title> </head> <body> <script>// 整數var a = 10;document.write("a: " + a + "<br/>");// 浮點數var f = 3.14;document.write("f: " + f + "<br/>");// 布爾var b = true;document.write("b: " + b + "<br/>");// 在JS中沒有字符和字符串的區別，都是字符串，既可以使用雙引號也可以使用單引號// 字符串var c = 'abc';document.write("c: " + c + "<br/>");// 字符串var ss = "abc";document.write("ss: " + ss + "<br/>");// 一個變量可以賦值為不同的數據類型var x = 10;document.write("x: " + x + "<br/>");x = true;document.write("x: " + x + "<br/>");// var關鍵字可以省略y = 20;document.write("y: " + y + "<br/>");// 同一個變量可以重復定義y = false;document.write("y: " + y + "<br/>");{var z = "大家好";}document.write("z: " + z + "<br/>") </script> </body> </html>

JS五種數據類型

五種數據類型

關鍵字說明

number	數值類型：包含了整數和小數
boolean	布爾類型：true/false
string	字符串類型
object	對象類型：自定義對象和JS內置對象，如：數組
undefined	未定義的類型：未初始化的

typeof操作符

作用：獲取變量的類型

寫法：typeof(變量名)或 typeof 變量名

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>數據類型</title> </head> <body> <script type="text/javascript">// 輸出整數、浮點數、字符串(單引號和雙引號)、布爾、未定義、對象、null的數據類型var i = 5;document.write("整數類型：" + typeof(i)+ "<br/>");var d = 3.14;document.write("小數類型：" + typeof(d)+ "<br/>");var i = 'a';document.write("字符串：" + typeof(i)+ "<br/>");var i = "abc";document.write("字符串：" + typeof(i)+ "<br/>");var i = true;document.write("布爾：" + typeof(i)+ "<br/>");var u;document.write("未定義：" + typeof(u)+ "<br/>");var o = {name:"牛魔王",age: 18}; //定義一個對象document.write("對象類型：" + typeof(o)+ "<br/>");var n = null; //null表示對象類型，只是這個對象沒有值document.write("null的類型：" + typeof(n) + "<br/>"); </script> </body> </html>

JS數據類型的轉換函數

全局函數

概念：在JS中任何地方都可以直接引用的函數

parseInt()將一個字符串轉成整數。如果不能轉換返回NaN

isNaN()

用來判斷變量是否是非數字，非數字返回true

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>字符串轉數字</title> </head> <body> <script type="text/javascript">var num1 = "11";var num2 = "22";// 將字符串轉成數字:parseInt()var num4 = parseInt(num1) + parseInt(num2);document.write(num4 + "<br/>")// 能轉多少算多少var num5 = "123a56";document.write(parseInt(num5) + "<br/>")// 字符串不能轉換成數字,返回NaN(Not a Number)var num6 = "a123";document.write(parseInt(num6) + "<br/>")// 判斷一個字符串是否是數字: isNaN, 是數字字符串返回false,不是數字字符串返回truedocument.write("<hr/>")document.write(isNaN("123") + "<br/>")document.write(isNaN("123a") + "<br/>")document.write(isNaN("a123") + "<br/>") </script> </body> </html>

JS常用的運算符

算術運算符

算術運算符用于執行兩個變量或值的算術運算

JS算術運算符和Java中一模一樣

賦值運算符

賦值運算符用于給JavaScript 變量賦值

JS賦值運算符和Java中一模一樣

比較運算符

比較運算符用于邏輯語句的判斷，從而確定給定的兩個值或變量是否相等。

數字可以與字符串進行比較，字符串可以與字符串進行比較。字符串與數字進行比較的時候會先把字符串轉換成數字然后再進行比較

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS運算符</title> </head> <body> <script>var m = 5;var n = 5;document.write((m == n) + "<br/>"); // truevar x = "5"; // 會將字符串自動轉成數字再比較document.write((m == x) + "<br/>"); // true// ===:恒等于,即比較值,也比較類型document.write((m === n) + "<br/>"); // true,值相等,類型也相同document.write((m === x) + "<br/>"); // false,值相等,但是類型不相同 </script> </body> </html>

邏輯運算符

邏輯運算符用來確定變量或值之間的邏輯關系，支持短路運算

邏輯運算符不建議單與&、單或|, 會變成數字

三元運算符

格式：判斷條件? 值1:值2;

JS流程控制：if語句

if 語句

在一個指定的條件成立時執行代碼。

if (條件表達式) {// 代碼塊; }

if…else 語句

在指定的條件成立時執行代碼，當條件不成立時執行else的代碼。

if (條件表達式) {// 代碼塊1; } else {// 代碼塊2; }

if…else if…else 語句

使用這個語句可以選擇執行若干塊代碼中的一個。

if (條件表達式1) {// 代碼塊1; } else if (條件表達式2) {// 代碼塊2; } else {// 代碼塊3; }

非布爾類型作為條件

數據類型為真為假

number	1	0
string	?空串 “aaa”	空串：""
undefined		為假
NaN		為假
object	非空	null

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>if語句</title> </head> <body> <script>// boolean類型if (true) {document.write("真" + "<br/>")} else {document.write("假" + "<br/>")}// 數值類型if (1) {document.write("真" + "<br/>")} else {document.write("假" + "<br/>")}// 字符串if ("abc") {document.write("真" + "<br/>")} else {document.write("假" + "<br/>")}// 對象類型var obj = {name:"aa"};if (obj) {document.write("真" + "<br/>")} else {document.write("假" + "<br/>")} </script> </body> </html>

JS流程控制：switch語句

語法一：case后使用常量，與Java相同

switch (變量名) {case 常量值:break;case 常量值：break;default:break; }

語法二：case后使用表達式

switch (true) { // 這里的變量名寫成truecase 表達式: // 如：n > 5break;case 表達式:break;default:break; }

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Switch</title> </head> <body> <script type="text/javascript">// 讓用戶通過提示框輸入值var score = window.prompt("請輸入一個分數", 60);// document.write(score + "<br/>");// document.write(typeof(score) + "<br/>");// switch(true),case后面可以跟表達式switch (true) {case score >= 90 && score <= 100:alert("優秀");break;case score >= 60 && score < 90:alert("及格");break;case score >= 0 && score < 60:alert("不及格");break;default:alert("輸入有誤");break;} </script> </body> </html>

JS流程控制：循環語句

while語句

條件表達式值為 true 時循環執行代碼

while (條件表達式) {需要執行的代碼; }

do-while語句

最少執行1次循環

do {需要執行的代碼; } while (條件表達式);

for 語句

循環指定次數

for (var i = 0; i < 10; i++) {需要執行的代碼; }

break和continue

break: 跳出整個循環 continue：結束本次循環,接著下次循環

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>乘法表</title><style>table {/*細邊框樣式*/border-collapse: collapse;}td {/*設置內邊距*/padding: 4px;}</style> </head> <body> <script type="text/javascript"> //用戶輸入var num = window.prompt("請輸入乘法表的行數：","9");// " 表示字符串里面的雙引號document.write("<table border=\"1\">");for(var i=1; i<=num; i++) {// 外循環，每次是一行document.write("<tr>");for (var j=1; j<=i; j++) {// 內循環，每次是一個單元格document.write("<td>");document.write(j + "×" + i + "=" + i*j);document.write("</td>");}document.write("</tr>");}document.write("</table>"); </script> </body> </html>

JS命名函數和匿名函數(重點)

JS函數的概述

什么是函數：類似于Java中方法，將可以重用的代碼起個名字，以后就可以通過這個名字并且傳遞參數來調用它

JS的兩種函數：命名函數(有名字的函數)，匿名函數(沒有名字的函數)

命名函數的格式

function 函數名(參數列表) {// 代碼;return 結果;}

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>命名函數</title> </head> <body> <script type="text/javascript">// 定義函數function sum(a,b) {return a + b;}// 調用函數var result = sum(4, 3);document.write(result + "<br/>"); </script> </body> </html>

匿名函數

var 變量 = function(參數列表) {// 代碼;return 結果; }

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>匿名函數</title> </head> <body> <script>// 定義一個匿名函數,并將匿名函數賦值給變量var sum = function (a, b) {return a + b;}// 通過變量名調用函數var num = sum(10, 20);document.write(num + "<br/>") </script> </body> </html>

JS函數不支持重載

注意

關于函數的重載：在JS中沒有函數的重載，后面的方法會覆蓋前面同名的方法

在每個函數的內部都有一個隱藏的數組：arguments，有個屬性length

代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>隱藏數組arguments</title> </head> <body> <script type="text/javascript">function sum(a,b) {document.write("隱藏數組的長度：" + arguments.length + "<br/>");for (var i = 0; i < arguments.length; i++) {document.write("第" + i + "個元素：" + arguments[i] + "<br/>");}document.write("<hr/>");document.write("a=" + a + "<br/>");document.write("b=" + b + "<br/>");}//調用//sum(8); //參數不夠sum(8,9,10); //參數超出 </script> </body> </html>

JS變量的作用域

JS的變量分為全局變量和局部變量

全局變量：定義在函數外部的

局部變量：定義在函數內部的

示例代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>變量的位置</title> </head> <body><script>var a = 888; // 全局變量會被保存到windowfunction add() {var a;// 方法中定義局部變量，變量的聲明會被提前到函數的最前面document.write(window.a + "<br/>"); // 訪問外部的全局變量// var a = 10; // 局部變量,定義在方法內,只能在本方法中使用a = 10;// document.write(x + "<br/>");}// document.write(a + "<br/>");document.write(x + "<br/>");add();</script> </body> </html>

在瀏覽器中調試JS代碼

設置斷點

谷歌瀏覽器的調試界面: F12

注：設置斷點以后要重新刷新頁面才會在斷點停下來

斷點調試的流程

按F12打開瀏覽器的調試模式

選擇Source選項卡

找到相應的網頁

打斷點

F5刷新網頁,執行到斷點的地方

控制斷點

總結

以上是生活随笔為你收集整理的web前端（HTML的CSS样式和JavaScript）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：通过cookie绕过验证码登录（绕过验证
下一篇： Shiro的在Springboot中的使

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

web前端（HTML的CSS样式和JavaScript）

HTML的CSS樣式和JavaScript

CSS

CSS介紹

概念和作用

示例代碼

CSS的規則和3種位置

CSS規則

CSS的位置

行內樣式

內部樣式

外部樣式

三種樣式的代碼

CSS基本選擇器(重點)

CSS選擇器作用

語法格式

選擇器的分類

選擇器之間優先級

代碼

擴展選擇器的使用

什么是擴展選擇器

常用的擴展選擇器

示例代碼

CSS背景樣式

常用背景樣式

示例代碼

CSS常用文本樣式和字體樣式

CSS的文本樣式

CSS的字體樣式

示例代碼

CSS邊框樣式設置

邊框的樣式

示例代碼

關于塊級元素居中

兩種盒子模型

盒子模型概述

盒子模型的屬性

如何計算盒子的尺寸

標準盒子計算方式

怪異盒子計算方式

示例代碼

JavaScript

JavaScript概述和體驗

JavaScript的基本概述

網頁中各技術的作用

示例代碼

JavaScript與Java的區別

script標簽的使用說明(重點)

JavaScript語言組成

script標簽的說明

script標簽兩個屬性

示例代碼

JavaScript的注釋

JS變量的定義

定義語法

注意事項

示例代碼

JS五種數據類型

五種數據類型

typeof操作符

示例代碼

JS數據類型的轉換函數

全局函數

示例代碼

JS常用的運算符

算術運算符

賦值運算符

比較運算符

示例代碼

邏輯運算符

三元運算符

JS流程控制：if語句

if 語句

if…else 語句

if…else if…else 語句

非布爾類型作為條件

示例代碼

JS流程控制：switch語句

語法一：case后使用常量，與Java相同