07，html彈窗，及窗口間通信和location

1），彈窗及參數(shù)說(shuō)明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="打開(kāi)新窗口" onclick="openNewWin()" />
	
</body>
<script type="text/javascript">

	function openNewWin() {
		
		var openWindow = window.open("newTest.html",
			"彈到新窗口",
			"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
		
	}
	
	/***
		(00) window.open    彈出新窗口的命令
		(01) newTest.html   彈出窗口的文件名，或請(qǐng)求地址
		(02) 彈出窗口的名字（不是文件名），非必須，可用空''代替
		(03) height=100     窗口高度
		(04) width=400      窗口寬度
		(05) top=0          窗口距離屏幕上方的像素值
		(06) left=0         窗口距離屏幕左側(cè)的像素值
		(07) toolbar=no     是否顯示工具欄，yes為顯示
		(08) menubar        表示菜單欄
		(09) scrollbars     表示滾動(dòng)欄
		(10) resizable=no   是否允許改變窗口大小，yes為允許
		(11) location=no    是否顯示地址欄，yes為允許
		(12) status=no      是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開(kāi)），yes為允許
	***/
	
</script>
</html>

（2），彈窗并居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="彈出的窗口居中" onclick="testOpenCenterWindow()" />
	
</body>
<script type="text/javascript">

	function testOpenCenterWindow() {
		
		// 窗口垂直位置水平位置
		var iTop = (window.screen.availHeight - 30 - 500) / 2;
		var iLeft = (window.screen.availWidth - 10 - 800) / 2; //減width
		var openWindow = window.open("newTest.html"
			,"測(cè)試彈窗口并居中"
			,"height=500, width=800, top="+ iTop
			+", left="+ iLeft
			+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
				);
	}
	
</script>
</html>

（3），窗口 location屬性

window對(duì)象location屬性是引用Location對(duì)象，它表示該窗口顯示文檔的URL
window.location.href="page1.jsp";  //當(dāng)前窗口顯示指定頁(yè)面
window.close();                                 //關(guān)閉本頁(yè)面

（4），窗口與父窗口通信

、Html概述

Html是Hyper Text Mark-up Language 的首字母簡(jiǎn)寫(xiě)，意思是超文本標(biāo)記語(yǔ)言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)。

二、Html標(biāo)簽語(yǔ)法

Html中標(biāo)簽分為：成對(duì)標(biāo)簽和自閉合標(biāo)簽【空標(biāo)簽】

1、成對(duì)標(biāo)簽

成對(duì)出現(xiàn)，有開(kāi)始標(biāo)簽必須有結(jié)束標(biāo)簽，內(nèi)容包裹在兩個(gè)標(biāo)簽中，而且開(kāi)始標(biāo)簽名和結(jié)束標(biāo)簽名一致,并且結(jié)束標(biāo)簽必須以斜杠/開(kāi)頭

語(yǔ)法：

<font>內(nèi)容</font>

2、自閉合標(biāo)簽

只有一個(gè)標(biāo)簽，用斜杠結(jié)束，斜杠也可以省略

語(yǔ)法：

<br/>

注意事項(xiàng)：

成對(duì)標(biāo)簽中，結(jié)束標(biāo)簽必須以斜杠開(kāi)頭
成對(duì)標(biāo)簽與成對(duì)標(biāo)簽可以嵌套不能交叉
標(biāo)簽名不區(qū)分大小寫(xiě)，但是我們都必須小寫(xiě)

三、Html基本架構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文檔聲明，定義文檔類(lèi)型為html，并且告訴不同的瀏覽器用標(biāo)準(zhǔn)方式進(jìn)行解析html語(yǔ)言，如果不寫(xiě)的話，會(huì)產(chǎn)生怪異模式，所謂怪異模式，就是瀏覽器會(huì)用自己的方式進(jìn)行解析，不同的瀏覽器有各自的解析方式，從而會(huì)出現(xiàn)無(wú)效果、不兼容等問(wèn)題。
注意，html中有兩種聲明類(lèi)型，一種叫做xhtml，即html，另一種叫做html5，html5是xhtml的升級(jí)版，所以我們建議使用html5的聲明方式
xhtml聲明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5聲明方式：
<!DOCTYPE html>

2、html

html是html文檔的整體，也就是表示一個(gè)網(wǎng)頁(yè)。
html中的lang="en"是定義該文件語(yǔ)言是英文

3、head

head是html的第一層子元素【子標(biāo)簽】，負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁(yè)的編碼格式，外鏈css樣式文件和JavaScript文件等。設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄中。即title標(biāo)簽。

4、meta

meta是html語(yǔ)言head標(biāo)簽中的一個(gè)輔助性標(biāo)簽，該標(biāo)簽不包含任何內(nèi)容，但是該標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱，比如：編碼

