天天看點

[php入門] 4、HTML基礎入門一篇概覽

<a href="http://www.cnblogs.com/zjutlitao/p/5625462.html" target="_blank">[php入門] 1、從安裝開發環境環境到(莊B)做個炫酷的登陸應用</a>

<a href="http://www.cnblogs.com/zjutlitao/p/5631400.html" target="_blank">[php入門] 2、基礎核心文法大綱</a>

<a href="http://www.cnblogs.com/zjutlitao/p/5648590.html" target="_blank">[php入門] 3、WAMP中的內建MySQL相關基礎操作</a>

1、HTML的作用  

  HTML是超文本标記語言,主要用于制作頁面結構;而經常與之一起用的CSS是層疊樣式表,用于設定頁面的樣式,比如顔色、字型等;而javascript主要用來制作動畫效果、與資料庫互動等。

2、HTML有兩種标簽形式:

① 雙閉合标簽:&lt;标簽名  屬性名1=值1 屬性2=值2......&gt;标簽中的内容&lt;/标簽名&gt;

② 單閉合标簽:&lt;标簽名 屬性名1=值1 屬性名2=值2..../&gt;

3、基本結構:

  &lt;!DOCTYPE&gt;是文檔聲明,表明目前靜态頁使用哪個版本的靜态頁。像部落格園首頁采用的&lt;!DOCTYPE html&gt;是HTML5

[php入門] 4、HTML基礎入門一篇概覽

   标簽是一層嵌套一層,HTML标簽是最外層标簽,其它标簽都寫在這個标簽裡面。

   HTML标簽又包含了head标簽和body标簽,其中head設定頭資訊,body設定内容。

[php入門] 4、HTML基礎入門一篇概覽

   

  head标簽又包含頭、編碼、關鍵詞等标簽。

  其中第一個是設定本靜态文檔的編碼為UTF-8;第二個是設定該靜态文檔的标題:

[php入門] 4、HTML基礎入門一篇概覽

;第三個是關鍵詞,供搜尋引擎搜尋;第四個是描述,可以參考下下圖中在百度中搜尋部落格園中顯示的結果看看描述的作用。

[php入門] 4、HTML基礎入門一篇概覽
[php入門] 4、HTML基礎入門一篇概覽

在head中的内容不會顯示在正文中,而body中的内容會顯示在正文中。

body中一般使用塊級标簽和内聯标簽來建構文檔結構:

① 塊級結構:h1~h6, p, div, table, form, ul, dl...

② 内聯結構:a, img, span, i, string, select...

PS:塊級結構獨占一行,内聯結構可以與其他标簽在同一行顯示

4、幾個标簽(挑的幾個)

  分區标簽div:是塊級标簽,其作用一般是作為其他标簽的容器或者規劃網頁結構,經常和CSS一起使用;

  span:是内聯标簽,沒有任何特殊功能,主要用來作為文本容器。span+css來控制某段文字的樣式,差別于其他文字;

音頻:&lt;embed height="100" width="100" src="song.mp3"/&gt;  一般用mp3格式

5、表單

5.1、表單的結構  

  表單form是用來搜集使用者資訊的,表單的一般定義為:

5.2、表單元素

  &lt;input type="類型" name="名稱" value="值"/&gt;

  其中類型有:text、radio、checkbox、hidden、submit、reset、

  

  ① 其中類型為text的input一般形式是:

  &lt;input name=""  value="設定初始值"  maxlength="最多幾個字元"  size="寬度"  type="text"  /input&gt;

  ② 其中radio的典型形式是(單選):

  &lt;input  name="sex"  type="radio"  value="男"  checked="true"/&gt;

  &lt;input  name="sex"  type="radio"  value="女"  checked="false"/&gt;

  PS:其中name必須相同

  ③ 其中checkbox用于多選:

  &lt;input  type="checkbox"  name="fruits"  value="蘋果"/&gt;

  &lt;input  type="checkbox"  name="fruits"  value="桃子"/&gt;

  &lt;input  type="checkbox"  name="fruits"  value="鳳梨"/&gt;

  ④ 其中hidden隐藏域,作用是不讓某些内容顯示出來,而偷偷送出給伺服器~

  ⑤ submit按鈕(點選資料被送出到伺服器)

  &lt;input  type="submit"  value="按鈕上顯示的提示内容"/&gt;

  ⑥ reset和submit類似,用來重置表單

  ⑦ button按鈕标簽:

  &lt;button  value=""&gt;顯示&lt;/button&gt;  等價于  &lt;input  type="button"  onclick="js代碼"/&gt;

  ⑧ textarea多行文本域:

  row="行數"  col="行數"

  ⑨ 下拉框select:

  &lt;select  name="provice"&gt;

    &lt;option  value=""&gt;選擇省份&lt;/option&gt;

    &lt;option  value="北京"&gt;北京&lt;/option&gt;

    &lt;option  value="杭州"&gt;杭州&lt;/option&gt;

  &lt;/select&gt;

本文轉自beautifulzzzz部落格園部落格,原文連結:http://www.cnblogs.com/zjutlitao/p/5661729.html,如需轉載請自行聯系原作者