簡單理解網頁原始碼(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; charset=gb2312"> //該頁面為TXT文字或HTML格式,語言編碼方式為GB2312(即簡體中文)。
描述網頁的關鍵字資訊:<meta name="keywords" content="這裡是關鍵字">
對網頁的詳細描述:<meta name="description" content="這裡是對該網頁的介紹">
重新整理網頁:<meta http-equiv="refresh" content="5;URL=xxx.htm"> //5秒種後重新整理,並連結到xxx.html
二、組成要素
無論網頁如何千變萬化,構成一個網頁內容的最基本要素大體只有五種,即文字、圖片、表格、超連結和表單控制元件,所以下面將圍繞著這五個要素逐一列舉介紹。
文字(標記格式為<font></font>)
指定文字字型:<font face="宋體">宋體文字</font>
指定文字大小:<font size="3">3號文字</font>
指定文字顏色:<font color="#FF0000">紅色文字</font> //網頁顏色採用16位編碼,因此#FF0000表現為紅色。大家可以查閱相關資料瞭解其他顏色的編碼。
圖片(標記格式為<img>)
<img src="/Files/Pic/2006-9/4/069409563356425.jpg" 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="xxx.htm" title="提示文字">連結文字或圖片</a> //href為被點選後的連結頁,title為滑鼠懸停在連結文字或圖片上後出現的提示文字。
表單控制元件(標記符號為<input>、<textarea></textarea>、<select></select>)
表單控制元件實現了人與網頁的互動,像大家常去的論壇、購物站點等都有它的“身影”。
文字框:<input type="text" value="這是文字框"> //value為該控制元件的值,以下每個表單控制元件均可設定,不設預設為空
密碼框:<input type="password">
單選框:<input type="radio">
複選框:<input type="check">
提交按鈕:<input type="submit">
重置按鈕:<input type="reset">
隱藏區域:<input type="hidden">
文字域:<textarea rows="6" cols="30"></textarea> //rows為行數,cols為寬度
列表框:<select><option>專案1<option>專案2<option>專案3</select>
, 檢視HTML網頁原始碼 可以瞭解網頁的內容, 結構, 根據我們自己的需求對網頁中的資料進行更改, 過濾, 排版. 所以多學一門語言有益無害, 活到老 學到老.