<meta charset="utf-8"></meta>

5、body

body也是html的第一層子元素，我們頁(yè)面中顯示的所有內(nèi)容全部都是編寫(xiě)在該標(biāo)簽體中。

四、Html文檔規(guī)范

html制定了文檔的編寫(xiě)規(guī)范，必須遵守。
所有的標(biāo)簽必須小寫(xiě)
所有的屬性必須用雙引號(hào)括起來(lái)

五、Html注釋

html文檔代碼中可以插入注釋，注釋是對(duì)代碼的說(shuō)明和解釋，注釋的內(nèi)容不會(huì)顯示在頁(yè)面上。
注釋的語(yǔ)法：


六、html基本屬性

注：屬性是標(biāo)簽的輔助作用。

屬性描述 bgcolor 設(shè)置網(wǎng)頁(yè)的背景顏色 background 設(shè)置網(wǎng)頁(yè)的背景圖片

1.bgcolor

設(shè)置網(wǎng)頁(yè)的背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路徑

我們?cè)陂_(kāi)發(fā)網(wǎng)頁(yè)時(shí)，需要經(jīng)常的插入圖片、視頻、文件等一些操作，但是我們需要指定文件所在的位置，這個(gè)位置就是所謂的路徑

路徑分為：

相對(duì)路徑指目標(biāo)相對(duì)于當(dāng)前文件的路徑，網(wǎng)頁(yè)結(jié)構(gòu)設(shè)計(jì)中多采用這種方式來(lái)表示目標(biāo)的路徑。相對(duì)路徑有多種表示方法，其表示的意義不盡相同。表示方法如下： ./ ：代表文件所在的目錄（可以省略不寫(xiě)）../ ：代表文件所在的父級(jí)目錄../../ ：代表文件所在的父級(jí)目錄的父級(jí)目錄/ ：代表文件所在的根目錄【/ ：可以理解為目標(biāo)文件的絕對(duì)路徑】
絕對(duì)路徑指目標(biāo)文件的完整路徑，從盤(pán)符開(kāi)始。

3.background

設(shè)置網(wǎng)頁(yè)的背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事項(xiàng)：
bgcolor和background不能同時(shí)使用
background不能指定絕對(duì)路徑

七、Html標(biāo)簽

1.網(wǎng)頁(yè)的組成

網(wǎng)頁(yè)的組成：文字、圖片、視頻、超鏈接、列表、表格、表單等組成。

2、文本段落標(biāo)簽

標(biāo)簽 描述 hn 設(shè)置文字標(biāo)題【n：取值范圍 1~6】 center 居中對(duì)齊 hr 水平線屬性（width：寬度 color：顏色 size：粗細(xì)） br 換行 p 段落

3、文本控制標(biāo)簽

標(biāo)簽 描述 font 設(shè)置字體，需要借助屬性設(shè)置

屬性描述 color 設(shè)置字體顏色 size 設(shè)置字體大小，不需要帶單位，取值范圍：1~7【瀏覽器默認(rèn)值：3】 face 設(shè)置字體風(fēng)格

<font size="2" color="red" face="黑體"></font>

4、文本格式化標(biāo)簽

標(biāo)簽 描述 b 定義粗體文本 em 定義著重文字 i 定義斜體文字 small 定義小號(hào)字 strong 定義加重語(yǔ)氣 sub 定義下標(biāo)字 sup 定義上標(biāo)字 ins 定義插入字 del 定義刪除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化標(biāo)簽</title>
</head>
<body>

    <b>粗體文本</b>
    <i>傾斜文本</i>
    <em>著重文本</em>
    <small>小號(hào)字</small>
    <strong>加重語(yǔ)氣</strong>
    <sub>上標(biāo)</sub>
    <sup>下標(biāo)</sup>
    <ins>插入字</ins>
    <del>刪除字</del>
    
</body>
</html>

5、圖片標(biāo)簽

在Html中，圖像由
標(biāo)簽定義。
是空標(biāo)簽，意思是說(shuō)，它只包含屬性。
要在頁(yè)面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

標(biāo)簽 描述 img 圖片標(biāo)簽

屬性描述 src 指定圖片的地址 width 設(shè)置圖片的寬度 height 設(shè)置圖片的高度 alt 設(shè)置圖片的預(yù)備文本

注意事項(xiàng)：不建議設(shè)置圖片大小，容易失真

6、audio

在Html中，聲音由標(biāo)簽定義。

標(biāo)簽 描述 audio 聲音標(biāo)簽

屬性描述 src 指定聲音地址

<audio src="nice.mp3">對(duì)不起，您的瀏覽器不支持</audio>

7、video

在Html中，視頻由video標(biāo)簽定義

標(biāo)簽 描述 video 視頻標(biāo)簽

