概述

HTML 使用“标记”(markup)来注明文本、图片和其他内容,以便于在 Web 浏览器中显示。 HTML 标记包含一些特殊“元素”如<head>,<title>,<body>,<header>,<footer>, <article>,<section>,<p>,<div>,<span>,<img>,<aside>,<audio>, <canvas>,<datalist>,<details>,<embed>,<nav>,<output>,<progress>,<video> 等等。 HTML 元素通过“标签”(tag)将文本从文档中引出,标签由在“<”和“>”中包裹的元素名组成,HTML 标签里的元素名不区分大小写。 也就是说,它们可以用大写,小写或混合形式书写。例如,<title> 标签可以写成 <Title>,<TITLE> 或以任何其他方式。

HTML元素

开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。


结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。


内容(Content):元素的内容,本例中就是所输入的文本本身。


元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。

块级元素和内联元素

在HTML中有两种你需要知道的重要元素类别,块级元素内联元素


块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。 块级元素通常用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。 一个以block形式展现的块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。


内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。 内联元素不会导致文本换行:它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。


HTML中的空白

无论你在HTML元素的内容中使用多少空格(包括空白字符,包括换行),当渲染这些代码的时候,HTML解释器会将连续出现的空白字符减少为一个单独的空格符。


为什么我们会在HTML元素的嵌套中使用那么多的空白呢? 答案就是为了可读性 —— 如果你的代码被很好地进行格式化,那么就很容易理解你的代码是怎么回事, 反之就只有聚做一团的混乱。在我们的HTML代码中,我们让每一个嵌套的元素以两个空格缩进。 你使用什么风格来格式化你的代码取决于你 (比如所对于每层缩进使用多少个空格),但是你应该坚持使用某种风格。

实体引用: 在HTML中包含特殊字符

在HTML中,字符<, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 比如说如果你真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释? 我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束.

原意字符 等价字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

语义(semantics)元素

<h1> 元素也是一个语义元素,它的语义值将以多种方式被使用,比如通过搜索引擎和屏幕阅读器


<span> 元素,它没有语义。

列表 Lists

  • 无序 Unordered列表
  • 有序 Ordered列表
  • 嵌套列表 Nesting lists