網頁設計基礎 01

2021-10-01 03:35:07 字數 3284 閱讀 6777

html

html的發展史:

①html 1.0:在2023年6月作為網際網路工程工作小組(ietf)工作草案發布。

②html 2.0:2023年1 1月作為rfc 1866發布,於2023年6月發布之後被宣布已經過時。

③html 3.2:2023年1月14日,w3c推薦標準。

④html 4.0:2023年12月18日,w3c推薦標準。

⑤html 4.01(微小改進):2023年12月24日,w3c推薦標準。

⑥html 5:html5是公認的下一代web語言,極大地提公升了web在富**、富內容和富應用等方面的能力,被喻為終將改變移動網際網路的重要推手。

csshtml文件基本格式主要包含文件型別宣告、根標記、頭部標記和主體標記

< doctype>標記

< doctype>標記位於文件的最前面,用於向瀏覽器說明當前文件使用哪種html或xhtmia標準規範。網頁必須在開頭處使用< doctype>標記為所有的html文件指定html版本和型別,只有這樣瀏覽器才能將該網頁作為有效的html文件,並按指定的文件型別進行解析。< doctypi>標記和瀏覽器的相容性相關,刪除標記會把展示html頁面的權利交給瀏覽器。這時有多少種瀏覽器,頁面便會有多少種顯示效果,這在實際開發中是不被允許的。

< html >標記

< html >標記位於< doctype>標記之後,也稱根標記。根標記主要用於告知瀏覽器其自身是乙個html文件。< html >標記標誌著html文件的開始,< /html >標記則標誌著html文件的結束,在它們之間是文件的頭部和主體內容。

< head >標記

< head >標記用於定義html文件的頭部資訊,也稱頭部標記,緊跟在< htmb >標記後。頭部標記主要用來封裝其他位於文件頭部的標記,例如< tite >、< meta >、< link >及< style >等,用來描述文件的標題、作者以及與其他文件的關係。需要注意的是,乙個html文件只能含有一對< head >標記,絕大多數文件頭部包含的資料都不會真正作為內容顯示在頁面中。

< body >標記單標記

(1).《標記名稱》單一型,無屬性值。如:< br />在xhtml中,規定,所有html標記,都要小寫,所有的標記都要有關閉。

(2).《標記名稱 屬性=「屬性值」>單一型,有屬性值。

如:< hr width=「80%」/>

雙標記(3).《標記名稱》……

(4).《標記名稱 屬性=」屬性值「>……

說明:標記與屬性,屬性之間以空格分隔。

屬性不區分先後順序;且屬性不是必要的。

注釋標記

語法格式:< !-- 注釋的內容 – >

注意:html 注釋標籤不支援任何的標準屬性和事件!

注釋標記中不能巢狀注釋標記。

設定頁面標題標記< title >

定義網頁標題,顯示在瀏覽器的標題欄中。

語法格式:< title >網頁標題名稱< /title >

定義頁面元資訊標記< meta />

乙個頁面往往需要多個外部檔案的配合,在< head >中使用< link >標記可引用外部檔案,乙個頁面允許使用多個< link >標記引用多個外部檔案。

"stylesheet" type="text/css" href="mystyle.css">

//表示引用當前html頁面所在資料夾中,檔名為style.css的css樣式表檔案

內嵌樣式標記< style >

用於為html文件定義樣式資訊

段落

標題標記

"對齊方式">標題文字
該語法中n的取值為1~6

align屬性為可選屬性:

①left 設定標題文字左對齊(預設值)

②center 設定標題文字居中對齊

③right 設定標題文字右對齊

注意:乙個頁面中只能使用乙個< h1 >標記

段落標記

"對齊方式">段落文字

水平線標記

"屬性值" />
屬於單標記,在網頁中輸入< hr />,就新增了一條預設樣式的水平線

屬性名含義與屬性值

align

設定水平線的對齊方式可選擇left.right.center三種值,預設為center,居中對齊

size

設定水平線的粗細以畫素為單位,預設為2畫素

color

設定水平線的顏色可是顏色名稱.十六進製制#rgb ,rgb(r,g,b)

width

設定水平線的寬度可以是確定的畫素值,也可以是瀏覽器視窗的百分比,預設為100%

換行標記

這是

乙個段落

"屬性值">文字內容
屬性名

屬性值face

設定文字的字型,例如微軟雅黑、黑體、宋體等

size

設定文字的大小,可以取1~7的整數值

color

設定文字的顏色

標記顯示效果

< b>和< strong>

文字以粗體方式顯示(b定義文字粗體.strong定義強調文字)

< i>和< em>

文字以斜體方式顯示(i定義斜體字,em定義強調文字)

< s>和< del>

文字以加刪除線方式顯示(html5不贊成使用s)

< u>和< ins>

文字以加下劃線方式顯示(html5不贊成使用u)

特殊字元

描述字元的**

空格 ;

<

小於號<;

>

大於號》;&和號

&;¥人民幣¥;

版權©;

®註冊商標®;°

攝氏度°;

±正負號±;x

乘號×;÷除號

÷;²上標2²;

³上標3

³;

HTML網頁設計 01

html hypertext mark up language 語言又叫超文字標記語言或超文字鏈結標示語言 標準通用標記語言下的乙個應用 html命令可以說明文字 圖形 動畫 聲音 鏈結等。html檔案的結構包括頭部 head 主體 body 兩大部分,其中描述瀏頭部覽器所需的資訊,而主體則包含所要...

網頁設計基礎 網頁布局結構

作為網頁設計初學者,掌握幾個頁面布局結構將會讓網頁變得更加美觀,並且大大提公升設計效率。一 國子型 大型 常用型別 如圖所示,我們可以看出,國子型頁面結構主要分為五個部分。頭部 該部分包括 的標題以及橫幅廣告條 左側 該部分包括一些導航等資訊 右側 該部分包括選單或者導航的元件 中部 該部分為頁面的...

網頁設計基礎3

網頁設計基礎31.邊框樣式 border style 上 右 下 左 border style 上 左右 下 border style 上下 左右 注意 綜合設定四邊樣式,必須按照上右下左的順序,省略時採用值複製的原則,即乙個值為四邊,兩個值為上下 左右,三個值為上 左右 下。覆蓋式 p p2.邊框...