屬性描述 src 指定視頻地址

<video src="美女.mp4">對(duì)不起，您的瀏覽器不支持</video>

8、超鏈接

a標(biāo)簽定義超鏈接，用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。
a標(biāo)簽最重要的屬性是href，它指定鏈接的目標(biāo)。
在所有瀏覽器中，鏈接的默認(rèn)外觀如下：
未被訪問(wèn)的鏈接帶有下劃線而且是藍(lán)色的
已被訪問(wèn)的鏈接帶有下劃線而且是紫色的
活動(dòng)鏈接帶有下劃線而且是紅色的

語(yǔ)法：

<a href="鏈接目標(biāo)">點(diǎn)擊內(nèi)容</a>

屬性描述 href 指定鏈接目標(biāo) name 指定錨的名稱 download 指定下載鏈接 target 指定跳轉(zhuǎn)方式屬性值描述 _blank 新窗口打開(kāi)【常用】 _parent 在父窗口中打開(kāi)鏈接【了解】 _self 默認(rèn)，在當(dāng)前窗口打開(kāi)【了解】 _top 在當(dāng)前窗體打開(kāi)鏈接，并替換當(dāng)前的整個(gè)窗體【了解】 framename 到 iframe 在講【常用】

超鏈接分類(lèi)：

內(nèi)部鏈接鏈接目標(biāo)：本地頁(yè)面 <a href="demo.html">點(diǎn)擊內(nèi)容</a>
外部鏈接鏈接目標(biāo)：外部頁(yè)面 <a href="http://www.baidu.com">點(diǎn)擊內(nèi)容</a>
多媒體鏈接鏈接目標(biāo)：圖片、視頻等 <a href="images/美女.jpg">點(diǎn)擊內(nèi)容</a>
電子郵件鏈接鏈接目標(biāo)：電子郵件【系統(tǒng)自帶的電子郵件】 <a href="mailto:12345@qq.com">點(diǎn)擊內(nèi)容</a>
錨鏈接鏈接目標(biāo)：錨點(diǎn) 1.建立錨點(diǎn)
<a name="錨點(diǎn)名"></a>

2.跳轉(zhuǎn)
<a href="#錨點(diǎn)名">點(diǎn)擊內(nèi)容</a>

9、列表

列表的使用與word等軟件的列表概念相似，只不過(guò)是應(yīng)用在網(wǎng)頁(yè)展示中。

1.有序列表

有序列表是指有數(shù)字編號(hào)或字母的列表項(xiàng)，可以使用css定義更多樣式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新聞一</li>
        <li>新聞二</li>
        <li>新聞三</li>
    </ol>

屬性描述 type 設(shè)置符號(hào)類(lèi)型值：1 a A I i 默認(rèn)數(shù)字 start 從第幾個(gè)開(kāi)始【用于ol標(biāo)簽中】 value 從第幾個(gè)開(kāi)始【用于li標(biāo)簽中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新聞一</li>
        <li type="1" value="1">新聞二</li>
        <li>新聞三</li>
    </ol>

2、無(wú)序列表

無(wú)序列表是指沒(méi)有數(shù)字編號(hào)或字母的列表項(xiàng)，可以使用css定義更多樣式。

<!-- 無(wú)序列表 -->
<ul>
    <li>童裝</li>
    <li>男裝</li>
    <li>女裝</li>
</ul>

屬性描述 type 用于設(shè)置符號(hào)類(lèi)型，默認(rèn)：實(shí)心圓值：空心圓、正方形【用于ul、li】

<!-- 無(wú)序列表 -->
<ul type="square">
        <li>童裝</li>
        <li type="circle">男裝</li>
        <li>女裝</li>
    </ul>

3、描述列表

描述列表指每個(gè)列表項(xiàng)有單獨(dú)的標(biāo)題。

<!-- 描述列表 -->
    <dl>
        <dt>開(kāi)源產(chǎn)品</dt>
        <dd>Java封裝庫(kù)</dd>
        <dd>Web組件庫(kù)</dd>
        
        <dt>網(wǎng)站導(dǎo)航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在網(wǎng)頁(yè)開(kāi)發(fā)中使用頻率非常高，尤其是數(shù)據(jù)展示的時(shí)候。

10.1 基本使用

標(biāo)簽 描述 table 代表表格標(biāo)簽 caption 表格標(biāo)題 thead 表頭部分 tbody 表格主體部分 tfoot 表格尾部

屬性描述 border 表格邊框 cellspacing 單元格與單元格間距 width 寬度 height 高度 bgcolor 設(shè)置背景顏色 background 設(shè)置背景圖片 align 對(duì)齊方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計(jì)表</caption>
        <thead>
            <tr>
                <th>序號(hào)</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測(cè)試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁(yè)：1 頁(yè)</td>
                <td>上一頁(yè)</td>
                <td>下一頁(yè)</td>
                <td>尾頁(yè)</td>
                <td>共 3 頁(yè)</td>
            </tr>
        </tfoot>
    </table>

