前言
學習網頁的概念和分類,瞭解靜態網頁和動態網頁的不同;瞭解網頁瀏覽器的工作原理。瞭解HTML,XHTML,HTML5的概念,製作簡單的HTML頁面的開發。
什麼是網頁
可以在internet上通過網頁瀏覽信息,如新聞,圖片等,還可發佈信息,如招聘信息等,網頁是在某個地方某一臺計算機上的一個文件。
網頁主要由3部分組成:結構,表現,行爲。
靜態網頁的特點是不論在何時何地瀏覽這個網頁,看到的形式和內容都相同,且只能瀏覽,用戶無法與網站進行互動。靜態頁面由HTML編寫,擴展名一般爲.htm, .html, .shtml, .xml
等。與動態頁面相比,動態網頁是以.asp, .jsp, .php, .perl, .cgi
等形式爲後綴。
動態網頁指網頁的內容可以根據某種條件而自動改變。
網頁瀏覽器的工作原理
採用B/S結構,即瀏覽器/服務器結構,用戶工作界面是通過www瀏覽器來實現的:
- 事務邏輯主要在服務器端實現,極少部分的事務邏輯在前端實現。
- 大大簡化了客戶端的計算機載荷。
- 減輕了系統維護與升級的成本和工作量。
- 降低了用戶的總體成本。
瀏覽器的工作原理:
- 瀏覽器通過HTML表單或超鏈接請求指向一個應用程序的URL。
- 服務器收到用戶的請求。
- 服務器執行已接收創建的指定應用程序。
- 應用程序通常基於用戶輸入的內容,執行所需要的操作。
- 應用程序把結果格式化爲網絡服務器和瀏覽器能夠理解的文檔,即通常所說的HTML網頁。
- 網絡服務器最後將結果返回到瀏覽器中。
www的基礎是HTTP協議,web瀏覽器就是用於通過url來獲取並顯示web網頁的一種軟件工具,url用於指定要取得的Internet上資源的位置與方式。
HTML和HTML5
HTML是一種用來製作超文本文檔的簡單標記語言,用其編寫的超文本文檔稱爲HTML文檔,它能獨立於各種操作系統平臺。
可擴展超文本標記語言XHTML:
XHTML是不需要編譯,可以直接由瀏覽器執行,是一種增強了的HTML。它的可擴展性和靈活性將適應未來網絡應用的更多需求,是基於XML的應用。開發者在HTML4.0的基礎上,用XML的規則對其進行一些擴展,由此得到了XHTML,所以,建立XHTML的目的是爲了實現HTML向xml的過渡。
HTML5簡化了:<!DOCTYPE html>
,簡化了DOCTYPE,簡化了字符集聲明,以瀏覽器的原生能力替代腳本代碼的實現,簡單而強大的HTML5API。
HTML網頁的結構
文件擴展名是操作系統用來標誌文件格式的一種機制。擴展名如同文件的身份說明,區別了文件的類別和作用。
HTML網頁的文件後綴名是.html
或者.htm
.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xxx">
聲明的作用,告訴瀏覽器所書寫的HTML代碼的版本。
<meta>
標籤,是HTML文檔<head>
標籤內的一個輔助性標籤,meta
標籤分爲2個重要的屬性:name
和http-equiv
,通常用於能夠優化頁面被搜索的可能性。
meta
標籤下name
屬性的使用:
<head>
<meta name="keywords" content="nine, twenty-three">
<meta name="description" content="...">
<meta name="generator" content="Dreamweaver">
<meta name="author" content="depp">
<meta name="robots" content="all">
</head>
-
keywords
向搜索引擎說明頁面的關鍵字,在content後輸入供搜索的具體關鍵字。 -
description
向搜索引擎描述頁面的主要內容。 -
generator
向頁面描述生成的軟件名,在content後面輸入具體的軟件名稱。 -
author
網頁的設計者,在content後面輸入設計者的具體姓名。 -
robots
限制搜索的方式,在content後面通常可輸入all,one,index,noindex,follow,nofollow
其中之一,不同的屬性分別有不同的作用,限制頁面被搜索的方式。
meta
標籤下的另一個屬性http-equiv
,其作用是反饋給瀏覽器一些明確的信息,幫助瀏覽器更精確地展示頁面。
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
</head>
-
refresh
對屬性的具體描述,說明是令頁面自動跳轉的效果。 -
content
後跟等待的時間,url後跟跳轉的頁面鏈接地址。
link
標籤,定義了一個外部文件的鏈接,經常被用於鏈接外部css樣式。
base
標籤爲整個頁面定義了所有鏈接的基礎定位,其主要的作用是確保文檔中所有的相對url都可以被分解成確定的文檔地址。
style
標籤用於定義css的樣式。表明了在頁面中引入一個.style
的樣式表。
script
標籤用於定義頁面內的腳本。
titl
標題標籤,body
體標籤.
一個好的HTML文檔應具備以下3個方面:
- 代碼使用標準規範,不應該有錯誤的拼寫
- 代碼結構清晰,使人一目瞭然
- 沒有錯誤或者多餘不必要的代碼出現
文本設計
<br>..</br>
<p>...</p>
<p align=left>...</p>
<p align=center>...</p>
<p align=right>...</p>
給文本加標註:<acronym title="">...</acronym>
註釋的內容放在title屬性後的引號中,被註釋的內容放在標籤內。
無序列表:ul,li
,有序列表:ol li
定義列表:
<dl>
<dt>...</dt>
<dd>...</dd>
<dt>...</dt>
<dd>...</dd>
</dl>
網頁中的圖像設計
jepg
格式的圖像,該文件是常見的圖像格式,.jpg
後綴名,jpeg
文件是經過壓縮的一種圖像。壓縮的圖像可以保持爲8位,24位,32位深度的圖像,壓縮比率可以高達100:1.jpeg
可以很好地處理大面積色調的圖像。png
格式的圖像,後綴名.png
,這是一種能存儲32位信息的位圖圖像,採用的是一種無損壓縮的方式。支持透明信息,指圖像以浮現在其他頁面文件或頁面圖像之上。gif
格式的圖像,是一種圖像交互格式,後綴名.gif
,只支持256色以內的圖像,gif
文件的圖像效果是很差的。
所以總的來說:jepg
可以壓縮圖像的容量,png
的質量較好,gif
可以做動畫。
矢量圖
說說矢量圖和位圖最大的區別:
無論是否對圖像進行縮放,都不會影響矢量圖的效果,但會影響圖的質量。
設計者一般只願意將logo,ui圖標,標識符號等簡單圖像存爲矢量圖。
圖像的分辨率
分辨率的單位是dpi
即每英寸顯示的線數。通常所指的分辨率有兩種,屏幕分辨率和圖片分辨率,屏幕分辨率即計算機顯示器默認的分辨率。
一般目前大部分顯示器的分辨率是1024px x 768px,圖片分辨率定義是用於量度位圖圖像內數據量多少的一個參數。
分辨率越高的圖像,包含的數據越多,圖像的容量就越大,會消耗更多的計算機資源,需要更大的存儲空間。
分辨率指的是每英寸的像素值,通過像素和分辨率的換算可以測算圖片的長度。
頁面中的圖像
<img src=... alt=.../>
- 使圖像的頂部和同一行的文本對齊
<img style="vertial-align:text-top"/>
- 使圖像的中部和同一行的文本對齊
<img style="vertical-align:middle"/>
- 使圖像的底部和同一行的文本對齊
<img style="vertical-align:text-bottom"/>
- 使圖像的底部和文本的基線對齊
<img style="vertical-alignbaseline"/>
hspace=30px表示圖像左,右兩邊與頁面其他內容隔30px的距離。vspace=30px表示圖像上,下兩邊與頁面的其他內容的間隔距離是30px。
<img src="" widht="" height="">
<img src="..." border=>
<hr align=".." width="..." size="...">
<a href="鏈接對象的路徑">鏈接錨點對象</a>
把郵箱留給需要聯繫你的人
<a href="mailto:郵箱地址">鏈接錨點對象</a>
- 鏈接還未被訪問:
a:link{...}
- 鏈接被選中:
a:active{...}
- 光標滑過鏈接:
a:hover{...}
- 鏈接被訪問後:
a:visited{...}
dashed 虛線
double 雙線
groove 槽線
inset 內陷
outset 外陷
熱點圖像區域的鏈接
map
標籤:
<map id=...>
<area shape="..." coords="..." href="...">
</map>
shape
屬性,用於確定選區的形狀,rect
矩形,circle
圓形,poly
多邊形。href
屬性,就是超鏈接。coords
屬性,用於控制形狀的位置,通過座標來找到這個位置。
網頁中的表單
計算矩形的面積
<html>
<head>
<title>計算矩形的面積</title>
<style type="text/css">
.result {font-weight:bold;}
</style>
<script language="JavaScript">
function calculate() {
var length = document.data.length.value;
var width = document.data.width.value;
var height = document.data.height.value;
var area = document.getElementById('area');
area.innerHTML = length*widht;
volume.innerHTML = length*widht*height;
}
</script>
創建表單
-
action
屬性,通過form
標籤定義的表單裏必須有action
屬性才能將表單中的數據提交出去:
<form action="my.php"></form>
它表明了這是一個表單,其作用是提交my.php頁面中的數據。
method
屬性告訴瀏覽器數據是以何種方式提交出去的。method
屬性下可以有2個選擇:post
或者get
。name
屬性,爲了令遞交出去的表單數據能夠被處理這些數據的程序識別。
<form name="data">
- 編碼方式,
enctype
代表HTML表單數據的編碼方式。
表單的工作原理
原理:在客戶端接收用戶的信息,然後將數據遞交給後臺的程序來操控這些數據。
<script language="JavaScript">
如果通過引用外部javascript程序,就像鏈接外聯樣式:
<script type="text/javascript" src="dada.js"></script>
創建表單
- action屬性,有action屬性才能將表單中的數據提交出去:
<form action="da.php"></form>
- method 屬性,作用是告訴瀏覽器數據是以何種方式提交出去的。在method屬性下可以有2個選擇,post或get。
提交方式用get,表單域中輸入的內容會添加在action指定的url中,當表單提交之後,用戶會獲取一個明確的url。get
在安全性上較差,所有表單域的值直接呈現。post
除了有可見的處理腳本程序,別的東西都可以隱藏。
- name屬性,添加name屬性是爲了令遞交出去的表單數據能夠被處理這些數據的程序識別。
<form name="dada">
- 編碼方式:
enctype
代表HTML表單數據的編碼方式,application/x-www-form-urlencoded, multipart/form-data, text/plain
三種方式。
-
application/x-www-form-urlencoded
是標準的編碼方式,提交的數據被編碼爲名稱/值對。 -
multipart/form-data
屬性表示數據編碼爲一條消息,爲表單定義mime
編碼方式,創建了一個與傳統不同的post
緩衝區,,頁面上每個控件對應消息中的一個部分。 -
text/plain
表示數據以純文本的形式進行編碼,這樣在信息中將不包含控件或者格式字符。 -
multipart/form-data
方式上傳文件時,不能使用post
屬性。
- 目標顯示方式,表示在何處打開目標
url
,可以設置4種方式。
-
_blank
表示在新的頁面中打開鏈接 -
_self
表示在相同的窗口中打開頁面 -
_parent
表示在父級窗口中打開頁面 -
_top
表示將頁面載入到包含該鏈接的窗口,取代任何當前在窗口中的頁面。
<form action="mailto:[email protected]" method="post" name="dada"
enctype="text/plain" target="_blank"></form>
表單域
是指用戶輸入數據的地方,表單域可分爲3個對象,input, textarea, select。
input對象下的多種表單的表現形式。
<input name="" type="" value="" size="" maxlength="">
-
type
表示所定義的是哪種類型的表單形式 -
size
表示文本框字段的長度 -
maxlength
表示可輸入的最長的字符數量 -
value
表示預先設置好的信息
-
text
單行的文本框 -
password
將文本替換*
的文本框 -
checkbox
只能做二選一的是或否選擇 -
radio
從多個選項中確定的一個文本框 -
submit
確定命令文本框 -
hidden
設定不可瀏覽用戶修改的數據 -
image
用圖片表示的確定符號 -
file
設置文件上傳 -
button
用來配合客戶端腳本
<form action="" method="post">
<input name="name" type="text" size="20" maxlength="12">
</form>
<input name="secret" type="password" size="20" maxlength="20">
<input name="one" type="radio" value="one" checked="checked">
<input name="one" type="radio" value="two">
<input type="submit" value="確定">
<input type="reset" value="恢復">
創建submit按鈕或reset按鈕時,name屬性不是必需的。
hidden隱藏域的樣式表單
使用hidden來記錄頁面的數據並將它隱藏起來,用戶對這些數據通常並不關心,但是必須提交數據。
<form action=da.asp>
<input type=hidden name=somehidden value=dada>
<input type=submit value=下一頁>
</form>
image樣式的表單
<input type="image" src="圖片/小圖標.jpg" alt="確定">
- src屬性指定這張圖像的路徑
- alt屬性添加文本註釋
file上傳文件的樣式表單
file樣式表單允許用戶上傳自己的文件
<html>
<head>
<title>file樣式的表單</title>
<style type="text/css">
body {font:120% 微軟雅黑;}
input {font:100% 微軟雅黑;}
</style>
</head>
上傳我的文件:
<form action="..." method="post" enctype="multipart/form-data">
<input type="file" name="uploadfile" id="uploadfile"/>
</form>
</body>
</html>
textarea對象的表單
textarea對象的表單
<html>
<head>
<title>file樣式的表單</title>
<style type="text/css">
body{font:120% 微軟雅黑;}
textarea{font:80% 微軟雅黑;color:navy;}
</style>
</head>
<body>
留言板
<form action="..." method="post" enctype="multipart/form-data">
<textarea name="dada" rows="10" cols="50" value="dada">請說:</textarea>
</form>
</body>
</html>
select對象的表單
select對象的表單
<form action="">
地址:
<select name="da1">
<option>1</option>
</select>
</form>
使用optgroup
標籤配合label
屬性來給選項分類:
<select name="上海">
<optgroup label="da1">
<option>1</option>
</optgroup>
<optgroup label="da2">
<option>2</option>
</optgroup>
</select>
在select
標籤中加入size
屬性即可,如size=6
表示是一個能容納6行文字的文本框,超出設置的行數時,將出現滾動條。
<select name="上海" size="6">
表單域集合:表單域的代碼由fieldset
標籤和legend
標籤組合而成。
<form action="..." method="post">
<fieldset>
<legend>註冊信息:</legend>
輸入用戶名:<input name="name" type="text" size="20" maxlength="12">
</fieldset>
</form>
表單輸入類型
- url類型的input元素是專門爲輸入url地址定義的文本框。
<input type="url" name="webUrl" id="webUrl" value="http://wwwxxx"/>
- email類型的input元素是專門爲輸入email地址定義的文本框。
<input type="email" name="dada" id="dada" value="[email protected]"/>
- range類型的input元素用於把輸入框顯示爲滑動條,可以作爲某一特定範圍內的數值選擇器。
<input type="range" name="volume" id="volume" min="0" max="1" step="0.2"/>
- number類型的Input元素是專門爲輸入特定的數字而定義的文本框。
<input type="number" name="score" id="score" min="0" max="10" step="0.5"/>
tel類型的input元素是專門爲輸入電話號碼而定義的文本框,沒有特殊的驗證規則。
search類型的input元素是專門爲輸入搜索引擎關鍵詞定義的文本框,沒有特殊的驗證規則。
color類型的input元素默認會提供一個顏色選擇器。
date類型的Input元素是專門用於輸入日期的文本框,默認爲帶日期選擇器的輸入框。
month提供一個月的選擇器,week提供一個周選擇器,time會提供時間選擇器,datetime會提供完整的日期和時間選擇器,datetime-local會提供完整的日期和時間選擇器。
增加表單的特性以及元素
- form特性:
<input name="name" type="text" form="form1" required/>
<form id="form1">
<input type="submit" value="提交"/>
</form>
- formaction特性,將表單提交至不同的頁面。
<form id="form1" method="post">
<input name="name" type="text" form="form1"/>
<input type="submit" value="提交到page1" formaction="?page=1”/>
<input type="submit" value="提交到page2" formaction="?page=2"/>
<input type="submit" value="提交"/>
</form>
- formmethod特性可覆蓋表單的method特性
- formenctype特性可覆蓋表單的enctype特性
- formnovalidate特性可覆蓋表單的novalidate特性
- formtarget特性可覆蓋表單的target特性
placeholder特性
<input name="name" type="text" placeholder="請輸入關鍵詞"/>
autofocus特性:用於當頁面加載完成時,可自動獲取焦點,每個頁面只允許出現一個有autofocus特性的input元素。
<input name="key" type="text" autofocus/>
autocomplete特性用於form元素和輸入型的Input元素,用於表單的自動完成。
input name="key" type="text" autocommplete="on"/>
autocomplete特性有三個值,可以指定"on","off"和""不指定,不指定就將使用瀏覽器的默認設置。
<input name="email" type="email" list="emaillist"/>
<datalist id="emaillist">
<option value="23#qq.com">xxxx</option>
</datalist>
keygen元素提供一個安全的方式來驗證用戶。
<form action="">
<input type="text" name="name"/><br>
<keygen name="security"/>
<br><input type="submit"/>
</form>
- keygen元素有密鑰生成的功能,在提交表單時,會分別生成一個私人密鑰和一個公共密鑰。
- 私人密鑰保存在客戶端,公共密鑰則通過網絡傳輸至服務器。
output元素
-
output
元素用於不同類型的輸出,比如計算結果或腳本的輸出等。 -
output
元素必須從屬於某個表單,即寫在表單的內部。
<form oninput="x.value=dada.value">
<input type="range" name="volume" value="50"/>
<output name="x"></output>
</form>
required
爲某個表單內部的元素設置了required特性,那麼這項的值不能爲空,否則無法提交表單。
<input name="name" type="text" placeholder="dada" required/>
pattern
- pattern用於爲Input元素定義一個驗證模式。
- 該特性值是一個正則表達式,提交時會檢查輸入的內容是否符合給定的格式,如果不符合則不能提交。
<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="da"/>
min,max,step
- min表示允許範圍內的最小值
- max表示允許範圍內的最大值
- step表示合法數據的間隔步長
<input type="range" name="dada" id="dada" min="0" max="1" step="0.2"/>
novalidate
- 用於指定表單或表單內在提交時不驗證
- 如果在form元素應用novalidate特性,則表單中的所有元素在提交時都不需要再驗證
<form action="dada.asp" novalidate="novalidate">
<input type="email" name="user_email"/>
<input type="submit"/>
</form>
validity
- 獲取表單元素的ValidityState對象,該對象包含8個方面的驗證結果
- ValidityState對象會持續存在,每次獲取validity屬性時,返回的是同一個ValidityState對象
var validityState=document.getElementById("username").validity;
willValidate屬性
- 用於獲取一個布爾值,表示表單元素是否需要驗證
- 如表單元素設置了required特性或pattern特性,則willValidate屬性的值爲true,即表單的驗證將執行
var willValidate = document.getElementById("username").willValidate;
validationMessage
- 獲取當前表單元素的錯誤提示信息。
var validationMessage=document.getElementById("username").validationMessage;
點關注,不迷路
好了各位,以上就是這篇文章的全部內容,能看到這裏的人都是人才。我後面會不斷更新技術相關的文章,如果覺得文章對你有用,歡迎給個“贊”,也歡迎分享,感謝大家 !!