❮ HTML 开发工具

HTML 基础案例

在本章节中，我们将展示一些基本的 HTML 示例。如果我们使用您尚未了解的标签，请不要担心，将在后面的HTML 教程系列章节中会逐渐学到。

HTML 文档

HTML 文档以文档类型声明开头: <!DOCTYPE html>。

HTML 文档以 <html> 开始，以 </html> 结束。

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

<!DOCTYPE html>
<html>
<body>

    <h1>我的第一个标题</h1>
    <p>我的第一个文章段落</p>

</body>
</html>

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

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

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

<!DOCTYPE> 声明是 HTML5 网页：

<!DOCTYPE html>

HTML 标题（Heading）使用 <h1> 到 <h6> 标签定义。

<h1> 定义最重要的标题，<h6> 定义不重要的标题，<h1>到<h6>标题重要性依次减小：

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>

<h1>中国</h1>
<h2>广东省</h2>
<h3>广州市</h3>
<p>地址：XX区XX街道</p>

HTML 段落是通过 <p> 标签定义。

<p>这是学来教程一个段落。</p>

HTML 段落是通过 <a> 标签定义。

<a href="https://www.xuelai.com">这是学来教程主页的链接</a>

HTML 段落是通过 <img> 标签定义。

<img src="/public/image.jpg" width="100" height="140" alt="学来教程图片"/>

您是否曾经看到一个网页，心生疑惑：“嘿！他们是怎么做到的呢？”

在HTML页面中，按下CTRL + U，或右键单击页面并选择“查看页面源代码”。这将打开一个新的选项卡，其中包含页面的HTML源代码。

或者按（以Chrome为例）快捷键"F12”打开开发者工具控制台，也可查看网页源代码。

右键单击一个元素（或空白区域），选择“检查（Inspect）”或“查看网页源代码（Inspect element）”以查看元素的构成（您将看到HTML和CSS）。

您还可以在打开的“元素”或“样式”面板中实时编辑HTML或CSS。

❮ HTML 开发工具