10.2 單元格合并

屬性 說(shuō)明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計(jì)表</caption>
        <thead>
            <tr>
                <th>序號(hào)</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測(cè)試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁(yè)：1 頁(yè)</td>
                <td>上一頁(yè)</td>
                <td>下一頁(yè)</td>
                <td>尾頁(yè)</td>
                <td>共 3 頁(yè)</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計(jì)表</caption>
        <thead>
            <tr>
                <th>序號(hào)</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>測(cè)試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁(yè)：1 頁(yè)</td>
                <td>上一頁(yè)</td>
                <td>下一頁(yè)</td>
                <td>尾頁(yè)</td>
                <td>共 3 頁(yè)</td>
            </tr>
        </tfoot>
    </table>

11、表單

表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容，比如：文本域(textarea)、下拉列表(select)、單選框(radio)、復(fù)選框(checkbox)等等。

11.1 基本使用

表單需要使用表單標(biāo)簽來(lái)設(shè)置：

<form>
input元素
</form>

11.2 GET&POST

屬性 說(shuō)明 action 后臺(tái)地址 method 提交方式GET或POST

GET和POST區(qū)別：

1.GET

數(shù)據(jù)會(huì)顯示在地址欄中，數(shù)據(jù)不安全
數(shù)據(jù)大小有限制
數(shù)據(jù)通過(guò)請(qǐng)求頭傳遞

2.POST

數(shù)據(jù)不會(huì)顯示在地址欄中，數(shù)據(jù)安全
數(shù)據(jù)對(duì)大小無(wú)限制
數(shù)據(jù)通過(guò)實(shí)體內(nèi)容傳遞

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表單標(biāo)題，當(dāng)點(diǎn)擊標(biāo)題后文本框會(huì)獲得焦點(diǎn)，需要保證使用的ID在頁(yè)面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" id="username">

        <label for="password">密碼</label>
        <input type="password" id="password">
</form>

也可以將文本框放在label標(biāo)簽內(nèi)部，這樣就不需要設(shè)置id與for屬性了。

11.4 INPUT

文本框用于輸入單行文本使用，下面是常用屬性與示例。

屬性 說(shuō)明 type 表單類(lèi)型,默認(rèn)為text name 后端接收字段名 required 必須輸入 placeholder 提示文本內(nèi)容 value 默認(rèn)指 maxlength 允許最大輸入字符數(shù) size 表單長(zhǎng)度,一般用css來(lái)控制 disabled 禁用,不可提交后端 readonly 只讀,可提交后端 accept 設(shè)置選中類(lèi)型比如:.jpg capture 使用麥克風(fēng)\視頻或攝像頭哪種方式獲取手機(jī)上傳文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶名" maxlength="5" size="50" required>
</form>

11.4.2 調(diào)用攝像頭

當(dāng)input類(lèi)型為file時(shí)手機(jī)會(huì)讓用戶選擇圖片或者拍照,如果想直接調(diào)取攝像頭使用以下代碼.

<form action="后端接口" method="POST">
        <label for="file">上傳文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他類(lèi)型

通過(guò)設(shè)置表單的type字段可以指定不同的輸入內(nèi)容.

類(lèi)型 說(shuō)明 email 輸入內(nèi)容為郵箱 url 輸入內(nèi)容為URL地址 password 輸入內(nèi)容為密碼項(xiàng) tel 電話號(hào),移動(dòng)端會(huì)調(diào)出數(shù)字鍵盤(pán) search 搜索框 hidden 隱藏表單 submit 提交表單 reset 重置表單 button 自定義按鈕

11.4.4 HIDDEN

隱藏表單用于提交后臺(tái)數(shù)據(jù),但在前臺(tái)內(nèi)容不顯示所以在其上做用樣式定義也沒(méi)有意義.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

創(chuàng)建提交按鈕可以將表單數(shù)據(jù)提交到后臺(tái),有多種方式可以提交數(shù)據(jù),比如:AJAX,或者Html的表單按鈕.

a.使用input構(gòu)建提交按鈕,如果設(shè)置了name值,那么按鈕數(shù)據(jù)也會(huì)提交到后臺(tái),如果有多個(gè)表單項(xiàng)可以通過(guò)這些進(jìn)行判斷是哪個(gè)表單提交的.

<input type="submit" name="submit" value="提交表單">

b.使用button也可以提交,設(shè)置type屬性為submit或不設(shè)置都可以提交表單.

<button type="submit">提交表單</button>

11.4.6 禁用表單

通過(guò)為表單設(shè)置disabled或readonly都可以禁止表單,單readonly表單的數(shù)據(jù)可以提交到后端

