声明：
学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章。本文只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负
泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频
微信公众号：泷羽sec
HTML 简介及基本结构
1. HTML 简介
HTML 是用来描述网页的一种语言。
全称：HyperText Markup LAnguage（超文本标记语言）。
特点：HTML 不是一种编程语言，而是一种标记语言，使用标记标签来描述网页。
文档组成：HTML 文档包含了 HTML 标签及文本内容，也称为 web 页面。
2. HTML 基本结构概述
HTML 网页有一个标准的结构，主要由以下几个关键部分组成：
文档类型声明
HTML 根元素
头部（head）
主体（body）
3. 文档类型声明
<!DOCTYPE html>
作用：告知浏览器文档所遵循的 HTML 版本，以便浏览器能够正确渲染页面。
位置：必须位于 HTML 文件的第一行。
4. HTML 根元素 (<html>)
<html>
<!-- 所有其他的 HTML 元素都被包含在这里 --></html>
界定范围：浏览器只会识别 <html> 标签内的内容作为有效的 HTML 代码。
5. 头部（<head>）
头部包含了关于网页的元数据，这些信息对浏览器的渲染和网页的展示特性有重要作用，但不会直接在网页的可见区域显示。
<title>：定义网页的标题，显示在浏览器的标题栏或标签页上。
<title>精彩网页世界</title>
<meta>：提供多种类型的元数据。
<meta charset="UTF-8">
<meta name="description" content="这是一个充满趣味的网页">
<meta name="keywords" content="网页，趣味，示例">
<link>：链接外部资源，如 CSS 样式表。
<link rel="stylesheet" href="styles.css">
<script>：嵌入 JavaScript 代码或引用外部的 JavaScript 文件。
<script>alert('欢迎来到');</script>
<script src="script.js"></script>
6. 主体部分 (<body>)
主体部分包含了所有在网页中可见的内容，如文本、图像、超链接、表格、表单等。
文本元素：使用段落标签 <p> 来组织文本。
<p>这是一段普通的文本内容。</p>
标题标签：使用 <h1> 到 <h6> 创建不同级别的标题。
<h1>主标题</h1>
<h2>副标题</h2>
图像元素：使用 <img> 标签来插入图像。
<img src="image.jpg" alt="图像描述">
超链接元素：使用 <a> 标签创建超链接。
<a href="https://www.baidu.com">点击这个</a>
表格元素：使用 <table> 标签创建表格，<tr> 表示表格行，<td> 表示表格单元格。
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr></table>
表单元素：用于收集用户输入信息，使用 <form> 标签包含表单内容，<input> 标签用于创建各种输入框。
<form>
<input type="text" placeholder="请输入用户名"></form>
7. 完整示例
html
<!DOCTYPE html>
<html>
<head>
<title>示例网页</title>
<meta charset="UTF-8">
</head>
<body>
<h1>欢迎来到网页</h1>
<p>这是网页的主要内容部分，这里可以展示各种信息。</p>
<img src="image.jpg" alt="示例图像">
<a href="https://www.baidu.com">访问示例网站</a>
</body></html>
扫一扫
1076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
