學習web技術不可避免的要接觸HTML、CSS、JavaScript。這些東西是學習web編程設計的必要工具。這篇部落格為大家介紹下這三者是什麼和三者之間的關係。讓初學者對web技術有個宏觀的認識。 【HTML】
HTML是網頁設計的主要語言。它的全稱為(hypertext markup language),是超文字標記語言 (HTML)的意思。它甚至可以在任何文字編輯器中編寫,只要儲存格式改為(.html)就行。例:使用文本編輯網頁如圖:
使用瀏覽器開啟後,顯示為:<title>顯示為瀏覽器頁面的標題,<body>為頁面的主體內容。<html>為架構。
HTML的主要架構由三對標籤組成:<html></html>、<head></head>、<body></body>所有的html的設計都遵循它的架構結構。如圖是html的樹形圖結構:
其中html是整個架構的範圍,head標記是網頁標題。Body是主要內容。在body裡面可以插入各種標籤來形成段落、標題、表格等。(圖中所有標籤的釋義都在下面的標記屬性裡可查看)。
Html 語言的東西是有限的,它所有的文法和用法就那麼多個。展示的網頁是最原始的主體內容,至於我們平時所看到的字型大小、圖片、動畫、表單等,都是通過html的屬性添加上去的。Html的元素時一個網頁中最基本的顯示內容。是製作人想呈現給我們的直觀內容。至於其他亂七八糟的一些動態效果和顏色渲染都是通過其他技術來豐富內容的。
下面是html的全部的標記和屬性,一篇部落格不可能讓你成為web開發的高手,但是能讓你對web開發有個宏觀的認識的把控。下面是html所有的標記和屬性,我把它們按照實現的功能分類,這樣在你懂要怎樣實現一個功能時只要來這裡查看就可以了。
HTML頭部標記
標記 |
描述 |
標記 |
描述 |
|
|
|
|
<base> |
當前文檔的URL全稱,基底網址 |
<style> |
設定CSS層疊樣式表的內容 |
<title> |
設定瀏覽器上方標題 |
<link> |
設定外部檔案的連結 |
<isindex> |
表名該文檔是一個可用於檢索的閘道指令碼 |
<script> |
設定頁面中程式指令碼的內容 |
<meta> |
文檔本身原資訊,例如查詢關鍵詞,用於擷取該文檔的有效期間 |
|
|
元資訊標記 (meta 標記的屬性)
http-equiv |
產生一個HTML標題域 |
Name |
關鍵字 |
|
|
Content |
關鍵字的取值 |
HTML主體標記(body屬性)
屬性 |
描述 |
屬性 |
描述 |
Text |
|
Alink |
|
Bgcolor |
|
Vlink |
|
Background |
|
Topmargin |
|
Bgproperties |
|
Leftmargin |
|
Link |
|
|
|
標題標記
標籤 |
描述 |
標籤 |
描述 |
<h1>…</h1> |
一級標題 |
|
|
H2 |
二級標題 |
|
|
H3 |
|
|
|
H4 |
|
|
|
.. |
|
|
|
.. |
|
|
|
H6 |
六級標題 |
|
|
文字修飾標記
標記 |
描述 |
標記 |
描述 |
<b> |
粗體 |
<a> |
刪除線 |
<strong > |
粗體 |
<strike> |
刪除線 |
<i> |
斜體 |
<address> |
地址 |
<em> |
斜體 |
<tt> |
打字機文字 |
<cite> |
斜體 |
<blink> |
閃爍文字 |
<sup> |
上標 |
<code> |
等寬 |
<sub> |
下標 |
<samp> |
等寬 |
<big> |
大字型大小 |
<kbd> |
鍵盤輸入文字 |
<small> |
小字型大小 |
<var> |
聲明變數 |
<u> |
底線 |
|
|
字型標記(font 標記屬性)
屬性 |
描述 |
屬性 |
描述 |
Face |
字型 |
Color |
顏色 |
Size |
大小字型大小 |
|
|
列表標記
標籤 |
描述 |
標籤 |
描述 |
<ul> |
無序列表 |
<menu> |
菜單列表 |
<ol> |
有序了表 |
<dt>/<dd> |
定義列表的標籤 |
<dirl> |
目錄列表 |
<li> |
清單項目的標籤 |
<dl> |
定義列表 |
|
|
超連結標記
屬性 |
描述 |
屬性 |
描述 |
Href |
指定連結地址 |
Title |
給連結提示文字 |
Name |
給連結命名 |
Target |
指定連結目標視窗 |
|
|
|
|
|
|
|
|
連結的目標視窗的屬性 |
_parent |
在上一級視窗中開啟 |
_self |
同一視窗中開啟 |
_blank |
在新視窗開啟 |
_top |
在瀏覽器整個視窗中開啟,忽略任何架構 |
圖片標記
屬性 |
描述 |
屬性 |
描述 |
Src |
圖片地址 |
Vspace |
垂直間距 |
Alt |
提示文字 |
Align |
排序 |
Width /height |
寬度、高度 |
Hspace |
水平間距 |
border |
邊框 |
|
|
|
|
|
|
Align 屬性 |
屬性 |
描述 |
屬性 |
描述 |
Top |
圖片上方 |
Absbottom |
底部 |
Middle |
中間 |
Absmiddle |
中間 |
Bottom |
|
Baseline |
|
Left |
左 |
Texttop |
R |
Right |
右 |
|
|
表格標記
標籤 |
描述 |
標籤 |
描述 |
<table> |
表格 |
<td> |
儲存格 |
<tr> |
行 |
<th> |
行表頭 |
|
|
|
|
<tr > 標記屬性 |
Align |
|
Bordercolor |
|
Valign |
|
Bordercolorlight |
|
Bgcolor |
|
bordercolordark |
|
Background |
|
|
|
表單標記
屬性 |
描述 |
屬性 |
描述 |
Name |
|
Action |
|
Method |
Get、 post |
|
|
|
|
|
|
<input> |
表單輸入標記 |
<option> |
菜單和清單項目標記 |
<select> |
菜單和列表標記 |
<textarea> |
文字域 |
|
|
|
|
輸入標記(input)
屬性 |
描述 |
屬性 |
描述 |
Name |
域的名稱 |
Type |
域的類型 |
|
|