HTML 语法

HTML HyperText Markup Language:（超文本标记语言）

• 超文本(HyperText) 代表着它通过HTTP协议在网络上传输
• 标记(Markup) 代表着它的代码是一些可以解释的关键词
• 语言(Language) 代表它可以被人和机器阅读

HTML 有一套相对于其它语言更简单的规则，HTML通过边界来区别什么时候开始和结束。

以下是一个简单的代表段落的HTML代码：

<p>这是一个段落，一般我们将段落写在p标签内。</p>

上面的尖括号<{:.language-html} 和 >{:.language-html} 就是HTML标签，它定义网页内一些内容的开始和结束。

每一个标签都有明确的意义，比如说上面这个例子p{:.language-html}代表着 段落。

标签通常成对出现：

• 开始标签 <p>{:.language-html} 定义段落的开始
• 闭合标签 </p>{:.language-html} 定义段落的闭合

开始标签和闭合标签的书写区别在于，闭合标签的标签名前带一个/{:.language-html}。

如果你用开始标签和闭合标签包含了一些内容，你将获得一个HTML 元素。上面的例子就是通过<p>{:.language-html}和</p>{:.language-html}创建了一个HTML 元素。

你可以 在浏览器中查看这个例子，你会发现，HTML标签并没有在页面中显示。这些标签只用来让浏览器 _识别_ 你写的内容的 _类型_。

在哪里写HTML

你肯定写过文本文件，文本文件的后缀名是.txt。

你可以通过修改后缀名，把.txt改为.html来创建一个HTML 文档。

复制下面的内容到你的文本编辑器

<p>Hello World!</p>

将它保存为 my-first-webpage.html 并且通过浏览器打开它，你可以看到以下内容：

注意：

• 使用Notepad++、Sublime Text 等文本编辑器来创建HTML文档。
• 使用Chrome、Firefox来打开HTML文档。

属性

属性可以给HTML元素附加其它信息，属性写在HTML_标签里面_。当然，HTML属性也不会在浏览器上显示出来。

例子：href属性用来给a标签定义一个链接

<a href="http://www.mozilla.com/firefox">下载 Firefox</a>

这里有通用HTML属性 可以被用在任意一个HTML元素上，并且这些属性都是可选的。

我们以后主要会用class(用于CSS选择器的名字)，title（鼠标移入元素后一段时间显示的提示）

有些HTML元素必选的属性，比如，插入一张图片，你需要使用src（资源）属性给元素提供一个图片的地址。

<img src="#" alt="图片的简介">

考虑到<img>元素是用来展示图片的，所以给他指定一个路径是有必要的。

注释

如果你想写一些不需要浏览器展示的内容，可以写使用注释。它会被浏览器忽略，这些内容只对编写、查看代码的人有用。

一条注释以<!--开始，-->结束。

<!-- 这是一条注释，将会被浏览器忽略 -->
<p>Hello World!</p>

自闭合标签

有些HTML元素只有开始标签：

<br> <!-- line-break -->
<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
<input type="text"> <!-- text input -->

因为自闭合标签没有闭合标签，所以它不能包含其他文档内容，只能通过一些属性来设置额外的信息。