码农教程 - 一技在手,衣食无忧! tools

HTML 基本示例

❮ 上一节 下一节 ❯

在本章中，我们将展示一些基本的 HTML 示例。

如果我们使用您尚未了解的标签，请不要担心。

HTML 文档

所有 HTML 文档都必须以文档类型声明开头：<!DOCTYPE html>。

HTML 文档本身以<html>并以</html>。

HTML 文档的可见部分位于<body>和</body>。

示例

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
亲自试一试 »

<!DOCTYPE> 声明

这个<!DOCTYPE>声明代表文档类型，帮助浏览器正确显示网页。

它只能出现一次，出现在页面顶部（任何 HTML 标记之前）。

这个<!DOCTYPE>声明不区分大小写。

这个<!DOCTYPE>HTML5 的声明是：

<!DOCTYPE html>

HTML 标题

HTML 标题定义为<h1>到<h6>标签。

<h1>定义最重要的标题。<h6>定义最不重要的标题：

示例

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
亲自试一试 »

HTML 段落

HTML 段落定义为<p>标签：

示例

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
亲自试一试 »

HTML 链接

HTML 链接定义为<a>标签：

示例

<a href="https://www.91xjr.com">This is a link</a>
亲自试一试 »

链接的目的地在href属性。

属性用于提供有关 HTML 元素的附加信息。

您将在后面的章节中了解有关属性的更多信息。

HTML 图片

HTML 图片定义为<img>标签。

源文件（src），替代文本（alt),width， 和height作为属性提供：

示例

<img src="91xjr.jpg" alt="91xjr.com" width="104" height="142">
亲自试一试 »

如何查看 HTML 源代码

您是否曾经看过网页并想知道"Hey! How did they do that?"

查看 HTML 源代码：

在 HTML 页面中单击 CTRL + U，或右键单击该页面并选择"View Page Source"。这将打开一个包含页面 HTML 源代码的新选项卡。

检查 HTML 元素：

右键单击某个元素（或空白区域），然后选择 "Inspect" 以查看元素的组成（您将看到 HTML 和 CSS）。您还可以在打开的“元素”或“样式”面板中即时编辑 HTML 或 CSS。

HTML练习

通过练习测试一下

练习:

HTML 元素被一种特定类型的方括号包围，是哪一种？

p This is a paragraph. /p

开始练习


❮ 上一节 下一节 ❯