<input type="text" value="數(shù)據(jù)" readonly>

11.4.7 PATTERN

表單可以通過(guò)設(shè)置pattern屬性指定正則驗(yàn)證.

屬性 說(shuō)明 pattern 正則表達(dá)式驗(yàn)證規(guī)則 oninvalid 輸入錯(cuò)誤時(shí)觸發(fā)的事件

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('請(qǐng)輸入5~20位字母的用戶名')">
        <button>提交表單</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以輸入多行文本的表單,當(dāng)然更復(fù)雜的情況可以使用編輯器如ueditor , ckeditor等.

屬性 說(shuō)明 cols 列字符數(shù)(一般使用css控制更好) rows 行數(shù)(一般使用css控制更好)

<textarea cols="30" rows="3">請(qǐng)踩踩我......</textarea>

11.4.9 SELECT

下拉列表項(xiàng)可用于多個(gè)值中的選擇.

屬性 說(shuō)明 multiple 支持多選 size 列表框高度 optgroup 選項(xiàng)組 selected 選中狀態(tài) option 選項(xiàng)值

<form action="">
        <select multiple size="10">
            <option value="">選擇課程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

單選框指只能選擇一個(gè)選項(xiàng)的表單,如性別的選擇:男 , 女 , 保密只能選擇一個(gè).

屬性 說(shuō)明 checked 選中狀態(tài)

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

復(fù)選框指允許選擇多個(gè)值的表單

屬性 說(shuō)明 checked 選中狀態(tài)

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上傳有很多方式,可以使用插件或者JS拖放上傳處理.Html本身也提供了默認(rèn)的上傳功能,只是上傳效果并不是很美觀.

屬性 說(shuō)明 multiple 支持多選 accept 允許上傳類(lèi)型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上傳">
    </form>

11.4.13 日期時(shí)間

屬性 說(shuō)明 min 最小時(shí)間 max 最大時(shí)間 step 間隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期選擇

<h1>日期選擇</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周選擇

<h1>周選擇</h1>
    <input type="week" name="" id="">

c.月份選擇

<h1>月選擇</h1>
    <input type="month" name="" id="">

d.日期與時(shí)間

<h1>日期與時(shí)間</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表單的輸入值選項(xiàng)列表

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后臺(tái)管理語(yǔ)言</option>
            <option value="CSS">美化網(wǎng)站頁(yè)面</option>
            <option value="MYSQL">掌握數(shù)據(jù)庫(kù)使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定義一個(gè)框架集。它被用來(lái)組織多個(gè)窗口（框架），每個(gè)框架存有獨(dú)立的文檔，在其最簡(jiǎn)單的應(yīng)用中，frameset元素僅僅會(huì)規(guī)定在框架集中存在多少列或多少行，您必須使用cols或rows屬性。

注意事項(xiàng)：由于是分割原網(wǎng)頁(yè)，所以我們不能在body中進(jìn)行編寫(xiě)，在head中進(jìn)行分割。

標(biāo)簽 說(shuō)明 frameset 框架集 frame 框架

屬性 說(shuō)明 cols 定義框架集中列的數(shù)目和尺寸 rows 定義框架集中行的數(shù)目和尺寸 frame border 去除框架邊框 scrolling 去除滾動(dòng)條

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 導(dǎo)航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html野獸</title>
</head>
<body>
    

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html動(dòng)物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html鏈接</title>
</head>
<body>

    <a href="Html美女.html" target="view">美女圖片</a>
    <a href="Html野獸.html" target="view">野獸圖片</a>
    <a href="Html動(dòng)物.html" target="view">動(dòng)物圖片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html鏈接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、內(nèi)聯(lián)框架

iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架。

屬性 說(shuō)明 align 對(duì)齊方式，后期采用css的方式進(jìn)行設(shè)置 width 設(shè)置寬度 height 設(shè)置高度 src 設(shè)置iframe中顯示的文檔的URL name iframe的名稱 scrolling 是否顯示滾動(dòng)條 frameborder 設(shè)置iframe的邊框

avascript中的窗口即window對(duì)象，是瀏覽器窗口對(duì)文檔提供一個(gè)顯示的容器，是每一個(gè)加載文檔的父對(duì)象。window對(duì)象還是所有其他對(duì)象的頂級(jí)對(duì)象，通過(guò)對(duì)window對(duì)象的子對(duì)象進(jìn)行操作，可以實(shí)現(xiàn)更多的動(dòng)態(tài)效果。

window對(duì)象代表當(dāng)前打開(kāi)的瀏覽器窗口，其作為頂級(jí)對(duì)象。window對(duì)象的方法和屬性的調(diào)用和其它對(duì)象一樣，區(qū)別是window對(duì)象不需要?jiǎng)?chuàng)建即可直使用。需要注意的是window對(duì)象名稱是小寫(xiě)，下面是其屬性和方法的調(diào)用語(yǔ)法。

