缘起　

　　HTML（HyperText Markup Language超文本标记语言）是用于构建web页面的标记语言和通用标准。它并不是一项新的发明，因为超文本（具有超链接的文本）和标记语言（用于电子文档的定义和描述）在HTML问世以前都早已存在多年。作为一项划时代的创造，它再次印证了乔布斯的名言：创新即整合（Creativity is just connecting things）。

　　HTML的创造者，被后人称为互联网之父的Tim Berners-Lee曾经是CERN（欧洲核子研究组织）的一位科学家。1990年，他受命开发一套软件系统用于组织内部成员分享和查阅研究报告，于是他把超文本和标记语言合成了HTML，然后写了一个浏览器和一个服务器，这就是万维网（World Wide Web）的起源。是的，一群科学家，只是为了方便看报告，结果顺手搞出了互联网。

　　Tim Berners-Lee并不是一个广为人知的名字，原因是他完全放弃了万维网所能带给他的数不胜数的财富，和他类似的人还有很多，比如Linux的创始人Linus。正是这些具备非凡理念的人物奠定了互联网的精神基调：平等、共享、开源和创造。

　　1994年Tim创建了W3C，这是一个非盈利性的国际化组织，致力于维护和制定web相关的标准。

 Tim Berners-Lee

语义（semantic）　

　　语义化标记，是指每种标记表示一种特定的内容形态，例如标题、列表、表格等。与之对应的概念，是样式标记（presentational markup）。Tim最初设想HTML应该是一种纯语义化的标记语言，然而在混沌无序的初始阶段，各家浏览器厂商多少受到另一种通行多年的标记语言SGML的影响，由于该语言同时存在语义化标记和样式标记，于是早期的HTML也被设计成了两类标记的杂合体。不过随着90年代末CSS的逐步应用以及随之而起的“内容与表现分离”理念，样式标记在新的HTML版本中被逐渐废除，但出于向后兼容的考虑，仍然有部分样式标记被保留，例如：i（样式）/ em（语义）；b（样式）/ strong（语义）。

　　为什么需要使用语义化标记？

1、HTML本身就是语义化标记语言，使用符合语义的标记，才谈得上正确使用HTML

2、使用合适的标记，可以合理应用浏览器默认样式

3、有利于SEO

4、使用合适的标记是确保可访问性的一个前提

5、更好的可维护性

版本与规格　　

　　HTML历经多个版本迭代，早期版本由浏览器厂商主导，直到1999年W3C发布第四代标准。

　　第四代标准分化为两类，一类是SGML-based HTML，即HTML4.01，另一类是XML-based HTML，即XHTML1.0。其中每一类下又分为三种规格：Strict、Transitional和Frameset。

　　XHTMl是W3C为了规束HTML所做的一厢情愿的徒劳，它试图以严格的语法和极低的容错率来矫正早期HTML市场上业已存在的种种不规范行为。然而互联网世界没有谁可以成为上令下行的权威，并且标准必然是滞后于现实的，因此W3C后来放弃了XHTML2.0，转而投入向后兼容的HTML5。

　　2014年第五代标准HTML5发布（Recommendation）。它最早是由一个由浏览器厂商代表组成的叫WHATWG的组织提出的，后来学院派的W3C在放弃XHTML的制定后，与实务派的WHATWG联合，共同制定了H5标准。历经十五年的换代升级，HTML5新增了大量的内容，包括新的标记（新的语义标签、多媒体支持、新的属性）和新的API（canvas、svg、webstorage、websocket……），其中许多内容模块至今仍在完善中。

　　 HTML使用<!DOCTYPE >来声明其版本及规格。

DTD是通用标记语言SGML用于定义文档遵循何种标准的一套语法规则，HTML4.01基于SGML，因此HTML4.01也引入了DTD的声明方式，一共有三种模式：

Strict：严格模式，不允许样式标记和框架集

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

Transitional：松散（混合、过渡）模式，允许样式标记，不允许框架集

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

Frameset：框架集模式，允许样式标记和框架集

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

HTML5不基于SGML，因此没有引入DTD，也只有一种声明：

　 　<!DOCTYPE html>

标签（tags）

图例：H5元素；替换元素*；行内元素

注：仅包含所有H5支持的标签。

全局标准属性

　　class、id、title、lang、style、tabindex

　　dir：设置内容的文本方向

　　accesskey：设置激活元素的快捷键

　　/* H5新增 */

　　contenteditable：规定内容是否可编辑，值为布尔值

　　contextmenu：与menu标签配合使用，用于自定义右键菜单，目前仅火狐实现

　　data-*：用于嵌入自定义数据

　　draggable：用于规定元素是否可拖动，值为布尔值

　　dropzone：目前不支持。copy | move | link

　　hidden：没有值，单独使用。IE不支持

　　spellcheck：规定是否对元素内容进行拼写检查，值为布尔值

　　translate：规定是否翻译元素内容。支持较差。yes | no

替换元素（replaced element）

　　从CSS的角度看，替换元素是一种内容样式在CSS控制范围之外的元素，它的内容是一个独立的外部对象。典型的替换元素有<img>, <object>, <video>，以及某些表单元素如<textarea>和<input>。有的元素如<audio>和<canvas>仅在某些情况下是替换元素。使用伪元素content属性插入的对象属于匿名替换元素。

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.

　　——from MDN

可见大部分替换元素都是单标签，但也有少部分是标签对，如textarea和canvas。

行内元素（inline）与块级元素（block-level）

　　区别：

　　1、在正常流中是否另起一行

　　2、盒模型规则不同

meta

