網(wǎng)頁前端設計-27JavaScript語法基礎

一、主要學習你內容：

1、常量與變量

2、數(shù)據(jù)類型

3、運算符

4、表達式與語句

5、類型轉換

6、轉義字符

7、注釋

二、常量與變量

2.1變量

變量指的是一個可以改變的量。

命名規(guī)則：

1、變量由字母、下劃線、$或數(shù)字組成，并且第一個字母必須是“字母、下劃線或$”

2、變量不能是系統(tǒng)關鍵字和保留字。

3、變量名一定要區(qū)分大小寫

變量的使用

1、變量聲明

2、變量賦值

語法：

var 變量名=值；   //所有JavaScript的變量都是由var聲明。
var 變量1=值，變量2=值，變量3=值   //可以聲明多個變量名，變量名直接用英文 (,)隔開

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var a=10;	
			document.write(a);
		</script>
	</head>
	<body>		
		
	</body>
</html>

2.2常量

常量指不能改變的量，一般定義常量的時候，常量名全部大寫，這樣一看就知道是常量了。

如：

var ABC=1

三、數(shù)據(jù)類型

3.1基本數(shù)據(jù)類型：

（1）數(shù)字： 1 、 -1、2.54等

（2）字符串： "字符內容"

注：可以是單引號，也可以是雙引號，或者單引號嵌套雙引號，或雙引號嵌套單引號，但不能同時出現(xiàn)單引號嵌套單引號，雙引號嵌套雙引號，因為JS判斷不處理哪兩個是一對的。如果數(shù)字加上了的單引號，那么也變成了字符串

（3）布爾值：true 和false

用在選擇結構上居多。

（4）未定義值

如果一個變量雖然用var聲明了，但是滅有賦值，此時改變量就是“未定義值”用undefined表示

（5）空值null

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var a=30,b=20;
			if(a<b)
			{
				document.write('a小于b');
			}
			else
			{
				document.write('a大于b')
			}
			var d;
			document.write(d);
				
		</script>
	</head>
	<body>		
		
	</body>
</html>

四、運算符

+ 加 -減 *乘 /除 %求余 ++自增 --自減

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var a=3,b=5;
			var c=a*b;
			document.write(c);
		</script>
	</head>
	<body>		
		
	</body>
</html>

五、賦值運算符

=等于 += 加等于 -=等于 *= /等于

舉例：var a+=b 等價于 var a=a+b;

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var a=3,b=5;
			 a+=b;
			document.write(a);
		</script>
	</head>
	<body>		
		
	</body>
</html>

六、比較運算符

用于將運算符兩邊的值或者表達式進行比較，如果結果是對的，返回的是true，如果結果是錯的，返回的是false。

> 大于 < 小于 >=大于等于 <=小于等于 ==等于！=不等于

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var a=3,b=4;
			if(a==b)
			{
				document.write('a和b的值相等');
			}
			else
			
				document.write('a和b的值不等');
		</script>
	</head>
	<body>		
		
	</body>
</html>

七、邏輯運算符

&& "與"運算 || "或"運算！"非"運算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var a=3,b=4,c=4;
			if(a>b||b<c)
			{
				document.write('結果為真');
			}
			else
			
				document.write('結果為假');
		</script>
	</head>
	<body>		
		
	</body>
</html>

七、條件運算符也叫三目運算符

語法：

var  a=條件？ 表達式1：表達式2;

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		     var result=(2>3)?"表達式1執(zhí)行":"表達式2執(zhí)行";
		     document.write(result);
		</script>
	</head>
	<body>		
		
	</body>
</html>

說明：

當條件為true時，我們選擇的是表達式1，當條件為false時，我們選擇的是表達式2.

八、表達式和語句

舉例： var a=3+4;

說明：3和4是操作數(shù)，而+是操作符，3+4是表達式，整體的var a=3+4；這個叫語句

我們只需要記住，一個分號一個語句，而表達式就是一句話的一部分。

九、類型轉換

指的是一種數(shù)據(jù)類型，轉換成另外一種數(shù)據(jù)類型。

轉換類型有兩種：

1、隱式類型轉換：JS自動進行類型轉換

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		   var a="100";
		   var b=100;
		   var result=a+b;
		   document.write(result);
		</script>
	</head>
	<body>				
	</body>
</html>

