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 代码中的所有连续的空行(换行)也被显示为一个空格。

相关推荐
wyiyiyi13 分钟前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip36 分钟前
vite和webpack打包结构控制
前端·javascript
excel1 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
cui__OaO1 小时前
Linux软件编程--线程
linux·开发语言·线程·互斥锁·死锁·信号量·嵌入式学习
星星火柴9361 小时前
关于“双指针法“的总结
数据结构·c++·笔记·学习·算法
阿华的代码王国1 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼1 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
Jimmy1 小时前
AI 代理是什么,其有助于我们实现更智能编程
前端·后端·ai编程
ZXT2 小时前
promise & async await总结
前端
Jerry说前后端2 小时前
RecyclerView 性能优化:从原理到实践的深度优化方案
android·前端·性能优化