一、HTML简介
HTML 是超文本标记语言，用于描述网页结构和内容。不是编程语言，而是一种标记语言，通过使用标记标签来定义网页元素。
二、网页的组成
1. 文档声明 (<!DOCTYPE>)
- 作用: 告诉浏览器 HTML 的版本（通常为 HTML5），确保正确解析和渲染网页内容。
- 示例:
<!DOCTYPE html>
2. HTML 文档根标签 (<html>)
- 作用: HTML 的根元素，包含所有网页内容，是整个 HTML 文档的基础。
- 结构:
<html> <!-- 头部部分 --> <head></head> <!-- 主体部分 --> <body></body> </html>
3. 头部部分 (<head>)
- 作用: 定义网页的元数据和外部资源引用，不直接展示内容。
- 包含内容:
- 网页标题 (
<title>):- 用于显示网页标题（浏览器标签上）。
- 示例:
<title>我的网页</title>
- 元数据 (
<meta>):- 包括字符编码、关键词和描述等信息。
- 示例:
<meta charset="UTF-8">
<meta name="description" content="这是一个示例网页">
<meta name="keywords" content="HTML, 示例, 网页">
- 外部资源链接 (
<link>和<script>):- 引入 CSS 和 JavaScript 文件。
- 示例:
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
4. 主体部分 (<body>)
- 作用: 包含网页的主要内容，是用户在浏览器中可见的部分。
- 常见内容:
- 标题 (
<h1>~<h6>):- 定义不同级别的标题。
- 示例:
<h1>主标题</h1>
<h2>副标题</h2>
....
<h6>标题六</h6>
- 段落 (
<p>):- 用于组织文本内容。
- 示例:
<p>这是一个段落。</p>
- 图片 (
<img>):- 显示图片，提供可访问性信息。
- 示例:
<img src="image.jpg" alt="描述文字">
- 超链接 (
<a>):- 创建可点击的链接。
- 示例:
<a href="https://example.com">访问链接</a>
- 表格 (
<table>):- 用于展示表格数据。
- 示例:
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
- 表单 (
<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>版权所有 © 2024</p>
</footer>
</body>
</html>
声明！
学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！