結果：是100100而不是200，這種一個數(shù)字和一個字符串相加，JS會自動將數(shù)字轉換成字符串然后在相加，所以得到的是100100，這種自動進行類型轉換的叫做隱式類型轉換，

2、顯示類型轉換：手動用代碼強制進行類型轉換。

9.1字符串轉換為數(shù)字

1）Number() 提取字符串中純數(shù)字用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		 document.write("Number('222'):"+Number("222")+"<br/>");
		 document.write("Number('222.123'):"+Number("222.123")+"<br/>");
		 document.write("Number('fff222'):"+Number("fff222")+"<br/>");
		 document.write("Number('222fff'):"+Number("222ff")+"<br/>");		 
		</script>
	</head>
	<body>				
	</body>
</html>

結果：

說明，Number只能轉換純數(shù)字的，帶字母的，顯示NAN，是Not a Number非數(shù)字意思。

2）parselnt()提取首字母為數(shù)字的整數(shù)部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		 document.write("parseInt('222'):"+parseInt("222")+"<br/>");
		 document.write("parseInt('222.123'):"+parseInt("222.123")+"<br/>");
		 document.write("parseInt('fff222'):"+parseInt("fff222")+"<br/>");
		 document.write("parseInt('222fff'):"+parseInt("222ff")+"<br/>");		 
		</script>
	</head>
	<body>				
	</body>
</html>

結果：

說明：parselnt()是從左到右判斷，如果第一個字符是數(shù)字，則繼續(xù)判斷，直到出現(xiàn)非數(shù)字為止，而第一個字符是非數(shù)字，則直接返回Nan

3）parseFloat()提取首字母為數(shù)字的整數(shù)和小數(shù)部分

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		 document.write("parseFloat('222'):"+parseFloat("222")+"<br/>");
		 document.write("parseFloat('222.123'):"+parseFloat("222.123")+"<br/>");
		 document.write("parseFloat('fff222.111'):"+parseFloat("fff222.111")+"<br/>");
		 document.write("parseFloat('-222.111fff'):"+parseFloat("-222.111ff")+"<br/>");		 
		</script>
	</head>
	<body>				
	</body>
</html>

結果：

說明：同parseint,只不過這個帶小數(shù)為

9.2數(shù)字轉換為字符串

1）與空字符串相加

2）toString()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
	var a=100+"";
	var b=100;
	var result=a+b;
	var result1=a.toString()+100;
	document.write(result+"<br/>");
	document.write(result1);
		</script>
	</head>
	<body>				
	</body>
</html>

結果;

說明：實際應用中很少，更多使用隱式型轉換的方式

十、轉義字符

在頁面中我們想顯示特殊的字符，比方說雙引號。那么就要用到轉義字符。

常見的轉義字符

\' 英文單引號

\'' 英文雙引號

\n 換行符

換行符使用的兩種情況。

1.如果是在document.write()中換行，則應該用：<br/>

2.如果是在alert（）中換行，則應該用：\n

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
	document.write("細節(jié)<br/>\"決定\"<br/>成敗");
	alert("細節(jié)\n\"決定\"\n成敗")
		</script>
	</head>
	<body>				
	</body>
</html>

十一、注釋

1.單行注釋

語法：

//單行注釋

2.多行注釋

當注釋的內容比較多，用一行表達不出來時，我們可以使用多行注釋的方式。

語法：

/* 多行注釋 */

、HTML簡介

1.HTML是什么?

HTML:htper text markup language超文本標記(標簽)語言

由各種標簽組成，用來制作網(wǎng)頁，告訴瀏覽器如何顯示頁面

2.作用

制作網(wǎng)頁，控制網(wǎng)頁和內容的顯示
插入圖片、音樂、視頻、動畫等多媒體
通過鏈接來檢索信息
使用表單獲取用戶的信息，實現(xiàn)交互

3.版本

w3c:world wide web consortium萬維網(wǎng)聯(lián)盟，制定web技術相關標準和規(guī)范的組織，HTML技術hi由w3c制定的標準

兩個版本:HTML4.0.1、HTML5.0-----通常H5

官網(wǎng)：http://www.W3shcool.com.cn

4.擴展名

HTML文檔是以.html或.htm結尾

二、HTML文檔結構

1.基本結構

1.1簡介