meta标签有四种属性：

name用于指定文档的元数据信息，例如application-name | description | keywords | author | viewport ……

http-equiv指定预编译指令（pragma directive），用于设置响应头，但仅当服务器未设置相应响应头时才起作用。

content用于描述前两者的内容。

charset用于指定字符集，可单独使用。

兼容性（compatibility）

H5新标签的兼容性问题主要存在于IE9以下的浏览器。

方法一：在head中引入处理兼容性问题的js

　　 < ! - - [ if lt IE9 ] >

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

　　 < ! [ endif ] - - >

然后需显示的将H5标签设置为block

　　 article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

方法二：document.createElement()

可用性（usability）、可访问性（accessibility）

可访问性主要是指Web内容对于残障用户的可阅读和可理解性。

广义的可访问性/可用性包含四个方面：

可感知perceivable、可操作operable、可理解understandable、健壮性robust

具体参见：https://www.w3.org/TR/WCAG20/

可维护性（maintainability）

可维护性的首要前提是可读性。可读性越强，维护成本越低。

确保HTML可维护性的基本方法：

1、使用正确的标签；

2、详细的注释；

3、合理的缩进与换行；

4、结构与样式分离/解耦

渐进增强（progressive enhancement）与优雅降级（graceful degradation）

渐进增强和优雅降级是两种相对的开发模式，目的是实现应用的兼容性、健壮性。它们的区别仅在于方向不同：渐进增强首先照顾老版本浏览器，然后在最低可用版本基础上增加新特性；优雅降级则率先针对最新的浏览器，使用最新的技术，实现最好的效果，然后再向下兼容低端浏览器。

常用转义字符

字符

十进制

转义字符

字符

十进制

转义字符

空格

 

&nbsp;

￠

¢

&cent;

<

<

&lt;

￡

£

&pound;

>

>

&gt;

÷

÷

&divide;

©

©

&copy;

®

®

&reg;

重新梳理HTML基础知识的更多相关文章

  1. [SQL] SQL 基础知识梳理（一）- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  2. [SQL] SQL 基础知识梳理（二） - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  3. [SQL] SQL 基础知识梳理（三） - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  4. [SQL] SQL 基础知识梳理（四） - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  5. [SQL] SQL 基础知识梳理（五） - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

  6. Anliven - 基础知识梳理汇总 - 软件测试

    基础知识梳理 - 软件测试 - 概念 基础知识梳理 - 软件测试 - 分类 基础知识梳理 - 软件测试 - 流程 基础知识梳理 - 软件测试 - 用例 基础知识梳理 - 软件测试 - 方法 基础知识梳 ...

  7. Unity3D基础知识梳理

    这段时间在做Unity的项目,这差不多是我的第一次实战啊~然后公司来了实习的童鞋要学Unity,但是我一向不靠谱啊,所以只能帮他们稍微梳理下基础的东西了啊,唉~学长只能帮你们到这里了~顺便就把自己这两 ...

  8. [C# 基础知识梳理系列]专题六:泛型基础篇——为什么引入泛型

    引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...

  9. java基础知识梳理

    java基础知识梳理 1 基本数据类型

随机推荐

  1. @好友的EditText

    类似微信聊天中的@好友功能,封装到一个EditText中,gist打不开了,直接贴代码到这里吧: /*** @好友的输入组件*/public class AtEditText extends Edit ...

  2. 【JSOI2007】麻将 bzoj 1028

    Description 麻 将是中国传统的娱乐工具之一.麻将牌的牌可以分为字牌(共有东.南.西.北.中.发.白七种)和序数牌(分为条子.饼子.万子三种花色,每种花色各有一到 九的九种牌),每种牌各四张 ...

  3. Retroactive priority queues

    http://erikdemaine.org/papers/Retroactive_TALG/paper.pdf 明天写..大概就是通过一些结论发现这个东西其实就是往最后的集合里加入或删除一些可以被快 ...

  4. WPF CollectionViewSource CollectionView

    CollectionView 通俗讲就是可以对你绑定的集合可以进行 分组,排序 等功能 CollectionViewSource  根据字面意思是xxx的数据源 详细的介绍还是看 http://www ...

  5. OC编程之道-创建对象之工厂方法

    一 何为工厂方法模式?(what) 定义创建对象的接口,让子类决定实例化哪一个类,工厂方法是的一个类的实例化延迟到其子类. 工厂方法创建的对象拥有一组共同的行为,所以往类层次结构中引入新的具体产品并不 ...

  6. Spring 定时器Quartz的用法

    Spring定时器Quartz的用法也很简单,需要引入quartz-all-1.5.2.jar java代码如下: package com.coalmine.desktop; import java. ...

  7. MediaElement.js之浏览器跨域请求视频播放

    浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...

  8. vs2010 在64bits系统下编译

    vs只有32bits的没有64bits. 本来程序没问题,后面一直报错 LIBCMTD.lib(close.obj) : error LNK2001 LNK2019 换了各种 MD/MT/MTD 都没 ...

  9. sql单表中某一字段重复，取最近3条或几条数据

    order by a.uid,a.id; sql查询语句,针对需求:一个表中某一字段是有重复的数据,针对该字段相同的值只取最近的3条或要求的几条: --记录铭心!

  10. Linux常用命令学习3---（文件的压缩和解压缩命令zip unzip tar、关机和重启命令shutdown reboot……）

    1.压缩和解压缩命令    常用压缩格式:.zip..gz..bz2..tar.gz..tar.bz2..rar .zip格式压缩和解压缩命令        zip 压缩文件名 源文件:压缩文件   ...