window.屬性名

window.方法名(參數(shù)列表)

一些常用的方法：

onload/onunload

網(wǎng)頁(yè)加載完畢時(shí)激發(fā)一個(gè)onload事件。通常在該事件處理程序中進(jìn)行與網(wǎng)頁(yè)加載完畢相關(guān)的操作，該事件是BODY標(biāo)簽的屬性。該事件也可以作用于IMG元素，通常借助該事件以實(shí)現(xiàn)圖片預(yù)加載功能。當(dāng)作用在BODY元素中時(shí)，只有當(dāng)整個(gè)網(wǎng)頁(yè)都加完畢后才會(huì)被激發(fā)。

與load事件相反，unload事件是在瀏覽器窗口卸載文檔時(shí)所激發(fā)的事件。所謂卸載是瀏覽器的一個(gè)功能，即在加載新文檔之前，瀏覽器會(huì)清除當(dāng)前的窗口的內(nèi)容。用這個(gè)事件可以在卸載文檔時(shí)給用戶一個(gè)提示信息，比如說(shuō)一個(gè)問(wèn)候。

示例代碼：

onfocus/onbiur

得到焦點(diǎn)是指瀏覽器窗口為當(dāng)前的活動(dòng)窗口，得到焦點(diǎn)時(shí)觸發(fā)窗口對(duì)象的focus事件。相反的是當(dāng)瀏覽器窗口變?yōu)楹笈_(tái)窗口時(shí)，稱為失去焦點(diǎn)。發(fā)生這種轉(zhuǎn)換時(shí)觸發(fā)名為blur的事件。通常將focus事件與blur事件都會(huì)聯(lián)合起來(lái)，使用在與窗口活動(dòng)狀態(tài)有關(guān)的場(chǎng)合。

resizeTo/resizeBy

窗口對(duì)象提供兩個(gè)方法用于調(diào)整窗口的大小，分別是resizeTo和resizeBy。其中， resizeBy是相對(duì)于當(dāng)前尺寸調(diào)整窗口大小，而resizeTo是把把窗口設(shè)置成指定的寬度和高度。當(dāng)瀏覽器窗口大小被調(diào)整時(shí)，將會(huì)觸發(fā)resize事件。

onerror

window對(duì)象中有一個(gè)可以用來(lái)處理錯(cuò)誤信息的事件error，該事件由瀏覽器產(chǎn)生。以IE瀏覽器為例，一旦產(chǎn)生了JavaScript錯(cuò)誤，就會(huì)在窗口狀態(tài)欄中顯示錯(cuò)誤提示。只有在當(dāng)前窗口中發(fā)生了JavaScript錯(cuò)誤才激發(fā)error事件，雖然能得到錯(cuò)誤通過(guò)，但與“try…catch…finally”異常處理結(jié)構(gòu)不同，后者是語(yǔ)言機(jī)制，在這種機(jī)制下錯(cuò)誤是可以挽回的。

示例代碼：

運(yùn)行程序，點(diǎn)擊“提交”之后的效果：

alert/confirm/prompt

警告對(duì)話框是一個(gè)帶感嘆圖標(biāo)的小窗口，顯示文本信息并且使揚(yáng)聲器發(fā)出“當(dāng)～”的聲音。通常用來(lái)輸出一些簡(jiǎn)單的文本信息，通過(guò)調(diào)用window對(duì)象的alert方法即可顯示一個(gè)警告對(duì)話框

詢問(wèn)對(duì)話框是具有雙向交互的信息框，系統(tǒng)在對(duì)話框上放置按鈕，根據(jù)用戶的選擇返回不同的值。設(shè)計(jì)程序時(shí)可以根據(jù)不同的值予以不同的響應(yīng)，實(shí)現(xiàn)互動(dòng)的效果。通常放在網(wǎng)頁(yè)中，對(duì)用戶進(jìn)行詢問(wèn)并根據(jù)其選擇而做選擇不同的流程。

很多情況下需要向網(wǎng)頁(yè)中的程序輸入數(shù)據(jù)，簡(jiǎn)單的鼠標(biāo)交互顯然不能滿足。此時(shí)就可以使用window對(duì)象提供的輸入對(duì)話框，通過(guò)該對(duì)話框可以輸入數(shù)據(jù)。通過(guò)window的prompt方法即可顯示輸入對(duì)話框，使用方法如下：

window.prompt( 提示信息，默認(rèn)值 )

狀態(tài)欄

status/defaultStatus