HTML標簽是由尖括號括起來的關鍵詞，如,通常是成對出現(xiàn)的,如<html></html>
以 <html>為根標簽，包含： <head>頭部和<body>主體部分
頭部提供關于網(wǎng)頁的相關信息，如標題、文檔類型、字符編碼、關鍵字等摘要信息
主體部分提供網(wǎng)頁的顯示內容，真正顯示在頁面中的內容
合理地進行縮進
標簽名不區(qū)分大小寫，但是一般要用小寫

1.2.開發(fā)工具

記事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等

使用步驟：

新建文件(cltr+N)，然后保存（ctrl+s）,指定擴展名為.html
編寫HTML代碼
在瀏覽器中打開文件

使用技巧：

先保存再寫代碼，否則代碼無顏色提示
創(chuàng)建一個文件夾，用于保存所有的網(wǎng)頁內容，將文件夾拖拽到sublime中，便于管理
顯示/隱藏側邊欄方式1:查看–>側邊欄–>顯示/隱藏側邊欄方式2:ctrl+K緊接著按B
顯示多欄方式1：查看–>布局–>列數(shù)：2列方式2：Alt+shift+2

1.3瀏覽器

常見的瀏覽器：IE瀏覽器微軟、chrome谷歌瀏覽器、fifirefox火狐、safari蘋果

瀏覽器的作用是讀取html文件，并以網(wǎng)頁的形式來顯示

瀏覽器不會直接顯示html標簽，而是使用標簽來解釋網(wǎng)頁的內容

2.標簽

2.1標簽的組成

一個完整的html標簽的組成：

<標簽名屬性名="屬性值">內容</標簽名>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>標簽</title>
	</head>
	<body  bgcolor="red" text="blue">
		html從入門到精通!
    </body>
</html>
12345678910

屬性值要用雙撇號括起來，一般用雙引號

2.2標簽的分類

根據(jù)標簽是否關閉，分為，關閉型和非關閉型

關閉型：有結束標簽，即標簽成對出現(xiàn)

<html></html>
<head></head>
<title></title>

非關閉型：沒有結束標簽

<meta>
<br>
<h1>....<h6>

根據(jù)標簽是否獨占一行，分為塊級標簽和行級標簽

塊級標簽：顯示為塊狀，獨占一行

<h1>大家好</h1>
<hr>

行級標簽：在行內顯示，可與其他內容在同一行顯示

2.3注釋

注釋在瀏覽器中不會顯示,是用來標注解釋html語句,但通過查看源代碼的方式可以看到

語法:

<--注釋內容-->

2.4實體字符

也稱為特殊字符,用于顯示一些特殊符號,如<>&空格等

語法:

<&實體字符的名稱>

2.5文檔類型

在html文檔的第一行,使用<!DOCTYPE html>

聲明HTML文檔的類型用來告訴瀏覽器頁面的文檔嘞型,用來制定html版本的規(guī)范

目前基本上最常用的html5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
12345678910

三\常用標簽

3.1基本標簽

塊級標簽\親啊后有明顯的間隔 |
| h1…h(huán)5 | 標題標簽 | 按照h1到h6逐漸變小.塊級標簽 |
| | | |
| | | |

三、常用標簽

1.基本標簽

1.1 有序列表
ol:ordered listli:list item默認使用阿拉伯數(shù)字、從1開始標記，可以通過屬性進行修改
· type屬性：設置列表的符號標記、取值；數(shù)字1（默認）、字母（a或A）、羅馬數(shù)字(i或I) · start屬性：設置起始值，值必須是數(shù)字
1.2 無序列表
ul:unodered list
li:list item
默認情況下使用實心圓表作為符號標記，可以通過屬性進行修改
· type屬性：設置列表的符號標記、取值：disc實心圓（默認）、circle空心圓、square正方形、none不顯示項目符號
1.3 定義列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平線標簽
hr:horizontal
常用屬性：
· color:顏色

兩種方式：

顏色名稱：如red、green、blue、white、black、pink、orange等

16進制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每種顏色的取值范值0-255，轉換為16 進制00-FF

如: #FF0000 紅色 #00FF00綠色 #0000FF藍色 #FFFFFF白色、#CCCCCC #FF7300桔色

· size:粗細，數(shù)值

· width寬度

兩種寫法：

? 像素：絕對值（固定值）

? 百分比：相對值，相對于水平線標簽所在父容器寬度的百分比

· align對齊

