当前位置：首页 > news >正文

HTML5-基础知识

news 2025/10/31 17:49:58

以下是关于 HTML（超文本标记语言）的详细知识点总结：

1. HTML 简介

定义：HTML 是用于创建网页的标准标记语言，它使用标签来描述网页的结构和内容。
作用：通过各种 HTML 标签，我们可以在网页上展示文本、图片、链接、表格、表单等元素。

2. HTML 基本结构

一个基本的 HTML 文档结构如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 这里是网页的可见内容 -->
</body>

</html>

<!DOCTYPE html>：声明文档类型为 HTML5。
<html>：HTML 文档的根标签，所有 HTML 元素都包含在其中。
<head>：包含文档的元数据，如字符编码、页面标题等，这些内容不会直接显示在网页上。
<meta charset="UTF-8">：设置文档的字符编码为 UTF - 8，确保支持各种语言字符。
<title>：定义网页的标题，显示在浏览器的标题栏或标签页上。
<body>：包含网页的可见内容，如文本、图片、链接等。

3. HTML 标签

3.1 文本标签

<h1> - <h6>：标题标签，<h1> 是最大的标题，<h6> 是最小的标题。

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

<p>：段落标签，用于定义段落。

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

<b>：粗体标签，使文本加粗。

<b>这是粗体文本</b>

<i>：斜体标签，使文本倾斜。

<i>这是斜体文本</i>

<u>：下划线标签，给文本添加下划线。

<u>这是带下划线的文本</u>

3.2 列表标签

无序列表：使用 <ul> 和 <li> 标签，列表项前会显示圆点。

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

有序列表：使用 <ol> 和 <li> 标签，列表项前会显示数字。

<ol>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ol>

3.3 链接标签

<a>：用于创建超链接，可以链接到其他网页、文件或同一页面的不同位置。

<a href="https://www.example.com">这是一个外部链接</a>
<a href="#section2">跳转到页面内的 section2 部分</a>

3.4 图片标签

<img>：用于在网页中插入图片，src 属性指定图片的源文件路径，alt 属性用于在图片无法显示时提供替代文本。

<img src="image.jpg" alt="这是一张图片">

3.5 表格标签

<table>：定义表格。
<tr>：定义表格的行。
<th>：定义表格的表头单元格。
<td>：定义表格的数据单元格。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

3.6 表单标签

<form>：用于创建 HTML 表单，用于用户输入数据。
<input>：常用的表单输入元素，type 属性可以设置为不同的值，如 text、password、radio、checkbox 等。
<textarea>：用于多行文本输入。
<select> 和 <option>：用于创建下拉列表。

<form action="submit.php" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br>
  <input type="submit" value="提交">
</form>

4. HTML 属性

属性用于提供关于 HTML 元素的额外信息，通常以键值对的形式出现，写在标签的开始标签内。
例如，<a> 标签的 href 属性用于指定链接的目标地址，<img> 标签的 src 属性用于指定图片的源文件路径。

<a href="https://www.example.com" target="_blank">打开新窗口访问链接</a>

这里的 target="_blank" 是一个属性，它指定链接将在新窗口中打开。

5. HTML 注释

使用  来添加注释，注释内容不会在浏览器中显示，仅用于开发者在代码中添加说明。

<!-- 这是一个注释，用于说明下面的代码块 -->
<p>这是一个段落</p>

6. HTML 与其他技术的结合

CSS：层叠样式表，用于美化 HTML 页面，控制元素的外观和布局。可以通过 <style> 标签内联样式、<link> 标签引入外部 CSS 文件或使用 style 属性内联样式。

<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p style="font-size: 16px;">这是一个段落</p>
</body>

JavaScript：用于为网页添加交互性和动态效果。可以通过 <script> 标签引入外部 JavaScript 文件或直接在 HTML 文件中编写 JavaScript 代码。

<body>
  <button id="myButton">点击我</button>
  <script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      alert('你点击了按钮');
    });
  </script>
</body>