HTML中的那些事儿

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。

HTML简史

  • 1993年中期互联网工程任务组(IETF)发布首个HTML规范提案。

  • 1995年11月24日 HTML 2.0作为IETF RFC 1866发布,追加RFC的附加功能:

    • 1995年11月25日:RFC 1867(基于表单的文件上传)
    • 1996年5月:RFC 1942(表格)
    • 1996年8月:RFC 1980(客户端图像映射)
  • 1997年1月:RFC 2070国际化

  • 1997年1月14日 HTML 3.2作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本,因IETF于1996年9月12日关闭它的HTML工作组。

  • 1997年12月18日 HTML 4.0作为W3C推荐标准发布。它提供三种变化:

    • 严格(Strict),过时的元素被禁止。
    • 过渡(Transitional),过时的元素被允许。
    • 框架集(Frameset),大多只与框架相关的元素被允许。
  • 1998年4月24日 HTML 4.0进行微调,不增加版本号。

  • 1999年12月24日 HTML 4.01作为W3C推荐标准发布。它同样提供三种变化,最终勘误版于2001年5月12日发布。

  • 2000年5月 ISO/IEC 15445:2000(”ISO HTML”,基于HTML 4.01严格版)作为ISO/IEC国际标准发布。在ISO中这一标准位于[ISO/IEC JTC 1/SC 34]域(ISO/IEC联合技术委员会1、小组委员会34 – 文档描述与处理语言)。

  • 2014年10月28日 HTML 5作为W3C推荐标准发布。

语义类标签

什么是语义类标签

超文本标记语言是由一个个标签组成,其中语义类标签是会经常出现的一类标签,它们的特点是视觉表现上都差不多,主要的区别在于它们表示了不同的语义,比如sectionnavp这些都是语义类的标签。

语义是我们说话表达的意思,多数的语义实际上都是由文字来承载的。语义类标签则是对文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义标签代为表达。

为什么要用语义类标签

  • 语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 CSS 的时候,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护。
  • 除了对人类友好之外,语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合搜索引擎检索(SEO),也可以让搜索引擎爬虫更好地获取到更多有效信息,有效提升网页的搜索量,并且语义类还可以支持读屏软件,根据文章可以自动生成目录等等。

怎么合理使用语义类标签

  • 场景一:作为自然语言和纯文本的补充,用来表达一定的结构或者消除歧义。例:

    <em> 标签标记出需要用户着重阅读的内容, <em> 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。通常该元素会被浏览器展示为斜体文本, 但是它不应该仅仅用于应用斜体样式,如果仅需要斜体样式应使用css样式实现。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- 现有两句话 -->
    今天我吃了一个苹果。
    今天我吃了一个苹果。

    <!-- 如果着重标签的位置不一样所表达的含义就完全不一样 -->
    今天我吃了一个<em>苹果</em>
    今天我吃了<em>一个</em>苹果。

    <!-- 前一句的侧重点在于种类上,侧重表达我吃的是苹果而不是香蕉橙子。 -->
    <!-- 前二句的侧重点在于数量上,侧重表达我吃的是一个不是两个三个。 -->
  • 场景二:文章标题摘要。例:

    h1-h6 是最基本的标题,它们表示了文章中不同层级的标题。有些时候,我们会有副标题,为了避免副标题产生额外的一个层级,我们使用 hgroup 标签。在 hgroup 中的 h1-h6 被视为同一标题的不同组成部分。

    未使用group标签:

    1
    2
    3
    <h1>HTML中的那些事儿</h1>
    <h2>HTML简史</h2>
    <p>balah balah</p>

    生成以下标题结构:

    • HTML中的那些事儿
      • HTML简史

    使用hgroup标签:

    1
    2
    3
    4
    5
    <hgroup>
    <h1>HTML中的那些事儿</h1>
    <h2>HTML简史</h2>
    </hgroup>
    <p>balah balah</p>

    生成以下标题结构:

    • HTML中的那些事儿——HTML简史

    从 HTML 5 开始,我们有了 section 标签,这个标签可不仅仅是一个“有语义的 div”,它会改变 h1-h6 的语义。section 的嵌套会使得其中的 h1-h6 下降一级,因此,在 HTML5 以后,我们只需要 section 和 h1 就足以形成文档的树形结构:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section>
    <h1>HTML中的那些事儿</h1>
    <p>balah balah balah balah</p>
    <section>
    <h1>HTML简史</h1>
    <p>balah balah</p>
    </section>
    <section>
    <h1>语义类标签</h1>
    <p>balah balah</p>
    </section>
    ......
    </section>

    生成以下标题结构:

    HTML中的那些事儿

    • HTML简史
    • 语义类标签
  • 场景三:适合机器阅读的整体结构

    应用了语义化结构的页面,可以明确地提示出页面信息的主次关系,它能让浏览器很好地支持“阅读视图功能”,还可以让搜索引擎的命中率提升,同时,它也对视障用户的读屏软件更友好。我们正确使用整体结构类的语义标签,可以让页面对机器更友好。这是一个典型的body结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <body>
    <header>
    <nav>
    ……
    </nav>
    </header>
    <aside>
    <nav>
    ……
    </nav>
    </aside>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>
    <address>……</address>
    </footer>
    </body>
    • header,通常出现在前部,表示导航或者介绍性的内容。
    • footer,通常出现在尾部,包含一些作者信息、相关链接、版权信息等。
    • aside,表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容。aside 很容易被理解为侧边栏,实际上二者是包含关系,侧边栏是 aside,aside 不一定是侧边栏。
    • address,表示“文章(作者)的联系方式”,address 明确地只关联到 article 和 body。