? 取值：center居中 left right
1.5圖像標簽
img:image
常見的圖片格式：.jpg .png .gif .bmp
常見的屬性：
· src:source指定圖片的路徑（來源），必選叁數(shù)

如果圖片與html源代碼在同一個文件夾中，可以直接在src中寫圖片名稱即可

習慣上，我們會將多個圖片與html代碼文檔分別放在同一個文件夾project中的不同目錄下，此時需要在src中指定圖片的路徑為相對路徑

路徑的分類：

? · 相對路徑

? 表示： ./當前路徑
…/當前位置的上一級文件夾

? 提示：…/image

? · alt:當圖片無法顯示時顯示的提示信息

? · title:當鼠標放到圖片上時顯示的提示信息

? · width和 height:設置圖片的寬度和高度
默認圖片以原始尺寸顯示

? 如果只設置其中一個，則另一個會按比例縮放

? 如果同時設置寬和高，可能導致圖片變形

? 兩種寫法：

? 像素：絕對值（固定值）

? 百分比：相對值，相對于父容器的尺寸的百分比
2.其他標簽

為了更好語義化
3.頭部標簽
· meta定義網(wǎng)頁的摘要信息，如字符編碼，關鍵詞，描述，作者等
· title定義網(wǎng)頁的標題
· style定義內容css樣式
· link引用外部css樣式
· script定義或引用腳本
· base定義基礎路徑
默認以當前頁面文件所在的位置為相對路徑參照
4.標簽嵌套
一個標簽中嵌套另外一個標簽
標簽不能亂嵌套
瀏覽器渲染后顯示的頁面代碼與編碼時有所不同
chrome瀏覽器提供的開發(fā)工具：幫助開發(fā)人員查看和調試頁面的
如何打開：
· Elements:從瀏覽器的角度來看頁面，瀏覽器渲染頁面時內部的結構
· console:控制臺，顯示各種警告和錯誤信息
· network:查看網(wǎng)絡請求信息，瀏覽器向服務器請求了哪些資源，資源大小，
加載資源所消耗的時間

四、超鏈接
1.簡介
使用超鏈接可以從一個頁面跳轉到另外一個頁面，實現(xiàn)頁面之間導航
當鼠標移動到超鏈接文本或圖片時，鼠標箭頭會變成一只小手
超鏈接有三種類型:
普通鏈接/頁面間的鏈接，跳轉到另一個頁面錨鏈接：鏈接到錨點（鏈接到同一個頁面的指定位置）功能鏈接：實現(xiàn)特殊功能(發(fā)郵件，下載)
2.基本用法
使用標簽來創(chuàng)建超鏈接
語法格式：

常用屬性：
href:鏈接地址或路徑,鏈接地址

world

鏈接文本或圖片

1 2 3 4 5 1 target:鏈接打開的位置,取值

路徑分類：
絕對路徑以根開始的路徑
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相對路徑相對于當前頁面文件所在的路徑,不是以根開始的路徑 ./ 當前路徑 …/ 當前位置上一級目錄

3.錨鏈接
3.1簡介
點擊鏈接后跳轉到某一個頁面的指定位置（錨點anchor）
錨鏈接的分類：
頁面內的錨鏈接頁面間的錨鏈接
3.2 頁面內的錨鏈接
步驟：

定義錨點（標記）
鏈接錨點
_self 自身，當前，默認值 _blank新的，空白的 _parent父層框架 _top頂層框架
目標位置
1 2 3 4
1

3.3 頁面間的錨鏈接

4.功能鏈接
5.URL
5.1 簡介
URL:Uniform Resource Locator 統(tǒng)一資源定位器,用來定位資源所在的位置，最常見的就是網(wǎng)址

