HTML世界之第一重天
一、HTML 元素
注:HTML 文档由 HTML 元素定义。
1.HTML 元素
开始标签 * | 元素内容 | 结束标签 * |
<p> | 这是一个段落 | </p> |
<a href="default.htm"> | 这是一个链接 | </a> |
<br> | 换行 |
开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。
2.HTML 元素语法
1.HTML 元素以开始标签起始,以结束标签终止;
2.元素的内容是开始标签与结束标签之间的内容;
3.某些 HTML 元素具有空内容(empty content);
4.空元素在开始标签中进行关闭(以开始标签的结束而结束);
5.大多数 HTML 元素可拥有属性;
3.嵌套的 HTML 元素
大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。
HTML 文档由相互嵌套的 HTML 元素构成。
4.HTML 文档实例
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
5.HTML 实例解析
①<p> 元素:
<p>这是第一个段落。</p>
<p> 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>。元素内容是: 这是第一个段落。
②<body> 元素:
<body>
<p>这是第一个段落。</p>
</body>
<body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。元素内容是另一个 HTML 元素(p元素)。
③<html> 元素:
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>。元素内容是另一个 HTML 元素(body元素)。
6.HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
注:千万不要忘记使用结束标签,要统一使用小写字母。虽然忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来。但是为了避免不必要的麻烦,还是要写结束标签。
二、HTML 属性
注:属性是 HTML 元素提供的附加信息。
1.HTML 属性
1.HTML 元素可以设置属性;
2.属性可以在元素中添加附加信息;
3.属性一般描述于开始标签;
4.属性总是以名称/值对的形式出现,比如:name="value"。
2.属性实例
<a href="http://www.runoob.com">这是一个链接</a>
HTML 链接由 <a> 标签定义,链接的地址在 href 属性中指定。
3.HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
注:在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name='John "ShotGun" Nelson'
HTML 元素的属性:
属性 | 描述 |
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
三、HTML 标题
注:在 HTML 文档中,标题很重要。
1.HTML 标题
标题(Heading)是通过 <h1>-<h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
注释: 浏览器会自动地在标题的前后添加空行。
2.HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
在写的时候使用<hr />最为正确。
<p>这是一个段落。</p>
<hr />
<p>这是一个段落。</p>
<hr />
<p>这是一个段落。</p>
3.HTML 注释
将注释插入HTML代码中,可以提高可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释写法如下:
<!-- 这是一个注释 -->
注:开始括号之后(左边的括号)需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要。
标签 | 描述 |
<html> | 定义 HTML 文档 |
<body> | 定义文档的主体 |
<h1> - <h6> | 定义HTML标题 |
<hr> | 定义水平线 |
<!--...--> | 定义注释 |
四、HTML 段落
1.HTML 段落
段落是通过 <p> 标签定义的。(</p> 是块级元素)
<p>这是一个段落 </p>
<p>这是另一个段落</p>
注意:浏览器会自动地在段落的前后添加空行。
2.HTML 折行
在不产生一个新段落的情况下进行换行(新行),使用 <br> 标签:
<p>这个<br>段落<br>演示了分行的效果</p>
注:<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
3.HTML 输出
无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。HTML 代码中的所有连续的空行(换行)也被显示为一个空格。