Web 前端学习笔记之 HTML 入门（1）

HTML 简介

什么是 HTML

HTML 是一种使用标签来描述页面的内容和结构的语言。

HTML 指的是超文本标记语言（Hyper Text Markup Language）

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 的发展史

HTML 的产生

1991年，Tim Berners-Lee编写了一份叫做“HTML标签”的文档，里面包含了大约20个用来标记网页的HTML标签。他直接借用SGML的标记格式，也就是后来我们看到的HTML标记的格式。

从IETF到W3C：HTML 4之路

HTML 1并不曾存在，HTML的第一个官方版本就是由IETF（互联网工程任务组）推出的HTML 2.0。

后来，W3C取代IETF的角色，成为HTML的标准组织，1990年代的后半页，HTML的版本被频繁修改，1997年发布了HTML 3.2，1999年发布了HTML 4.01， 至此，HTML到达了它的第一个拐点。

HTML 3.2 特点：

Netscape 引入私有标签

HTML 3.0 失败

W3C 接管 HTML 标准化

HTML 4.01 特点

样式与内容分离，CSS 支持

Doctype

指定HTML页面使用的标准和版本

浏览器根据doctype决定使用哪种渲染模式

XHTML 1.0：XML风格的HTML

HTML在HTML 4.01之后的第一个修订版本就是XHTML 1.0。XHTML 1.0是基于HTML 4.01的，用 XML 语法重新定义 HTML，并没有引入任何新标签或属性，唯一的区别是语法，HTML对语法比较随便，而 XHTML则要求XML般的严格语法。

出力不讨好的XHTML 2

对W3C而言，到了HTML 4已经是功德圆满，他们的下一步工作是XHTML 2，希望将Web带向XML的光明未来。虽然XHTML 2听上去和XHTML 1类似，它们却有很多差别。

XHTML 2不向前兼容，甚至不兼容之前的HTML

去除样式类标签

去除 img、a

彻底修改 Form

开发者不欢迎，浏览器不支持

WHATWG：与W3C决裂

W3C闭门造车的作风引起了一些人的不满，来自Opera,Apple,以及Mozilla的代表开始表达反对声音。2004年，Opera的 Ian Hickson提议在HTML基础上进行扩展以适应新的Web应用，该提议遭到W3C的拒绝。于是，他们自发组织成立了超文本应用技术工作组，就是WHATWG。

从WebApps1.0到HTML 5

一开始，WHATWG的主要工作包括两部分，Web Forms 2.0和Web Apps 1.0，它们都是HTML的扩展，后来，他们合并到一起成为现在的HTML 5规范。在WHATWG致力于HTML 5的同时，W3C继续他们的XHTML 2.0。

2006年10月，Web之父Tim Berners-Lee发表了一篇博客文章，表示，从HTML走向XML的路是行不通的，几个月后，W3C组建了一个新的HTML工作组，他们非常明智地选择了WHATWG的成果作为基础。直到2009年，W3C宣布终止XHTML 2的工作。

HTML 5

2008年，W3C HTML5 草案发布。

2012年12月19号，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血历时三年的HTML5规范已经正式定稿。

HTML5 设计思想：

兼容已有内容

避免不必要的复杂性

解决现实的问题

优雅降级

尊重事实标准

用户 》开发者 》浏览器厂商 》标准制定者 》理论完美

HTML5 中的变化：

doctype、meta

新增语义化标签和属性

去掉纯展示性标签

canvas、video、audio、离线、本地存储、拖拽等

HTML5 语法特点：

标签不区分大小写，推荐小写

空标签可以不闭合，比如 input、meta

属性不必引号，推荐双引号

某些属性值可以省略，比如 required、readonly

HTML 中的文本标签

p 标签

定义和用法

<p> 标签定义段落。p 元素会自动在其前后创建一些空白。

实例

<p>This is some text in a very short paragraph</p>

h1 到 h6 标签

定义和用法

<h1> 到 <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

实例

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

hr 标签

定义和用法

<hr> 标签在 HTML 页面中创建一条水平线。一般用于段落级别的话题切换。

实例

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

列表标签

有序列表：ol 标签

定义和用法