5.2 組成
一個完整的URL由8個部分組成：
協(xié)議：prococol 如 http:超文本傳輸協(xié)議，用來訪問WEB網(wǎng)站Hyper text Transfer protocal https:更加安全的協(xié)議 SSL安全套接子層 ftp文件傳輸協(xié)議，用來訪問服務器上的文件，實現(xiàn)文件的上傳和下載File Transfer protocol file:文件協(xié)議，用來訪問本地文件主機名hostname服務器地址或服務器Netbios名稱,如www.baidu.com ftp://10.255.254.254 端口：port位于主機名的后面，使用冒號進行分隔不同的協(xié)議使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默認端口，則端口可以省略如果使用的不是默認端口，則必須指定端口http://59.49.32.213:7070/ 路徑：path目標文件所在的路徑結構，如:www.baidu.com/img/ 資源resource要訪問的目標文件，如bd_logo1.png 查詢字符串：query string 也稱為參數(shù) 在資源后面使用?開頭的一組名稱/值
鏈接文本
鏈接文本
https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
1
1
1 2 3
4 5
名稱和值之間以=分隔，多個之間用&分隔，如:name=tom&age=2&sex=male 錨點anchor，在資源后面使用#開頭的文本，如#6 身份認證authentication,指定身份信息，如：ftp://賬戶:密碼@ftp.bbshh010.com
五、表格
1.簡介
表格是一個規(guī)則的行列結構，每個表格是由若干行組成，每行由若干個單元格組成
table row column
2.基本結構
2.1 table標簽
用來定義表格
常用屬性：
border:表格邊框默認為0 width/height：寬度/高度 bordercolor:邊框的顏色 align:對齊方式，取值：left(默認) center居中 right居右 bgcolor:背景顏色 background:背景圖片 cellspacing間距：單元格與單元格之間的距離 cellpadding邊距：單元格中的內容到邊界之間的距離
2.2 tr標簽
用來定義行：table row
常用屬性：
align:水平對齊取值：left(默認) center right valign垂直對齊取值：top center bottom bgcolor:背景顏色 background:背景圖片
2.3 td標簽
用來定義單元格，table data
常用屬性：align、valign、bgcolor、background
注意：表格必須是由行組成，行必須由單元格來組成，數(shù)據(jù)必須放到單元格中
3.合并單元格
合并單元格也稱為單元格的跨行跨列
兩個屬性：
rowspan 設置單元格所跨的行數(shù) colspan 設置單元格所跨的列數(shù)
步驟：

在跨越的單元格中設置rowspan/colspan屬性 2. 將被跨越的單元格刪除
必須要保證每行的實際列數(shù)是相同的，否則表格可能會出錯亂
4.高級標簽
4.1caption標簽
表格的標題標簽
4.2thead標簽
表格的頭部table head
4.3th標簽
表格的頭部標題table head title
一般用在thead中，設置頭部的標題，替代td標簽，與td的區(qū)別，th中的文本會加粗且居中顯示
4.4tbody標簽
表格的主體table body
4.5tfoot標簽
表格的底部table foot

六、表單
1.簡介
表單是一個包含若干個表單元素的區(qū)域，用于獲取瑣類型的用戶數(shù)據(jù)

表單元素是允許用戶在表單輸入信息的元素，如文本框、密碼框、單選按鈕、復選框、下拉列表、按鈕等
2.表單結構
2.1表單語法

2.2form標簽
用來定義表單，可以包含多個表單元素
常用屬性：
action:提交數(shù)據(jù)給誰處理，即處理數(shù)據(jù)的程序，默認為當前頁面 method:提交數(shù)據(jù)的方式或方法，取值：get(默認)，post get和post的區(qū)別： get:以查詢字符串的形式提交，在地址欄中能看到，長度有限制，不安全 post以表單數(shù)據(jù)組的形式進行提交，在地址欄中看不到，長度無限制，安全 enctype(encode type)編碼類型：提交數(shù)據(jù)的編碼，取值：application/X-www-form-urlencoded(默認)、multipart/form-data(文件上傳)
3.表單元素
大多數(shù)的表單元素都是使用標簽來定義的，通過設置屬性type來定義不同的表單元素

3.1單行文本框
常用屬性：
·name名稱，很重要，如果沒有定義name屬性，則該表單元素的數(shù)據(jù)是無法提交的

·value初始值

·size顯示寬度

·maxlength:大字符數(shù)，默認是沒有限制

·readonly只讀：readonly=“readonly”,可簡寫readonly,即只寫屬性名

·disabled禁用：disabled=“disabled”, 可簡寫disabled完全禁用

表單元素被提交的兩個條件，1.有name屬性2.非disabled

3.2 單選按鈕
常用屬性：

·name名稱：多個radio的name屬性必須相同，才能實現(xiàn)互斥（單選）

·value值

·checked:是否被選中，兩種狀態(tài)，選中，未選中 checked=“checked” 簡寫 checked

3.3 復選框
常用屬性與單選按鈕radio類似

3.4 文件選擇器
常用屬性：

·name:名稱

