1. HTML 标记(Markup)

1. HTML 标记(Markup)

HTML(超文本标记语言,HyperText Markup Language)是一种用于创建网页的标记语言。HTML 通过元素和标签定义网页内容的结构。在本课中,我们将学习 HTML 的基本元素,如何正确使用它们,以及需要避免的常见错误。

HTML 的基本标签

<!DOCTYPE html> 标签

				
					<!DOCTYPE html>

				
			
  1. <html> 标签

<html> 标签是网页内容的容器。它以 <html> 开始,并以 </html> 结束:

				
					<!DOCTYPE html>
<html>
  <!-- 页面内容 -->
</html>

				
			
  1. <head> 标签

<head> 标签内包含元数据,例如页面标题、样式表链接和脚本:

				
					<head>
  <title>我的第一个网页</title>
  <meta charset="UTF-8">
</head>

				
			
  1. <body> 标签

<body> 标签内包含网页的所有可见内容:

				
					```html
<body>
  <h1>你好,世界!</h1>
  <p>这是我的第一段文本。</p>
</body>
```
				
			
  1. 用于结构化内容的主要标签

标题(<h1><h6>

标题标签用于创建不同级别的标题:

				
					<h1>一级标题</h1>
<h2>二级标题</h2>

				
			

段落(<p>

段落标签用于创建文本内容:

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

				
			

超链接(<a>

超链接用于跳转到其他页面或资源:

				
					<a href="https://www.example.com">前往 Example</a>

				
			

图片(<img>

图片使用 <img> 标签插入,该标签无需闭合:

				
					html
<img decoding="async" src="image.jpg" alt="图片描述">

				
			

常见错误

  1. 标签未正确关闭

每个打开的标签(除单一标签外)都必须有对应的闭合标签:

				
					<p>段落文本</p>

				
			
  1. 缺少必要的属性

某些标签需要必填属性。例如,<img> 标签需要 src 属性:

				
					<img decoding="async" src="image.jpg" alt="图片描述">

				
			
  1. 使用过时的标签

不要使用过时的标签,如 <center><font>。应使用 CSS 来进行样式设计。

缺少元标签 <meta charset="UTF-8">

请记得添加元标签以指定字符编码:

				
					<head>
  <meta charset="UTF-8">
</head>

				
			

结论

在本课中,我们介绍了 HTML 的基本标签及其正确使用。理解 HTML 的基础是创建网页的第一步。避免常见的错误,并遵循最新的标准,能够帮助你构建更高效的网页。

测试任务

创建一个简单的网页,包含以下元素:

  • 级别 1 的标题,文本为 “我的第一个网页”。
  • 一个描述性的段落。
  • 一个指向您最喜欢的网站的链接。
  • 一张带有描述的图片。
				
					<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>我的第一个网页</h1>
  <p>这是我的第一个网页的描述。我正在学习创建 HTML 标记。</p>
  <a href="https://www.example.com">前往 Example</a>
  <img decoding="async" src="image.jpg" alt="图片描述">
</body>
</html>

				
			

为了确保页面在浏览器中正确显示,请按照以下步骤检查:

  1. 验证 HTML 结构:确保所有标签都正确闭合,例如 <html><head><body> 等。
  2. 字符编码:检查 <meta charset="UTF-8"> 是否已正确放置在 <head> 部分,以避免字符编码问题。
  3. 链接:确保 <a href="https://www.example.com"> 链接指向有效的网页,并正确显示文本。
  4. 图片:确认图片路径(src="image.jpg")是否正确,图片文件是否存在并能正常加载。
  5. 页面预览:在浏览器中打开 HTML 文件,查看页面是否正确显示,文本、图片和链接是否正常工作。

如果所有部分都没有错误并能正常显示,那么您的页面就是有效的!

Codefor-Tech 聊天

你好!我是 AI 机器人。有什么可以帮助您的吗?
logo

网站语言