<ol> 标签定义有序列表。

实例

<h1>世界电影票房排行榜</h1>
<ol start="1">
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>

说明：

1. 属性

start

规定有序列表的起始值。

2. <li> 标签定义列表项目，可用在有序列表（<ol>）和无序列表（<ul>）中

无序列表：ul 标签

定义和用法

<ul> 标签定义无序列表。

实例

<ul>
<li>1个西瓜</li>
<li>2瓶矿泉水</li>
<li>1盒酸奶</li>
<li>
垃圾袋
<ul>
<li>大号垃圾袋</li>
<li>小号垃圾袋</li>
</ul>
</li>
</ul>

说明：

ul

标签可以嵌套使用表示多层列表

定义列表：dl 标签

定义和用法

<dl> 标签定义了定义列表。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

实例

<h3>霸王别姬</h3>
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>

引用标签

blockquote 标签

定义和用法

<blockquote> 标签定义块引用。

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

实例

<blockquote cite="http://t.cn/RfjKO0F">
天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长
的民众产生、长育出来的，所以没有 这种民众，就没有天才。
</blockquote>

说明：属性

cite

为可选的属性，规定引用的来源。

q 标签

定义和用法

<q> 标签定义短的引用。浏览器经常在引用的内容周围添加引号。

实例

<q>Here is a short quotation here is a short quotation</q>

说明：<q> 与 <blockquote> 的区别

两者本质是一样的。区别在于它们的显示和应用。

1. <q>标签一般用于简短的行内引用，而比较长的部分一般使用<blockquote> 标签

2. <q>标签一般会在引用内容的周围添加引号，而<blockquote> 标签不会添加引号，它会在左、右两边进行缩进。

cite 标签

定义和用法

<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

实例

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

预格式化文本：pre 标签

定义和用法

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是结合<code> 标签用来表示计算机的源代码。

实例

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

内容划分

<article> 标签

<article> 标签规定独立的自包含内容。

<header> 标签

<header> 标签定义文档的页眉（介绍信息）。

<section> 标签

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<footer> 标签

<footer> 标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

实例

<article>
<header>
<h1>字体排印学</h1>
<p>作者：XXX</p>
</header>
<section>
<h2>语源及其范围</h2>
<p>在当代，字体排印学的相关研究和实践范围相当广...</p>
<p>以字体排印为核心的图像中，通常使用四项基本手...</p>
</section>
<section>
<h2>可读性和易读性</h2>
<p>可读性和易读性经常被混淆。可读性通常用...</p>
<p>与之相对，易读性描述的是排印文本阅读时的...</p>
</section>
<footer>
<h2>参考链接</h2>
<nav>
<ul>
<li><a href="">衬线字体</a></li>
<li><a href="">字体设计</a></li>
</ul>
</nav>
</footer>
</article>

强调标签

标签	用法
strong	把文本定义为语气更强的强调的内容
em	从一句话中突出某个词语
b	将词语从视觉上和其它部分区分，比如一篇论文摘要中的关键词
i	显示斜体文本效果
dfn	可标记那些对特殊术语或短语的定义
abbr	指示简称或缩写
code	用于表示计算机源代码或者其他机器可以阅读的文本内容
kbd	定义键盘文本
var	表示变量的名称，或者由用户提供的值
samp	表示一段用户应该对其没有什么其他解释的文本字符

说明：可以在 abbr 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 元素上时显示出简称/缩写的完整版本。

上标和下标

<sup> 标签：定义上标文本。

<sub> 标签：定义下标文本。

实例

<p>E = MC<sup>2</sup></p>
<p>CO<sub>2</sub></p>

插入和删除

<del> 标签：定义文档中已被删除的文本。

<ins> 标签：定义已经被插入文档中的文本。

实例

<p><del>原价：299元</del> <ins>双11特价：188元</ins></p>

换行控制

<br> 标签

<br> 标签可插入一个简单的换行符。该标签是空标签（意味着它没有结束标签，这样写<br></br>是错误的）。

<wbr> 标签

Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

实体字符

实体字符	代表字符
&	&
>	>
<	<
©	©
¥	¥
☯	☯

参考资料

w3school

回顾时光 细看HTML发展史