瀏覽器的狀態(tài)欄通常位于窗口的底部，用于顯示一些任務(wù)狀態(tài)信息等。在通常情況下，狀態(tài)顯示當(dāng)前瀏覽器的工作狀態(tài)或用戶交互提示信息 ,如圖所示。

默認(rèn)情況下，狀態(tài)欄里的信息都是空的，只有在加載網(wǎng)頁(yè)或?qū)⑹髽?biāo)放在超鏈接上時(shí)，狀態(tài)欄中才會(huì)顯示與任務(wù)目標(biāo)相關(guān)的瞬間信息。window對(duì)象的defaultStatus屬性可以用來(lái)設(shè)置在狀態(tài)欄中的默認(rèn)文本，當(dāng)不顯示瞬間信息時(shí)，狀態(tài)欄可以顯示這個(gè)默認(rèn)文本。defaultStatus屬性是一個(gè)可讀寫(xiě)的字符串。

在默認(rèn)情況下，將鼠標(biāo)放在一個(gè)超鏈接上時(shí)，狀態(tài)欄會(huì)顯示該超鏈接的URL，此時(shí)的狀態(tài)欄信息就是瞬間信息。當(dāng)鼠標(biāo)離開(kāi)超鏈接時(shí)，狀態(tài)欄就會(huì)顯示默認(rèn)的狀態(tài)欄信息，瞬間信息消失。

下面實(shí)現(xiàn)一個(gè)在狀態(tài)欄顯示當(dāng)前時(shí)間的功能，示例代碼：

運(yùn)行效果：

打開(kāi)新窗口

使用window對(duì)象的open方法可以打開(kāi)一個(gè)新的瀏覽器窗口，新窗口作為本窗口的子窗口。相應(yīng)的本窗口作為新窗口的次窗口，并持有對(duì)新窗口的一個(gè)引用，通過(guò)該引用可以適度的操作新窗口。open方法的語(yǔ)法如下：

window.open(url,name,features,replace)

其中,features是描述窗口的特征, replace指明是否允許url替換窗口的內(nèi)容。

窗口的名字在窗口打開(kāi)時(shí)可以設(shè)定，仍然用open方法，只是充分運(yùn)用它的參數(shù)的設(shè)置。window.open方法可以設(shè)置新開(kāi)窗口的名稱，該窗口名稱在a元素和form元素的target屬性中使用。

關(guān)閉窗口

如果獲得一個(gè)window對(duì)象的引用時(shí)，通過(guò)該引用去調(diào)用其close方法就可以關(guān)掉一個(gè)與之相關(guān)的窗口。通常情況下，父窗口通過(guò)這種方式關(guān)閉子窗口。語(yǔ)法如下：

窗口名.close()

窗口的引用

上文已經(jīng)提到通過(guò)窗口的引用可以操作內(nèi)容，同時(shí)可以操作窗口的內(nèi)容。使用些特性可以在一個(gè)窗口中控制另一個(gè)窗口的內(nèi)容，例如向一個(gè)新開(kāi)的瀏覽器窗口中輸出內(nèi)容。

scrollTo/scrollBy

瀏覽器中的內(nèi)容大于其顯示區(qū)域時(shí)，一般會(huì)出現(xiàn)滾動(dòng)條便于查看被遮內(nèi)容。用戶可以拖動(dòng)滾動(dòng)條，也可以通過(guò)程序來(lái)控制窗口的滾動(dòng)。調(diào)用window對(duì)象的scrollBy或scrollTo方法即可滾動(dòng)文檔

下面實(shí)現(xiàn)一個(gè)自動(dòng)滾動(dòng)的效果，示例代碼：

setTimeout/setInterval

使用window對(duì)象的setTimeout方法可以延遲代碼的執(zhí)行時(shí)間，也可以用該方法來(lái)指定代碼的執(zhí)行時(shí)間。setTimeout方法的語(yǔ)法代碼如下所示：

window.setTimeout(code,delay)

下面實(shí)現(xiàn)一個(gè)延遲加載的效果，示例代碼：

代碼延遲執(zhí)行機(jī)制在執(zhí)行一次后就失效，而在應(yīng)用中，有時(shí)希望某個(gè)程序能反復(fù)執(zhí)行，比如說(shuō)倒計(jì)時(shí)等，需要每秒執(zhí)行一次。為此可以使用window方法的setInterval方法，該函數(shù)設(shè)置一個(gè)定時(shí)器，每當(dāng)定時(shí)時(shí)間到時(shí)就調(diào)用一次用戶設(shè)定的定時(shí)器函數(shù)。

使用setInterval方法可以可以設(shè)定計(jì)時(shí)器，設(shè)定計(jì)時(shí)器時(shí)將返回一個(gè)計(jì)時(shí)器的引用。當(dāng)不再需要的時(shí)候可以使用clearInterval方法移除計(jì)時(shí)器，其接收一個(gè)計(jì)時(shí)器ID作為參數(shù)，語(yǔ)法如下：

