HTML基本语法

元信息

目标：拆解 HTML 文档的三类语法元素——指令、标记、内容，掌握闭合/非闭合标记、属性与值、嵌套规则，能读懂并手写一个规范的最小 HTML 文档
关键概念：指令、标记（tag）、元素（element）、属性与值、闭合标记、嵌套、DOCTYPE
关联阶段：cp1
常见误区：混用"标记"与"元素"（标记是类、元素是实例的关系）；以为标记必须成对（img/input 等非闭合标记单出现）；以为嵌套顺序无所谓（<p><h1></p></h1> 非法）；把 DOCTYPE 当普通标记（它是指令，声明版本）

示例

这是一个基本的html文档示例。从语法角度看，html文档就是一组标记和它所标记的内容的集合，它包含有三种类型的语法元素：指令、标记、内容

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

指令

是下文中提及的标记的特例，它以<!开始，以> 结束，作用是指示浏览器如何处理此html文档，譬如：

<!DOCTYPE html> 是一个必备的指令，且必须置于页面顶端，它用于声明当前的文档类型，即html的版本。浏览器将根据该版本号处理后续的内容。<!DOCTYPE html> 的含义是声明当前文档为 html 5 版本
 是一个可选的指令，代表一个注释，浏览器将忽视其中的内容，不做任何处理和输出

标记 tag

以<开始，以>结尾一组文本结构，称之为标记。譬如<body>、<p>、</p>

标记将文档的内容划分，形成了结构，从而易于机器进行解析和处理

内容

指所标记的文本、多媒体等，也是呈现给最终用户的元素，在有些浏览器中，将文本内容视作一个匿名标记

闭合标记与非闭合标记

标记通常是成对出现的，但也有例外

大部分标记是闭合式的，即成对出现，有开始标记，如<h1>，则必须有结束标记</h1>；
部分标记是非闭合的或开放的，即只需单个标记，譬如<img src="my.png" />、 <input type='text' value="this is a test" /> ，注意标记的结尾是 />

属性（attribute）与值（value）

标记支持属性语法，用来进一步限定或描述标记，譬如：

以 <a href="http://runoob.com/html">查看</a> 这一元素为例，href称之为该<a>元素的属性,"http://runoob.com" 则称之为属性href的值。
不同的标记具有不同类型的属性；不同的属性类型有特定的值域。具体可查询参考手册

参考 http://www.runoob.com/html/html-attributes.html

基本的语法规则

标记之间必须是规则嵌套的关系，即<p><h1></p></h1> 是非法的
元素名及属性名等推荐统一使用小写
属性的值推荐使用双引号括起来

术语：标记与元素

类似于OOP中类与实例的关系，同一类标记可以实例化为多个元素；同一类标记拥有相同的属性定义，但每一个元素可以有不同的属性值

标记：当我们抽象地讨论标记的结构或一般特征时，通常使用标记 这一术语；
元素：当我们具体地讨论标记的某个实例的内容时，通常称之为标记元素，或简称元素。

如同对象除了定义有属性，还定义有方法，标记也有它的方法，即后文会提到事件与事件处理函数

小结

从普通用户的角度：HTML提供了易于书写的标记，便于人机交流
从程度员的角度，HTML提供了松散（易用）的标记用于描述半结构化数据，如各种由自然语言所记录的文档，类似于OOP中类的定制
- 与之对比，程序语言中的数据类型更适合定义结构化数据（如数值、列表、树、关系型表格等）

参考手册

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference

HTML基本语法 ​

元信息 ​

示例 ​

指令 ​

标记 tag ​

内容 ​

闭合标记与非闭合标记 ​

属性（attribute）与值（value） ​

基本的语法规则 ​

术语：标记与元素 ​

小结 ​

参考手册 ​