1、HTML4背景知识

时间 2019-11-17

标签 html4 html 背景知识栏目 HTML 繁體版

原文原文链接

前言

本教程针对已经基本熟悉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

标签要用小写，如用<br/>而不用<BR/>。
标签必须正确嵌套。
标签要关闭，如用<br/>而不用<br>。
标签的属性值须要加引号，如用<div height="80"></div>而不用<div height=80></div>。
给全部属性赋值，如用<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(元信息)。

主要有五个功能：

提供页面的描述、做者、关键字等信息，为了让搜索引擎抓取网页时更好地定位网页信息（在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"/> //编写网页的工具
设置页面的字符集：<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>(适用于HTML4)、<meta charset="UTF-8"/>(适用于HTML5)
刷新页面：<meta http-equiv="refresh" content="3;url=http://www.ecnu.edu.cn"/> (功能：3秒后跳转到www.ecnu.edu.cn)
充当robots.txt的做用：<meta name="robots" content="all|none|nofollow|noindex"/>. 互联网的全部网页组成了一个有向图，搜索引擎的很大一部分是由爬虫爬取网页，而且根据该网页中的连接经过DFS或BFS等搜索方式继续爬取页面，而此设置的做用在于规定爬虫的行为，好比：all 表示爬虫可以对当前页面创建索引，也能够继续爬取该网页连接到的页面；none 表示noindex+nofollow，即既不容许爬虫对该页面创建索引，也不容许继续爬取该页面连接到的其余页面(即爬虫认为该页面的出度为0)；其余相似。
设置页面无缓存：<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。

经常使用工具

IETester: 软件里面嵌入了IE五、IE六、IE7等旧版本的IE，可以测试制做出的网页对这些旧版本IE的兼容性。
AxureRP-Pro: 网页设计工具，直接拖动来布局网页。
DebugBar: IE 中的 firebug。
Mockups: 网页设计工具。