1、HTML4背景知識

前言

本教程針對已經基本熟悉HTML4基本標籤的人。html

HTML的發展歷程

  • HTML 1.0: 1993年6月由IETF(Internet Engineering Task Force, 互聯網工程工做小組)做爲草案發布。
  • HTML 2.0: 1995年11月做爲RFC 1866發佈,但目前已過期。
  • HTML 3.2: 1996年1月14日由W3C(World Wide Web Consortium, 萬維網聯盟)做爲推薦標準發佈。
  • HTML 4.0: 1997年12月18日由W3C做爲推薦標準發佈。
  • HTML 4.01: 1999年12月24日由W3C做爲推薦標準發佈,此版本是目前咱們最多見的版本
  • XHTML 1.0: 2000年1月26日由W3C做爲推薦標準發佈。
  • XHTML 1.1: 2001年5月31日由W3C做爲推薦標準發佈。
  • HTML5: 2004年由WHATWG(Web HyperText Application Technology Working Group, 超文本應用技術工做組)發佈HTML5草案,預計2022年正式推廣HTML5。

HTML、XHTML、DHTML的區別

首先區分HTML與XHTML,XHTML有着更嚴格的規範,並遵循一些XML的規範,這裏列出一些:chrome

  1. 標籤要用小寫,如用<br/>而不用<BR/>
  2. 標籤必須正確嵌套。
  3. 標籤要關閉,如用<br/>而不用<br>
  4. 標籤的屬性值須要加引號,如用<div height="80"></div>而不用<div height=80></div>
  5. 給全部屬性賦值,如用<input type="checkbox" checked="checked">而不用<input type="checkbox" checked>

DHTML是Dynamic HTML(動態HTML)的縮寫,他並非單純的HTML,而是一些技術的綜合應用,DHTML=HTML+CSS+JAVASCRIPT+DOM。瀏覽器

常見的DOCTYPE

<!DOCTYPE html>     //HTML5的DOCTYPE,看一個網頁是否是HTML5網頁的最簡單的方法就是看這個部分緩存

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">                                                      //HTML 4.01 Strictapp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">                                     //HTML4.01 Traditionalide

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">                                   //HTML 4.01 Frameset工具

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">                          //XHTML 1.0 Strict佈局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">         //XHTML 1.0 Traditional學習

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">               //XHTML 1.0 Frameset測試

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">                                       //XHTML 1.1

<meta>標籤

  • 這個標籤很容易被學習HTML的人所忽略。
  • <meta>標籤位於<head>標籤內,用於爲頁面提供meta data(元信息)。

主要有五個功能:

  1. 提供頁面的描述、做者、關鍵字等信息,爲了讓搜索引擎抓取網頁時更好地定位網頁信息(在SEO中很重要)。
    1. <meta name="author" content="xiazdong"/>                        //網頁做者
    2. <meta name="keywords" content="cnblogs,blog,xiazdong"/> //網頁的關鍵字
    3. <meta name="description" content="this is a blog"/>        //網頁描述信息
    4. <meta name="revised" content="xiazdong,2014-01-20"/>     //修訂頁面的信息,如做者、時間
    5. <meta name="generator" content="dreamweaver cs5"/>       //編寫網頁的工具
  2. 設置頁面的字符集:<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>(適用於HTML4)、<meta charset="UTF-8"/>(適用於HTML5)
  3. 刷新頁面:<meta http-equiv="refresh" content="3;url=http://www.ecnu.edu.cn"/> (功能:3秒後跳轉到www.ecnu.edu.cn)
  4. 充當robots.txt的做用:<meta name="robots" content="all|none|nofollow|noindex"/>. 互聯網的全部網頁組成了一個有向圖,搜索引擎的很大一部分是由爬蟲爬取網頁,而且根據該網頁中的連接經過DFS或BFS等搜索方式繼續爬取頁面,而此設置的做用在於規定爬蟲的行爲,好比:all 表示爬蟲可以對當前頁面創建索引,也能夠繼續爬取該網頁連接到的頁面;none 表示noindex+nofollow,即既不容許爬蟲對該頁面創建索引,也不容許繼續爬取該頁面連接到的其餘頁面(即爬蟲認爲該頁面的出度爲0);其餘相似。
  5. 設置頁面無緩存:<meta http-equiv="pragma" content="no-cache"/>. 禁止瀏覽器使用頁面緩存顯示頁面內容。

語義標籤與無語義標籤

  • 語義標籤:帶有必定含義的標籤,如: <h1>~<h6>表示一級標題~六級標題、<p>表示段落、<img>表示圖片、<a>表示超連接、<ul>表示無序鏈表、<table>表示表格。
  • 無語義標籤:沒有含義的標籤,如:<div>、<span>。
  • 咱們可以用<div>去實現<h1>,可是這並不推薦。
  • 在HTML5也新增長了一些語義化標籤,如<footer>、<header>等。

Web app 與 Native app

  • Web app: 手機用戶經過瀏覽器使用的應用,說白了他就是一個網站。
  • Native app: 在App Store下載的應用。

Web開發必備工具

既然要學習HTML,目的確定是Web開發,所以確定還須要學習CSS、Javascript等技術,下面是工具的一些推薦:

  • 開發環境: Sublime Text(輕量級的開發環境)、Dreamweaver CS六、Zend Studio(Eclipse演變的集成開發環境)。
  • 瀏覽器: 推薦較新版本的chrome或firefox。

經常使用工具

  1. IETester: 軟件裏面嵌入了IE五、IE六、IE7等舊版本的IE,可以測試製做出的網頁對這些舊版本IE的兼容性。
  2. AxureRP-Pro: 網頁設計工具,直接拖動來佈局網頁。
  3. DebugBar: IE 中的 firebug。
  4. Mockups: 網頁設計工具。
相關文章
相關標籤/搜索