HTML语法

前端
HTML
作者

yangjh

发布日期

October 29, 2021

HTML 基本结构

HTML 文件后缀名为“.htm”或“.html”，是一种包含了 HTML 标记的文本文件，我们通常所说的网页实质上就是 HTML 文件，HTML 的编辑非常简单，学习成本很低，而且所有网页的源代码都可通过浏览器直接查看。正如蒂姆·伯纳斯－李所说：“（互联网）起飞原因在于，全球的人可随意融入参与。”

创建网页的方式有很多，我们可以新建一个空白的文本文件，编辑之后保存为后缀名为“.html”的文件即可。如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>文档标题</title>
</head>
<body>
</body>
</html>

在上面的 HTML 文件中我们可以看出，HTML 文档可以分为文档声明、网页头部分和网页主体部分三部分。

网页头部分指的是<head>和</head>部分，在这个区域一般放置网页相关的内容，比如网页编码方式、关键词、网页内容描述和网页相关联的文件等等。这些包含在<head>和</head>之间的内容一般不会显示在用户的浏览器中。

网页主体部分指的是包含在<body>和</body>之间的部分，这部分内容是显示在浏览器中的内容，大部分 HTML 的编辑工作都是在主体部分中完成，如图片、文字、超链接等等。

头部分和主体部分又包含在<html>和</html>之中。浏览器会把<html>和</html>之中的内容视为网页。

元素及标签

元素是构成网页内容的基础单位，元素由起始标签、内容和结束标签构成，如：

<h1>一级标题</h1>

其中<h1>是h1元素的起始标签，标签以“<”开始，以“>”结束，</h1>是结束标签，结束标签中含有“/”，位于起始标签和结束标签之间的“一级标题”是h1元素标记的内容。

元素可以嵌套，比如在段落 p 中插入图片img。这时，img元素作为整体构成段落元素p的内容。

<p>
  <img src="http://img1.gtimg.com/63530531.jpg" />
</p>

并非所有元素都包含起始标签和结束标签。如上例中，img元素就只有一个起始标签，没有结束标签，这一类元素被称为自闭和元素。除img元素之外，常见的自闭和元素还有：<br>、<embed>、<hr>、<input>、<link>、<meta>、<source>、<wbr>。

属性及属性值

属性（Attributes）及其值（Values）对于某些元素而言是必不可少的，比如新闻网页中经常使用图片来传递信息，图片在 HTML 中使用img元素来标记，但必须使用相应的属性及其值，告诉浏览器图片存放的位置、图片的大小等信息，其中图片存放的位置用src属性来表示，而图片的大小用 width 和 height 属性来表示，属性的值为字符串。如：

<img src="63530531.jpg" alt="一周图片精选">

上例中，img元素拥有src属性，表示图片来源，src属性的值为63530531.jpg，表示图片存放的具体位置。

以下属性是全局属性，即几乎所有 HTML 元素都支持的属性：

  1. accesskey 为元素指定快捷键
  2. class 为元素指定类型
  3. contenteditable 指定元素内容的可编辑性
  4. dir 指定元素内容的文字方向
  5. hidden 指定元素的可见性
  6. id 为元素指定唯一名称
  7. lang 指定元素内容的语言
  8. spellcheck 为元素指定拼写检查
  9. style 为元素指定样式
  10. tabindex 为元素指定 tab 顺序
  11. title 为元素指定提示文字
  12. translate 为元素内容提供指定语言的翻译内容

特殊字符

HTML 中，大于号>、小于号<、引号"等一些字符，是有特殊意义的，比如 HTML 的标签就是以<开始，以>结束，如果直接使用，容易引起歧义。因此，HTML 中提供了输出特殊字符的机制，使用&字符开始，以;结束，可以用来输出特殊字符，在&字符和;之间，可以是名词或者数字编码。例如：&#34;

表示引号。完整的 HTML 转义字符列表参见 http://tool.oschina.net/commons?type=2。

块元素、行内元素与行内块元素

绝大多数 HTML 元素是块元素（Block-level element）或者行内元素（Inline-level element）。这两者之间有什么不同？

块元素开始于新的一行，占据指定的宽度。块元素还可以嵌套块元素，还可以在内部使用行内元素。最常见的块元素就是段落<p>、<div>等等。

行内元素并不会开始于新的一行。它们按照字符的顺序依次再文档中显示，如从左到右，一个挨着一个，填满所在容器的宽度后才会换行。行内元素也可以嵌套使用，但是行内元素内部不能包含块元素。常见的行内元素有<a>、<span>等等。

除了上述两种元素外，还有少部分元素是行内块元素(Inline-block-level element)，这类元素的特点是能在一行中显示，但是可以设定宽度和高度。例如<img>、<input>元素。

嵌套规则

HTML 标签由块级元素和行内元素构成，块级元素主要用来表示内容的结构、布局和内容的性质，行内元素用来标记内容的语义细节。

  1. 块级元素与块级元素平级，内嵌元素与内嵌元素平级。

    <div><span></span><p></p></div>  //span是行内元素，p是块级元素，所以这个是错误的嵌套

<div><span></span><a></a></div>  //对的

  2. 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块元素，它只能包含其它的内联元素。

    <div><span></span></div>

<span><span></span></span>

  3. 有几个特殊的块级元素(h1、h2、h3、h4、h5、h6、p、dt)只能包含内嵌元素，不能再包含块级元素。

  4. 块级元素不能放在标签p里面。

  5. li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器。

HTML中的注释

在HTML中，可通过增加注释的方式，提高文档的易读性，甚至实现部分功能。

注释以<!--开头，以-->为结尾。所有包含在注释里面的内容，不会被浏览器显示出来。

    <!-- 页面主体内容 -->
    <!-- banner内容区域 -->

但有些浏览器会对注释内容进行解释。利用这个特征，开发人员可以对不同的浏览器进行区分处理。例如：

<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if gt IE 8]><!-->

<body>
  <!--<![endif]-->

小结

  1. 网页由文档声明、head和body组成，head和body包含在html中。
  2. 元素是构成网页内容的基础单位，元素由起始标签、内容和结束标签构成。
  3. 没有结束标签，这一类元素被称为自闭和元素。
  4. 在元素的起始标签中，可以加入多个属性和值，属性和值之间用等于号=连接，值使用引号('或")包围。
  5. 注释以<!--开头，以-->为结尾。所有包含在注释里面的内容，不会被浏览器显示出来。

扩展阅读资料

  1. https://www.w3.org/TR/2017/REC-html52-20171214/dom.html#dom
回到顶部