HTML基础入门教程

原创已于 2022-04-13 21:03:39 修改 · 3.6k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#html

于 2022-04-13 21:02:45 首次发布

这篇教程介绍了HTML基础入门，包括HTML编辑器推荐、基础语法如基本元素、文本格式化、链接和图像的使用。推荐使用VS Code，并提供安装与运行HTML文件的教程，帮助初学者快速上手。

目录

前言

一、HTML编辑器推荐

二、HTML基础语法

1.基本元素

2.文本

3.链接

4.图像

有关更多

前言

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

一、HTML编辑器推荐

博主使用的是VS Code工具(Visual Studio Code)来编辑HTML，也可以使用其他更专业的编辑器。

VS Code安装教程参考：VScode 教程

安装完成并在软件中安装"open in browser" 扩展，创建html文件即可运行。

二、HTML基础语法

1.基本元素

声明文档		<!DOCTYPE html>
根元素		<html>
头部元素<head>	标题	<title>
头部元素<head>	网页编码格式	<meta...>
可见内容<body>	标题	<h1>
可见内容<body>	段落	<p>

HTML 标签通常是成对出现的，比如 <p> 和 </p>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML教程(runoob.com)</title>
</head>
<body>

<h1>这是标题 1</h1>     <!-- 注释: h1,h2,h3表示标题字体大小逐渐变小 -->

<p>这是一个段落。</p>

<h2>这是标题 2</h2>

<p>这是另外一个段落。</p>

</body>
</html>

在线编辑器尝试一下！

2.文本

格式化标签：

粗体	<b>,<strong>
斜体	<i>,<em>
下划线	<ins>
~~删除线~~	<del>

<br>标签：用于不产生一个新段落的情况下进行换行（新行）

<p>这个<br>段落<br>演示了分行的效果</p>

注:对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

3.链接

HTML使用标签 <a>来设置超文本链接。

链接语法：

<a href="url">链接文本</a>

实例：

<a href="https://www.bilibili.com">进入B站</a>

上面这行代码显示为：进入B站

4.图像

在 HTML 中，图像由<img> 标签定义。

实例：

<img src="cat.gif" width="300" height="120" />

注意图像文件和html文件在不同目录下的写法：

1、html 文件跟图像文件(f盘)在不同目录下：

<img src="file:///f:/*.jpg" width="300" height="120"/>

2、html 文件跟图像在相同目录下：

<img src="*.jpg" width="300" height="120"/>

3、html 文件跟图像在不同目录下：

1）图像在 image 文件夹中，html 跟 image 在同一目录下：

<img src="image/*.jpg/"width="300" height="120"/>

2）图像在 image 文件夹中，html 在 connage 文件夹中，image 跟 connage 在同一目录下：

<img src="../image/*.jpg/"width="300" height="120"/>

4、如果图像来源于网络，那么写绝对路径：

<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

有关更多

本文选取了一些比较入门的HTML语法，可以大致做一个简陋的网站，如果想了解完善更多HTML知识，可以点击下面的网站：

HTML 教程