·accept設置可選擇的文件類型，用來限制上傳的文件類型

使用MIME格式字符串對資源類型進行限制

常見的MIME類型：

·純文本：text/plain text/xml text/html

· 圖像：image/png image/jpeg image/gif

4.特殊表單元素

4.1下拉列表

select常用屬性：

·name名稱

·size行數(shù)，同時顯示多個選項

·multiple允許同時選擇多個

option常用屬性：

·value選項值

·selected設置默認選中項

optgroup常用屬性：

·label分組的標簽

4.2文本域

·name名稱

·rows行數(shù)

·cols列數(shù)

5、其他標簽

5.1 label標簽

為表單元素提供標簽，當選中l(wèi)abel標簽中的文本內容時會自動將光標切換到與之相關聯(lián)的表單元素。

常用屬性：

·for必須將該屬性值設置為與相關聯(lián)的表單元素的Id屬性值相同。

注：幾乎所有HTML標簽都具有id屬性，且id值必須唯一。

5.2 button標簽

也表示按鈕，與input按鈕類似

語法：

1按鈕文字或圖像

常用屬性：

·type按鈕的類型，取值: submit（默認）、reset、button

5.3 fieldset和legend標簽

fieldset標簽，對表單元素進行分組

legend標簽，對分組添加標題

七、內嵌框架
1、簡介

使用iframe可以在一個頁面中引用另一個頁面，實現(xiàn)復用、靈活

2、基本用法

語法：

常用屬性：

· src:引用的頁面

· width/height寬度/高度，像素或百分比

· frameborder是否顯示邊框，取值：1(yes) 0(no)—默認

· scrolling是否顯示滾動條，取值：yes no auto

· name屬性為框架定義名稱

3、在框架中打開鏈接

3鏈接的文本或圖像

八、HTML5簡介

1、發(fā)展

W3C于1992年12月發(fā)布了HTML4.0.1標準
W3C于2014年10月發(fā)布了HTML5標準

2、特點

· 取消了過時的標簽，如font、center等，它們僅具有展示外觀的功能

· 增加了一些更具有語義化的標簽，如header、footer、aside等

· 增加了一些新功能標簽，如canvas、audio、video

· 增加了一些表單控件，如email、date、time、url、search等

· 可以直接在瀏覽器中繪畫（canvas），無需flash

· 增加了本地存儲的支持

3、兼容性

http://caniuse.com

提供了各種瀏覽器版本對HTML5和CSS規(guī)范的支持度

九、HTML5新增內容
1、結構相關的標簽

用來進行頁面結構布局，本身無任何特殊樣式，需要使用CSS進行樣式設置

· article定義一個獨立的內容，完整的文章

· section定義文檔的章節(jié)、段落

· header文章的頭部、頁眉、標題

· footer文章的底部、頁腳、標注

· aside定義側邊欄

· figure圖片區(qū)域

· figcaption為圖片區(qū)域定義標題

· nav定義導航菜單

結構標簽只是表明各部分的角色，并無實際的外觀樣式，與普通div相同

2、語義相關的標簽
2.1 mark標簽
標注，用來突出顯示文本，默認添加黃色背景
2.2 time標簽
定義日期和時間，便于搜索引擎智能查找
2.3 details和 summary標簽
默認顯示summary中的內容，點擊后顯示details中的內容
注：并不是所有的瀏覽器都兼容，chrome、opera支持、Firefox、IE瀏覽器不支持
2.4 meter標簽
計數(shù)儀，表示度量
常用屬性：

· max定義大值，默認為1

· min定義小值，默認為0

· value定義當前值

· high定義限定為高的值

· low定義限定為低的值

· optimum定義佳值

規(guī)則：

如果optimum大于high，則表示值越大越好

當value大于high時為綠色

當value在low與high之間時為黃色

當value小于low時為紅色

如果optimum小于low，則表示值越小越好

當value小于low時為綠色

當value在low與high之間時為黃色

當value大于high時為紅色

當optimum介于low和high之間，則表示值在low和high之間好當value在low與high之間時顯示綠色，否則顯示黃色

2.5 progress標簽
進度條，表示運行中的進度
常用屬性：

· value定義當前值

· max定義完成的值

3.表單相關
3.1 新增表單元素
新增以下type類型：

· email接收郵箱

· url接收URL

· tel接收電話號碼，目前僅在移動設備上有效

· search搜索文框

