HTML – 1

By | 10月 22, 2021

1. HTML历史

HTML全程叫Hyper Text Markup Language(超文本标记语言),说白了就是一些标记符号告诉浏览器怎么显示一个Document(文档)。HTML标签有各种属性,包括样式属性,为了更好地维护样式即内容和样式分离管理,便出现了CSS(Cascading Style Sheets)层叠样式表。作为标记语言,其本身是没有流程控制和逻辑处理等能力的,JavaScript脚本可以嵌入在HTML里面,操控DOM执行各种任务。

HTML各个版本时间轴:

  • HTML 1:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
  • HTML 2:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。
  • HTML 3:1997年1月14日,W3C推荐标准。
  • HTML 4:1997年12月18日,W3C推荐标准。
  • HTML 5:2014年10月28日,W3C推荐标准。其实2007年就发布了draft版本,2012年被提名为候选标准版本。

1.1 插曲 XHTML

XHTML(eXtensible HyperText Markup Language)可扩展超文本标记语言,相对HTML语法更严谨。但XHTML有个问题,它和HTML是两个独立标准,而且不兼容HTML。看名字感觉XHTML更高级些,当初我刚学HTML时也这么认为,毕竟人家是extensible HTML。事实上XHTML已经没落了:

  • 2007年,W3C宣布HTML5作为下一代的HTML的标准
  • 2009年,W3C允许XHTML2工作小组解散,XHTML5作为HTML下一代唯一的标准,包括XML和non-XML,建议不要再用XHTML。

1.2 杂谈HTML5和XHTML

