Web開發(初級)- HTML基礎

HTML簡介 

  HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫,他是一種製作萬維網頁面標準語言(標記)。相當於定義統一的一套規則,大家都來遵守他,這樣就可以讓瀏覽器根據標記語言的規則去解釋它。瀏覽器負責將標籤翻譯成用戶“看得懂”的格式,呈現給用戶!(例:django模版引擎)

spacer.gifwKiom1gewmHiXH32AABD7DhPvEs336.jpg

HTML文檔

Doctype

<!DOCTYPE html>  /* 推薦 */

Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔

Meta(metadata information)

提供有關頁面的元信息,例:頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞

  1. 頁面編碼(告訴瀏覽器是什麼編碼)
    
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta charset="UTF-8">
  2. 刷新和跳轉
    
    <meta http-equiv="Refresh" Content="30">
    <meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com" />  /* 這句話很厲害的 */
  3. 關鍵詞
    
    <meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >
  4. 描述
    例如:cnblogs
  5. X-UA-Compatible
    兼容IE8以下貌似
    
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Title

網頁頭部信息

<title>it's title</title>

Link

  1. css
    
    <link rel="stylesheet" type="text/css" href="css/common.css" >
  2. icon
    
    <link rel="shortcut icon" href="p_w_picpath/favicon.ico">

Style

在頁面中寫樣式

<style type="text/css"> 
.bb{ 
      background-color: red; 
   } 
</style>

Script

  1. 引進文件
    
    <script type="text/javascript" src="http://xxx/js/gpt.js"></script >
  2. 寫js代碼
    
    <script type="text/javascript" > ... </script>

常用標籤

標籤一般分爲兩種:塊級標籤 和 內聯(行內)標籤

  • a、span、select 等

  • div、h1、p 等

各種符號

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落,默認段落之間是有間隔的!

br 是換行

a標籤

1、target屬性,_black表示在新的頁面打開

<a href="http://www.baidu.com" target="_blank" >new page</a>
2、錨

<a href="#t31">各種符號</a>  /* 通過id來查找 */

H 標籤

<h1></h1> --> <h6></h6>

select 標籤

下拉菜單

<select><option>下線</option><option>在線</option></select>

radio

單選按鈕(name一致,便爲一組,只能選擇一個選項)

<input type="radio" name="gender" value="man">
<input type="radio" name="gender" value="male">

password及text

<input type="text">
<input type="password">

button

<input type="button" value="button">
<input type="submit" value="submit">
<input type="reset" value="reset">

file

<div id="t310">
    <h2>file</h2>
    <input type="file" value="file">
</div>

提交文件時要在 form 表單里加上: enctype='multipart/form-data' method='POST'

textarea

<textarea style="width:500px;height:200px;"></textarea>

label

<label for="name2">姓名:<input id="name2" type="text"></label>
<label for="marriy2">婚否:<input id="marriy2" type="checkbox"></label>

fieldset

<fieldset>
    <legend>登錄</legend>
    <p>用戶名:</p>
    <p>密碼:</p>
</fieldset>

form 表單

<form method="POST" action="http://www.baidu.com">
    <input type="submit" value="submit">
</form>

一些補充

塊級標籤和內聯標籤

塊級標籤:<p><h1><table><ol><ul><form><div>

內聯標籤:<a><input><img><sub><sup><textarea><span>

block(塊)元素的特點
① 總是在新行上開始;
② 高度,行高以及外邊距和內邊距都可控制;
③ 寬度缺省是它的容器的100%,除非設定一個寬度。
④ 它可以容納內聯元素和其他塊元素

inline元素的特點
① 和其他元素都在一行上;
② 高,行高及外邊距和內邊距不可改變;
③ 寬度就是它的文字或圖片的寬度,不可改變
④ 內聯元素只能容納文本或者其他內聯元素

對行內元素,需要注意如下 
設置寬度width 無效。
設置高度height 無效,可以通過line-height來設置。
設置margin 只有左右margin有效,上下無效。
設置padding 只有左右padding有效,上下則無效。注意元素範圍是增大了,但是對元素周圍的內容是沒影響的。

額外知識點

  1、border-collapse: collapse;如果可能,邊框會合併爲一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。

  2、border-spacing: 5px; border-spacing 屬性設置相鄰單元格的邊框間的距離(僅用於“邊框分離”模式)

  3、caption 元素定義表格標題,caption 標籤必須緊隨 table 標籤之後

  4、clear:both,在左右兩側均不允許浮動元素。

  5、<input type="radio" name="gender" value="male" checked> Male  checked會默認選上

  6、<option value="fiat" selected>Fiat</option> selected默認被選上的

 

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