前言

本教程针对已经基本熟悉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: 网页设计工具。

一、HTML4背景知识的更多相关文章

  1. HTML5元素背景知识

    目录 HTML5元素背景知识 语义与呈现分离 元素选用原则 少亦可为多 别误用元素 具体为佳,一以贯之 对用户不要想当然 元素说明体例 ol元素 元素速览 文档和元数据元素 文档和元数据元素 文本元素 ...

  2. .NET同步与异步之相关背景知识（六）

    在之前的五篇随笔中,已经介绍了.NET 类库中实现并行的常见方式及其基本用法,当然.这些基本用法远远不能覆盖所有,也只能作为一个引子出现在这里.以下是前五篇随笔的目录: .NET 同步与异步之封装成T ...

  3. Mozilla研究—深入理解mozilla所需的背景知识

    mozilla是一个以浏览器为中心的软件平台,它在我们平台中占有重要地位.我们用它来实现WEB浏览器.WAP浏览器.邮件系统.电子书和帮助阅读器等应用程序.为此,我最近花了不少时间去阅读mozilla ...

  4. 第01讲- Android背景知识

    第01讲Android背景知识 Android是基于Linux系统 Android系统框图 : 第一.操作系统层(OS) 第二.各种库(Libraries)和Android 运行环境(RunTime) ...

  5. word2vec 中的数学原理具体解释（三）背景知识

      word2vec 是 Google 于 2013 年开源推出的一个用于获取 word vector 的工具包,它简单.高效,因此引起了非常多人的关注.因为 word2vec 的作者 Tomas M ...

  6. Tomcat(一)：背景知识和安装tomcat

    Tomcat系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html 1. 基础背景知识 1.1 java和jdk概念 无论是何种程序,要能在计算机 ...

  7. jenkins X实践系列（1） —— 背景知识

    本文介绍jenkins X(以下简称jx)相关的背景技术. jenkins X 简介 Jenkins X 是一个高度集成化的CI/CD平台,基于Jenkins和Kubernetes实现,旨在解决微服务 ...

  8. {Python之进程} 背景知识 什么是进程 进程调度 并发与并行 同步\异步\阻塞\非阻塞 进程的创建与结束 multiprocess模块 进程池和mutiprocess.Poll

    Python之进程 进程 本节目录 一 背景知识 二 什么是进程 三 进程调度 四 并发与并行 五 同步\异步\阻塞\非阻塞 六 进程的创建与结束 七 multiprocess模块 八 进程池和mut ...

  9. {Python之线程} 一 背景知识 二 线程与进程的关系 三 线程的特点 四 线程的实际应用场景 五 内存中的线程 六 用户级线程和内核级线程（了解） 七 python与线程 八 Threading模块 九 锁 十 信号量 十一 事件Event 十二 条件Condition（了解） 十三 定时器

    Python之线程 线程 本节目录 一 背景知识 二 线程与进程的关系 三 线程的特点 四 线程的实际应用场景 五 内存中的线程 六 用户级线程和内核级线程(了解) 七 python与线程 八 Thr ...

随机推荐

  1. linux shell的输出效果修改方法(界面颜色)

    文本终端的颜色可以使用“ANSI非常规字符序列”来生成.举例: echo -e "\033[44;37;5m ME \033[0m COOL" 以上命令设置背景成为蓝色,前景白色, ...

  2. POJ 2591 1338 2545 2247（数列递归衍生问题，思路挺妙）

    四道题的难度: 2591<1338<2545<2247 POJ 2591 Set Definition: 这是从discuss里看来的,写的挺好,直接copy,根据我的代码稍有改动( ...

  3. [C++]iostream的几种输入形式

    做ACM题的时候,发现cin并不能满足所有输入要求.比如说: 每行给出一款运动鞋信息,若该款写不打折,则先后给出每种运动鞋单价P,所购买的数量Q:若打折,则先后给出每种运动鞋单价P,所购买的数量Q,折 ...

  4. JS中 判断null

    以下是不正确的方法: var exp = null; if (exp == null) { alert("is null"); } exp 为 undefined 时,也会得到与 ...

  5. HtmlAgilityPack 之 HtmlNode类

    HtmlAgilityPack中的HtmlNode类与XmlNode类差不多,提供的功能也大同小异.下面来看看该类提供功能. 一.静态属性 public static Dictionary<st ...

  6. 利用反射完成初级万能DAO

    一.目标 利用反射完成初级万能DAO 二.注意 1.Field[] fi = clazz.getDeclaredFields(); for(Field ff : fi){ ff.setAccessib ...

  7. CodeBlocks ubuntu常见问题及小技巧

    1.安装完后没有快捷键的设置: http://blog.csdn.net/sjwbcb/article/details/4797785 感谢这哥,原来是包没有装全. codeblocks用ubuntu ...

  8. Intellij Idea @Autowired取消提示

    在使用mybatis的代理进行开发时 <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> ...

  9. ubuntu下如何快速加密可移动存储设备

    ubuntu下可以快速加密U盘和其他移动存储设备.访问的时候会要你输入密码,这样就比较安全了. ubuntu的磁盘工具使用的是LUKS加密,虽然这个加密方法不跟其他系统兼容,但可以在其他试用GNOME ...

  10. Android 音乐播放器之--错误状态下调用导致的异常

    MediaPlayer必须在合适的状态下调用合适的方法,否则会出现异常,下面列出常见错误信息和说明: 1.E/MediaPlayer(11310): stop called in state 1 调用 ...