目录
HTML 简介
一个实例
什么是 HTML?
HTML 标签
HTML 文档 = 网页
例子解释
HTML 编辑器
使用 Notepad 来编写 HTML
基本的 HTML 标签 - 四个实例
HTML 标题
实例
HTML 段落
实例
HTML 链接
实例
HTML 图像
实例
HTML 元素
HTML 元素
HTML 元素语法
嵌套的 HTML 元素
HTML 文档实例
HTML 实例解释
p元素:
body元素:
html元素:
空的 HTML 元素
HTML 提示:使用小写标签
HTML 属性
属性实例
更多 HTML 属性实例
属性例子 1:
属性例子 2:
HTML 提示:使用小写属性
始终为属性值加引号
HTML 属性参考手册
HTML 标题
HTML 标题
实例
HTML 水平线
实例
HTML 注释
实例
HTML 标签参考手册
HTML 段落
HTML 折行
HTML 输出 - 有用的提示
HTML 简介
一个实例
什么是 HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:
例子解释
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落
HTML 编辑器
使用 Notepad 来编写 HTML
在记事本中键入 HTML 代码:
在记事本的文件菜单选择“另存为”,当保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。
启动浏览器,然后选择“文件”菜单的“打开文件”命令,或者直接在文件夹中双击 HTML 文件,结果如下:
基本的 HTML 标签 - 四个实例
HTML 标题
HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。
实例
HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
实例
HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
实例
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
实例
注释:图像的名称和尺寸是以属性的形式提供的。
HTML 元素
HTML 文档是由 HTML 元素定义的。
HTML 元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
开始标签 | 元素内容 | 结束标签 |
<p> | This is a paragraph | </p> |
<a href="default.htm" > | This is a link | </a> |
<br> 元素:在文本中生成一个换行(回车)符号。
注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文档由嵌套的 HTML 元素构成。
HTML 文档实例
HTML 实例解释
p元素:
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。
元素内容是:This is my first paragraph。
body元素:
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。
元素内容是另一个 HTML 元素(p 元素)。
html元素:
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>,以及一个结束标签 </html>。
元素内容是另一个 HTML 元素(body 元素)。
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法。
HTML 提示:使用小写标签
HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
HTML 属性
属性为 HTML 元素提供附加信息。
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:
更多 HTML 属性实例
属性例子 1:
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。align:排整齐,校准。
属性例子 2:
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
HTML 提示:使用小写属性
属性和属性值对大小写不敏感。
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
HTML 属性参考手册
属性 | 值 | 描述 |
class | classname | 规定元素的类名(classname) |
id | id | 规定元素的唯一 id |
style | style_definition | 规定元素的行内样式(inline style) |
title | text | 规定元素的额外信息(可在工具提示中显示) |
HTML 标题
HTML 标题
标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
实例
注释:浏览器会自动地在标题的前后添加空行。
注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr(horizontal rule)元素可用于分隔内容。
实例
结果为
提示:使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释是这样写的:
实例
注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。
HTML 标签参考手册
标签 | 描述 |
<html> | 定义 HTML 文档。 |
<body> | 定义文档的主体。 |
定义 HTML 标题 | |
<hr> | 定义水平线。 |
<!--> | 定义注释。 |
HTML 段落
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表,br是blank row)
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
HTML 输出 - 有用的提示
我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。