談談Html的基礎認知

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中的特殊符號:

空格(&nbsp;)   大於號(&gt;)   小於號(&lt;)    引呈(&quot;)      版權符號(&copy;)

 

表單

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"

 

本文爲Anyforweb技術分享博客,需要了解網站建設及更多web應用相關信息,請訪問anyforweb.com。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章