HTML超文本标记语言

一、HTML简介

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

二、网页的组成

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

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

html 复制代码

<!DOCTYPE html>

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

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

结构:

html 复制代码

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

3. 头部部分 (`<head>`)

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

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

html 复制代码

<title>我的网页</title>

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

html 复制代码

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

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

html 复制代码

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

4. 主体部分 (`<body>`)

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

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

html 复制代码

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

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

html 复制代码

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

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

html 复制代码

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

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

html 复制代码

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

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

html 复制代码

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

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

html 复制代码

<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>`

总体结构

html 复制代码

<!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团队无关，切勿触碰法律底线，否则后果自负！！！！

HTML超文本标记语言

一、HTML简介

二、网页的组成

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

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

3. 头部部分 (<head>)

4. 主体部分 (<body>)

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

总体结构

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

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

3. 头部部分 (`<head>`)

4. 主体部分 (`<body>`)