方的冬天最怕有風,空氣雖然好了,但是異常的冷,吸幾口冷風感覺肺都結了冰。一大早小白來到辦公室琢磨用戶交互方面的問題,看了幾個網站發現很多網站的彈窗都是自定義的,而且還把彈窗周圍的區域做成了半透明狀,看上去非常不錯。于是小白也準備自己通過css布局一個彈窗試試,一來以后肯定會用上這個功能,二來熟悉一下最近掌握的CSS+HTML布局。
說干就干,小白打開webStrom做起了彈窗的布局。他首先用一個容器layer作為彈窗的容器,然后里面放了窗口容器(dialog),窗口容器里面還包含了三個子容器,分別是標題(layerTitle)、內容區域(layerContent)、按鈕區域(layerBTContainer)。
小白想:“layer要充滿并遮擋整個瀏覽器窗口,而且滾動頁面它還得一直保持遮擋的狀態,把它設置為浮動類型(position:fixed)的容器最合適。里面的dialog需要保持在瀏覽器的最中心位置,因此最好把dialog設置成固定寬度和高度,這樣可以很好的實現居中。”,于是小白先把layer和dialog以及dialog內部的容器設定了一個初步的CSS樣式。
layer的position設置為fixed,上下左右距離都設置成0,就可以達到占用整個窗口。里面的dialog容器小白根據剛學習的CSS溢出法讓dialog上下都居中。dialog如果是絕對定位,設置上下左右距離都為0它會占用整個父容器區域,但是如果CSS中限制了dialog的寬和高并且設置了marin為auto,它就會基于父容器居中。
為了測試transition屬性,小白還把確定按鈕上面設置了一個鼠標移上去以后漸變的效果,做完以后就是這個樣子:
看到布局好的彈窗小白心里非常高興,突然他想到一個問題,這個彈窗背景還沒設置半透明,于是趕緊往layer上增加了opacity:0.5這個半透明屬性,小白滿懷信息的刷新了頁面,當看到結果時小白發現背景和窗口都變成了半透明。
正好這時老朱從小白身邊經過,隨口跟小白說了一句:“小白,你是不是把窗口的父容器設置成半透明了?”
“是啊!父容器背景是黑色,所以我把父容器設置成了半透明!”
“可是父容器設置半透明會對他的子元素產生影響啊,這樣會導致它里面的所有元素都變成半透明,你為啥不給窗口添加一個兄弟容器來實現這個效果呢?”
小白仔細想了想,說道:“哦!我明白了,我可以在layer容器里面放一個跟layer一樣大的容器,這樣就不會沖突了,我再試試!”
不一會小白找到老朱,說道:“我改好了,現在我給dialog添加了一個layerbg容器作為背景層,然后把layer之前的背景色和透明度去掉,放到了新增加的背景層上面,背景層高和寬與layer一樣所以這樣就不會把dialog也變成半透明了。你看看效果。”
老朱說:“嗯!不錯,你現在通過HTML和CSS布局的這個彈窗還能做很多完善,比如出現彈窗時增加一個動畫效果、給它添加一個關閉按鈕或者取消按鈕等等。除了提示功能以外,你現在做的這個還能再進行深入修改,把它變成可以輸入文字的prompt框,點擊確定以后可以對頁面或者數據庫數據進行修改。”
想學H5的朋友可以關注老爐,您的關注是我持續更新《小白HTML5成長之路》的動力!
HTML歷史
早在1969年,美國就建立了世界上第一個電腦網絡—阿帕網。但由于當時的電腦網絡只是為了數據運算而建,與人們的日常生活相距甚遠,故而網絡的發展非常緩慢,直到1985年,連接在阿帕網上的電腦主機也只有1961臺。
相對于電腦網絡來說,網站的出現要晚得多。1989年,歐洲粒子物理實驗室研究員Tim Berners-Lee,發明了一種用于網上交換文本的格式,即基于標記的語言HTML,并創建了網上軟件平臺World Wide Web(萬維網)。HTML最吸引人的地方,在于其超文本鏈接技術,通過超鏈接,可以非常方便地跳轉到其他任何一個網頁上。萬維網實現了媒體思想家特德·納爾遜于1965年提出的超文本設想。萬維網的出現,帶動了網站的裂變式發展,到2006年11月,全球互聯網網站總數就已經超過了一億大關。
1990年11月,第一個Web服務器nxoc01.cern.ch開始運行,Tim Berners-Lee在自己編寫的圖形化Web瀏覽器“World Wide Web”上,看到了最早的Web頁面。
而世界上第一個網站(當時的網址是http://nxoc01.cern.ch/hypertext/www/theproject.html)早在1992年就關閉了,然而幸運的是這一界面卻被保留了下來,只要單擊下面這個鏈接:Multiple Choices
HTML基礎
HTML是目前在網絡上應用最為廣泛的語言,也是構成網頁文檔的主要語言。HTML文檔是由HTML標簽組成的描述性文本,HTML標簽可以標識文字、圖形、動畫、聲音、表格、鏈接等。
HTML語言作用
HTML作為一種網頁內容標識語言,易學易懂,熟悉使用該語言可以制作功能強大、美觀大方的網頁。HTML語言的主要作用說明如下:
使用HTMl語言標識文本。例如,定義標題文本、段落文本、列表文本、預定義文本等。
使用HTML語言建立超鏈接,通過超鏈接可以訪問互聯網上的所有信息,當使用鼠標單擊超鏈接時,會自動跳轉到鏈接頁面。
使用HTML語言創建列表,把信息有序地組織在一起,以方便瀏覽。
使用HTMl語言在網頁中顯示圖像、聲音、視頻、動畫等多媒體信息,把網頁設計得更富沖擊力。
使用HTML語言可以制作表格,以方便顯示大量數據。
使用HTML語言制作表單,允許在網頁內輸入文本信息,執行其他用戶操作,方便信息互動。
HTML文檔基本結構
HTML文檔一般都應包含兩部分:頭部區域和主體區域。HTML文檔基本結構由3個標簽負責組織:<html>、<head>和<body>。其中<html>標簽標識HTML文檔,<head>標簽標識頭部區域,而<body>標簽標識主體區域。一個完整的HTML文檔基本結構如下:每個標簽都是成對組成,第一個標簽(如<html>)表示標識的開始位置,而第二個標簽(如</html>)表示標識的結束位置。<html>標簽包含<head>和<body>標簽,而<head>和<body>標簽是并列排列。
HTML基礎
編寫HTML文檔時,必須遵循HTML語法規范。HTML文檔實際上就是一個文本文件,它由標簽和信息混合組成,當然這些標簽和信息必須遵循一定的組合規則,否則瀏覽器是無法解析的。
HTML語言的規范條文不多,相信讀者也很容易理解。從邏輯上分析,這些標簽包含的內容就表示一類對象,也可以稱為網頁元素。從形式上分析,這些網頁元素通過標簽進行分隔,然后表達一定的語義。很多時候,我們把網頁標簽和網頁元素混為一團,而實際上,網頁文檔就是由元素和標簽組成的容器。
所有標簽都包含在“<”和“>”起止標識符中,構個標簽。例如,<style>、<head>、<body>和<div>等。
在HTML文檔中,絕大多數元素都有起始標簽和結束標簽,在起始標簽和結束標簽之間包含的是元素主體。例如,<body>和</body>中間包含的就是網頁內容主體。
起始標簽包含元素的名稱,以及可選屬性,也就是說元素的名稱和屬性都必須在起始標簽中。結束標簽以反斜杠開始,然后附加上元素名稱。例如:
<tag>元素主體</ta
元素的屬性包含屬性名稱和屬性值兩部分,中間通過等號進行連接,多個屬性之間通過空格進行分隔。屬性與元素名稱之間也是通過空格進行分隔。例如:
HTML常用標簽
HTML定義的標簽很多,下面對常用標簽進行說明,隨著讀者學習不斷深入,相信會完全掌握HTML所有標簽的用法和使用技巧。
1.文檔結構標簽
文檔結構標簽主要用來標識文檔的基本結構,主要標簽說明如下。
<html>...</html>:標識HTML文檔的起始和終止。
<head>...</head>:標識HTML文檔的頭部區域。
<body>...</body>:標識HTML文檔的主體區域。
文本格式標簽
文本格式標簽主要用來標識文本區塊,并附帶一定的顯示格式,主要標簽說明如下。
<title>...</title>:標識網頁標題。
<hi>...</hi>:標識標題文本,其中i表示1、2、3、4、5、6,分別表示一級、二級、三級等標題。
<p>...</p>:標識段落文本。
<pre>...</pre>:標識預定義文本。
<blockquote>...</blockquote>:標識引用文本。字符格式標簽
字符格式標簽主要用來標識部分文本字符的語義,很多字符標簽可以呈現一定的顯示效果。例如,加粗顯示、斜體顯示或者下劃線顯示等。
在HTML文檔中,列表結構可以分為兩種類型:有序列表和無序列表。無序列表使用項目符號來標識列表,而有序列表則使用編號來標識列表的項目順序。
XHTML文檔基本結構
完整的XHTML文檔結構如下:
XHTML代碼不排斥HTML規則,在結構上也基本相似,但如果仔細比較,它有兩點不同。
定義文檔類型
在XHTML文檔第一行新增了<!DOCTYPE>元素。
聲明命名空間
在XHTML文檔根元素中必須使用xmlns屬性聲明文檔的命名空間。xmlns是XHTML NameSpace的縮寫,中文翻譯為命名空間(也有人翻譯為名字空間、名稱空間)。命名空間是收集元素類型和屬性名字的一個詳細DTD,它允許通過一個URL地址指向來識別命名空間。
XHTML是HTML向XML過渡的標識語言,它需要符合XML規則,因此也需要定義名字空間。又因為XHTML 1.0還不允許用戶自定義元素,因此它的命名空間都相同,就是“Er是根據XML語法簡化而來的,因此它遵循XML文檔規范。同時XHTML又大量繼承HTML語言語法規范,因此與HTML語言非常相似,不過它對代碼的要求更加嚴謹。遵循這些要求,對于培養良好的XHTML代碼書寫習慣是非常重要的。
XHTML文檔類型
XHTML 1.0支持3種DTD(型定義)聲明:過渡型(Transitional)、嚴格型(Strict)和框架型(Frameset)。
1.過渡型
這種文檔類型對于標簽和屬性的語法要求不是很嚴格,允許在頁面中使用HTML 4.01的標簽(符合XHTML語法標準)。過渡型DTD語句如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.嚴格型
這類文檔類型對于文檔內的代碼要求比較嚴格,不允許使用任何表現層的標簽和屬性。嚴格型DTD語句如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在嚴格型文檔類型中,以下元素將不被支持。
center:居中(屬于表現層)。
font:字體樣式,如大小、顏色和樣式(屬于表現層)。
strike:刪除線(屬于表現層)。
s:刪除線(屬于表現層)。
u:文本下劃線(屬于表現層)。
iframe:嵌入式框架窗口(專用于框架文檔類型或過渡型文檔)。
isindex:提示用戶輸入單行文本(與input元素語義重復)。
dir:定義目錄列表(與dl元素語義重復)。
menu:定義菜單列表(與ul元素語義重復)。
basefont:定義文檔默認字體屬性(屬于表現層)。
applet:定義插件(與object元素語義重復)。
在嚴格型文檔類型中,以下屬性將不被支持。
align(支持table包含的相關元素:tr、td、th、col、colgroup、thead、tbody、tfoot)。
language。
background。
bgcolor。
border(table元素支持)。
height(img和object元素支持)。
hspace。
name(在HTML 4.01 Strict中支持,在XHTML 1.0 Strict中的form和img元素不支持)。
noshade。
nowrap。
target。
text、link、vlink和alink。
vspace。
width(img、object、table、col和colgroup元素支持)。
框架型
這是一種專門針對框架頁面所使用的DTD,
實際上,DTD是一套關于標簽的語法規則。DTD文件是一個ASCII的文本文件,后綴名為.dtd。利用DOCTYPE聲明中的URL可以訪問指定類型的DTD詳細信息。例如,對于XHTML 1.0過渡型DTD的URL為http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd,在Dreamweaver中打開XHTML 1.0過渡型DTD文檔,代碼顯示如圖2.4所示。
XHTML 1.0過渡型DTD文檔
一個DTD文檔包含元素的定義規則,元素間關系的定義規則,元素可使用的屬性、實體或符號規則。這些規則用于標簽Web文檔的內容。此外還包括了一些其他規則,它們規定了哪些標簽能出現在其他標簽中。文檔類型不同,它們對應的DTD也不相同。
DOCTYPE結構圖
DOCTYPE聲明中各個部分說明如下。
頂級元素:指定DTD中聲明的頂級元素類型,這與聲明的SGML文檔類型相對應。HTML文檔默認頂級元素為html。
可用性:指定正式公開標識符(FPI)是可公開訪問的對象(PUBLIC)還是系統資源(SYSTEM)。默認為PUBLIC,SYSTEM系統資源包括本地文件或URL。
注冊:指定組織是否由國際標準化組織(ISO)注冊。“+”(默認)表示組織名稱已注冊,“-”表示組織名稱未注冊。W3C是屬于非注冊的ISO組織,所以顯示為“-”符號。
組織:指定在!DOCTYPE聲明引用的DTD(文檔類型定義)的創建和維護的團體或組織的名稱。HTML語言規范的創建和維護組織為W3C。
類型:指定公開文本的類,即所引用的對象類型。HTML默認為DTD。
標簽:指定公開文本的描述,即對所引用的公開文本的唯一描述性名稱,后面可附帶版本號。HTML默認為HTML,XHTML默認為XHTML,后面跟隨的是語言版本號。
定義:指定文檔類型定義,包含Frameset(框架集文檔)、Strict(嚴格型文檔)和Transitional(過渡型文檔)。Strict(嚴格型文檔)禁止使用W3C規范中指定將逐步淘汰的元素和屬性,而Transitional(過渡型文檔)可以包含除frameset元素以外的全部內容。
語言:指定公開文本的語言,即用于創建所引用對象的自然語言編碼系統。該語言定義已編寫為ISO 639語言代碼(兩個字母要大寫),默認為EN(英語)。
名字空間
在XHTML文檔中,讀者還需要注意另一個容易忽略的問題:給<html>標簽定義名字空間。
HTML元信息
在HTML文檔結構的頭部區域,存儲著文檔的各種基本信,這些信息主要被瀏覽器所采用,不會顯示在網頁正文中。另外,搜索引擎也會檢索這些信息,因此重視并設置這些頭部信息將有助于提高網頁的訪問率。
為了方便學習和理解,通常將HTML5標記分為兩大類,即雙標記和單標記。
a.雙標記:
雙標記雙標記也稱為體標記,分為開始標記和結束標記,其基本語法為:
<標記名>內容</標記名>
如:
<p>我是一個雙標記</p>
b.單標記:
單標記也稱空標記,是指用一個標記就可以完整的描述某個功能,其基本語法為:
<標記名/>
如:
<hr/>
上面hr標記表示一條水平線,后面會提到
注釋標記是HTML的一種特殊標記,它是一段便于閱讀理解的不需要在頁面中顯示的注釋文字。其基本語法格式為:
<!-- 注釋語句 -->
如:
<p>這是一段文本</p> <!-- 這是注釋文本,不會在頁面中顯示 -->
上圖即為瀏覽器中的結果。
HTML標記的默認樣式是無法滿足頁面開發的需求的,如果想要為某段文本設置特定的樣式,就需要用到HTML標記的屬性了,其基本語法格式為:
<標記名 屬性1="屬性值1" 屬性2="屬性值2" 屬性3="屬性值3"...>內容</標記名>
下面以一個例子來展示:
網頁第一行是一個二級居中的標題,第二行是一個局中的段落,第三行是一個大小為2px,顏色為灰色的水平線,第四行是一段正常的段落,部分詞語被加粗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 align="center">我是居中的二級標題</h2>
<p align="center">我是居中的段落</p>
<hr size="2" color="#ccc"/>
<p>我是一個正常的段落,這是<strong>關鍵字</strong>,其他的都是正常內容。<p/>
</body>
</html>
效果如圖所示:
?
多學一招(鍵值對):
“鍵值對”簡單地說即為對“屬性”設置“值”
例如:
color = "red";width:"200px";
上面的color和width就相當于屬性1和屬性2,red和200px就是對應的屬性值1和屬性值2,如果順序出錯,是沒有效果的
總結:
在HTML開始標記中,可以通過 屬性=“屬性值”的方式為標記添加屬性,其中“屬性”和“屬性值”是以“鍵值對”的形式出現的
1.title
一個HTML文檔只能含有一對<title></title>標記,<title></title>之間的內容將顯示在瀏覽器窗口的標題欄中。
基本語法格式:
<title>網頁標題名稱</title>
2.meta
meta定義頁面元信息:
設置網頁關鍵字》》》<meta name=”keywords” content=”JAVA、php”/>
設置網頁描述》》》<meta name=”description” content=”IT培訓教育”/>
設置網頁作者》》》<meta name=”author” content=”傳智播客”/>
設置字符集》》》<meta http-equiv=”Content-Type” content=”text/htm; charset=utf-8l”/>
設置頁面自動刷新與跳轉》》》<meta http-equiv=”refresh” content=”10;url=http://www.itcast.cn”/>
3.link
基本語法格式:
<link 屬性=”屬性值” />
屬性名 | 常用屬性值 | 描述 |
href | URL | 指定引用外部文檔 |
rel | stylesheet | 指定當前文檔與引用外部文檔的關系,該屬性值通常為stylesheet,表示定義一個外部樣式表 |
type | text/css | 引用外部文檔的類型為CSS |
type | text/javascript | 引用外部文檔的類型為JavaScript腳本 |
4.style
基本語法格式:
<style 屬性=”屬性值”>樣式內容</style>
在HTML中使用style標記時,常常定義其屬性為type,相應的屬性值為text/css,表示使用內嵌式的CSS樣式
*請認真填寫需求信息,我們會在24小時內與您取得聯系。