HTML 基本示例

在本章中，我们将展示一些基本的 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> 声明是不区分大小写。

HTML5 的 <!DOCTYPE> 声明如下：

<!DOCTYPE html>

HTML 标题

HTML 标题是用 <h1> 到 <h6> 标签定义的，分别表示一级标题到六级标题，共有 6 及标题。

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

例子

<h1>这里是一级标题</h1>
<h2>这里是二级标题</h2>
<h3>这里是三级标题</h3>

HTML 段落

HTML 段落是用<p>标签定义的：

例子

<p>这是一段话。</p>
<p>这也是一段话。</p>

HTML 链接

HTML 链接的目的是从当前页面跳转到一个新页面或者当前页面的其他地方，连接使用 <a> 标签定义的：

<a href="https://www.gobeta.net">链接</a>

在 href 属性中指定的是链接的目的地，也就是我们要打开的新的页面的 URL 地址。

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

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

HTML 图像

HTML 图像是用 <img> 标签定义的。

源文件 ( src)、替代文本 ( alt) width、 和height作为属性提供：

例子

<img src="gobeta.net.jpg" alt="GoBeta.NET" width="104" height="142" />

如何查看 HTML 源代码？

您是否曾经看过网页并想知道他们是怎么做到的？这在现代浏览器中很容易办到，给我们提供了两种方法：

  • 查看 HTML 源代码：

    在 HTML 页面中右键单击并选择“查看页面源代码”（在 Chrome 中）或“查看源代码”（在 Edge 中）或其他浏览器中的类似选项。这将打开一个包含页面 HTML 源代码的窗口。

  • 检查 HTML 元素：

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

HTML编辑器 HTML 元素