多數(shù)標(biāo)簽都是有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，其中有個(gè)別標(biāo)簽因?yàn)橹挥袉我还δ埽蛘邲](méi)有要修飾的內(nèi)容可以在標(biāo)簽內(nèi)結(jié)束。
想要對(duì)被標(biāo)簽修飾的內(nèi)容進(jìn)行更豐富的操作，就用到了標(biāo)簽中的屬性，通過(guò)對(duì)屬性值的改變，增加了更多的效果選擇。
屬性與屬性值之間用“=”連接，屬性值可以用雙引號(hào)或單引號(hào)或者不用引號(hào)，一般都會(huì)用雙引號(hào)?；蚬疽?guī)定書(shū)寫(xiě)規(guī)范。
格式：<標(biāo)簽名 屬性名=‘屬性值’> 數(shù)據(jù)內(nèi)容 </標(biāo)簽名>
<標(biāo)簽名 屬性名=‘屬性值’ />
操作思想：
為了操作數(shù)據(jù)，都需要對(duì)數(shù)據(jù)進(jìn)行不同標(biāo)簽的封裝，通過(guò)標(biāo)簽中的屬性對(duì)封裝的數(shù)據(jù)進(jìn)行操作。
標(biāo)簽就相當(dāng)于一個(gè)容器。對(duì)容器中的數(shù)據(jù)進(jìn)行操作，就是在再不斷的改變?nèi)萜鞯膶傩灾怠?/p>
| header 1 | header 2 |
|---|---|
| & lt; | < |
| & quot; | “ |
| & trade; | ? |
| & gt; | > |
| & reg; | ? |
| & nbsp; | 空格 |
| & amp; | & |
| & copy; | ? |
<dl>
<dt>游戲名稱(chēng)</dt>
<dd>星際爭(zhēng)霸</dd>
<dd>紅色警戒</dd>
<dt>部門(mén)名稱(chēng)</dt>
<dd>技術(shù)部</dd>
<dd>培訓(xùn)部</dd>
</dl>
列表中項(xiàng)目符號(hào)對(duì)應(yīng)的標(biāo)簽
<ol>：數(shù)字標(biāo)簽（a A 1 i I）
<ul>：符號(hào)標(biāo)簽（○●■）
<li>：具體項(xiàng)目?jī)?nèi)容標(biāo)簽。此標(biāo)簽只在
<html>
<head>
</head>
<body>
<font color='red' size="50">冰冰</font>
</body>
</html>
<!DOCTYPE html> <!-- 說(shuō)明當(dāng)前是html的文檔 -->
<html><!-- html文件的根標(biāo)簽 -->
<head><!-- html的頭標(biāo)簽,內(nèi)部放的是屬性相關(guān) -->
<meta charset="UTF-8"><!-- 指明編碼 -->
<title>font_01</title><!-- 設(shè)置當(dāng)前文檔的標(biāo)題 -->
</head>
<body><!-- 體標(biāo)簽,放到是設(shè)置的內(nèi)容 -->
<!-- font標(biāo)簽 可以通過(guò)16進(jìn)制的數(shù)設(shè)置顏色(RGBA模式)
R:red G:green B:blue A:alpha(透明度)
[0,255] [0,255] [0,255] [0,1]
-->
<font color="#8E888E" size=60>冰冰</font>
<!-- 標(biāo)題標(biāo)簽專(zhuān)門(mén)用來(lái)設(shè)置標(biāo)題的,字號(hào)是固定,字體默認(rèn)是加粗的 -->
<h1>標(biāo)題</h1>
<h2>標(biāo)題</h2>
<h3>標(biāo)題</h3>
<h4>標(biāo)題</h4>
<h5>標(biāo)題</h5>
<h6>標(biāo)題</h6>
<!-- 特殊字符 -->
<font> <晨晨> </font>
</body>
</html>
<img src=”1.jpg” align=”middle” border=”3” alt=”圖片說(shuō)明文字”/>
align:屬性定義圖片的排列方式，border用來(lái)設(shè)置圖像的邊框。Src 連接一個(gè)文件
2. 圖像地圖：
<img src="Sunset.jpg" alt="圖片說(shuō)明文字" usemap="#Map" />
<map >
<area shape="rect" coords="50,59,116,104" href="1.html" />
<area shape="circle" coords="118,203,40" href="2.html" />
</map>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img_02</title>
</head>
<body>
<!--
src:是圖片的路徑
height:圖片的高度
width:圖片的寬度
默認(rèn)的單位是像素(px),注意:以后最好所有的地方都將單位加上
通過(guò)絕對(duì)路徑獲取圖片
注意:如果使用絕對(duì)路徑訪(fǎng)問(wèn)資源無(wú)法獲取資源,可以將file:///協(xié)議加上
-->
<img src="file:///C:\Users\Administrator\Desktop\BigData1715資料\JAVAWEB\day01\課程資料\今天資料1\圖片\bingbing.jpg" height=100px width=100px/>美女
<!-- 工程內(nèi)的圖片可以通過(guò)相對(duì)路徑找.
..代表向上一層
src=兩部分 第一部分:..\..\..\..\ 找當(dāng)前工程的目錄
第二部分:images\120.jpg 圖片的相對(duì)路徑
-->
<img src="..\..\..\..\images\120.jpg" />美圖
</body>
</html>
表格標(biāo)簽：<table>
組成：標(biāo)題標(biāo)簽：<caption>，給表格提供標(biāo)題。
表頭標(biāo)簽：<th>，一般對(duì)表格的第一行或者第一列進(jìn)行格式化，就是粗體顯示。并不常用。
行標(biāo)簽：<tr>
單元格標(biāo)簽：<td>，加載行標(biāo)簽的里面?？梢院?jiǎn)單理解為，先有行，在行中在加入單元格。
格式：
<table border="1" width=”40%”><!—width值為百分比可以讓表格的寬度隨瀏覽器窗口的大小變化-->
<caption>表格標(biāo)題</caption>
<tr><!-- 第一行 -->
<th>姓名</th>
<th>年齡</th>
</tr>
<tr algin=”center”><!-- 第二行 -->
<td>張三</td>
<td>23</td>
</tr>
</table>
效果：
| 姓名 | 年齡 |
|---|---|
| 張三 | 23 |
<table border="1" width=”40%”><!—width值為百分比可以讓表格的寬度隨瀏覽器窗口的大小變化-->
<caption>表格標(biāo)題</caption>
<tr><!-- 第一行 -->
<th>姓名</th>
<th>年齡</th>
</tr>
<tr algin=”center”><!-- 第二行 -->
<td>張三</td>
<td>23</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table_03</title>
</head>
<body>
<!--
tr:代表行
td:代表單元格
th:代表頭標(biāo)簽,默認(rèn)加粗
cellpadding:設(shè)置的是內(nèi)容到左邊框的距離
cellspacing:設(shè)置的是單元格之間的間隙
-->
<table border=1px height=500px width=500px cellpadding=10px cellspacing=10px>
<tr>
<th>姓名</th>
<td>年齡</td>
<td>美照</td>
</tr>
<tr>
<td>冰冰</td>
<td>18</td>
<td><img src="..\..\..\..\images\bingbing.jpg" height=100px width=50px/></td>
</tr>
</table>
</body>
</html>
兩種用法：
<a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
<!-- href屬性值可以是url，也可以是本地文件。target屬性是指定在哪個(gè)窗口或者幀中打開(kāi)。 -->
<a name=”標(biāo)記”>標(biāo)記位置</a>
<p>……<!--很多空行以制造網(wǎng)頁(yè)過(guò)長(zhǎng)的效果 -->
<a href=”#標(biāo)記”>返回標(biāo)記位置</a>
注：使用定位標(biāo)記時(shí)一定在href值的開(kāi)始加入#標(biāo)記名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超鏈_04</title>
</head>
<body>
<!-- 超鏈接
file:/// 代表獲取的是本地的路徑
http:// 或https:// 代表訪(fǎng)問(wèn)網(wǎng)絡(luò)路徑,如果什么協(xié)議都不寫(xiě)默認(rèn)是file:///
href:放的是超鏈接的地址
a的內(nèi)容是進(jìn)行超鏈接的內(nèi)容
-->
<a href="font_011.html">haha</a>
<a href="www.baidu.com">baidu</a>
<!-- 刷新當(dāng)前的界面 -->
<a href="">ook</a>
</body>
</html>
表單標(biāo)簽是最常用的標(biāo)簽，用于與服務(wù)器端的交互。
<input>：輸入標(biāo)簽 ：接收用戶(hù)輸入信息。
其中的type屬性指定輸入標(biāo)簽的類(lèi)型。
<select>：選擇標(biāo)簽 提供用戶(hù)選擇內(nèi)容。如：用戶(hù)所在的省市。size 屬性為顯示項(xiàng)目個(gè)數(shù)。
<option>：子項(xiàng)標(biāo)簽 屬性 selected 沒(méi)有屬性值，加在子項(xiàng)上，其中一個(gè)子項(xiàng)上，子項(xiàng)就變成默認(rèn)被選項(xiàng)。
<textarea>：多行文本框。如：個(gè)人信息描述。
<label>：用于給各元素定義快捷鍵。
for 屬性：指定快捷鍵作用的表單元素。必須與要作用的表單元素的id值相同。
accesskey 屬性：指定快捷鍵，此快捷鍵需要和alt鍵組合使用。
例：
<label for="user" accesskey="u">用戶(hù)名(u)</label>
<input type="text" id="user" />
表單提交：
1． 先定義form表單中的action屬性值，指定表單數(shù)據(jù)提交的目的地(服務(wù)端)。
2． 明確提交方式，通過(guò)指定method屬性值。如果不定義，那么method的值默認(rèn)是get。
get和post這兩種最常用的提交方式的區(qū)別：
1．
2． 地址欄中存放的數(shù)據(jù)是有限，所以get方式對(duì)提交的數(shù)據(jù)體積有限制。
post可以提交大體積數(shù)據(jù)。
3． 對(duì)提交數(shù)據(jù)的封裝方式不同：
get：將提交數(shù)據(jù)封裝到了http消息頭的第一行，請(qǐng)求行中。
post：將提交的數(shù)據(jù)封裝到消息頭后，在請(qǐng)求數(shù)據(jù)體中。
注意：通常表單使用post提交，因?yàn)榫幋a方便。
對(duì)于Tomcat服務(wù)器端，默認(rèn)的解碼方式是ISO8859-1,那么中文會(huì)出現(xiàn)亂碼。
通過(guò)post提交，可以使用request.setCharacterEncoding(“GBK”);來(lái)解決亂碼問(wèn)題，該方法只對(duì)數(shù)據(jù)體有效。
如果是get提交，request.setCharacterEncoding(“GBK”)該方法對(duì)亂碼解決不了，必須先進(jìn)行ISO8859-1編碼，然后在進(jìn)行GBK的解碼。這種方式雖然對(duì)post提交的亂碼也通用，但是麻煩。所以建立表單提交使用post。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form_05</title>
</head>
<body>
<!-- 表單標(biāo)簽
作用:可以直接將表單的內(nèi)容提交到服務(wù)器
常用作:登錄界面,注冊(cè)界面等
action:指定表單的提交服務(wù)器的地址
提交數(shù)據(jù)的方式:get,post
區(qū)別:get方式提交的數(shù)據(jù)會(huì)直接顯示在網(wǎng)址上,不安全
post:不會(huì)顯示在網(wǎng)址上,數(shù)據(jù)比較安全
method:設(shè)置提交數(shù)據(jù)的方式,默認(rèn)是get
br:換行標(biāo)簽
-->
<form action="" method="get">
<!-- 單行文本框 -->
姓名:<input type="text" name="user"/><br/>
密碼:<input type="password" name="pwd"/><br/>
<!-- 單選框: 通過(guò)name屬性設(shè)置分組 通過(guò)checked設(shè)置默認(rèn)選項(xiàng) -->
性別:<input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女<br/>
<!-- 復(fù)選框 -->
愛(ài)好:<input type="checkbox" name="hobby" />java <input type="checkbox" name="hobby" />大數(shù)據(jù) <input type="checkbox" name="hobby" />php<br/>
上傳文件:<input type="file"><br/>
<!--下拉列表 selected:默認(rèn)項(xiàng)-->
國(guó)籍:<select>
<option>中國(guó)</option>
<option>美國(guó)</option>
<option>朝鮮</option>
<option selected="selected">巴基斯坦</option>
</select><br/>
<!-- 普通按鈕 value是按鈕的名字 onclick:是點(diǎn)擊按鈕觸發(fā)的事件 alert(內(nèi)容):是一個(gè)提示的方法 -->
普通按鈕:<input type="button" value="普通按鈕" onclick="alert('哈哈')"/><br/>
<!-- 多行文本框 row:行數(shù) cols:列數(shù) -->
個(gè)人介紹:<textarea rows="4" cols="50" />我們?cè)撓抡n了</textarea>
<!-- 提交:專(zhuān)門(mén)用來(lái)提交當(dāng)前的表單信息 -->
<input type="submit" value="提交" /><br/>
<!-- 重置:將當(dāng)前表單的狀態(tài)恢復(fù)到最開(kāi)始的狀態(tài),不代表情況 -->
<input type="reset" value="重置" /><br/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form_table_06</title>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<th>姓名:</th>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<th>密碼:</th>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<th>性別:</th>
<td><input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女</td>
</tr>
<tr>
<th>愛(ài)好:</th>
<td><input type="checkbox" name="hobby" />java <input type="checkbox" name="hobby" />大數(shù)據(jù) <input type="checkbox" name="hobby" />php</td>
</tr>
<tr>
<th>上傳文件</th>
<td><input type="file"></td>
</tr>
<tr>
<th>普通按鈕</th>
<td><input type="button" value="普通按鈕" onclick="alert('哈哈')"/></td>
</tr>
<tr>
<th>國(guó)籍</th>
<td><select>
<option>中國(guó)</option>
<option>美國(guó)</option>
<option>朝鮮</option>
<option selected="selected">巴基斯坦</option>
</select></td>
</tr>
<tr>
<th>個(gè)人介紹</th>
<td><textarea rows="4" cols="50" />我們?cè)撓抡n了</textarea></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="提交" /><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行內(nèi)樣式:通過(guò)style直接給某個(gè)具體的標(biāo)簽設(shè)置樣式</title>
</head>
<body>
<!-- 通過(guò)style設(shè)置的是行內(nèi)樣式,缺點(diǎn):只能作用于當(dāng)前的標(biāo)簽,如果有一批擁有相同樣式的標(biāo)簽,需要寫(xiě)很多重復(fù)的代碼,造成冗余 -->
<p style="color:red;font-size:50px;" >
冰冰真漂亮
</p>
<p style="color:red;font-size:50px" >
晨晨開(kāi)心
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內(nèi)部樣式(內(nèi)嵌樣式)</title>
<!-- 實(shí)現(xiàn)內(nèi)嵌樣式的方式
html選擇器
class類(lèi)選擇器
id選擇器
缺點(diǎn):只能供當(dāng)前的文件使用,其他的文件不能使用
<style type="text/css" >這是是css的代碼</style>
-->
<!-- html選擇器
構(gòu)成:標(biāo)簽+{給這個(gè)標(biāo)簽設(shè)置的樣式}
-->
<style type="text/css" >
p{
font-size:50px;
color:red;
font-family:楷書(shū);
}
font{
font-size:30px;
color:green;
font-family:楷書(shū);
}
</style>
<!-- class類(lèi)選擇器
構(gòu)成:.+名字+{設(shè)置的樣式}
-->
<style type="text/css">
.myInput{
font-size:100px;
color:blue;
font-family:楷書(shū);
}
</style>
<!-- ID選擇器
構(gòu)成:#+id的名字+{設(shè)置的樣式}
缺點(diǎn):因?yàn)闃?biāo)簽本身有id屬性,當(dāng)與id選擇器同時(shí)使用的時(shí)候出現(xiàn)了兩個(gè)id,id選擇器有可能失效
-->
<style type="text/css">
#myname{
font-size:200px;
color:blue;
font-family:楷書(shū);
}
</style>
<!-- 偽類(lèi)(特殊類(lèi)型的樣式表):專(zhuān)門(mén)用于超鏈接
構(gòu)成:通過(guò)HOVER設(shè)置當(dāng)鼠標(biāo)放在超鏈接上,內(nèi)容的顯示狀態(tài)
text-decoration:劃線(xiàn) overline:上劃線(xiàn) underline:下劃線(xiàn)
-->
<style type="text/css">
a{
font-size:200px;
color:blue;
font-family:楷書(shū);
text-decoration:overline;
}
a:HOVER{
font-size:100px;
color:red;
font-family:楷書(shū);
text-decoration:underline;
}
</style>
</head>
<body>
<p>冰冰1</p>
<p>冰冰1</p>
<p>冰冰1</p>
<font>冰冰2</font>
<font class="myInput">冰冰3</font>
<font id="3" id="myname" >冰冰4</font>
<a href="css1.html">真熱</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式</title>
<!-- 獲取外部的css文件 -->
<link rel="stylesheet" type="text/css" href="..\..\..\..\css\mycss.css">
</head>
<body>
<P >該下課了,累了</P>
<!-- span:給幾個(gè)文字設(shè)置屬性 -->
<h1>一會(huì)兒芳姐給大家發(fā)紅包<span style="color:red;font-size:100px">1000</span>元</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div:層</title>
</head>
<body>
<!-- z-index:是z軸上的索引,值越大離我們?cè)浇?世界坐標(biāo):參考物是地球
本地坐標(biāo):參考物是自身
-->
<div id="layer1" style="background-color:red;width:100px;height:100px;top:50px;left:50px;z-index:3;position:absolute">
<img src="..\..\..\..\images\120.jpg" height=50px width=50px />美圖
<p>這里是第一層包含圖片,文字</p>
</div>
<div id="layer2" style="background-color:green;width:100px;height:100px;top:120px;left:120px;z-index:4;position:absolute">
<img src="..\..\..\..\images\bingbing.jpg" height=50px width=50px />美圖
<p>這里是第二層包含圖片,文字</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1:基本理解</title>
<!-- 注意:代碼的執(zhí)行順序是從上到下
<script type="text/javascript">
//第一種方式:這里寫(xiě)js的代碼--將js代碼內(nèi)嵌到html
//alert("這是提示方法"); // 直接出一個(gè)提示框
document.write("ok"); //在屏幕上寫(xiě)內(nèi)容
</script>
-->
<!-- 第二種使用外部鏈接 -->
<script type="text/javascript" src="..\..\..\..\js\myjs.js"></script>
<!-- js:javascript
分成三部分:ECMAScript:內(nèi)部包含js的基本語(yǔ)法,ECMA:是一個(gè)國(guó)際化的組織
BOM:Brower Object Model:處理的是與當(dāng)前頁(yè)面相關(guān)的各種配套功能
DOM:Document Object Model:處理的是當(dāng)前頁(yè)面的內(nèi)容
-->
</head>
<body>
<h2>哈哈</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2:基本語(yǔ)法</title>
<!--常量:變量
var:在js中他代表所有的數(shù)據(jù)類(lèi)型,因?yàn)閖s是弱語(yǔ)法,var后面變量的類(lèi)型由后面具體的值確定
注意:在js中使用變量前要先給變量賦值,如果不賦值直接使用會(huì)報(bào)undefind(未定義)錯(cuò)誤.因?yàn)檫@個(gè)變量沒(méi)有默認(rèn)值
window:是一個(gè)窗口類(lèi),在使用他的方法的時(shí)候,可以省略當(dāng)前的名字,直接使用方法
document:是當(dāng)前的頁(yè)面類(lèi),write方法是他內(nèi)部的方法,而document在調(diào)用方法的時(shí)候,前面的對(duì)象不能省略.
write方法:作用是將內(nèi)容寫(xiě)到頁(yè)面上
+:1.相加 2.字符串拼接
-->
<script type="text/javascript">
34;
2.3;
var a = 4;
var b = 3.4;
var c ;
c = 4;
alert(c);
var x;
x = prompt("淘寶網(wǎng)競(jìng)拍,請(qǐng)出一口價(jià)",1);//第一個(gè)參數(shù)是提示信息 第二個(gè)參數(shù)是輸入框內(nèi)的默認(rèn)值--1
document.write("拍賣(mài)價(jià)格:"+x);
document.write("恭喜你拍賣(mài)成功!");
alert("吃"+x+"斤飯");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js3:流程控制語(yǔ)句和函數(shù)</title>
<!-- 求兩個(gè)數(shù)的商
1.寫(xiě)對(duì)應(yīng)的標(biāo)簽
2.使用js的函數(shù)實(shí)現(xiàn)求商的過(guò)程
3.將得到的結(jié)果重新交給標(biāo)簽顯示
-->
<script type="text/javascript">
//全局變量:直接寫(xiě)在script內(nèi)部的變量
//特點(diǎn):可以省略var
//var d = 3;
d = 3;
//2.使用js的函數(shù)實(shí)現(xiàn)求商的過(guò)程
//函數(shù)的構(gòu)成:function 函數(shù)名(參數(shù)列表){函數(shù)體}
function div(){
//獲取三個(gè)標(biāo)簽對(duì)象
var input1 = document.getElementById("1");
//通過(guò)name調(diào)用
//var input11s - document.getElementsByName("number1");
//var input11 = input11s[0];
var input2 = document.getElementById("2");
var input3 = document.getElementById("3");
//獲取值-默認(rèn)都是字符串
var num1 = input1.value;
var num2 = input2.value;
//求商--轉(zhuǎn)換成浮點(diǎn)型計(jì)算
var shang = parseFloat(num1)/parseFloat(num2);
alert(shang);
//3.將得到的結(jié)果重新交給標(biāo)簽顯示
//將值傳給input3
input3.value = shang;
//注意點(diǎn):在js中兩個(gè)整數(shù)相除得到的是小數(shù),在java中得到的是整數(shù)
var x =3,y = 2;
var z = x/y;
document.write(z);
//流程控制語(yǔ)句
if(1){//在js中,0代表false 非零代表ture
}
var dd = 2;
switch(dd){
case 1:{
}
break;
case 2:{
}
break;
default:
break;
}
}
</script>
</head>
<body>
<!-- 1.寫(xiě)對(duì)應(yīng)的標(biāo)簽 -->
第一個(gè)數(shù):<input id="1" type="text" name="number1" value="11"/><br/>
第二個(gè)數(shù):<input id="2" type="text" name="number2" /><br/>
商:<input id="3" type="text" name="number3" />
<!-- onclick:是一個(gè)點(diǎn)擊事件,我們將點(diǎn)擊按鈕觸發(fā)事件的過(guò)程稱(chēng)為事件驅(qū)動(dòng) -->
<input type="button" value="求商" onclick="div()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- meta作用:
<meta> 元素可提供有關(guān)頁(yè)面的元信息（meta-information），比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta> 標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。<meta> 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱(chēng)/值對(duì)
注釋?zhuān)?lt;meta> 標(biāo)簽永遠(yuǎn)位于 head 元素內(nèi)部。
注釋?zhuān)涸獢?shù)據(jù)總是以名稱(chēng)/值的形式被成對(duì)傳遞的。
1.標(biāo)識(shí)了創(chuàng)作者和編輯軟件
2.描述了該文檔和它的關(guān)鍵詞
3.重定向
屬性:
name 屬性
name 屬性提供了名稱(chēng)/值對(duì)中的名稱(chēng)。HTML 和 XHTML 標(biāo)簽都沒(méi)有指定任何預(yù)先定義的 <meta> 名稱(chēng)。
通常情況下，您可以自由使用對(duì)自己和源文檔的讀者來(lái)說(shuō)富有意義的名稱(chēng)。
"keywords" 是一個(gè)經(jīng)常被用到的名稱(chēng)。它為文檔定義了一組關(guān)鍵字。某些搜索引擎在遇到這些關(guān)鍵字時(shí)，
會(huì)用這些關(guān)鍵字對(duì)文檔進(jìn)行分類(lèi)。
類(lèi)似這樣的 meta 標(biāo)簽可能對(duì)于進(jìn)入搜索引擎的索引有幫助：
如果沒(méi)有提供 name 屬性，那么名稱(chēng)/值對(duì)中的名稱(chēng)會(huì)采用 http-equiv 屬性的值。
http-equiv 屬性
http-equiv 屬性為名稱(chēng)/值對(duì)提供了名稱(chēng)。并指示服務(wù)器在發(fā)送實(shí)際的文檔之前先在要傳送給瀏覽器的 MIME
文檔頭部包含名稱(chēng)/值對(duì)。
當(dāng)服務(wù)器向?yàn)g覽器發(fā)送文檔時(shí)，會(huì)先發(fā)送許多名稱(chēng)/值對(duì)。雖然有些服務(wù)器會(huì)發(fā)送許多這種名稱(chēng)/值對(duì)，
但是所有服務(wù)器都至少要發(fā)送一個(gè)：content-type:text/html。這將告訴瀏覽器準(zhǔn)備接受一個(gè) HTML 文檔。
使用帶有 http-equiv 屬性的 <meta> 標(biāo)簽時(shí)，服務(wù)器將把名稱(chēng)/值對(duì)添加到發(fā)送給瀏覽器的內(nèi)容頭部。
對(duì)應(yīng)的值有:content-type expires refresh set-cookie
content 屬性
content 屬性提供了名稱(chēng)/值對(duì)中的值。該值可以是任何有效的字符串。
content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。
-->
<meta charset="UTF-8">
<!-- 通過(guò)meta標(biāo)簽設(shè)置頁(yè)面的刷新
根據(jù)下面的設(shè)置,當(dāng)前頁(yè)面會(huì)自動(dòng)每隔1秒刷新一次
-->
<meta http-equiv="refresh" content="1">
<title>美女自動(dòng)更新</title>
<script type="text/javascript">
document.write("<center><h2>這里是美女們,每一秒更新一次</h2></center>");
//Math.floor :向下取整 ceil:向上取整 round:四舍五入 random是取隨機(jī)數(shù),范圍[0,1)
var a = Math.round(Math.random()*8+1)
document.write("<center><img height=400px width=600px src=..\\..\\..\\..\\images\\"+a+".jpg></center>");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>買(mǎi)美女</title>
</head>
<body>
<!-- onMouseOver:是鼠標(biāo)移到圖片上面的時(shí)候觸發(fā) onMouseOut:是鼠標(biāo)離開(kāi)圖片的時(shí)候觸發(fā) -->
<img src="..\..\..\..\images\美女1.jpg" width=200px height=300px align="center" onMouseOver="src='..\\..\\..\\..\\images\\美女03.jpg'" onMouseOut="src='..\\..\\..\\..\\images\\美女1.jpg'">
低價(jià)拍賣(mài)美女
<h2>移過(guò)來(lái)看看我啊</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漂浮的圖片</title>
<script type="text/javascript">
//隨機(jī)生成層的top和left
function fun(){
document.getElementById("myDiv").style.left = Math.floor(Math.random()*500)+"px";
document.getElementById("myDiv").style.top = Math.floor(Math.random()*500)+"px";
//刷新函數(shù):定期刷新,第一個(gè)參數(shù)是:要執(zhí)行的功能 第二個(gè)參數(shù):刷新的時(shí)間
setInterval("fun()",50);
//只刷新一次
//setTimeout("fun()",100);
}
</script>
</head>
<!-- onload(函數(shù)):當(dāng)當(dāng)前頁(yè)面加載完成后,執(zhí)行后面的函數(shù),只執(zhí)行一次 -->
<body onload="fun()">
<div id="myDiv" style="position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:red;z-index:1">
<img src="..\..\..\..\images\1.jpg" width=100px height=100px>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)獲取onfocus釋放onblur焦點(diǎn)</title>
<style type="text/css">
input{
color:green;
font-size:20px;
background-color:red;
border:1px solid;
}
</style>
<script type="text/javascript">
//點(diǎn)擊
function myFocus(){
var value = document.getElementById("user").value;
if(value == "請(qǐng)注意格式10XXXXXXX")
document.getElementById("user").value = "";
}
//離開(kāi)
function myBlur(){
var value = document.getElementById("user").value;
if(value.substr(0,2) != "10"){
alert("輸入不符合規(guī)則");
//重新獲取焦點(diǎn)
document.getElementById("user").value.focus();
}
}
</script>
</head>
<body>
<!-- onfocus:當(dāng)鼠標(biāo)點(diǎn)擊輸入框觸發(fā)的事件 onblur:當(dāng)鼠標(biāo)離開(kāi)的時(shí)候觸發(fā)的事件 -->
卡號(hào):<input id="user" type="text" value="請(qǐng)注意格式10XXXXXXX" onfocus="myFocus()" onblur="myBlur()"><br><br>
密碼:<input type="text">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的數(shù)組</title>
<!-- typeof的使用:是js中一個(gè)函數(shù),把類(lèi)型信息當(dāng)字符串返回
可能返回的結(jié)果可能有六種:nuber,string,object,function,boolean,undefined
number:說(shuō)明是數(shù)字
string:字符串
object:說(shuō)明是Array,Null,對(duì)象
function:說(shuō)明是函數(shù)
boolean:說(shuō)明是布爾值
undefined:說(shuō)明是類(lèi)型未定義
typeof可以判斷一個(gè)變量是否存在
如:if(typeof a !="undefeined") 不要直接使用if(a) 這樣如果a不存在(未聲明),就會(huì)出錯(cuò)
注意:對(duì)于數(shù)組,Null等特殊的對(duì)象,會(huì)返回object,這是typeof的局限性
如果我們希望獲取某個(gè)變量(對(duì)象)是否是某個(gè)類(lèi)的實(shí)例可以使用instanceof
-->
<script type="text/javascript">
//注意點(diǎn):1.js中的數(shù)組是動(dòng)態(tài)的,可以直接添加元素
//2.可以同時(shí)存儲(chǔ)多個(gè)不同類(lèi)型的變量
//第一種創(chuàng)建方法 10沒(méi)有太大的意義
var arr1 = new Array(2);
arr1[0] = 2;
arr1[1] = 3;
arr1[2] = 6;
arr1[3] = true;
for(var i=0;i<arr1.length;i++){
document.write("元素:"+arr1[i]+"<br>");
}
//alert(typeof arr1); //object
//alert(typeof Array); //function
//alert(typeof 1);//number
//alert(arr1 instanceof Array);
//第二種
var arr2 = [];
//第三種
var arr3 = new Array();
//第四種
var arr4 = Array();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成隨機(jī)的驗(yàn)證碼，用戶(hù)輸入驗(yàn)證碼，驗(yàn)證用戶(hù)輸入的是否正確</title>
<script type="text/javascript">
var codes = "";
function setCodes(){
var arr = [")",3,"@","名",6,"&"];
//var codes = "";
if(codes != "")
codes="";
for(var i=0;i<4;i++){
var a = arr[Math.floor(Math.random()*arr.length)];
codes =codes+a;
}
//用來(lái)顯示添加到層上的內(nèi)容
document.getElementById("mydiv").innerHTML = codes;
}
function checkCodes(){
var bb = document.getElementById("user").value;
if(bb != codes){
alert("驗(yàn)證碼不正確");
document.getElementById("user").value = "";
document.getElementById("user").focus();
//刷新驗(yàn)證碼
setCodes();
}
}
</script>
</head>
<body onload="setCodes()">
輸入驗(yàn)證碼<input id="user" type="text" >
<div id="mydiv" style="display:inline; border:1px solid;" onclick="setCodes()"></div><br>
<input type="button" value="確定" onclick="checkCodes()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用戶(hù)在文本域中輸入多個(gè)字符，當(dāng)點(diǎn)擊按鈕時(shí)分別統(tǒng)計(jì)字符串中大寫(xiě)字母，小寫(xiě)字母，
數(shù)字以及其他字符的個(gè)數(shù)并把統(tǒng)計(jì)結(jié)果顯示在div中</title>
<script type="text/javascript">
//統(tǒng)計(jì)個(gè)數(shù)
function check(){
var str = document.getElementById("textarea").value;
var a=b=c=0;
for(var i=0;i<str.length;i++){
var tt = str.charAt(i);
//大寫(xiě)字母
if(tt>="A" && tt<="Z"){
a++;
}else if(tt>="a" && tt<="z"){//小寫(xiě)字母
b++;
}else if(tt>="0" && tt<="9"){//數(shù)字
c++;
}
}
document.getElementById("div").innerHTML = "一共有大寫(xiě)字母:"+a+"小寫(xiě)字母:"+b+"數(shù)字:"+c+"其他字符:"+(str.length-a-b-c);
}
//統(tǒng)計(jì)字符個(gè)數(shù)
function counts(){
//設(shè)置可以輸入的最大的值---100
if(document.getElementById("textarea").value.length>100){
document.getElementById("textarea").value = document.getElementById("textarea").value.substr(0,100);
}
var length = document.getElementById("textarea").value.length;
var sheng = 100-length;
document.getElementById("span").innerHTML = "還剩下("+sheng+")個(gè)字";
if(sheng == 0)
document.getElementById("span").style.color="red";
}
</script>
</head>
<body>
<textarea id="textarea" rows="5" cols="10" onkeyup="counts()"></textarea>
<span id="span"style="color:blue;font-size:20px">還剩下(100)個(gè)字</span>
<input type="button" value="統(tǒng)計(jì)" onclick="check()">
<div id="div" style="position:absolute;left:50px;top:100px;width:200px;height:200px;z-index:1;background-color:gray"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標(biāo)簽與js分離</title>
<script type="text/javascript">
//當(dāng)頁(yè)面都加載完成之后,在執(zhí)行它
window.onload = function(){
button = document.getElementById("btn");
button.onclick = function (){
alert("hehe");
}
}
//因?yàn)檫@樣直接調(diào)用,button對(duì)象還沒(méi)有創(chuàng)建
<!-- var button = document.getElementById("btn");
button.onclick = function (){
doucment.write("gggod");
}
-->
//原來(lái)的方式
//function fun(){
// doucment.write("gggod");
//}
</script>
</head>
<body>
<input id="btn" type="button" value="確定" onclick="fun()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的工具類(lèi)</title>
<!--創(chuàng)建.js文件作為工具類(lèi),將要使用的方法寫(xiě)在js文件里面,
注意:兩個(gè)函數(shù)之間要用,隔開(kāi)
格式: var Util(名字) = {
//函數(shù)1
函數(shù)名:function(參數(shù)){函數(shù)體},
//函數(shù)2
函數(shù)名:function(參數(shù)){函數(shù)體},
...
} -->
<script src="..\..\..\..\js\Util.js"></script>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
//alert("這里是test");
Util.test();
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
var year = 2014;
var isTrue = Util.isLeapYear(year);
//if((year%4==0 && year%100!= 0) || (year%400==0)){
// alert("這是閏年");
//}else{
// alert("這不是閏年");
//}
alert(isTrue);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="點(diǎn)我">
<input id="btn2" type="button" value="判斷是否是閏年">
</body>
</html>
聯(lián)系客服
