📌  相关文章
📜  HTML教程(1)

📅  最后修改于: 2023-12-03 14:41:59.663000             🧑  作者: Mango

HTML教程

HTML是一种用于构建万维网的标记语言。本教程将介绍HTML的基本知识和如何使用它构建网页。

HTML基础
HTML是什么？

HTML代表超文本标记语言。它是一种用于描述web页面的标记语言。HTML使用标记来定义网页上的不同部分。这些标记由尖括号(<>)组成，比如<html>或<p>。

HTML文件基本结构

任何HTML文件应该包含以下基本元素：

<!DOCTYPE html>
<html>
<head>
	<title>页面标题</title>
</head>
<body>
	网页内容
</body>
</html>
  • <!DOCTYPE html> 宣告这个HTML文档是一个HTML5文档
  • <html> 标签是HTML页面的根元素
  • <head> 标签包含页面的元数据和其他信息
  • <title> 标签定义了文档的标题，被显示在浏览器的标签上
  • <body> 标签是页面的主要内容
HTML元素的基本结构

HTML标记或元素由以下部分组成：

<tagname attribute1="value1" attribute2="value2">Element content</tagname>
  • tagname 定义元素的种类
  • 属性是元素的特征，比如id或class
  • 属性的值定义属性接收的内容，比如id="header"
  • 把元素内容包含在标签内
HTML标记

以下是常见的HTML标记：

标记|描述 -|- <h1>到<h6>|定义六级标题 <p>|定义段落 <a>|定义超链接 <img>|定义图像 <ul>|定义无序列表 <ol>|定义有序列表 <li>|定义列表项 <table>|定义表格 <tr>|定义表格行 <td>|定义数据单元格

示例代码
<!DOCTYPE html>
<html>
<head>
	<title>HTML基础</title>
</head>
<body>
	<h1>HTML基础</h1>
	<p>这是一个段落。</p>
	<a href="https:/www.example.com">这是一个链接</a>
	<img src="image.jpg" alt="这是图片">
	<ul>
		<li>无序列表项1</li>
		<li>无序列表项2</li>
	</ul>
	<ol>
		<li>有序列表项1</li>
		<li>有序列表项2</li>
	</ol>
	<table>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
		</tr>
		<tr>
			<td>单元格3</td>
			<td>单元格4</td>
		</tr>
	</table>
</body>
</html>

上面的代码将生成以下网页：

HTML基础

这是一个段落。

这是一个链接

这是图片

  • 无序列表项1
  • 无序列表项2
  1. 有序列表项1
  2. 有序列表项2

| 单元格1 | 单元格2 | | ------- | ------- | | 单元格3 | 单元格4 |

结论

本教程介绍了HTML的基础知识，包括HTML文件基本结构、HTML标记和示例代码。学习HTML有助于构建美观且功能丰富的网页。