HTML教学笔记「入门篇」
HTML基础概念
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
实例
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>注释
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落
四个基本的 HTML 标签
HTML 标题 HTML 标题（Heading）是通过
<h1> - <h6>等标签进行定义的。
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>HTML 段落 HTML 段落是通过
<p>标签进行定义的。
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>HTML 链接 HTML 链接是通过
<a>标签进行定义的。
<html>
<body>
<a href="http://域名">
This is a link</a>
</body>
</html>HTML 图像 HTML 图像是通过
<img>标签进行定义的。
<html>
<body>
<img src="/图片路径" width="300" height="120" />
</body>
</html>
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
实例
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>注释
<html>元素定义了整个 HTML 文档。 这个元素拥有一个开始标签<html>，以及一个结束标签</html>。元素内容是另一个 HTML 元素（body 元素）。<body>元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签<body>，以及一个结束标签</body>。元素内容是另一个 HTML 元素（p 元素）。- 这个
<p>元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签<p>以及一个结束标签</p>，元素内容是：This is my first paragraph。
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（ <br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br /> ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 提示：使用小写标签 HTML 标签对大小写不敏感，大小写等同！许多网站都使用大写的 HTML 标签。我使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
不要忘记结束标签 即使你忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。 注释：未来的 HTML 版本不允许省略结束标签。
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：
name="value"。属性总是在 HTML 元素的开始标签中规定。
实例①
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。</p>
</body>
</html>
注释
<h1>定义标题的开始。
<h1 align="center">拥有关于对齐方式的附加信息。
实例②
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>
</html>
注释
<body>定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
始终为属性值加引号 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'下面列出了适用于大多数 HTML 元素的属性：
属性 | 值 | 描述 |
|---|---|---|
class | classname | 规定元素的类名（classname） |
id | id | 规定元素的唯一 id |
style | style_definition | 规定元素的行内样式（inline style） |
title | text | 规定元素的额外信息（可在工具提示中显示） |