簡單理解網頁源碼(HTML源代碼)

2023年12月11日發(作者：不懂感恩)

-

簡單理解網頁源碼（HTML源代碼）

程序員無論做什么程序, 基本都會接觸HTML, 如果做web開發 這就是吃飯的家伙, 移動端APP 的沒學過HTML不要緊, 但是要一眼大概可

以看懂網頁源代碼, 有機會最好親自學習一下HTML5, 最自身的提高還是有所幫助的

HTML, 超文本標記語言. 簡單理解為某些字句加上標志的語言，從而實現預期的特定效果。網頁正是由這種HTML語言所編寫出來的。

作為一套標記語言，基本上只要明白各種標記的用法就算學會了HTML

HTML的語法格式分為嵌套與非嵌套兩類，嵌套格式為＜標記＞...＜/標記＞，非嵌套只為＜標記＞。此外，根據標記的不同，有的標

記附帶有屬性參數，則表示為＜標記 屬性="參數值"＞，根據個人需要，可添加或去掉相應的屬性標記

一. 基本框架

如同人一樣，網頁也包括了“頭部”和“身體”，如圖就是標記符號。

　　＜head＞標記內包含著諸如網頁標題、語言編碼、網頁描述等基本信息，而平時我們真正見到的網頁內容均放在＜body＞標記內。現

在先介紹一下＜head＞里的基本信息。

　　網頁標題(標記格式為＜title＞＜/title＞)

　　創建網頁標題文字：＜title＞標題＜/title＞ //此處書寫的文字會顯示在IE的標題欄上。

　　網頁文檔信息(標記格式為＜meta＞)

　　描述網頁內容類型：＜meta http-equiv="Content-Type" content="text/html; chart=gb2312"＞ //該頁面為TXT文本或HTML

格式，語言編碼方式為GB2312(即簡體中文)。

　　描述網頁的關鍵字信息：＜meta name="keywords" content="這里是關鍵字"＞

　　對網頁的詳細描述：＜meta name="description" content="這里是對該網頁的介紹"＞

　　刷新網頁：＜meta http-equiv="refresh" content="5;URL="＞ //5秒種后刷新，并鏈接到二、組成要素

　　無論網頁如何千變萬化，構成一個網頁內容的最基本要素大體只有五種，即文字、圖片、表格、超鏈接和表單控件，所以下面將圍繞著

這五個要素逐一列舉介紹。

　　文字(標記格式為＜font＞＜/font＞)

　　指定文字字體：＜font face="宋體"＞宋體文字＜/font＞

　　指定文字大小：＜font size="3"＞3號文字＜/font＞

　　指定文字顏色：＜font color="#FF0000"＞紅色文字＜/font＞ //網頁顏色采用16位編碼，因此#FF0000表現為紅色。大家可以查

閱相關資料了解其他顏色的編碼。

　　圖片(標記格式為＜img＞)

　　＜img src="/Files/Pic/2006-9/4/" width="400" height="300" border="2" align="center"＞// src

指定為路徑地址，width為寬度，height為高度，border為邊框大小，align為橫向位置。

　　表格(標記格式為＜table＞＜tr＞＜td＞＜/td＞＜/tr＞＜/table＞)

　　＜table width="400" height="300" border="1" align="center" cellpadding="2" cellspacing="2" bgcolor="#FF0000"＞＜tr

＞＜td＞此處添加文字或圖片等＜/td＞＜/tr＞＜/table＞// width、height、border、align與以上的例子作用一樣，cellpadding為邊框

與單元格的間距，cellspacing為單元格之間的間距，bgcolor為表格背景色。

　　以上所介紹的元素都是只存在當前頁中，而網頁超鏈接的出現大大改變了人們的瀏覽習慣，可根據自己喜好，點擊到相關鏈接查看網頁

信息。

　　超鏈接(標記格式為＜a＞＜/a＞)

　　＜a href="" title="提示文字"＞鏈接文字或圖片＜/a＞ //href為被點擊后的鏈接頁，title為鼠標懸停在鏈接文字或圖片上后出

現的提示文字。

　　表單控件(標記符號為＜input＞、＜textarea＞＜/textarea＞、＜lect＞＜/lect＞)

　　表單控件實現了人與網頁的交互，像大家常去的論壇、購物站點等都有它的“身影”。

　　文本框：＜input type="text" value="這是文本框"＞ //value為該控件的值，以下每個表單控件均可設定，不設默認為空

　　密碼框：＜input type="password"＞

　　單選框：＜input type="radio"＞

　　復選框：＜input type="check"＞

　　提交按鈕：＜input type="submit"＞

　　重置按鈕：＜input type="ret"＞

　　隱藏區域：＜input type="hidden"＞

　　文本域：＜textarea rows="6" cols="30"＞＜/textarea＞ //rows為行數，cols為寬度

　　列表框：＜lect＞＜option＞項目1＜option＞項目2＜option＞項目3＜/lect＞, 查看HTML網頁源代碼 可以了解網頁的內容, 結構, 根據我們自己的需求對網頁中的數據進行更改, 過濾, 排版. 所以多學一門語言有益

無害, 活到老 學到老.

-