談談HTML的基礎認知

尛沫發表於2014-05-20
HTML

HTML標記是由“<”和“>”所括住的指令標記，用於向瀏覽器傳送標記指令。主要分為：單標記指令、雙標記指令（由“<起始標記>”＋內容＋“”構成）。 HTML語言使用標誌對的方法編寫檔案，既簡單又方便。它通常使用“<標誌名>內容< /標誌名>”來表示標誌的開始和結束，因此在HTML文件中這樣的標誌都必須是成對使用的。為了便於理解，將HTML標記語言大致分為基本標記、格式標記、文字標記、影像標記、表格標記、連結標記、表單標記和幀標記等。

HTML檔案的基本結構

a. HTML : Hypertext Markup Language 超文字標記語言

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>網頁標題</title>
</head>
<body>
    主體
</body>
</html>

b. 基本結構：頭部(head) 主體(body)

c. 所有內容都在< html>< /html>標籤之內

<head></head>內放的是頭部資訊，是對頁面的描述，不會直接顯示在頁面中
<head></head>內的<title></title>中設定的是頁面的標題，<title></title>只能放在<head></head>中
<body></body>是頁面的主體，大部分顯示內容都定義在這裡

d. 編輯工具：記事本、UltraEdit等,開發人員用VisualStudio寫html就夠了

塊級標籤

a. 標題標籤< h1>~< h6> 段落標籤< p> 水平線標籤< hr />

b. 常用於頁面佈局的塊級標籤：有序列表< ol> 無序列表< ul> 定義列表< dl> 表格標籤< table> 表單標籤< form> 分割槽標籤< div>

行級標籤

a. 影像標籤< img /> 超連結標籤< a> 範圍標籤< span> 換行標籤< br /> 輸入框標籤< input /> 文字域標籤< textarea>

b. 常見的圖片格式： JPG GIF BMP PNG

c. 語法：< img src="圖片地址" alt="影像的替代文字" title="滑鼠懸停提示文字"/>

常使用如下四種塊狀結構：

a. Div-ul(ol)-li：用於分類導航或選單等場合

b. Div-dl-dt-dd：用於圖文混編場合

c. Table-tr-td：用於規整資料的顯示

d. Form-table-tr-td：用於表單佈局的場合

XHTML1.0的基本規範

a. 標籤名和屬性名稱必須小寫

b. HTML標籤必須關閉

c. 屬性值必須用引號括起來

d. 標籤必須正確巢狀

e. 必須新增文件型別宣告：
①該宣告必須位於HTML文件的第一行
②有三種級別宣告：Strict（嚴格型別） Transitional（過度型別） Frameset（框架型別）

HTML的基本標籤(二)和表單

超連結： < a href="連結地址的路徑" target="目標視窗位置"> (target常用取值:_self(自身視窗)和_blank(新建視窗))

超連結的三類應用場合：

a. 頁面間連結 : A頁到B頁，用於網站導航

b. 錨連結 : A頁的甲位置到A頁(本頁)的乙位置或A頁甲位置到B頁的乙位置

< a href = "#star">[明星專區]</a>

<!-- 連結到同一個網頁的特定位置 -->
<a name = "star"><img src="images/adv.jpg" alt="明星專區"  title="明星專區">a>

c. 功能性連結：在頁面中呼叫其他程式功能

<!--例:電子郵箱連結,mailto:建立電子郵箱連結-->
<a href="mailto:guimeiWebMater@gmgw.com">站長信箱</a>

HTML註釋：< !-- 內容 -->

HTML中的特殊符號：
空格( ) 大於號(>) 小於號(<) 引呈(") 版權符號(©)

表單

a. 語法格式： 

<!--
    1.get  是指將使用者填寫的資訊作為一個字串連線到位址列一起提交，連線符用"?"隔開
    2.post 是指將使用者填寫的資訊作為一個資料包提交，資料包是經過編碼的
    -->
<form action="表單提交地址" method="提交方法(1.get  2.post)">
       <!--文字框.按鈕等表單元素-->
</form>

b. 表單元素的基本格式：

<!--type可用的選項有:text\password\checkbox\radio\submit\reset\file\hidden\image\button-->
<input name="表單元素名稱" type="型別" value="值" size="顯示寬度" maxlength="能輸入的最大字元長度" checked="是否選中(單選或複選才用)" />

表單元素介紹

文字框(text)

<form action="" method="post">
    <p> 使用者名稱:
        <input type="text" value="張三" size="20" name="userName" />
    </p>
</form>

密碼框(password)

密碼:

c. 重置\提交與普通按鈕

    <input type="submit" value="提交按鈕" name="submit" />
    <input type="reset" value="重置按鈕" name="reset" />
    <input type="button" value="普通按鈕" name="button" />
    <!--圖形提交按鈕-->
    <input type="image" src=" " />

d. 單選按鈕(radio)

    <input type="radio" name="gen" class="input" value="男"/>男
    <input type="radio" name="gen" class="input" value="女"/>女

e. 核取方塊(checkbox)

<input type="checkbox" name="hobby1" value="1" />運動
<input type="checkbox" name="hobby2" value="2" />聊天
<input type="checkbox" name="hobby3" value="3" />玩遊戲

f. 檔案域(file)

<input type="file" name="file" />

g.下拉選單框(select)

<!--name:指定列表  value:可選擇的值-->
嚮往月份：
<select name="c"> 
    <option value="0" selected="selected">請選擇</option>
    <option value="1" >1月</option>
    <option value="2">2月</option>
</select>

h.多行文字域(textarea)

<!--cols:指定多行文字域的列數   rows:指定多行文字域的行數-->
<textarea name="textarea" cols="40" rows="6">初始文字內容</textarea>

i. 隱藏域(hidden)

<!--隱藏使用者ID資訊333-->
<input type="hidden" name="userid" value="333">

j. 只讀和禁用屬性

只讀：readonly="readonly" 禁用：disabled="disabled"

本文為Anyforweb技術分享部落格，需要了解網站建設及更多web應用相關資訊，請訪問anyforweb.com。

相關文章