一、HTML4背景知识

前言

本教程针对已经基本熟悉HTML4基本标签的人。

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的规范,这里列出一些:

  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 Strict

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

<!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 CS6、Zend Studio(Eclipse演变的集成开发环境)。
  • 浏览器: 推荐较新版本的chrome或firefox。

常用工具

  1. IETester: 软件里面嵌入了IE5、IE6、IE7等旧版本的IE,能够测试制作出的网页对这些旧版本IE的兼容性。
  2. AxureRP-Pro: 网页设计工具,直接拖动来布局网页。
  3. DebugBar: IE 中的 firebug。
  4. Mockups: 网页设计工具。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。