· number/range接收數(shù)字/數(shù)字滑塊,包含min,max,step屬性

· date/month/week/time/datetime日期時間選擇器，兼容性不好

· color顏色拾取

作用：

· 具有格式校驗的功能

· 可以與移動設備的鍵盤相關聯(lián)

3.2新增表單屬性
form標簽的屬性：

· autocomplete是否啟動表單的自動完成功能，取值:on(默認)、o?

· novalidate提交表單時不進行校驗，默認會進行表單校驗

3.3 新增表單元素的屬性
新增表單元素屬性：input/select/textarea等

· placeholder提示文字

· required是否必填

· autocomplete是否啟用該表單元素的自動完成功能

· autofocus設置初始焦點元素

· pattern使用正則表達式（RegExp后面會講解），進行數(shù)據(jù)校驗

· list使文本元素具有下拉列表的功能，需要配合datalist和option標簽一起使用

· form可以將表單元素寫在form標簽外面，然后通過該屬性關聯(lián)指定的表單

4、多媒體標簽
4.1audio標簽
在頁面中插入音頻，不同的瀏覽器對音頻格式的支持不一樣
audio常用屬性：

· src音頻文件的來源

· controls是否顯示控制面板，默認不顯示

· autoplay是否自動播放，默認不自動播放

· loop是否循環(huán)播放

· muted是否靜音

· preload是否預加載，取值：none不預加載、auto預加載（默認）、metadata只加載元數(shù)據(jù)

如果設置了autoplay屬性，則該屬性無效

可以結合source標簽使用，指定多個音頻文，瀏覽器會檢測并使用第一個可用的音頻文件

4.2 video標簽
在頁面中插入視頻，不同的瀏覽器對視頻格式的支持不一樣
用法與audio標簽基本相同，增加屬性：

· widht/height視頻播放器的寬度/高度

· poster在視頻加載前顯示的圖片

案例1hello.html

<html>
	<body>
		<tiele>HTML技術</tiele>
	</body>
	<body>
		大家好，歡迎學習html技術!
	</body>
</html>1234567

效果

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例1.png)]

案例2標簽的組成.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>標簽</title>
</head>
<body text="blue">
	標簽的組成
	<br>
	html從入門到精通！
	<hr>
	<h1>標簽的分類</h1>
	<hr>

	<h2>標簽的分類</h2>
	<hr>

	<h6>標簽的分類</h6>
	<hr>

	<span>哈哈</span>嘿嘿
	
</body>
</html>1234567891011121314151617181920212223

效果

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例2.png)]

案例3實體字符.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	圖書:<<HTML從入門到精通<<
	<hr>

	北京      上海      廣州
	<hr>

	在HTML中用<表示<小于號
	<hr>

	“HTML語言” 或 &qout;HTML語言&qout;
	<hr>

	版權所有? 2000-2020 高教培訓
	<hr>

	×關閉符號
</body>
</html>123456789101112131415161718192021222324

效果

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例3.png)]

（剩下的下期出）

原文鏈接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html

作者：WanXuang

出處：從CSDN

常見的XSS檢測代碼：

<img src=x onerror=alert(1)> // src是錯誤的就會調用error函數(shù)

<a href=javascript：alert(1)> // 點擊a即可觸發(fā)

實際應用中web程序往往會通過一些過濾規(guī)則來防止帶有惡意代碼的用戶輸入被顯示。當上述代碼被注入到輸入框或者URL參數(shù)中時，可能會成功也可能會失敗，如果失敗了，并不意味著網(wǎng)站不存在XSS漏洞，需要對其進行繞過等方式發(fā)掘安全漏洞。

這里，給大家總結一些XSS繞過方法。

1、大小寫繞過

某些網(wǎng)站僅僅過濾了<script>標簽，而忽略了大小寫替換同樣可以造成瀏覽器觸發(fā)XSS。具體方式為測試語句：

http://192.168.1.102/xss/example2.php?name=<sCript>alert("hey!")</scRipt>

2、利用過濾后返回語句再次構成攻擊語句來繞過

當網(wǎng)站設置過濾規(guī)則時，可以觸發(fā)XSS的關鍵字（<script>）被進行了過濾，在查看網(wǎng)頁源代碼時，script標簽被去除掉了，于是我們就可以人為地制造一種巧合，讓過濾完script標簽后的語句中還有script標簽（畢竟alert函數(shù)還在），像這樣：

