HTML標記是由“<”和“>”所括住的指令標記,用於向瀏覽器發送標記指令。主要分爲:單標記指令、雙標記指令(由“<起始標記>”+內容+“</結束標記>”構成)。 HTML語言使用標誌對的方法編寫文件,既簡單又方便。它通常使用“<標誌名>內容</標誌名>”來表示標誌的開始和結束,因此在HTML文檔中這樣的標誌對都必須是成對使用的。 爲了便於理解,將HTML標記語言大致分爲基本標記、格式標記、文本標記、圖像標記、表格標記、鏈接標記、表單標記和幀標記等。
html文件的基本結構
a、HTML :Hypertext Markup Language 超文本標記語言
<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-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.語法:<imgsrc="圖片地址" 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="目標窗口位置"></a> (target常用取值:_self(自身窗口)和_blank(新建窗口))
超鏈接的三類應用場合:
a.頁面間鏈接 : A頁到B頁,用於網站導航
b.錨鏈接 : A頁的甲位置到A頁(本頁)的乙位置或A頁甲位置到B頁的乙位置
<a href = "#star">[明星專區]</a>
<!-- 鏈接到同一個網頁的特定位置 -->
<a name = "star"><imgsrc="images/adv.jpg" alt="明星專區" title="明星專區">a>
c.功能性鏈接 : 在頁面中調用其他程序功能
<!--例:電子郵箱鏈接,mailto:創建電子郵箱鏈接-->
<ahref="mailto:[email protected]">站長信箱</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)
密碼:<input type="password" name="pass" />
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"