如果你无法做到准确使用这些语义类标签,那建议你先不要使用,以免造成歧义。比如有些前端工程师喜欢给所有并列关系的元素都套上 ul。ul 多数出现正在行文的中间,它的上文多数在提示:要列举某些项。但是,如果所有并列关系都用 ul,会造成大量冗余标签。

元信息类标签

所谓元信息,是指描述自身的信息,元信息类标签,就是 HTML 用于描述文档自身的一类标签,它们通常出现在 head 标签中,一般都不会在页面被显示出来。元信息多数情况下是给浏览器、搜索引擎等机器阅读的,有时候这些信息会在页面之外显示给用户,有时候则不会。

head标签

head 标签本身并不携带任何信息,它主要是作为盛放其它语义类标签的容器使用。head 标签规定了自身必须是 html 标签中的第一个标签,它的内容必须包含一个 title标签,并且最多只能包含一个base标签 。如果文档作为 iframe,或者有其他方式指定了文档标题时,可以允许不包含 title 标签。

title标签

title 标签表示文档的标题,这主要是考虑到 title 作为元信息,可能会被用在浏览器收藏夹、微信推送卡片、微博等各种场景,这时侯往往是上下文缺失的,所以 title 应该是完整地概括整个网页内容的。而 h1 则仅仅用于页面展示,它可以默认具有上下文,并且有链接辅助,所以可以简写,即便无法概括全文,也不会有很大的影响。

base标签

base 标签实际上是个历史遗留标签。它的作用是给页面上所有的 URL 相对地址提供一个基础。base 标签最多只有一个,它改变全局的链接地址,它是一个非常危险的标签,容易造成跟 JavaScript 的配合问题,所以在实际开发中,我比较建议你使用 JavaScript 来代替 base 标签。

meta标签

meta 标签是一组键值对,它是一种通用的元信息表示标签。在 head 中可以出现任意多个 meta 标签。一般的 meta 标签由 name 和 content 两个属性来定义。name 表示元信息的名,content 则用于表示元信息的值。

1
2
3
4
5
6
7
8
9
<!-- HTML中meta标签新增charset属性 -->
<meta charset="UTF-8" >

<!-- http-equiv属性表示执行一个命令 -->
<!-- 并且指定了http编码方式 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- viewport没有在HTML标准中定义,却是移动端开发的事实标准 -->
<meta name="viewport" content="width=500, initial-scale=1">

链接元素

超链接是HTML里最重要的元素之一,没有了超链接的HTML不足以叫超文本。HTML里除了a标签是链接元素之外,还有area标签和link标签。

link标签

