黑客基础之html（超文本标记语言）

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它描述了网页的结构和内容，通过一系列的元素和标签来定义文本、图像、链接、表格、表单等网页元素。HTML不是一种编程语言，而是一种标记语言，它使用标记标签来描述网页的结构和内容。

HTML的基本结构

一个典型的HTML文档包含以下几个基本元素：

<!DOCTYPE html>：文档类型声明，告诉浏览器这个文档使用的是HTML5标准。
<html>：HTML文档的根元素，其他所有元素都包含在这个标签内。
<head>：包含了所有关于网页的元信息，如标题、字符集声明、引入的CSS样式表和JavaScript文件等。
<title>：定义了网页的标题，它显示在浏览器的标题栏或标签页上。
<body>：包含了网页的所有内容，如文本、图片、链接、表格、列表等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF - 8">
    <title>一个简单的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是网页的主要内容部分。</p>
</body>
</html>

<!DOCTYPE html> <!-- 声明文档类型和HTML版本（HTML5） -->
<html lang="en"> <!-- 根元素，指定页面的主要语言为英语 -->
<head> <!-- 包含文档的元数据，如字符集定义、页面标题、样式表链接等 -->
   <meta charset="UTF-8"> <!-- 指定字符编码为UTF-8，支持多语言 -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度以优化移动端显示 -->
   <title>这是一个标题</title> <!-- 页面在浏览器标签中的标题 -->
</head>
<body> <!-- 页面内容部分 -->
   <!-- 可见的网页内容：文本、图片、链接、列表等 -->
   <div style="background-color: violet;">
      <p>这是一段文字</p>
      <p>这也是一段文字</p>
   </div>
   <img src="https://example.com/image.png" alt="示例图片">
   <a href="https://www.example.com" target="_blank">访问网站</a>
   <p>这<span style="color: aqua;">是</span>一段带<span style="background-color: burlywood;">颜色</span>的文字</p>
   <ol>
      <li>第一项</li>
      <li>第二项</li>
   </ol>
   <ul>
      <li>无序列表项1</li>
      <li>无序列表项2</li>
   </ul>
   <table border="2">
      <thead>
         <tr>
            <td>表头1</td>
            <td>表头2</td>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>数据1</td>
            <td>数据2</td>
         </tr>
      </tbody>
   </table>
</body>
</html> <!-- 结束HTML文档 -->

在HTML中，<head>标签内的标签主要用于定义文档的元数据和引用外部资源。以下是一些常见的<head>内标签：

1. `<title>`标签

定义文档的标题，显示在浏览器的标题栏或标签页上，也是搜索引擎结果的主要标题。

2. `<meta>`标签

用于定义HTML文档的元数据，包括字符编码、网页描述、关键词等。例如：

<meta charset="UTF-8">
<meta name="description" content="这是一个描述网页内容的元数据">
<meta name="keywords" content="HTML, CSS, JavaScript">

3. `<link>`标签

用于定义与文档相关的外部资源，常见的包括样式表和图标。例如：

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

4. `<script>`标签

用于引入JavaScript代码，可以放置在<head>标签内或页面底部的<body>标签前。例如：

<script src="script.js"></script>

5. `<style>`标签

用于定义内部的CSS样式，将样式规则直接写在HTML文档中。可以在<head>标签内使用<style>标签，将CSS样式应用于整个页面或特定的元素。

6. `<base>`标签

给页面上所有相对URL提供一个基础。一份文档中只能有一个<base>标签。

7. `<noscript>`标签

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在此中定义脚本未被执行时的替代内容。

这些标签在<head>内的内容对于页面的显示、搜索引擎优化和性能都非常重要，它们提供了页面的结构和行为的关键信息。

<form>标签：用于创建用户交互表单。

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>

   <table>标签：用于创建表格，包含表头<th>、表格行<tr>、表格单元格<td>。

 <table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

<img>在网页中嵌入图像。

<img src="image.jpg" alt="示例图像">

<a>用于创建超链接。

<a href="https://www.example.com">访问示例

</p>

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