526互联

HTML基础了解

发布时间 2023-08-24 09:45:38作者: Sawyerhan
<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
  <style>
    h1 {
      color: blue;
    }
    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <img src="image.jpg" alt="图片">
  <a href="https://www.example.com">点击这里</a>访问一个链接。
</body>
</html>

在这个代码样例中，我们可以看到以下内容：

<!DOCTYPE html>

这是 HTML5 的文档类型声明，告诉浏览器使用 HTML5 解析文档。

它应该作为 HTML 文档的第一行出现。

在 HTML5 中，<!DOCTYPE html> 是唯一的文档类型声明，不再需要指定 DTD（文档类型定义）。

<html>

这是 HTML 文档的根元素。<html> 标签应该作为 HTML 文档的第二行出现，紧跟在 <!DOCTYPE html> 声明之后。

在 <html> 标签内部，通常会有两个主要的部分：<head> 和 <body>。

<head>

这是文档的头部，包含了一些元数据，如标题和样式。

<head> 标签应该作为 <html> 标签的直接子元素，紧跟在 <!DOCTYPE html> 声明、<html>根元素之后。

在 <head> 标签内部，可以包含以下常见的元素：

  • <title>：定义文档的标题，将显示在浏览器的标题栏或标签页上。
  • <meta>：用于指定文档的元数据，如字符编码、关键词、描述等。
  • <link>：用于引入外部样式表或其他外部资源。
  • <style>：用于在文档内部定义样式。
  • <script>：用于引入外部脚本或在文档内部编写脚本。

以下是一个简单的 HTML 文档示例，展示了 <head> 标签的使用：

<head>
  <title>我的第一个网页</title>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="description" content="这是我的第一个网页">
  <link rel="stylesheet" href="styles.css">
  <style>
    h1 {
      color: blue;
    }
  </style>
  <script src="script.js"></script>
</head>

 

<title>

这是文档的标题，显示在浏览器的标题栏中。

<style>

这是用于定义样式的标签，其中定义了 h1 元素的颜色和 p 元素的字体大小。

<body>

这是文档的主体，包含了实际的内容。

<h1>

这是一个标题标签，显示为蓝色的文本。

<p>

这是一个段落标签，其中包含了一段文字。

<img>

这是一个图像标签，用于显示图片。src 属性指定了图片的路径，alt 属性提供了图片的替代文本。

<a>

这是一个链接标签，用于创建一个超链接。href 属性指定了链接的目标 URL。