window.clearInterval(id)

window對(duì)象中的clearTimeout方法也可以取消延遲執(zhí)行的代碼。因?yàn)樵趯?shí)際應(yīng)用中，如果有時(shí)出現(xiàn)特殊情況，不再需要程序自延遲執(zhí)行的時(shí)候，就得想辦法取消延遲。clearTimeout方法可以做到這一點(diǎn)。語(yǔ)法如下所示：

window.clearTimeout(id)

實(shí)現(xiàn)一個(gè)在線時(shí)鐘的功能：

運(yùn)行效果：

框架的相關(guān)知識(shí)

框架是指一個(gè)瀏覽器窗口中，同時(shí)顯示的多個(gè)相互獨(dú)立的網(wǎng)頁(yè)。簡(jiǎn)單的說(shuō)，在上網(wǎng)瀏覽網(wǎng)頁(yè)時(shí)，時(shí)常會(huì)看到一些特別的頁(yè)面，這種頁(yè)面將網(wǎng)頁(yè)分割成不同的幾個(gè)區(qū)域，這些區(qū)域是相對(duì)獨(dú)立但又有一定的聯(lián)系的，可以在不同的地方加載不同的網(wǎng)頁(yè)，這里所應(yīng)用的正是框架。

在window對(duì)象中有一個(gè)frames屬性，該屬性返回一個(gè)數(shù)組，數(shù)組中的元素代表著框架中所包含的窗口。因此，在框架頁(yè)中可以使用frames[0]表示第1個(gè)子窗口、frames[1]表示第2個(gè)子窗口，依此類(lèi)推。如果一個(gè)窗口中沒(méi)有包含框架，那么frames[]數(shù)組中的元素個(gè)數(shù)為0。

對(duì)于一個(gè)復(fù)雜的框架，窗口之間可以相互訪問(wèn)，它主要包括對(duì)框架自身的引用、對(duì)父窗口對(duì)子窗口的引用、子窗口對(duì)父窗口及其他窗口的引用、對(duì)頂級(jí)窗口的引用。下面是一個(gè)對(duì)父窗口的引用的例子的演示。

每一個(gè)窗口都有一個(gè)name屬性，其表示一個(gè)窗口名，可以通過(guò)窗口來(lái)索引一個(gè)窗口的引用。在多框架頁(yè)中name屬性使用的比較多，通過(guò)name屬性可以取得框架窗口的引用。

frameset常用的屬性：

frame常用的屬性：

iframe常用的屬性：

以上即為javascript中窗口和框架的相關(guān)知識(shí)，關(guān)于window和frame的深層次知識(shí)留待以后研究了。

在線咨詢

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

07，html彈窗，及窗口間通信和location

、Html概述

二、Html標(biāo)簽語(yǔ)法

1、成對(duì)標(biāo)簽

2、自閉合標(biāo)簽

三、Html基本架構(gòu)

1、！DOCTYPE

2、html

3、head

4、meta

5、body

四、Html文檔規(guī)范

五、Html注釋

六、html基本屬性

1.bgcolor

2.路徑

3.background

七、Html標(biāo)簽

1.網(wǎng)頁(yè)的組成

2、文本段落標(biāo)簽

3、文本控制標(biāo)簽

4、文本格式化標(biāo)簽

5、圖片標(biāo)簽

6、audio

7、video

8、超鏈接

9、列表

1.有序列表

2、無(wú)序列表

3、描述列表

10、表格

10.1 基本使用

10.2 單元格合并

11、表單

11.1 基本使用

11.2 GET&POST

11.3 LABEL

11.4 INPUT

11.4.1 基本示例

11.4.2 調(diào)用攝像頭

11.4.3 其他類(lèi)型

11.4.4 HIDDEN

11.4.5 SUBMIT

11.4.6 禁用表單

11.4.7 PATTERN

11.4.8 TEXTAREA

11.4.9 SELECT

11.4.10 RADIO

11.4.11 CHECKBOX

11.4.12 FILE

11.4.13 日期時(shí)間

11.4.14 DATALIST

12、框架集

12.1 垂直框架

12.3 混合框架

12.4 導(dǎo)航框架

13、內(nèi)聯(lián)框架

您的項(xiàng)目需求

07，html彈窗，及窗口間通信和location

、Html概述

二、Html標(biāo)簽語(yǔ)法

2、自閉合標(biāo)簽

三、Html基本架構(gòu)

1、！DOCTYPE

2、html

5、body

四、Html文檔規(guī)范

五、Html注釋

六、html基本屬性

七、Html標(biāo)簽

2、文本段落標(biāo)簽

4、文本格式化標(biāo)簽

6、audio

8、超鏈接

11、表單

12、框架集