link标签会产生一个链接,它可能生成超链接,这些超链接不会像a标签那样显示在网页中,也可能会生成外部资源链接。在多数浏览器中,生成超链接的link标签不产生任何作用,但这些lInk标签被搜索引擎和一些浏览器插件识别。另外一些link标签会把外部的资源链接到文档中,即实际下载这些资源。

  • 超链接类link

    超链接型link标签是一种被动型链接,即用户不操作就不会主动下载。link标签具有特定的rel属性,会成为特定类型的link标签。产生超链接型的link标签包括:

    • rel="canonical"型link

      这个标签提示页面的主URL,在网站中可能存在多个URL指向同一个页面的情况,搜索引擎访问这类页面时会去掉重复的URL,这个link会提示搜索引擎保留那一个URL。

      1
      <link rel="canonical" href="...">
    • rel="alternate"型link

      这个标签提示页面它的变形形式,通常是给搜索引擎使用的。最常见的场景是rss订阅。

      1
      <link rel="alternate" type="application/rss+xml" title="RSS" href="...">
    • rel="prev"型link和rel="next"型link

      在互联网应用中,很多网页都属于一个序列。比如分页浏览、图片展示等,每个网页是序列中的一个项。这种时候就适合用prevnext型link,用来告诉搜索引擎或者浏览器它的前一项和后一项,这有助于页面的批量展示。

    • 其他超链接类的link

      其他超链接类link标签都表示一个跟当前文档相关联的信息,可以把这样的link标签视为一种带链接功能的meta标签。

      • rel=”author”

        链接到本页面的作者,一般是mailto:协议

      • rel=”help”

        链接到本页面的帮助页

      • rel=”license”

        链接到本页面的版权信息页

      • rel=”search”

        链接到本页面的搜索页面(一般用于站内搜索)

  • 外部资源类link

    外部资源类link标签会主动下载,并且根据rel类型做不同的处理。外部资源类link标签包括:

    • 具有icon型的link

      这类链接表示页面的icon,多数浏览器会读取icon型link并把icon展示出来。icon型link是唯一一个外部资源类的元信息link,其他元信息类link都是超链接,这意味着icon型link中的图标地址默认会被浏览器下载使用。

      如果没有指定icon型link,多数浏览器会使用域名根目录下的favicon.ico文件,即使不存在该文件也会请求下载,所以从性能考虑,一定要保证页面中具有icon型的link。只有icon型的link有有效的sizes属性,HTML标准允许出现多个icon型link,并且用sizes指定它适合的icon尺寸。

    • 预处理类link

      预处理类link允许我们控制浏览器提前针对一些资源去做一些操作以提高性能(不当使用反而会降低性能)

      • dns-prefetch型link

        提前对一个域名做dns查询,这中link的href属性只有域名有意义。

      • preconnect型link

        提前对一个服务器建立TCP连接

      • prefetch型link

        提取href指定的url内容

      • preload型link

        提前加载href指定的url

      • prerender型link

        提前渲染href指定的url

    • moduleopreload型的link

      预先加载(完成下载并放入内存,但不会执行)一个JavaScript模块,保证JS模块不必等到执行时才加载。

      1
      <link rel="modulepreload" href="app.js">
    • stylesheet型的link

      基本用法是从一个css文件创建一个样式表,这里的type属性可以没有,如果有,则其值必须是text/css才会生效。rel前可以加上alternate,即rel="alternate stylesheet",此时必须指定type属性。这可以为页面创建一份变体样式,一些浏览器支持从浏览器菜单中切换这些样式,但大部分浏览器不支持这个功能。

    • pingback型的link

      该类型的link表示本网页被引用时应该使用的pingback地址,这个机制是一份独立的标准,遵循pingback协议的网站在引用本页面时会向这个pingback url发送一个消息。

a标签

a标签是anchor的缩写,意为锚点,用来表示文档中特定的位置。a标签其实同时充当了链接和目标点的角色,当a有href属性时它是链接,当它有name时,它是链接的目标。

a标签和link标签一样也可以拥有rel属性:

  • alternate

  • author

  • help

  • license

  • next

  • prev

  • search

  • tag

    表示本网页所属的标签

  • bookmark

    到上级章节的链接·

  • nofollow

    此链接不会被搜索引擎索引

  • noopener

    此链接打开的网页无法使用opener来获得当前页面的窗口

  • noreferrer

    此链接打开的网页无法使用referrer来获得当前页面的url

  • opener

    打开的网页可以使用 window.opener 来访问当前页面的 window 对象,这是 a 标签的默认行为

area标签

area标签和a标签类似,但它是区域型链接。area标签支持的rel与a标签一样,它是整个HTML规则中唯一支持非矩形热区的标签,它的shape属性支持三种类型:

  • 圆形

    circle或circ,coords支持三个值,分别为中心点的x,y坐标和圆形半径r

  • 矩形

    rectangle或rect,coords支持两个值,分别为两个对角顶点坐标(x1,y1)和(x2,y2)

  • 多边形

    polygon或poly,coords至少包括6个值,表示多边形的各个顶点

area标签必须跟img标签和map标签配合使用:这个例子展示了在一张图片上画热区并且产生链接,分别使用了矩形、圆形和多边形三种 area。

1
2
3
4
5
6
7
8
9
10
11
12
13
<p>
Please select a shape:
<img src="shapes.png" usemap="#shapes"
alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
<map name="shapes">
<area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
<area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
<area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href="yellow.html" alt="Yellow star.">
</map>
</p>
打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • © 2019-2021 musi

请我喝杯咖啡吧~

支付宝
微信