HTML&CSS網站設計優化之道|ch8額外標示
HTML的演化
HTML4(1997)
XHTML(2000):1998年一個稱為XML語言問世,目的是用讓人撰寫新的標記語言.故HTML4
決定重新規範,遵循XML規則,並命名為XHTML.
HTML5(2000)
DOCTYPES
用以向瀏覽器「宣告」該頁面使用html之某版本.
現行最近帶的HTML5表示方法：
<!DOCTYPE html
HTML中的註解<!-- -->
用法：
<!--文字放在這裡-->
用在自我的註記或著讓任何使用者或維護者可以幫助檢視原始碼內容.
* exhibition:展覽會.獎學金.陳列.表現
current(a.)當前的湧流,趨勢,流 流通的,現在的,最近的.
sculpture:雕刻品，雕塑品；雕像
ID屬性
在同頁面中兩個元素不能有相同的ID屬性,但每個html元素都可以使用ID屬性.
用以在頁面的所有元素中,將某元素獨立辨識出來.
其值必須以字母或下滑線開頭（不能使用數字或其它字元）.
ID屬性為全域屬性（global attribute）,因為它可以用在任何元素上.
CLASS屬性
在任何元素上的class屬性都可以共用相同的值.每個html元素都可以使用CLASS屬性.
用於在你並非想作為獨立識別文件中的單一個元素,而是想將幾個元素從其他元素中獨立出來.
區塊元素
在瀏覽器中例如因為斷句.整體分為第一段落第二段落...
一層一層之「區塊層級block level」元素.
行內元素
意即元素與元素間保持在同一行,稱「行內inline」元素
將文字和群組在區塊中<div>
<div>元素可將一組元素群組合成一個區塊層級的方塊.
定義和用法
<div> 可定義文檔中的分區或節（division/section）。
<div> 標簽可以把文檔分割为獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。
如果用 id 或 class 來標記 <div>，那麼該標簽的作用會變得更加有效。
用法
<div> 是一個塊級元素。這意味着它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現
<div id="header">
<img scr="images/logo.gif" alt="Anish Kapoor" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="biography.html">Biography</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--end of header-->
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
將文字和元素群組在行內<span>
作用等於<div>元素的行內版本.
用法
1.當沒有適當元素可將部分文字和周遭文字區隔出來時使用
2.容納數個行內元素
IFRAMES
iframe=inline frame的縮寫.
其就如同網頁上切出來的一個小視窗,在此視窗內你可以看到其他網頁.
常見用途：在網頁中刊入一個google地圖.
常與之搭配的屬性如下：
src
height
width
scrolling捲軸功能.其有三個值yes(顯示捲軸)/no(隱藏捲軸)/auto(只有需要才顯示)
frameborder邊框功能.當其數值為0(不顯示邊框)/1(顯示邊框)
seamless不需要捲軸的iframe
meta
<meta>位在<head>元素內,包含了網頁相關資訊.雖然使用者看不到(例如：告訴搜尋引擎此頁.此作者.是否具有時間性等訊息)但可滿足一些目的.
<meta>元素是一個空白元素,並不需要結束標記.其使用屬性來乘載資訊.
meta最長與此兩屬性做搭配：
1.name ( 你想賦予其的「特性」)：表明你想提供之關於此頁的描述
name屬性常搭配的值有：
description:關於此頁的描述.常被搜尋引擎用來拿來了解該頁面的內容
keywords:關鍵字,字詞間用逗點分開
robots:標明搜尋引擎是否該將此頁加入搜尋結果.
若不要:「noindex」;若要但不含其它頁面:「nofollow」
The
author:作者
program:綱要.避免瀏覽器儲存快取頁面(意即將頁面存在電腦上,節省後續造訪的下載時間)
expires:期滿.用以告訴網頁此頁面何時過期,不要再快取此頁面.
&
2.content ( 你想賦予此特性的「值」) ：實際指定此描述的地方.
&
(3.http-equiv)
範例：
<!DOCTYPE html>
<html>
<head>
<title>Information About Your Pages</title>
<meta name="description"
content＝"An Essay on Installation Art" />
<meta name="keywords"
content="installation, art,opinion" />
<meta name="robots"
content="nofollow" />
<meta http-equiv="author"
content="Jon Duckett" />
<meta http-equiv="pragma"
content="no-cache" />
<meta http-equiv="expires"
content="Fri, 04 Apr 2014 23:59:59 GMT" />
</head>
<body>
</body>
</html>
更多關於meta補充：https://developer.mozilla.org/zh-TW/docs/Web_開發/Historical_artifacts_to_avoid
本章範例:http://127.0.0.1:58279/ch8%20example.html
<meta>位在<head>元素內,包含了網頁相關資訊.雖然使用者看不到(例如：告訴搜尋引擎此頁.此作者.是否具有時間性等訊息)但可滿足一些目的.
<meta>元素是一個空白元素,並不需要結束標記.其使用屬性來乘載資訊.
meta最長與此兩屬性做搭配：
1.name ( 你想賦予其的「特性」)：表明你想提供之關於此頁的描述
name屬性常搭配的值有：
description:關於此頁的描述.常被搜尋引擎用來拿來了解該頁面的內容
keywords:關鍵字,字詞間用逗點分開
robots:標明搜尋引擎是否該將此頁加入搜尋結果.
若不要:「noindex」;若要但不含其它頁面:「nofollow」
The
robots metatag provides directives for search engine crawlers(爬蟲).author:作者
program:綱要.避免瀏覽器儲存快取頁面(意即將頁面存在電腦上,節省後續造訪的下載時間)
expires:期滿.用以告訴網頁此頁面何時過期,不要再快取此頁面.
&
2.content ( 你想賦予此特性的「值」) ：實際指定此描述的地方.
&
(3.http-equiv)
範例：
<!DOCTYPE html>
<html>
<head>
<title>Information About Your Pages</title>
<meta name="description"
content＝"An Essay on Installation Art" />
<meta name="keywords"
content="installation, art,opinion" />
<meta name="robots"
content="nofollow" />
<meta http-equiv="author"
content="Jon Duckett" />
<meta http-equiv="pragma"
content="no-cache" />
<meta http-equiv="expires"
content="Fri, 04 Apr 2014 23:59:59 GMT" />
</head>
<body>
</body>
</html>
本章範例:http://127.0.0.1:58279/ch8%20example.html
评论
发表评论