初步认识ML家族成员

IanLew
175 阅读9分钟

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。

HTML

anatomy-of-an-html-element.png

HTML元素

HTML 由一系列的元素组成，通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。

<p class="editor-note">My cat is very grumpy</p>
  • 开始标签（Opening tag）：包含元素的名称，被大于号、小于号所包围。表示元素从这里开始或者开始起作用。
  • 属性（Attribute）：包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。
    • 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
    • 属性的名称，并接上一个等号。
    • 由引号所包围的属性值。
  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。
  • 内容（Content）：元素的内容。
  • 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

也可以将一个元素置于其他元素之中 —— 称作嵌套。

<p class="editor-note">
	My cat is <strong>very</strong> grumpy.
</p>

不包含任何内容的元素称为空元素。比如 <img> 元素：

<img src="example.png" alt="example image" />

HTML 元素通常是“行级”或“块级”元素。一个行级元素仅会占用由定义它的标签所包裹起来的空间。而一个块级元素将会占用其父元素（容器）的全部空间，也就是创建一个“块”。

<!-- 块级元素 -->
<p>This is the second paragraph.</p>
<!-- 行级元素 -->
<input type="checkbox" />

不少初级开发者在布局结构的时候只使用div，设计那么多标签的目的是什么呢？

HTML语义化

语义元素的核心特征是它清楚地向开发人员和浏览器传达了其含义。

  • 有利于提升用户体验，在css较弱的情况下仍然具有更大的可访问性。
  • 有利于SEO，帮助搜索引擎和其他用户设备确定网页的重要性和上下文。
  • 有助于构架良好的html结构，增强代码的可读性，便于团队的开发、维护。
  • 有利于页面在屏幕阅读器、盲人阅读器、移动设备等不同的设备上显示尽可能相同。

搜索引擎优化（英语：search engine optimization，缩写为SEO）是透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。当中尤以各种依靠广告维生的网站为甚。

所谓“针对搜索引擎作优化的处理”，是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的资料比对，然后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。搜索引擎优化就是通过搜索引擎的规则进行优化，为用户打造更好的用户体验，最终的目的就是做好用户体验。

XHTML

XHTML是3种HTML 4文件根据XML 1.0标准重组而成，从HTML到XHTML过渡的变化比较小，主要是为了适应XML。作为HTML的一个子集，大部分常见的浏览器都可以正确地解析。

可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。

HTML语法要求比较松散，对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的电脑来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML。

与HTML 4的区别

  • 文档结构
    • DOCTYPE 是强制性的。
    • <html> 中的 XML namespace 属性是强制性的。
    • <html>、<head>、<title> 以及 <body> 也是强制性的
  • 元素语法
    • 文档必须有一个根元素。
    • 文档应该是结构良好的，所有的标签必须合理地嵌套。
    • 所有的HTML元素名称和属性名称都要小写。
    • 所有的元素都必须有结束标签或者以特殊的方式书写。
    • 脚本和样式的元素被声明为具有#PCDATA内容。
  • 属性语法
    • 属性值必须总是使用引号包裹，包括那些以数值类型出现的。
    • 禁止属性简化，属性值对必须书写完整。
    • 属性值中祛除前缀和后缀的空白字符，将一个或多个空白字符序列映射为单个词间空格。

HTML5

HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。

XHTML1.1为XHTML最后的独立标准，2.0止于草案阶段。XHTML5则是属于HTML5标准的一部分，且名称已改为“以XML序列化的HTML5”，而非“可扩展的HTML”。

XHTML5（XML-serialized HTML5）

XHTML5是对HTML5的XML序列化。XML文档必须被设置为XML互联网文件类型，像application/xhtml+xml或者application/xml。XHTML5要求像XML一样严格的格式化的语法。在XHTML5中，HTML5的<!DOCTYPE HTML>可有可无的。

XHTML5并非XHTML的第5版，没有自己独立的标准规范，而是HTML5的一种序列化方式。XHTML1.x和2.0使用的名字是Extensible HyperText Markup Language，不同于XHTML5。

HTML5新增内容

