# HTML 简介

刚进入前端领域,最先听到的名词估计就是 HTML,写几行 HTML,打开浏览器,就能立马看到效果,前端所见即所得,这也是它的迷人之处,那 HTML 到底是什么呢?它有什么规则,它发挥着什么作用?

# HTML 是什么

HTML 的全称是超文本标记语言(HyperText Markup Language),它不是编程语言,而是标记语言。HTML 通过标签来描述网页,打开电脑的记事本,写一段 HTML,保存为 .html 的文件,双击用浏览器打开,就能立马看到渲染完成的网页。HTML 是前端的骨架,如果类比一座房子,HTML 就是砖瓦,钢筋混泥土。它包含了网页的标题、段落、图片和视频等元素。在 Chrome 中右键检查我们浏览的任何一个网站,在 Elements 栏下,我们可以看到各式各样的 HTML 标签,就是它们 ,构成了我们浏览的网页的基石。

# HTML 元素的组成

HTML 元素由标签嵌套内容组成,HTML 元素可以嵌套。我们来看下一个简单的 HTML 元素:

<p>我是一个段落</p>
1

在这里,<p></p> 便是标签了。标签是由尖括号 <> 包含关键词 p,标签包括了开始标签和结束标签,在上面的例子中,<p> 就是开始标签,</p> 即结束标签,它们是一对,所以标签通常是成对出现的。

在一些 HTML 元素中,它们不需要包含内容,上面的“我是一个段落” 就是 p 标签的内容部分。不需要包含内容的 HTML 元素称为空元素,空元素只有开始标签,没有结束标签,比如 <img> 标签,它用来插入一张图片,图片的链接放在属性上;再比如 <br> 标签,它是用来加入一个换行,所以也不需要添加内容。

HTML 元素之间可以嵌套,比如我想在段落上加上斜体,我可以这样:

<p>我是一个段落,<i>我是段落里的斜体部分</i></p>
1

在浏览器中的效果,可点击这里查看。

HTML 标签可以拥有属性,属性放在开始标签中,属性与关键词之间、属性与属性之间有空格隔开。属性等号“=”后面便是属性值,属性值由引号""引起来,我们来看一个例子。

<img alt="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2664816/profile/profile-512.jpg?1544158617">
1

属性 src 指定了图片的 url 地址,alt 属性定义了可替换文本,当浏览器无法载入图片时,浏览器将显示这个替换文本。可以点击这里查看效果。

# 块级元素和行内元素

HTML 元素自带的一些特性让它们在浏览器中表现有差异,我们将 HTML 元素分为块级元素和行内元素,它们在浏览器中的表现如下:

  • 块级元素以块的形式展现,它们总是独占一行,将后面的元素挤到新的一行;

  • 行内元素紧挨着显示,不会自动换行,行内元素通常被块级元素包含着嵌套显示。

<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落,<i>我是段落里的斜体部分</i></p>

<span>我是一段文字</span>
<span>我是一段文字</span>
<span>我是一段文字</span>
1
2
3
4
5
6
7

在上面的例子中,p 元素总是独占一行显示,它是块级元素,i 和 span 元素则没有换行,是行内元素。可以点击这里查看效果。

# 一段简单的 HTML 示例

打开不同的网站我们会发现,它们有着类似的结构,下面给出了一个简单的示例,我们来看看一个完整的 HTML 页面由哪些部分构成。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML 示例</title>
  <link rel="stylesheet" type="text/css" href="xxx.css">
  <script src="xxx.js"></script>
</head>
<body>
  <h1>我是标题</h1>
  <p>我是段落</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

# DOCTYPE

<!DOCTYPE> 是文档类型声明,它用来告诉浏览器用什么规则解析 HTML 元素。在 HTML 4.01 中,文档类型声明需要引用 DTD(Document Type Definition,文档类型定义),这是因为 HTML 4.01 基于 SGML(Standard Generalized Markup Language,通用标记语言)。这里有两个概念,涉及到了 HTML 的发展历史,可以简单熟悉一下。DTD 规定了标记语言的规则,这样浏览器才能正确地显示内容。

HTML5 不基于 SGML,所以不需要引入 DTD,只需要 <!DOCTYPE html> 便对文档类型进行了声明。文档类型声明必需放在 HTML 文档的第一行。

# html

可以看到,html 元素在整个 HTML 文档的最外层,它是根元素,包裹着一个完整的页面。

