HTML文件的创建及HTML元素的语法_创建文件命名为1.html,编辑常见的输出语句-优快云博客

本文链接：https://blog.youkuaiyun.com/Hi_x_j/article/details/109229478

本文详细介绍了HTML的基本元素如标题、段落、链接和图像的使用方法，并展示了如何创建简单的网页结构。从<h1>到<img>标签的实战演示，适合初学者快速掌握HTML基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、可直接用Notepad或者记事本新建一个文件，编译如下内容，再将扩展名改为.html或.htm：

<!DOCTYPE HTML>
<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

双击使用浏览器打开，查看运行效果：
在这里插入图片描述
2、HTML 标题（Heading）是通过 < h1> - < h6> 等标签进行定义的。

<!DOCTYPE HTML>
<html>
<body>

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<p>我的第一个段落。</p>

</body>
</html>

执行的效果如下

标题一

标题二

标题三

我的第一个段落。

3、HTML 段落是通过 < p> 标签进行定义的。

<!DOCTYPE HTML>
<html>
<body>

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

执行的结果如下：

标题一

标题二

标题三

This is a paragraph.

This is another paragraph.

4、HTML 链接是通过 < a> 标签进行定义的。

<!DOCTYPE HTML>
<html>
<body>

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<a href="http://www.w3school.com.cn">This is a link</a>
</body>
</html>

注：在 href 属性中指定链接的地址。

执行结果：

标题一

标题二

标题三

This is a paragraph.

This is another paragraph.

This is a link

5、HTML 图像是通过 < img> 标签进行定义的。

<!DOCTYPE HTML>
<html>
<body>

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<a href="http://www.w3school.com.cn">This is a link</a>
<img src="1194056.png" width="150" height="142" />
</body>
</html>