HTML5添加了许多新的语法特征，其中包括<video>、<audio>和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易地在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。

  • 新增元素：
    • 脚本元素：<canvas>、
    • 多媒体元素：<audio>、<video>、<source>、<embed>、<track>
    • 表单元素：<datalist>、<keygen>、<output>
    • 语义元素：<article>、<aside>、<bdi>、<command>、<details>、<dialog>、<summary>、<figure>、<figcaption>、<footer>、<header>、<main>、<mark>、<meter>、<nav>、<progress>、<ruby>、<rt>、<rp>、<section>、<time>、<wbr>
  • 新的API
    • 除了原先的DOM接口，HTML5增加了更多样化的应用程序接口（API）
      • Canvas
      • 定时媒体播放
      • 离线
      • 可编辑内容
      • 拖放
      • 历史
      • MIME和协议进程时表头登记
      • 微数据
      • 网络消息
      • 网络存储
    • W3C给这些技术单独出版了说明文档
      • 地理位置
      • 网页SQL数据库 ─ 本地SQL数据库（不再维护）
      • IndexedDB
      • 文件 ─ 处理文件上传和操纵文件
      • 目录和文件系统 ─ 这个API是为了满足客户端在没有好的数据- 库支持情况下存储要求
      • 文件写入 ─ 从网络应用程序向文件里写内容
      • 网络音频
      • ClassList
      • 网络加密
      • WebRTC

HTML 5和XHTML 1.x的差异

  • 文件类型声明（）仅有一型：<!DOCTYPE HTML>。
  • 新的解析顺序：不再基于SGML。
  • 新的元素：section, video, audio, bdi, progress, nav, meter, time, article, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr, track。
  • input元素的新类型：date, email, url等等。
  • 新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。
  • 全局属性：id, tabindex, repeat。
  • 新的全局属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
  • 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

从继承关系上讲，HTML是一种基于SGML的应用，是一种非常灵活的置标语言，而XHTML则基于XML，XML是SGML的一个子集。

常见的 DOCTYPE 声明

<!--  
	XHTML 1.0 Strict
	这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素
	框架集是不允许的。结构必须按标准格式的 XML 进行书写
-->
<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>

<!--  
	XHTML 1.0 Transitional
	这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素
	框架集是不允许的。结构必须按标准格式的 XML 进行书写
-->
<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>

<!--  
	XHTML 1.0 Frameset
	这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容
-->
<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
>

<!--  
	XHTML 1.1
	这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块
-->
<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>

XML

可扩展标记语言（英语：Extensible Markup Language，简称：XML）是一种标记语言。XML是从标准通用标记语言（SGML）中简化修改出来的。

XML设计是用来传送和携带数据信息，不用于表现和展示数据，HTML则用来表现数据，所以XML用途的焦点是在于说明数据是什么以及携带数据信息。

  • 富文档（Rich Documents）- 自定文件描述并使其更丰富
    • 属于文件为主的XML技术应用
    • 标记是用来定义一份资料应该如何呈现
  • 元数据（Metadata）- 描述其它文件或网络资讯
    • 属于资料为主的XML技术应用
    • 标记是用来说明一份资料的意义
  • 配置文档（Configuration Files）- 描述软件设置的参数

XML定义结构、存储信息、传送信息。

<?xml version="1.0"?>
<note>
	<sender>发送者</sender>
	<receiver>接收者</receiver>
	<topic>主题</topic>
	<content>内容</content>
</note>

ML

1288677-20180102165648440-35197995.png

标准通用标记语言（Standard Generalized Markup Language，SGML）是现时常用的超文本格式的最高层次标准，是可以定义标记语言的元语言，甚至可以定义不必采用< >的常规方式。由于它的复杂，因而难以普及。

GML是SGML的先驱和基础，标准通用标记语言是当今创建结构化文档描述语言规则的战略集合。

广义标记语言（Generalized Markup Language，GML）是一组宏，用于为IBM SCRIPT程序实现基于意图的（程序上的）文本格式化标记标签。

以上都有一个共同的名字ML。

标记语言（英语：Markup Language，ML），也称置标语言、标记语言、标志语言、标识语言、标记语言，是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于该网页结构和数据的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和链接等）与原来的文本结合在一起，但是使用标记（markup）进行标志。

avatar
文章
阅读
粉丝