首先认识三个组织:

  1. IETF (Internet Engineering Task Force)  互联网工程任务组
  2. W3C (World Wide Web Consortium   万维网联盟、web领域中,最具权威和影响力的国际中立性技术标准机构
  3. WHATWG(Web Hypertet Application Technology Working Group) 超文本应用技术工作组、由浏览器厂商组成的。

Tim Berners Lee是WEB之父,1991年Tim Berners Lee这个人编写了一个HTML的文档。

W3C和XHTML的由来

1995年11月IETF发表了HTML2.0.1994年,Tim Berners Lee成立了W3C组织,成了web标准的制定者。W3C发布了HTML4,并引入了XML,发展成XHTML。

XHTML的没落和HTML5的崛起

W3C闭门造车的作风引起了各大浏览器厂商的不满,于是各大浏览器厂商联合起来成立了WHATWG组织,在HTML基础上进行扩展,致力于研发HTML5。而于此同时,W3C继续研发XHTML。由于HTML5同时向后兼容HTML和XHTML,所以W3C无奈放弃了自家研发的XHTML,声明采用HTML5作为下一代HTML的标准。从此,计算机学生再也不用多学一个叫做XHTML的语言了。

1.3 前端技术发展阶段

从前端技术的角度,互联网的发展可分为4个阶段:

  1. Web 1.0以内容为主的网络,主流技术是HTML + CSS。
  2. Web 2.0的Ajax应用,热门技术是JavaScript/DOM/异步数据请求。
  3. HTML5 + CSS3的时代,两者相辅相成。
  4. 单页面前端UI开发框架,热么技术是NodeJS, React, Vue, TypeScript, Electron等

注:前三个阶段是2010年,微软工程师在MIX10大会上总结的。

2. HTML基本概念

HTML页面是由许许多多不同的标签(tag)构成,学习HTML,首先就是掌握各种标签的用法。

<a href="/" id="home">Home</a>

‘a’就是标签名字,‘href’和’id’是标签属性,与XML里的概念一样。标签被渲染后,形成一个DOM树,每一个标签在DOM树里,就对应一个元素(element)。

2.1 块级元素,行内元素

所有元素可以分成两大类:块级元素(block)和行内元素(inline)。

块级元素默认占据一个独立的区域,在网页上会自动另起一行,占据 100% 的宽度。

<p>hello</p>
<p>world</p>

hello

world

行内元素默认与其他元素在同一行,不产生换行。比如,span就是行内元素,通常用来为某些文字指定特别的样式。

<p><span>hello</span> the <span>world</span></p>

hello the world

2.2 声明一个HTML5网页

第一行定义文件类型<!DOCTYPE html>,浏览器会按照HTML5的规则处理网页。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
</html>

2.3 空格和换行

<p>       hello
world
</p>

hello

world

上面的标签和“<p>Hello world</p>”等价,原因是:

  • 浏览器忽略内容头部和尾部的空白,相当于执行了trim()。
  • 内容中间的换行会替换成空白,并且多个连续空白会替换成一个空格。

2.4 如何在HTML中使用CSS和Javascript

3. 结构标签

HTML 标签的一个重要作用,就是声明网页元素的性质,使得用户只看标签,就能了解这个元素的意义,阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

下面介绍常用的结构标签:<header>, <footer>, <main>, <article>, <aside>, <section, <nav>及<hgroup>。这些标签本身和<div>没有区别,显示效果一样,只是为了增强语义,相当于给div起了别名。这是一个典型的语义结构的网页:

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

3.1 <header>, <footer>

<header>标签可以用在多个场景,既可以表示整个网页的头部,也可以表示一篇文章或者一个区块的头部。

如果用在网页的头部,就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。

<!DOCTYPE html>
<html>
  <header>
    <h1>公司名称</h1>
    <ul>
      <li><a href="/home">首页</a></li>
      <li><a href="/about">关于</a></li>
      <li><a href="/contact">联系</a></li>
    </ul>
    <form target="/search">
      <input name="q" type="search" />
      <input type="submit" />
    </form>
  </header>
</html>

如果<header>用在文章的头部,则可以把文章标题、作者等信息放进去。

<article>
  <header>
    <h2>文章标题</h2>
    <p>张三,发表于2010年1月1日</p>
  </header>
</article>

<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部,就称为“页尾”,通常包含版权信息或者其他相关信息。

<body>
  <footer>
    <p>© 2018 xxx 公司</p>
  </footer>
</body>

3.2 <main>

<main>标签表示页面的主体内容,放在<body>里。

3.3 <article>

<article>标签表示页面里面一段完整的内容,即使页面的其他部分不存在,也具有独立使用的意义,通常用来表示一篇文章或者一个论坛帖子。

3.4 <aside>

<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>,可以用来放置侧边栏,但不一定就在页面的侧边;文章级别的<aside>,可以用来放置补充信息、评论或注释。

3.5 <section>

<section>标签表示一个含有主题的独立部分,通常用在文档里面表示一个章节,比如<article>可以包含多个<section>

<article>
  <h1>文章标题</h1>
  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>
  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>
</article>

3.6 <nav>

<nav>标签用于放置页面或文档的导航信息.,一个页面可以有多个<nav>,比如一个用于站点导航,另一个用于文章导航。

3.7 <hgroup>

用于将页面或section里的标题进行group,例如一个文章有一个大标题和一个小标题。

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>

4. 文本标签

4.1 <div>

<div>是一个通用标签,表示一个区块(division)。它没有语义,如果网页需要一个块级元素容器,又没有其他合适的标签,就可以使用这个标签。

它的最常见用途就是提供 CSS 的钩子,用来指定各种样式,所谓的css + div。

<div class="main">
  <div class="article">
    <div class="title">
      <h1>文章标题</h1>
    </div>
  </div>
</div>

上面代码读起来很费力,因为不带有语义。后来,HTML 5 就提出了语义标签,改进了上面的代码。

<main>
  <article>
    <header>
      <h1>文章标题</h1>
    </header>
  </article>
</main>

4.2 <wbr>可选换行

如果一行的宽度足够,则不断行;如果宽度不够,需要断行,就在<wbr>的位置的断行。它是为了防止浏览器在一个很长的单词中间,不正确地断行或者不断行,所以事先标明可以断行的位置,主要用于欧洲一些单词很长的语言或者 URL 的断行。

<p>
Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz
</p>

Fernstraßenbauprivatfinanzierungsgesetz

4.3 <pre> preformatted,保留空白

<pre>是一个块级元素,表示保留原来的格式(preformatted),即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。

<pre>hello
 <strong>the</strong>   world</pre>
hello
 the   world

注意,HTML 标签在<pre>里面还是起作用的。<pre>只保留空格和换行,不会保留 HTML 标签。

4.4 <strong>, <b>,粗体

<p>开会时间是<strong>下午两点</strong>。</p>
开会时间是下午两点

4.5 <em>, <i> emphasize 斜体

<p>我们<em>已经</em>讨论过这件事情了。</p>
我们已经讨论过这件事情了。

4.6 <sub>,<sup>,<var>

<sub>表示下标,<sup>表示上标。

<p>水分子是 H<sub>2</sub>O</p>
<p>3<sup>2</sup> = 9</p>

水分子是 H2O

32 = 9

<var>标签表示代码或数学公式的变量。

<p>勾股定理是
  <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>。
</p>
勾股定理是 a2 + b2 = c2

4.7 <u> underline, <s> strikethrough

<u>标签是一个行内元素,表示对内容提供某种注释,提醒用户这里可能有问题,基本上只用来表示拼写错误。浏览器默认以下划线渲染内容。

<p>
一个容易写错的成语是把<em>安分守己</em>写成<u>安份守己</u>。
</p>
一个容易写错的成语是把安分守己写成安份守己

<s>标签是一个行内元素,为内容加上删除线。

<p>今天特价商品:<s>三文鱼</s>(售完)</p>
今天特价商品:三文鱼(售完)

4.8 <blockquote>,<cite>,<q>

<blockquote>是一个块级标签,表示引用他人的话。<blockquote>标签有一个cite属性,它的值是一个网址,表示引言来源,不会显示在网页上。

<blockquote cite="https://quote.example.com">
  <p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>

天才就是 1% 的天赋和99%的汗水。

<cite>也可以作为内联标签单独使用。

<p>更多资料请看<cite>维基百科</cite>。</p>
更多资料请看维基百科

<q>是一个行内标签,也表示引用。它与<blockquote>的区别,就是它不会产生换行。

<p>
  莎士比亚的《哈姆雷特》有一句著名的台词:
  <q cite="https://quote.example.com">活着还是死亡,这是一个问题。</q>
</p>
莎士比亚的《哈姆雷特》有一句著名的台词: 活着还是死亡,这是一个问题。

4.9 <code>

<code>标签是一个行内元素,表示标签内容是计算机代码,浏览器默认会以等宽字体显示。如果要表示多行代码,<code>标签必须放在<pre>内部。

<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>

  let a = 1;
  console.log(a);

4.10 <kbd>, <samp>

<kbd> Keyboard Input element,是一个行内元素,指用户从键盘输入的内容。

<p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> 重启。</p>
Windows 可以按下 Ctrl + Shift + Del 重启。

<samp>标签是一个行内元素,表示计算机程序输出内容。浏览器默认以等宽字体显示。

<p>如果使用没有定义的变量,浏览器会报错:
<samp>Uncaught ReferenceError: foo is not defined</samp>。
</p>
如果使用没有定义的变量,浏览器会报错: Uncaught ReferenceError: foo is not defined

4.11 <mark>高亮显示

<mark>是一个行内标签,表示突出显示的内容。Chrome 浏览器默认会以亮黄色背景,显示该标签的内容。

<p>我们讨论以后决定,<mark>运行会在下周三举办</mark>。</p>
我们讨论以后决定,运行会在下周三举办

4.12 <small> 小一号字条

<small>是一个行内标签,浏览器会将它包含的内容,以小一号的字号显示,不需要使用 CSS 样式。它通常用于文章附带的版权信息或法律信息。

<p><small>以上内容使用创意共享许可证。</small></p>
以上内容使用创意共享许可证。

4.13 <time>, <data>

<time>是一个行内标签,为跟时间相关的内容提供机器可读的格式。这方便搜索引擎抓取,或者下一步的其他处理。<time>datetime属性,用来指定机器可读的日期,可以有多种格式。

  • 有效年份:2011
  • 有效月份:2011-11
  • 有效日期:2011-11-18
  • 无年份的日期:11-18
  • 年度的第几周:2011-W47
  • 有效时间:14:5414:54:3914:54:39.929
  • 日期和时间:2011-11-18T14:54:39.929
<p>运动会预定<time datetime="2015-06-10">下周三</time>举行。</p>
运动会预定举行。

<data>标签与<time>类似,也是提供机器可读的内容,但是用于非时间的场合。

<p>本次马拉松比赛第一名是<data value="39">张三</data></p>。
本次马拉松比赛第一名是张三

4.13 <address>

<address>标签是一个块级元素,表示某人或某个组织的联系方式。

<p>作者的联系方式:</p>
<address>
  <p><a href="mailto:foo@example.com">foo@example.com</a></p>
  <p><a href="tel:+555-34762301">+555-34762301</a></p>
</address>

作者的联系方式:

foo@example.com

+555-34762301

4.14 <abbr> 缩写

<abbr>标签是一个行内元素,表示标签内容是一个缩写。它的title属性给出缩写的完整形式,或者缩写的描述。鼠标悬停在该元素上方时,title属性值作为提示,会完整显示出来。

<abbr title="HyperText Markup Language">HTML</abbr>
HTML

4.15 <ins>插入, <del>删除

<ins>标签是一个行内元素,表示原始文档添加(insert)的内容。<del>与之类似,表示删除(delete)的内容。它们通常用于展示文档的删改。浏览器默认为<del>标签的内容加上删除线,为<ins>标签的内容加上下划线。

<del><p>会议定于5月8日举行。</p></del>
<ins><p>会议定于5月9日举行。</p></ins>

会议定于5月8日举行。

会议定于5月9日举行。

4.16 <dfn> definition

<dfn>是一个行内元素,表示标签内容是一个术语(definition),可以把术语的定义写入<dfn>标签的title属性。

<p>
通过 TCP/IP 协议连接的全球性计算机网络,叫做
<dfn title=”全球性计算机网络”>Internet</dfn>。
</p>
通过 TCP/IP 协议连接的全球性计算机网络,叫做 Internet

4.17 <bdo>, <bdi>

<bdo>Bi-Directional Override,是一个行内元素。<bdo>dir属性,指定具体的文字方向。它有两个值,ltr表示从左到右,rtl表示从右到左。

<p>床前明月光,<bdo dir="rtl">霜上地是疑</bdo>。</p>
床前明月光,霜上地是疑

<bdi>The Bidirectional Isolate element,用于不确定文字方向的情况。比如,网页有一个部分是用户输入的内容,但是不知道输入内容的文字方向。让浏览器决定要文字方向。

<p><bdi>床前明月光,疑是地上霜。</bdi></p>

床前明月光,疑是地上霜。