0.B/S結(jié)構(gòu) ?瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進(jìn)行統(tǒng)一,系統(tǒng)功能實(shí)現(xiàn)集中到服務(wù)器上.
優(yōu)點(diǎn):可以在任何地方進(jìn)行操作而不用安裝任何專門的軟件,有上網(wǎng)終端客戶端零維護(hù).
HTML (超文本標(biāo)記語言)
超文本標(biāo)記語言是標(biāo)記語言SGML下的一個應(yīng)用,一種規(guī)范,標(biāo)準(zhǔn). ?網(wǎng)頁本身就是一個文本文件與我們?nèi)粘Ｊ褂玫膐ffice并無大致,只不過網(wǎng)頁文件通過標(biāo)記符號來顯示網(wǎng)頁中的各個部分;
瀏覽器按順序閱讀解析網(wǎng)頁文件,然后根據(jù)標(biāo)記符解釋與顯示其標(biāo)記的內(nèi)容.不同瀏覽器需考慮兼容性;
超文本:通俗一點(diǎn)就是說超越一般的文本元素,可以包含 圖片 鏈接 音樂 程序等非文字元素
靜態(tài)網(wǎng)頁擴(kuò)展名:.html ?或htm
動態(tài)網(wǎng)頁文件擴(kuò)展名:.php .jsp .net等
超文本標(biāo)記語言包括頭(提供關(guān)于網(wǎng)頁的信息),主體(提供網(wǎng)頁的具體內(nèi)容);
XHTML:可擴(kuò)展超文本標(biāo)記語言;
? ? ? 1.HTML結(jié)構(gòu):
<html> ??
? ? ? ? ? ?html文件聲明開始,告訴瀏覽器是html文件
<head>
? ? ? ? ? ? ?<title>網(wǎng)頁標(biāo)題</title>
<head>
<body> ? ?
? ? ? ? ? ? ? 文件體
</body>
</html>HTML文件聲明結(jié)尾
<html></html>文檔的開始結(jié)束標(biāo)記,告訴瀏覽器是什么html文件
<head></head>文檔的開頭部分 內(nèi)容不會在瀏覽器文檔窗口顯示,但是跟SEO優(yōu)化搜索相關(guān)
<title></title>定義標(biāo)題,在瀏覽器標(biāo)題欄進(jìn)行顯示
<body></body>之間就是網(wǎng)頁的主體內(nèi)容,body中元素包含網(wǎng)頁中的所有顯示內(nèi)容(比如超文件,超鏈接,圖像表格,列表等等).
2.html標(biāo)簽
html標(biāo)簽 是尖括號包圍的關(guān)鍵詞,通常成對出現(xiàn)(比如<div>和></div> <html>和</html>分別是開始與結(jié)束標(biāo)簽),成對出現(xiàn)的內(nèi)容在中間
也有單獨(dú)呈現(xiàn)的標(biāo)簽(單邊標(biāo)記),如<br/>,<hr/>,和<img src = "images/1.jpg"/>等,單獨(dú)呈現(xiàn)的則在標(biāo)簽屬性中進(jìn)行賦值 ? ,如本行的img這個標(biāo)簽
標(biāo)簽可以有若干個屬性,也可以不帶屬性.如<head>元素就不帶任何屬性
標(biāo)簽語法:
<標(biāo)簽名 ?屬性1 = "屬性值1" 屬性2 = "屬性值2"...> 內(nèi)容部分</標(biāo)簽名>
<標(biāo)簽名? 屬性1 = "屬性值1" 屬性2 = "屬性值2".../>
3.html標(biāo)簽編寫規(guī)則
不區(qū)分大小寫
大部分標(biāo)簽有結(jié)束標(biāo)記
標(biāo)簽可以嵌套,但是要注意標(biāo)記的位置
標(biāo)簽可以有內(nèi)容或者沒有內(nèi)容
標(biāo)簽的屬性可選,當(dāng)標(biāo)簽出現(xiàn)屬性時,必須為其賦值 ? 賦值賦值必須包含在尖括號"<>"內(nèi)部
屬性與標(biāo)記之間,各屬性之間需要以空格進(jìn)行隔開 ? ?
屬性值需要以雙引號括起來
4.html標(biāo)簽------<body>屬性
?text ?網(wǎng)頁文本顏色
bgcolor ? ? ?設(shè)定網(wǎng)頁背景色,如:bicolor = "#ff0000"
background ? 設(shè)定網(wǎng)頁背景圖片,如:background = "bg.gif"
例: ? ?<body bgcolor = "#CCCCCC"></body>
<b></b>加粗效果
<i></i>斜體效果
<u></u>字符加下劃線
<sub></sub>將文本定義為下標(biāo)
<sup></sup>將文本定義為上標(biāo)
<font></font>指定字符的字體,大小,顏色等格式
5.代碼編輯器
代碼編輯器分為兩類:一類是IDE(集成開發(fā)環(huán)境),功能強(qiáng)大,語法高亮顯示,自動縮進(jìn),語法提示,自動完成,版本控制等
常用工具有:
EditPlus Text editor:功能強(qiáng)大,小巧,占用系統(tǒng)資源少等特點(diǎn),無代碼自動補(bǔ)齊功能
UltraEdit :與EditPlus類似,也是一套功能強(qiáng)大的文本編輯器
Dreamweaver:建立web站點(diǎn)與應(yīng)用程序?qū)I(yè)工具,將布局功能開發(fā)工具,代碼編輯組合在一起
Notepad++:小巧且有效率的文本編輯器
Zend Studio:屢獲大獎的專業(yè)PHP集成開發(fā)環(huán)境,具備功能強(qiáng)大的專業(yè)編輯工具與調(diào)試工具;
EditPlus使用:可以通過設(shè)置用戶工具將其作為C java PHP等語言的一個簡單的IDE
參數(shù)設(shè)置:
工具------參數(shù)
字體設(shè)置(字號,字體,行高)
顏色設(shè)置(前景,背景)
語法顏色
布局:更改目當(dāng)?shù)奈恢?/p>
快捷鍵使用同電腦系統(tǒng)本身快捷鍵;
6.html顏色的介紹
純單詞表示:英文單詞即可?
10進(jìn)制表示: rgb(255,0,0)
16進(jìn)制表示: #FF0000,#0000FF等
RGB色彩模式:三原色也叫加色模式,數(shù)字視頻中對RGB三基色進(jìn)行8位編碼就構(gòu)成了1678萬種顏色(RGB各有256級亮度),也叫真彩色,所有的設(shè)備都采用的是RGB色彩模式
注意事項(xiàng):網(wǎng)頁中推薦使用十六進(jìn)制的顏色,因?yàn)槭M(jìn)制的顏色,在CSS中可以用,但是在<font>標(biāo)記中不起作用;(十進(jìn)制的顏色在不同瀏覽器顯示效果不一致);
7.html標(biāo)簽 --- 排版標(biāo)簽
<p></p>用來創(chuàng)建一個段落,該元素在自動在其后創(chuàng)建一些空白.常用屬性align:定義文本的對齊方式,屬性可取值:left,center,right;
<br>產(chǎn)生換行,不需要結(jié)束標(biāo)記
<hr>在當(dāng)前位置繪制一條水平線.標(biāo)簽屬性有align:對齊方式,可選值為:left,center,right
? ? ? ? size:線條粗細(xì),取值為數(shù)字,單位為像素 ? width:線條寬度,取值為數(shù)字,單位為像素
? ? ? ? color:線條顏色 ? noshade:規(guī)定水平線的顏色呈現(xiàn)為純色,而不是陰影的顏色;
<pre></pre>預(yù)排版標(biāo)記<pre>將保留文本中空白(連續(xù)的空白)與換行符的信息.常用的屬性width:定義文本塊的最大字符數(shù)
<h1></h1>.......<h6></h6> ? ? HTML提供6種效果標(biāo)簽,<h1>字體最大.常用屬性align:對齊方式為left,center,right;
<div></div> ? ?<div>只是一個塊級元素,并無實(shí)際的意義.主要通過CSS樣式為其賦予不同的表現(xiàn);
<span></span> ? ?span表示了行內(nèi)元素,并無實(shí)際意義,主要通過CSS樣式為其賦予不同的表現(xiàn);
塊級元素與行內(nèi)元素的區(qū)別:
塊元素就是另起一行開始渲染的元素,行內(nèi)元素就不需要另起一行;
如果單獨(dú)在頁面中插入這兩個元素,不會對頁面產(chǎn)生任何影響.這兩個是專門為定義CSS樣式而生的;?
8.字符實(shí)體(這里有些不明白是什么???) ? ?特殊符號
空格 ? 
> ? ? ?>
< ? ? <
& ? ?&
￥ ? ? ?¥
版權(quán) ? ? ©
注冊 ? ? ®
× ? ? ? ?×
÷ ? ? ? ?÷
9.html標(biāo)記 ? ----列表
<ul>
? ? ? ? <li>內(nèi)容</li>
? ? ? ?<li>內(nèi)容</li>
</ul>
type屬性:disc 實(shí)心圓點(diǎn),circle空心圓圈,square實(shí)心方塊
<ol>
<li>內(nèi)容</li>
<li>內(nèi)容</li>
</ol>
屬性:type編號類型,默認(rèn)為整數(shù).可選(1,A,a,I,i) ? 屬性:start起始編號,默認(rèn)為1,即由最小編號開始;
注意:如果有序列嵌套,只能嵌套在某一個<li>的內(nèi)部
<dl>
<dt>定義術(shù)語</dt>
<dd>定義說明</dd>
</dl>
dl(definition list )用來創(chuàng)建定義列表,定義列表不使用表項(xiàng)元素li,
這種列表中的項(xiàng)由定義術(shù)語dt(definition term)與定義說明dd(definition description)組成.dl是塊組元素,必須至少包含一個dt或者一個dd,dl的子元素只能是dt和dd;
列表又分為無序列表與有序列表,無序列表前面以.或句號開頭,有序列表以數(shù)字 ?字母 ?阿拉伯?dāng)?shù)字,大寫阿拉伯?dāng)?shù)字組成;
定義列表:定義列表相當(dāng)于詞條解釋說明;
10.定義列表
HTML概念:"超文本"就是指頁面內(nèi)可以包含圖片,鏈接,甚至音樂,程序等非文字元素.超文本標(biāo)記語言的結(jié)構(gòu)包括頭部分(head),和主體部分(Body).其中頭部(head)提供關(guān)于網(wǎng)頁的信息,主體(body)部分提供網(wǎng)頁的具體內(nèi)容.
CSS層疊樣式:
CSS目前最新版本為CSS3,能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言.相對于傳統(tǒng)的HTML的表現(xiàn)而言,CSS能夠?qū)W(wǎng)頁中對象的位置排版進(jìn)行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網(wǎng)頁對象與模型樣式編輯的能力,并能夠進(jìn)行初步的交互設(shè)計,是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計語言.
JavaScript腳本程序
javaScript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的面向?qū)ο蟮膭討B(tài)類型的區(qū)分大小寫的客戶端腳本語言,主要目的是為了解決服務(wù)器端語言.比如Perl,遺留的速度問題,為客戶提供更流暢的瀏覽效果.當(dāng)歸服務(wù)端需要對數(shù)據(jù)進(jìn)行驗(yàn)證,由于網(wǎng)絡(luò)速度相當(dāng)緩慢,只有28.8kbs,驗(yàn)證步驟浪費(fèi)時間太多.于是Netscape的瀏覽器的Navigator加入了Javascript,提供了數(shù)據(jù)驗(yàn)證的基本功能.
11.小結(jié)
HTML結(jié)構(gòu)標(biāo)記:
基本標(biāo)記: b i ?u sup sub
排版標(biāo)記 ?br p div span h1~h6 hr
字體實(shí)例 ?> ? < ? & ? &ren
網(wǎng)頁顏色 ? 顏色單詞 ?red blue ? orange ?yellow ?green
十六進(jìn)制 ?#ff0000 ?#00ff00 ?#0000ff
十進(jìn)制:rgb (255,0,0) ? rgb(0,255,0) ?rgb(0,0,255)
Css層疊樣式表
字體標(biāo)記: font-size ?font-family ? font-style
定位標(biāo)記:absolute ?relative ?fixed static
浮動標(biāo)記:float ?left ?float ?right
JavaScript 客戶端腳本語言
PHP服務(wù)器編程語言
MySql數(shù)據(jù)庫管理系統(tǒng)
Apache服務(wù)器軟件
12.進(jìn)制轉(zhuǎn)換
十進(jìn)制轉(zhuǎn)成二進(jìn)制
? ? ? ? ? ? ?整數(shù)部分:除2取余法.即每次將整數(shù)部分除以2,余數(shù)為該位權(quán)上的數(shù),而商繼續(xù)除以2,余數(shù)又為上一位權(quán)上的數(shù),直到商為0為止,最后讀數(shù)的時候,從最后一個余數(shù)讀起,一直到最前面的一個余數(shù).
? ? ? ? ? ? ?小數(shù)部分:乘2取整法,即將小數(shù)部分乘以2,然后取整數(shù)部分,剩下的小數(shù)部分乘以2,一直取到小數(shù)部分為零為止,如果除不盡取一定的精度即可;?
二進(jìn)制數(shù)轉(zhuǎn)化成十進(jìn)制
不分整數(shù)部分與小數(shù)部分 方法:按權(quán)相加法,即將二進(jìn)制每位上的數(shù)乘以權(quán)(每位上的指數(shù)的常數(shù)),然后相加之和即是十進(jìn)制數(shù).
例如:將二進(jìn)制數(shù)101.101轉(zhuǎn)成二進(jìn)制
分析:1*2^2+0*2^1+1*2^0+1*2^-1 +0*2^-2+1*2^-3 = 5.625(10);
13.<marquee>滾動文字
direction ?設(shè)置文本的滾動方向,可取上下左右
behavior 滾動方式,可取值alternate彈動,scroll滾動,slide一次
bgColor 設(shè)置滾動區(qū)域的背景顏色.
height 設(shè)置滾動區(qū)域的高度,單位像素或百分比
width ?設(shè)置滾動區(qū)域的寬度,單位像素或百分比
loop ?設(shè)置文本滾動循環(huán)次數(shù),-1無限循環(huán)
scrollAmount ? 設(shè)置每次移動和距離,數(shù)值越小,滾動越慢,默認(rèn)6px
scrollDelay 決定文本兩次移動之間的間隔時間,單位為微稱,時間越小,本移動頻率越高
hspace ?本頁頁邊距
Vspace垂直頁邊距
14.<meta>標(biāo)簽
meta介紹
-<meta>元素可提供有關(guān)頁面的元信息(meta-infomation),比如針對搜索引擎與更新頻度的描述與關(guān)鍵詞;
-<meta>標(biāo)簽位于文檔的頭部,不包含任何內(nèi)容.
-<meta>標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對.
-<meta>提代的信息是用戶不可見的
-<meta>沒有結(jié)束標(biāo)記
Meta標(biāo)記的屬性 ? ? ?-http-equiv屬性:相當(dāng)于http的文件頭作用,它可以向?yàn)g覽器傳回一些有用的信息,以幫助正確的顯示網(wǎng)頁內(nèi)容,與之對應(yīng)的屬性值為content,content中的內(nèi)容其實(shí)就是各個參數(shù)的變理值.
-name屬性,主要用于描述網(wǎng)頁,與之對應(yīng)的屬性值為content,content中的內(nèi)容主要是便 于搜索引擎機(jī)器人查找信息與分類信息用的;
content-type ?功能:設(shè)定當(dāng)前頁面使用的字符集與語言,用法: ? <meta http-equid = "content-type" content = "text/html; ?charset = gb2312">
content-language ?顯示語言的設(shè)定,用法 ?<meta http-equid = "Content-Language" content = "zh-cn"/>
refresh刷新 ? 功能自動刷新,并向指向新的頁面,用法: ? <meta http-equid = "refresh"content = "2";url = http://itcast.cn/">
keywords ?網(wǎng)頁關(guān)鍵字,告訴搜索引擎網(wǎng)頁的關(guān)鍵字是什么,用法: ? <meta name = "keywords" content = "關(guān)鍵字,關(guān)鍵字...">
description網(wǎng)間內(nèi)容描述 ?用法<meta name = "description" content = "網(wǎng)頁內(nèi)容描述信息"> ? ? ? ? ? ?描述網(wǎng)頁規(guī)則如下:
網(wǎng)頁描述為自然語言而不是羅列關(guān)鍵詞 ?與keyword設(shè)計正好相反
盡可能準(zhǔn)確地描述網(wǎng)頁的核心內(nèi)容,通常為網(wǎng)頁內(nèi)容的摘要信息,也就是希望搜索引擎在檢索結(jié)果中展示的摘要信息
網(wǎng)頁描述的文字不必太多,一般不超過搜索引擎檢索結(jié)查摘要信息的最多字?jǐn)?shù)(100字?jǐn)?shù)以內(nèi))
robots機(jī)器人向?qū)?告訴搜索機(jī)器人那些頁面需要進(jìn)行搜索,那些頁面不需要進(jìn)行搜索,content的參數(shù)有all,none,index,no index,follow,nofollow ?默認(rèn)是all
index代表文件將被檢索,follow代表頁面上的鏈接可以被查詢 ?舉例: ?<meta name = "robots" content = "none">
author作者 ?說明標(biāo)注網(wǎng)頁的作者 用法<meta name = "author" content ="傳智播客">
Copyright版權(quán)信息 ? 功能:說明網(wǎng)站版權(quán)信息 ?用法:<meta name = "copyright" ?content = "信息參數(shù)">
15.HTML相關(guān) ?SGML XHTML
SGML是所有電子文檔標(biāo)記語言的起源,為語法置標(biāo)提供了異常強(qiáng)大的工具,同時具有極好的擴(kuò)展性,因此在數(shù)據(jù)分類與索引中非常有用.萬維網(wǎng)發(fā)明之前標(biāo)準(zhǔn)通用標(biāo)記語言就已存在;
特點(diǎn):非常嚴(yán)謹(jǐn)?shù)奈募枋龇?導(dǎo)致過于龐大復(fù)雜,難以學(xué)習(xí)與理解,進(jìn)而影響其推廣與應(yīng)用
關(guān)系圖:
SGML標(biāo)準(zhǔn)通用標(biāo)注語言---應(yīng)用--->HTML超文本標(biāo)注語言---取代--->XHTML可擴(kuò)展HTML
XHTML ?編寫規(guī)范
XHTML元素必須被關(guān)閉,小寫, ? 文檔必須擁有一個根元素 ? 屬性名秘須小寫 ? 屬性值必須加引號且不能簡寫 ? ?文件必須有DTD文檔類型定義 ? ??
用ID屬性代碼name屬性(除表單外)
XHTML----DTD文檔類型定義
是關(guān)于標(biāo)記符語法的規(guī)則.是xml規(guī)則的一部分,是xml文件驗(yàn)證機(jī)制.DTD文件是一個ASCII文本文件,后綴為.dtd
XHTML三種文檔的定義
XHTML 1.0 Strict ?在此情況下使用:需要干凈的標(biāo)記,避免表現(xiàn)上的混亂.請與層疊樣式配合使用
XHTML 1.0 Transitional ?在此情況下,可以使用HTML的表現(xiàn)特性.
XHTML 1.0 Frameset ?在此情況下使用:需要使用HTML框架將瀏覽窗口分割為兩部分或者更多框架時.
16.html標(biāo)簽 ?<a>超級鏈接
指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系,這個目標(biāo)可以是另一個網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應(yīng)用程序; ?通俗來說就是我們一般使用到的超鏈接;
按使用對象不同分為:文本,圖像,E-mail,錨點(diǎn),多媒體文件,空 ? 鏈接等;
按url的不同:絕對url鏈接,網(wǎng)站的完整路徑 ? http://www.sina.com.cn
相對url鏈接:本站點(diǎn)的不同頁面上去
書簽:鏈接到不同網(wǎng)頁的不同部分;
超鏈接的語法: ? ?<a 屬性 = "屬性值">標(biāo)簽內(nèi)容</a>;
說明:a元素是一個行內(nèi)元素,但不能相互嵌套.
屬性 ? ? ? ? ?值 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?含義
href ? ? ?URL ? ?鏈接的目標(biāo)url
name ? name名 ? 為當(dāng)前錨定位設(shè)置一個名稱,以便它能夠被其他鏈接所定位;
target ? ?_blank在新窗口中打開目標(biāo)網(wǎng)頁 ? ? ? 定義href指向的頁面打開位置
? ? ? ? ? ? ? _self在當(dāng)前窗口中打開目標(biāo)網(wǎng)頁
? ? ? ? ? ? ? _top整個瀏覽器窗口
? ? ? ? ? ? ? ?_parent多框架結(jié)構(gòu)中父窗口
URL由4部分組成:1.為協(xié)議: http:// ?ftp://等 ? 2.為站點(diǎn)地址:可以是域名或者是IP地址 3.為頁面在站點(diǎn)中的目錄:stu ? 4.為頁面名稱 例:index.html ?各部分之間使"/"符號隔開;
herf屬性指定目標(biāo)網(wǎng)頁地址,該地址可以有幾種類型:
鏈接遠(yuǎn)程目標(biāo) ?用法: ?<a >新浪網(wǎng)></a> ? ? ?<a >騰訊網(wǎng)</a>
鏈接本地頁面:可通過相對或者絕對路徑 ? 1.相對路徑:<a href = "include/login.html">登錄頁面</a> ? ? ? ? ?2.絕對路徑:<a href ="/html/123.html">國內(nèi)新聞</a>
鏈接到郵箱: ? <a href = "mailto:976296751@qq.com">給我發(fā)郵件</a>
下載文件: ? ?<a herf = "/download/winRAR.rar">下載WinRAR</a>
<a href = "download/office2007.rar">下載offfice2007</a>
錨點(diǎn)鏈接同一頁面不同位置 ?1.當(dāng)網(wǎng)頁很長時,可以使用錨點(diǎn)在頁面中定義一些點(diǎn),通過超鏈接可以直接跳到錨點(diǎn) ?2.定義錨點(diǎn): <a name = "top">文檔頂部</a> 3.鏈接到錨點(diǎn): <a href = "#top">返回頂部</a>
17.html標(biāo)簽 <img>圖像
屬性與含義 ? ? ? ? ? ? ? ? ? ? ? ? 值
scr 規(guī)定圖像的URl值 ? ? ? ? 圖像URL
alt 規(guī)定圖像的替代文本 ? ?字符串
align 規(guī)定如何根據(jù)周圍的文本來排列圖像 ? ?top/bottom/middle/left/right等
width 圖像的寬度 ? ? ? ? px|%
height 圖像的高度 ? ? ? ?px|%
border 定義圖像的邊框粗細(xì) ?px
user map定義作為客戶端圖像映射的一幅圖像 ? URl
注意:如果不使用width與height屬性,圖像保持原始大小,如果只指定其中某一個屬性,則另一個屬性按比例進(jìn)行縮放; ? ?圖像添加鏈接:<a herf = "#"><img scr = "1.jpa"></a>
18.html標(biāo)簽 ?<map>圖像映射
圖像映射通過<map></map>標(biāo)記將所有熱點(diǎn)聯(lián)合為一個整體并命 名該名稱指定給<img>標(biāo)記的username屬性將圖像與熱點(diǎn)連接起來,與<area></area>標(biāo)記定義一個熱點(diǎn)的具體位置與目標(biāo)鏈接;
<img src = "1.jpg" username = "#Map"/>
<map id = "Map" name = "Map">
? ? ? ? ? ? ? <area shape = "熱點(diǎn)形狀" ? coords = "坐標(biāo)" ?href = "鏈接" ?alt = "替代文字"/>
</map>
<area>屬性
-shape:熱點(diǎn)區(qū)域的形狀,可選值rect矩形,circle圓形,polygon多邊形
?coords:熱點(diǎn)區(qū)域的位置坐標(biāo),根據(jù)shape的不同而不同.1.對于rect,坐標(biāo)為 (x1,y1,x2,y2),(x1,y1)矩形左上角,(x2,y2)右下角 2.對于circle 坐標(biāo)(x,y,r) ?(x,y)圓心坐標(biāo) ?r為半徑 ? 3.對于polygon ?坐標(biāo)為(x1,y1,x2,y2,...xn,yn), (xn,yn)為第n個頂點(diǎn)坐標(biāo)
-href:熱點(diǎn)鏈接的目標(biāo)地址 ?
-alt:替代文本
<img src = "1.jpg" user map = "#Map"/>
<map id = "Map" name = "Map">
? ? ? ? <area shape = "rect" coords = "2,2,92,40"href= "#" alt = ""/>
? ? ? ? <area shape = "rect" coords = "60,60,92,40"href= "#" alt = ""/>
</map>
19.html標(biāo)簽 ?<embed></embed>標(biāo)簽 ? ? ? 用來在網(wǎng)頁中嵌入插件來播放多媒體文本
src 指定多媒體文件的URL
width/height 指定嵌入對象的寬度/高度
type ?定義嵌入Flash的MiME類型
20.html標(biāo)簽 ?<table>標(biāo)簽
表格概念是一個二維數(shù)據(jù)空間,一個表格由若干行組成,一行又由若干單元格組成,單元格里可以包含文字,列表,圖案,表單,數(shù)字符號,預(yù)置文本與其它表格等內(nèi)容 ??
作用:顯示表格類數(shù)據(jù) ?表格類數(shù)據(jù)是指按行和列組織的數(shù)據(jù)
表格的基本結(jié)構(gòu):
<table>
? ?<tr>
? ? ? <td>內(nèi)容</td>
? ? ? <td>內(nèi)容</td>
? ?</tr>
</table>
<table>的屬性
width height align bicolor border border color ?
background ?URI ? 指定表格背景圖案,URI指向圖案文件的位置
cellpading 長度值 ?指定單元格里面的內(nèi)容和單元格邊框之間的間隔,即老地方充間距,屬性值可為整數(shù)的像素值或百分比值
cellspacing 長度值 ?指定單元格里面的內(nèi)容與單元格之間的間隔,即填充間距,屬性值可為整數(shù)的像素值或百分比值
表格的子標(biāo)簽 ? <tr>標(biāo)簽
屬性 ?值 ? 含義
align ? ? ? left,right,canter ? ? ? ?定義表格行的內(nèi)容水平對齊方式
valuing ? Top middle bottom ? 定義表格行的內(nèi)容垂直對齊方式
bgcolor ? 顏色值 ? ?定義表格行的背景顏色
表格的子標(biāo)簽 ?<th>與<td>的屬性
<th></th>表格標(biāo)題單元格:加粗居中顯示
<td></td>表格數(shù)據(jù)單元格
width/height ? ?值 %|pixels ?規(guī)定單元格的寬度/高度不支持使用CSS進(jìn)行代替;
align/valign ? 英文的 ? 左居中右/頂中底 ? ? 規(guī)定單元格的水平/垂直排列方式
bgcolor 顏色值 ?規(guī)定背景顏色.不支持的就用CSS
background ? ?URI ? ?定義背景圖案
rowspan/colspan ? ?正整數(shù) ? 設(shè)置當(dāng)前單元格在垂直/水平方向上合并單元格的個數(shù);
表格的子標(biāo)簽 ? <caption>表格標(biāo)題
<capiton align = "left或center或right">內(nèi)容</caption>
用來指定表格的標(biāo)題或說明,為表格子元素且只能在table元素內(nèi),出現(xiàn)在緊隨table始標(biāo)簽之后,一個table只能有一個 ? ? ? 這個標(biāo)簽的終止標(biāo)簽不可省略
21.<form>表單元素
表單是html元素中較為復(fù)雜的部分,往往與腳本,動態(tài)頁面,數(shù)據(jù)處理等功能相結(jié)合,制作動態(tài)網(wǎng)站很重要的內(nèi)容. 表單一般用來收集用戶的輸入信息
工作原理:
1.訪問者瀏覽有表單的網(wǎng)頁時,可填寫必需的信息,然后按某個按鈕進(jìn)行提交
2.這些信息通過 網(wǎng)絡(luò)傳到服務(wù)器上面
3.服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理,如果有錯誤就會返回錯誤信息,并要求改正錯誤
4.當(dāng)數(shù)據(jù)完整無誤后,服務(wù)器反饋一個輸入完成的信息
例 ?<form id = "form1" name = "form1" method = "post" action = "">
賬號:<input type = "text" name = "account"/><br/>
密碼:<input type = "password" name = "password"/></br>
<input type = "submit" name = "submit" value = "提交"/>
<input name = "reset" type = "reset" id = "reset" value = "重置"/>
</form>
<form>表單標(biāo)記屬性
屬性 ? ? ? 值 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?含義
name? name名? 表單的識別名稱,用于樣式設(shè)置與腳 本訪問.為了向上兼容而存在,實(shí)際開發(fā)過程中一般使用id屬性來代替.該屬性僅在Transitional和Frameset的DTD中使用.
action ? ?URL ? ?指定一個表單處理目標(biāo)的URL,表單的數(shù)據(jù)將被提交到該URL地址的處理程序.如果該屬性值為空,則提交到文檔本身.該屬性值可以為絕對地址,相對地址,文檔片段,甚至是腳本代碼
method ? get|post ? 將表單數(shù)據(jù)提交到http服務(wù)順的方法,可能值有兩個:post 與get
enctype MIME類型 ?指定表單數(shù)據(jù)傳送類型,此屬性只有在method屬性設(shè)置為post時才有效.默認(rèn)值為application/x-www-form-urlencoded.如果表單包含用于文件上傳的控件(input type = "file"),那么這個屬性必須設(shè)置為multipart/form-data
target ? 目標(biāo)框架名 ? 規(guī)定在何處開actionURL ? _blank| _parent ? _self|_top ? ? ? ? frame name
22.<input>標(biāo)記屬性
屬性 ? ? ?值 ? ? ? ? ? ? 含義
name ?name名 ? 定義input元素的名稱
value 任何字符 ?控件初始顯示的文字內(nèi)容數(shù)據(jù)
size ? 整數(shù) ?定義輸入字段的寬度
maxlength ? ?整數(shù) ?規(guī)定輸入字段中的字符的最大長度
checked ?checked 指定控件被選取狀態(tài),此布爾屬性僅適用于type屬性設(shè)置為radio或checkbox時生成的控件
readonly ?readonly ? 指定控件處于只讀狀態(tài)
disabled disabled ?當(dāng)input元素加載時禁用此元素
scr ? URL ? type屬性設(shè)置為image時,此屬性指定圖片來源, 此圖片用于修飾圖形化按鈕
type 預(yù)定義值 ? ? 規(guī)定input元素的類型
其中<input>標(biāo)記type本身又有很多的子屬性
這些屬性可以看作ios里面的枚舉屬性吧 ? ? ?
type屬性值 ? 控件名稱 ? ? ?代碼
text ? 單行文本輸入框 ? <input type = "text"/>
password ?密碼輸入框 ?<input type = "password"/>
checkbox ? 復(fù)選框 ?<input type = "checkbox"/>
radio ? 單選框 ?<input type = "readio" ?checked = "checked"/>
submit ?提交按鈕 ?<input type ?= "submit" value = "提交">
reset ?設(shè)置按鈕 ?<input type = "reset" value = "重置"/>
image 圖片提交按鈕 <input type = "image" src = "URL"/>
button ?普通按鈕 <input type = "button" value = "普通按鈕"/>
hidden 隱藏文件 ?<input type = "hidden" name = "" ?value = ""/>
file 文件選擇控件 ?<input type = "file" name = ""/>
上傳文件域 type = file
上傳文件域
<input type = "file" name = "upFile"/>
該元素包含一個文本輸入字段,用來輸入文件名,另外還有一個按鈕用來打開文件選擇對話框以便圖形化選擇文件
當(dāng)一個<form>中有'上傳文件域",必須指定MIME類型的<formenctype = "multipart/form-data">,否則無法上傳文件.
上傳文件域,只在method = "post"下有效.
屬性:id name value disabled size;
隱藏域 ?type = "hidden"
<input type = "hidden" name = "nid" value = "234"/>
1.隱藏字段對于用戶是不可見的. ? ? 2. 隱藏字段通常會存儲一個默認(rèn)值,它們的值可以由JavaScript進(jìn)行修改. ? ? ? 3.一般用在,修改某條數(shù)據(jù)時,用來記錄數(shù)據(jù)的id號.
23.按鈕的類型
提交按鈕 ? ?用法:<input type = "submit" name = "submit" value = "提交表單"/> ? ? ? ? ? ? ? ?提示:將表單提交到action指定的程序文件中進(jìn)行處理;
重置按鈕 ?用法:<input type = "reset" name = "reset" value = "重新填寫"/> ? 提示:將清空表單中填寫所有的數(shù)據(jù)
普通按鈕 ? 用法:<input type = "button" name = "button" value = "普通按鈕"/> ? 提示:定義可點(diǎn)擊的按鈕,但沒有任何行為,一般配合JS使用
圖片按鈕 ?<input type = "image" ?name = "image" ?src = "圖片Url"/> ? ? 提示:圖片按鈕一般與JS配合使用;
<button>標(biāo)簽 ?----雙邊標(biāo)記
<form id = "form1" ? name = "form1" ? method = "post" action = "">
? ? ? <button type ="submit">Click me!</button>
</form>
屬性 ? ? 屬性值 ? ?說明
name ? name ? ?控件名稱
type ?button,reset,submit ?初始的類型
value ?Text ?初始值
disabled disabled 禁用此按鈕
24.<select>下拉列表
<form id = "form1" name = "form1" method = "post" action = "">
? ?<select name = "city" ?id = "city">
? ? ? <option value = "北京">北京</option>
? ? ?<option value = "天津" selected = "selected">天津</option>
? ? ? <option value = "河北">河北 </option>
? ? ? <option value = "山東">山東</option>
? ? ? <option value = "內(nèi)蒙">內(nèi)蒙</option>
? ?</select>
</form>
屬性 ? ? ?屬性值 ? ? ? 說明
name ? name名 ? 規(guī)定下拉列表的名稱
size ? ?正整數(shù) ? 規(guī)定下拉列表中可見選項(xiàng)的數(shù)目
multiple multiple ?布爾屬性,設(shè)置后選單項(xiàng)目允許多選,否則只能選擇一個
disable disable ?規(guī)定禁用該下拉列表
<option>標(biāo)記
option元素定義下拉列表中的一個選項(xiàng)條目. ? ? 瀏覽器將<option>標(biāo)簽中的內(nèi)容作為<select>標(biāo)簽的菜單或是滾動列表中的一個元素顯示.
option元素位于select元素的內(nèi)部,通俗一點(diǎn)來說就是下拉表格其中的一行的啊;?
屬性 ? ? ?屬性值 ? ?說明
selected ?selected ?規(guī)定選項(xiàng)在首次顯示在列表中時表現(xiàn)為選中狀態(tài).
value 字符串 ?定義送往服務(wù)器的選項(xiàng)值.
25.<textarea>多行文本框
<form id = "form1" name = "form1" method = "post" action ="">
? ?<textarea cols = "寬度" ? rows = "高度" name = "名稱">
? ?默認(rèn)內(nèi)容
? ?</textarea>
</form>
屬性 ? ? ? ? ? ?屬性值 ? ? ? ? ? 說明
name ? ? ?name ? 控件名稱
rows number ? 設(shè)置多行文本框顯示行數(shù)(高度),具體尺寸取決于文字的大小
cols ? number ?同上設(shè)置寬度
disabled ? disabled ?布爾屬性,設(shè)置當(dāng)前文本框?yàn)榻脿顟B(tài)
wrap ? off,hard,soft ?設(shè)置多行文本框中的文字是否自動換行.
26.<lable>表單區(qū)域
定義:<lable>標(biāo)簽為input元素定義標(biāo)注(標(biāo)記)
說明: ?-lable 不會向用戶呈現(xiàn)任何特殊效果,當(dāng)用戶選擇該標(biāo)簽時,瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)到與標(biāo)簽相關(guān)的表單控件上面去了啊;
-<label>標(biāo)簽的for屬性應(yīng)當(dāng)與相關(guān)元素的id屬性相同
-結(jié)合Css可以控制表單文本或控件對齊,美化表單
例子: ? <form id = "form1" ?name = "form1" ? method = "post" ? action = "">
<label for = "username">用戶名</label>
<input type = "text" name = "username" id = "username' size = "20"/>
屬性for ? 屬性值element_id ?說明:規(guī)定label與那個表單元素綁定
27.框架
這里的框架說通俗一點(diǎn)類似于超市里面不同規(guī)格存放商品的貨架,不是我們一般意義上開發(fā)類庫的框架,注意;
框架提供將一個瀏覽器窗口劃分為多個區(qū)域顯示不同HTML文檔的方法,使用場景:一個框架導(dǎo)航控件的文檔,而另一個框架顯示含有內(nèi)容的文檔
框架集是HTML文件,定義一組框架的布局與屬性,包括框架的數(shù)目 大小 ?位置 以及在每個框架中初始顯示的頁面的URL. ? 本身不包含要在瀏覽器顯示的HTML內(nèi)容,框架集文件只是向?yàn)g覽器提供應(yīng)如何顯示一組框架,以及在這些框架中應(yīng)顯示應(yīng)顯示那些文檔有關(guān)的信息.
框架是瀏覽器窗口中的一個區(qū)域,可以顯示與瀏覽器窗口的其余部分所顯示內(nèi)容無關(guān)的HTML文檔(每個框架中顯示一個獨(dú)立的HTML文檔).
框架頁面結(jié)構(gòu)
<html>
<head>
? ? ? <title>網(wǎng)站后臺管理系統(tǒng)</title>
? ? ? <meta http-equid = "content=type" content = "text/html";charset = "utf-8">
</head>
<frameset rows = "80,*"cols = "*frameborder ="0" border = "0" >
? ?<frmae src = "" name = "topMain"/>
? ?<frameset rows = cols = "80,*",frame border = "0"border = "0" framespcing = "0">
? ? ? ? ? ? <frame src = "left.html" name = "leftMain" no resize = "noresize"/>
? ? ? ? ? ? <frame scr = "Main.html" name = "mainFrame" id = "mainFrame"/>
? ?</frameset>
</frameset>
<noframeset>
<body>你的瀏覽器不支持框架!</body>
</noframes>
<html>
<frameset>標(biāo)記屬性
屬性 ? ? ? ?值 ? ? 含義
cols ? pixels,%,* ? 定義框架集中列的數(shù)目與尺寸
rows ? 同上 ? ? ? ? 同上列
bordercolor ? 顏色值 ? 框架邊框的顏色
frame border ? ?0 1 或no yes ?規(guī)定是否顯示框架周圍的邊框
border ? 整數(shù) ? 框架邊界線的寬度
framespcing ?整數(shù) ? 設(shè)置框架以像素為單位的間距(不兼容);
name ? ? ? ? ? ? ?定義框架名稱
src ?URI ? 為當(dāng)前框架指定初始顯示文檔的地址
no resize ? ?no resize ? 如果指定此布爾屬性,則指定框架不能改變大小,默認(rèn)情況下是可以通過鼠標(biāo)拖動來改變框架的大小的
scrolling ? ? ? auto yes no ? ? ? 指定框架的滾動顯示方式
bordercolor ? ?顏色值 ? 框架的框線顏色
Frameset元素說明
1.使用框架的HTML頁面中,body標(biāo)記被frameset取代,frames元素禁止放在body元素的標(biāo)簽內(nèi)容中.
2.frameset 用于定義框架結(jié)構(gòu),至于框架中具體顯示什么頁面,則由其子元素frame設(shè)定
3.FrameSet子元素noframes用來指定瀏覽器不支持框架頁時顯示的信息
4.Frameset標(biāo)簽內(nèi)容中還可以有frameset進(jìn)行框架嵌套
5.Frameset為W3C非推薦元素,僅可在Frameset DTD的情況下使用
Frame元素說明
frame元素用來定義單個框架的顯示內(nèi)容與顯示方式
frame與frameset的子元素,所以必須放在frameset標(biāo)簽內(nèi)容中
frame為空元素,在HTML中沒有終止標(biāo)簽
frame為W3C非推薦元素,僅可在frameset DTD的情況下使用;
<noframes> ?提供給不支持框架的瀏覽器應(yīng)用
語法 : ? ? <noframes ? 屬性 = "屬性值"> ?標(biāo)簽 ?內(nèi)容</noframes>
說明:
-noframes用來布置瀏覽器不支持框架進(jìn)的替代顯示內(nèi)容
-noframes為frameset的子元素,因此naframe必須置于frameset標(biāo)簽中
-Noframes為W3C非推薦元素,僅可以在frameset ?DTD的情況下使用
-終止標(biāo)簽不可省略
示例:
<frameset cols = "150,*"
<frame src = "navi.html" noresize = "noresize"/>
<frame src = "main.html" name = "main">
<noframes>你的瀏覽器不支持框架!</noframes>
</frameset>
框架的優(yōu)點(diǎn)與缺點(diǎn):
優(yōu)點(diǎn):
增強(qiáng)網(wǎng)頁導(dǎo)航功能;
訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相關(guān)的圖形;
每個框架都具有自己的滾動條,因?yàn)樵L問者可以獨(dú)立的滾動這些框架
缺點(diǎn):?
?難以實(shí)現(xiàn)不同框架中各元素的精確圖形對齊
測試導(dǎo)航物耗時間
老版本瀏覽器不支持框架
整個瀏覽空間變小,零活度變小
使用框架后,容易每個框架中產(chǎn)生滾動條,瀏覽者容易造成誤操作造成使用不便;
