整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

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

          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          一、主要學習你內容:

          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等

          使用步驟:

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

          使用技巧:

          • 先保存再寫代碼,否則代碼無顏色提示
          • 創(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>

          行級標簽:在行內顯示,可與其他內容在同一行顯示

          <span></span>

          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 頁面內的錨鏈接
          步驟:

          1. 定義錨點(標記)
          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ù)
          步驟:

          1. 在跨越的單元格中設置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表單語法

          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來定義不同的表單元素

          1

          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、基本用法

          語法:

          1

          常用屬性:

          · src:引用的頁面

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

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

          · scrolling是否顯示滾動條,取值:yes no auto

          · name屬性 為框架定義名稱

          3、在框架中打開鏈接

          1

          2

          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ī)則:

          1. 如果optimum大于high,則表示值越大越好

          當value大于high時為綠色

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

          當value小于low時為紅色

          1. 如果optimum小于low,則表示值越小越好

          當value小于low時為綠色

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

          當value大于high時為紅色

          1. 當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檢測代碼:

          <script>alert(1)</script> // 調用JavaScript語句

          <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標簽,但是,你如果要用,可以用下面的來代替。

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

          <script>alert("XSS")</script>

          <script>alert("XSS")</script>

          <script>alert(&XSS&)</script>

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

          比如:

          <script>alert("XSS")</script>

          <script>alert(String.fromCharCode(88,83,83))</script>

          <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>

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

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

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

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


          主站蜘蛛池模板: 日本不卡一区二区三区视频| 欧洲精品码一区二区三区免费看 | 无码少妇一区二区浪潮av| 欧美日韩综合一区二区三区| 国产成人高清亚洲一区久久| 久久精品国产一区二区三| 成人精品一区二区三区电影| 中文字幕一区视频| 日本一区二区三区精品国产| 无码福利一区二区三区| 精品无码中出一区二区| 午夜影院一区二区| 日本内射精品一区二区视频 | 视频一区精品自拍| 日韩视频免费一区二区三区| 日韩一区二区在线视频| 日韩内射美女人妻一区二区三区 | 国偷自产一区二区免费视频| 久久精品国内一区二区三区| 亚洲综合一区二区精品久久| 国产自产V一区二区三区C| 色噜噜AV亚洲色一区二区| 一本大道东京热无码一区| 综合无码一区二区三区| 国产福利精品一区二区| 精品无码一区二区三区亚洲桃色| 亚洲AV乱码一区二区三区林ゆな| 无码一区二区三区免费| 日韩aⅴ人妻无码一区二区| 国产视频一区二区| 自慰无码一区二区三区| 人妻天天爽夜夜爽一区二区| 国产香蕉一区二区在线网站 | 精品国产一区二区三区| 日本免费一区二区三区最新| 国产一区二区精品久久岳| 肉色超薄丝袜脚交一区二区| 中文乱码人妻系列一区二区| 无码精品前田一区二区| 久久国产精品无码一区二区三区| 影院成人区精品一区二区婷婷丽春院影视|