<div>http://192.168.1.102/xss/example3.php?name=<sCri<script>pt>alert("hey!")</scRi</script>pt></div><div></div>

3、嘗試使用其他標簽來構造XSS

當script標簽被完全過濾時，這時可以嘗試使用其它標簽來構造XSS。

這里以<img>標簽進行說明：

http://192.168.1.102/xss/example4.php?name=<img

src='w.123' onerror='alert("hey!")'>

4、主動閉合標簽

可以通過手動閉合掉引號標簽等方式來達到測試XSS漏洞的目的。

閉合標簽

如果在查看頁面的源代碼的過程中，發(fā)現(xiàn)輸入的字符串或者輸入字符串的部分，那么就可以設法通過閉合字符串的方式來測試XSS漏洞。

比如，我們所輸入的字符串被放入到<input>標簽中（<INPUT type="text" value='<SCRIPT>alert("XSS")</SCRIPT>'/>），那么我們可以修改輸入來閉合<input>標簽，執(zhí)行script腳本。

當我們輸入為'/><SCRIPT>alert("XSS")</SCRIPT>，可以發(fā)現(xiàn)我們的代碼執(zhí)行了，說明此處存在XSS漏洞。

繞過引號

同樣的例子，但是我們假設管理員在我們的單引號之前放置了一個“\”，有時候雙引號之前也會放置，通過一些類似add_slashes的函數(shù)可以實現(xiàn)，這個就是轉義字符，我們先前的代碼就會變成這樣：

<INPUT type="text"value='\'><SCRIPT>alert(\"XSS\")</SCRIPT>'>

有一些方法可以繼續(xù)，但是要看過濾的那個函數(shù)是怎么放的了。其中一個方法就是使用字符實體，學過html的都知道，就是一些特殊字符會用一些固有的符號組合來表示，舉個例子，你不能用<>表示大于和小于，因為這被解釋為html標簽，但是，你如果要用，可以用下面的來代替。

使用"或者"來代替我們的雙引號，有時候可以繞過過濾。例子:

如果這都被過濾了,那我們可以使用JavaScript的fromCharCode函數(shù)，這個函數(shù)把指定的Unicode值轉換成字符串。

比如：

<INPUT type="text"value='\'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT>'>

5、通過組合編碼方式來測試XSS漏洞

在使用XSS編碼測試時，需要考慮HTML渲染的順序，特別是針對多種編碼組合時，要選擇合適的編碼方式進行測試。

當瀏覽器接受到一份HTML代碼后，會對標簽之間（<p>xxx</p>等，<script>除外)、標簽的屬性中（<a href='xxxx'>）進行實體字符解碼變?yōu)橄鄳淖址粫l(fā)揮出其本來該有的功能，如：<被解碼為<后僅被當作字符，而不會被當成標簽名的起始。既然是字符串，那在href='xx'這些屬性值本來就是字符串的地方可以作為一種可能的繞過的手段。如：

被解釋后為<a href="javascript：alert(1)"></a>,可以彈窗。

總之，在進行XSS注入測試的時候要關注標簽的閉合，這跟sql語句的閉合是差不多的，不過這個變成了HTML標簽。此外思路要發(fā)散，通過語句跟繞過方式的不同搭配來構造payload，比如說當瀏覽器對script進行了轉義的時候，我們可以嘗試用其他標簽來構造，當on被轉義的時候，我們可以采用偽協(xié)議的方式構造即?javascript：，總之在構建payload的時候要發(fā)散思維。

下面邀請大家進入【Python自動化測試學習交流群】進群方式如下：

關注我的頭條號，添加V：atstudy-js，備注“頭條”，即可邀請你進群學習交流~~

在線咨詢

上一篇：HTML 表單標簽
下一篇：html頁面強制所有鏈接新窗口打開的方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

網(wǎng)頁前端設計-27JavaScript語法基礎

、HTML簡介

1.HTML是什么?

2.作用

3.版本

4.擴展名

二、HTML文檔結構

1.基本結構

1.1簡介

1.2.開發(fā)工具

1.3瀏覽器

2.標簽

2.1標簽的組成

2.2標簽的分類

2.3注釋

2.4實體字符

2.5文檔類型

三\常用標簽

3.1基本標簽

案例1hello.html

案例2標簽的組成.html

案例3實體字符.html

您的項目需求