HTML超文本标记语言

一、HTML简介

HTML 是超文本标记语言，用于描述网页结构和内容。不是编程语言，而是一种标记语言，通过使用标记标签来定义网页元素。

二、网页的组成

1. 文档声明 (<!DOCTYPE>)

• 作用: 告诉浏览器 HTML 的版本（通常为 HTML5），确保正确解析和渲染网页内容。
• 示例:

<!DOCTYPE html>

---

2. HTML 文档根标签 (<html>)

• 作用: HTML 的根元素，包含所有网页内容，是整个 HTML 文档的基础。

• 结构:

    <html>
      <!-- 头部部分 -->
      <head></head>
      <!-- 主体部分 -->
      <body></body>
    </html>

---

3. 头部部分 (<head>)

• 作用: 定义网页的元数据和外部资源引用，不直接展示内容。
• 包含内容:

1. 网页标题 (<title>):
   • 用于显示网页标题（浏览器标签上）。
   • 示例:

<title>我的网页</title>

2. 元数据 (<meta>):
   • 包括字符编码、关键词和描述等信息。
   • 示例:

<meta charset="UTF-8">
<meta name="description" content="这是一个示例网页">
<meta name="keywords" content="HTML, 示例, 网页">

3. 外部资源链接 (<link> 和 <script>):
   • 引入 CSS 和 JavaScript 文件。
   • 示例:

<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>

---

4. 主体部分 (<body>)

• 作用: 包含网页的主要内容，是用户在浏览器中可见的部分。
• 常见内容:

1. 标题 (<h1>~<h6>):
   • 定义不同级别的标题。
   • 示例:

<h1>主标题</h1>   
<h2>副标题</h2>
....
<h6>标题六</h6>

2. 段落 (<p>):
   • 用于组织文本内容。
   • 示例:

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

3. 图片 (<img>):
   • 显示图片，提供可访问性信息。
   • 示例:

<img src="image.jpg" alt="描述文字">

4. 超链接 (<a>):
   • 创建可点击的链接。
   • 示例:

<a href="https://example.com">访问链接</a>

5. 表格 (<table>):
   • 用于展示表格数据。
   • 示例:

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

6. 表单 (<form>):
   • 收集用户输入。
   • 示例:

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

---

5. 语义化标签（HTML5 引入入)

• 作用: 定义页面结构，提升语义化，便于搜索引擎和开发者理解。
• 常见语义化标签:

标签	描述	示例
<header>	定义网页头部区域	<header>网站标题</header>
<footer>	定义网页底部区域	<footer>版权所有</footer>
<nav>	定义导航菜单	<nav>导航栏内容</nav>
<article>	定义独立的内容块	<article>文章内容</article>
<section>	定义章节区域	<section>章节内容</section>
<aside>	定义侧边栏内容	<aside>推荐内容</aside>

总体结构

<!DOCTYPE html>
<html>
<head>
  <title>我的示例网页</title>
  <meta charset="UTF-8">
  <meta name="description" content="网页描述">
  <meta name="keywords" content="HTML, 示例">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>网站标题</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>章节标题</h2>
      <p>这是主要内容。</p>
    </section>
    <aside>侧边栏内容</aside>
  </main>
  <footer>
    <p>版权所有 &copy; 2024</p>
  </footer>
</body>
</html>

声明！

学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！