html 教程 - Html (1) - 芒果文档

📌 相关文章

📜 html 教程 - Html (1)

📅 最后修改于: 2023-12-03 15:31:17.214000 🧑 作者: Mango

HTML 教程 - Html

HTML是一种标记语言，用于创建网站的结构和内容。它是Web开发的基础，几乎所有网站都依赖于HTML。

HTML 基础知识

HTML的基础是标签(Tag)和元素(Element)。标签指示了将要显示的内容，而元素包含标签和其内容。以下是一个基本的HTML元素的例子：

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

在这个例子中，和是起始标签和结束标签，表示“段落”的开始，而则表示段落的结尾。这是一个段落则是段落本身的内容。

HTML还允许在标记中使用属性。属性为标签提供了更多的信息，以帮助浏览器正确地呈现内容。以下是一个具有属性的HTML元素的例子：

<img src="images/logo.png" alt="我的网站Logo">

在这个例子中，src和alt是属性，src告诉浏览器图片的位置，而alt提供了替代文本，以便于屏幕阅读器在无法显示图像时使用该文本。

HTML 常用标签

HTML有很多标签，下面列出一些常用标签。

<html> - 整个 HTML 文档的根元素。
<head> - 文档的头部，用于包含文档的元数据和标题。
<title> - 文档的标题，显示在浏览器的标签页上。
<body> - 文档的主体，包含所有要显示给用户的内容。
<h1> - 标题，用于显示重要的文本。
 - 段落，用于显示普通文本。
<a> - 链接，将用户导向其他网页。
<img> - 图像，用于显示图像。
<ul> - 无序列表，用于显示项目的清单。
<li> - 列表项，用于表示列表中的每个项目。

HTML 属性

前面提到过，HTML中的标记可以有属性，下面列举一些常见的属性。

href - 链接的URL地址。
src - 图像文件的URL地址。
alt - 图像无法显示时显示的文本描述。
width - 图像的宽度。
height - 图像的高度。
id - 元素的唯一标识符。
class - 元素的类别。

HTML 注释

HTML允许在代码中添加注释，可以用于记录代码的目的或者帮助理解代码。注释的语法如下：

<!-- 这是一个注释 -->

在注释开头和结尾使用符号，注释中的文本会被浏览器忽略。

HTML 实例

以下是一个简单的HTML页面的示例。

<!DOCTYPE html>
<html>
<head>
	<title>我的网站</title>
</head>
<body>
	<header>
		<h1>欢迎来到我的网站</h1>
	</header>

	<nav>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</nav>

	<main>
		<section>
			<h2>最新消息</h2>
			<p>这里是最新的消息。</p>
		</section>

		<section>
			<h2>服务</h2>
			<ul>
				<li>服务项目一</li>
				<li>服务项目二</li>
				<li>服务项目三</li>
			</ul>
		</section>
	</main>

	<footer>
		<p>版权所有 &copy; 2021 我的网站</p>
	</footer>
</body>
</html>

在这个HTML页面中，我们使用了各种元素和标签，包括标题、段落、链接、图像、列表等等。这个页面还包括了头部、主体和尾部，其中头部中包含了文档的元数据和标题，主体包含了要显示给用户的内容，尾部包含了版权信息。