head 元素是头部元素,它包含的内容不会在页面中显示。head 元素可以包含标题信息,元信息,样式表和脚本等。在上面的例子中,我们在 head 元素里添加了一些其他元素,我们来看下它们有什么作用。

  • <meta> 标签提供了页面相关数据信息,例子中的 <meta charset="utf-8"> 就定义了该文档使用 utf-8 字符编码集。同时还可以通过 <meta> 标签设置页面的描述、关键词等信息,这些信息有利于 SEO(Search Engine Optimization,搜索引擎优化),也就是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。通俗来讲就是用户在搜索页面时,你的网站会更靠前。
<meta name="description" content="网站的描述信息">
<meta name="keywords" content="网站关键词">
1
2
  • <title> 标签定义了页面的标题,我们在浏览器中打开一个页面,浏览器标签栏上的标题便是由它定义的。

  • <link> 标签通常用来链接一些与页面相关的外部资源,比如 css 文件。我们也能通过 <link> 标签来设置浏览器标签栏上的图标。

<link rel="icon" href="xxx.ico">
1
  • 除了用 <link> 标签引入外部 css 文件,我们还可以通过 <style> 标签直接定义样式信息。
<style type="text/css">
  h1 {
    color: #FFB5BF;
  }
  p {
    font-size: 16px;
  }
</style>
1
2
3
4
5
6
7
8
  • <script> 标签为页面引入脚本文件,我们可直接使用它的 src 属性,引入脚本文件的地址,也可以直接在页面中插入 JavaScript 代码。
<script type="text/javascript">
  document.write('Hello World!')        
</script>
1
2
3

在 HTML5 中,style 标签和 script 标签的 type 值都不再是必须的,默认值分别为“text/css”和“text/javascript”。

# body

body 元素定义了文档的主体,包含了所有显示在页面上的内容,比如文字,图片,表格,列表,超链接,音频,视频等等。

上面便是一个简单的 HTML 页面的构成模块,HTML 标签种类丰富,熟练掌握它们的使用,你可以任意写出一个列表,一张表格,或一个提交表单,推荐阅读 w3school 的 HTML 教程,建议完全掌握 HTML 后再阅读后面的章节,会轻松很多。

# HTML 语义化

HTML 语义化是指仅仅从 HTML 元素上就能看出页面的大致结构,比如需要强调的内容可以放在 <strong> 标签中,而不是通过样式设置 <span> 标签去做。不同浏览器对 HTML 元素的解析可能有差异,HTML 语义化便是在抛开样式之后,页面能有一个友好的展示效果。我们力求让页面有良好的结构,让页面的元素有含义,同时利于被搜索引擎解析,利于 SEO。HTML 语义化的建议:

  • 少使用无意义的 <div><span> 标签;

  • <label> 标签中设置 for 属性和对应的 <input> 关联起来;

  • 设置 <img> 标签的 alt 属性,给 <a> 标签设置 title 属性,利于 SEO;

  • 在页面的标题部分使用 <h1>~<h6> 标签,不需要给它们加多余的样式;

  • 与表单、有序列表、无序列表相关的标签不要单独使用。

HTML5 也新增了一些语义化的元素,我们通过标签名就能判断标签内容。使用语义元素的页面大致结构如下:

(语义元素使用示例)

语义元素的名称其实也很好理解,下面是它们的作用和用法:

  • <header> 标签通常放在页面或页面某个区域的顶部,用来设置页眉;

  • <nav> 标签可以用来定义导航链接的集合,点击链接可以跳转到其他页面;

  • <article> 标签中的内容比较独立,可以是一篇新闻报道,一篇博客,它可以独立于页面的其他内容进行阅读;

  • <section> 标签表示页面中的一个区域,通常对页面进行分块或对内容进行分段,<section> 标签和 <article> 标签可以互相嵌套;

  • <aside> 标签用来表示除页面主要内容之外的内容,比如侧边栏;

  • <footer> 标签位于页面或页面某个区域的底部,用来设置页脚,通常包含版权信息,联系方式等。

# 小结

本文简单介绍了一下 HTML 的作用和 HTML 元素的组成部分,以及如何更好地使用 HTML,即语义化。在这一小节中,你需要掌握:

  • HTML 元素由哪些部分组成;

  • 区分块级元素和行内元素;

  • 了解 HTML 文档的大致架构;

  • HTML 语义化;

  • 阅读 HTML 教程,熟练掌握 HTML 元素的用法。