HTML5-基础知识
目录
HTML5-基础知识
以下是关于 HTML（超文本标记语言）的详细知识点总结：
1. HTML 简介
- 定义 ：HTML 是用于创建网页的标准标记语言，它使用标签来描述网页的结构和内容。
- 作用 ：通过各种 HTML 标签，我们可以在网页上展示文本、图片、链接、表格、表单等元素。
2. HTML 基本结构
一个基本的 HTML 文档结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这里是网页的可见内容 -->
</body>
</html><!DOCTYPE html>：声明文档类型为 HTML5。<html>：HTML 文档的根标签，所有 HTML 元素都包含在其中。<head>：包含文档的元数据，如字符编码、页面标题等，这些内容不会直接显示在网页上。<meta charset="UTF-8">：设置文档的字符编码为 UTF - 8，确保支持各种语言字符。<title>：定义网页的标题，显示在浏览器的标题栏或标签页上。<body>：包含网页的可见内容，如文本、图片、链接等。
3. HTML 标签
3.1 文本标签
<h1> - <h6>：标题标签，<h1>是最大的标题，<h6>是最小的标题。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2><p>：段落标签，用于定义段落。
<p>这是一个段落。</p><b>：粗体标签，使文本加粗。
<b>这是粗体文本</b><i>：斜体标签，使文本倾斜。
<i>这是斜体文本</i><u>：下划线标签，给文本添加下划线。
<u>这是带下划线的文本</u>3.2 列表标签
- 无序列表
：使用
<ul>和<li>标签，列表项前会显示圆点。
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>- 有序列表
：使用
<ol>和<li>标签，列表项前会显示数字。
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
</ol>3.3 链接标签
<a>：用于创建超链接，可以链接到其他网页、文件或同一页面的不同位置。
<a href="https://www.example.com">这是一个外部链接</a>
<a href="#section2">跳转到页面内的 section2 部分</a>3.4 图片标签
<img>：用于在网页中插入图片，src属性指定图片的源文件路径，alt属性用于在图片无法显示时提供替代文本。
<img src="image.jpg" alt="这是一张图片">3.5 表格标签
<table>：定义表格。<tr>：定义表格的行。<th>：定义表格的表头单元格。<td>：定义表格的数据单元格。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>3.6 表单标签
<form>：用于创建 HTML 表单，用于用户输入数据。<input>：常用的表单输入元素，type属性可以设置为不同的值，如text、password、radio、checkbox等。<textarea>：用于多行文本输入。<select>和<option>：用于创建下拉列表。
<form action="submit.php" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="提交">
</form>4. HTML 属性
- 属性用于提供关于 HTML 元素的额外信息，通常以键值对的形式出现，写在标签的开始标签内。
- 例如，
<a>标签的href属性用于指定链接的目标地址，<img>标签的src属性用于指定图片的源文件路径。
<a href="https://www.example.com" target="_blank">打开新窗口访问链接</a>这里的
target="_blank"
是一个属性，它指定链接将在新窗口中打开。
5. HTML 注释
- 使用
<!-- -->来添加注释，注释内容不会在浏览器中显示，仅用于开发者在代码中添加说明。
<!-- 这是一个注释，用于说明下面的代码块 -->
<p>这是一个段落</p>6. HTML 与其他技术的结合
- CSS
：层叠样式表，用于美化 HTML 页面，控制元素的外观和布局。可以通过
<style>标签内联样式、<link>标签引入外部 CSS 文件或使用style属性内联样式。
<head>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p style="font-size: 16px;">这是一个段落</p>
</body>- JavaScript
：用于为网页添加交互性和动态效果。可以通过
<script>标签引入外部 JavaScript 文件或直接在 HTML 文件中编写 JavaScript 代码。
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('你点击了按钮');
});
</script>
</body>总结
HTML 是构建网页的基础，它通过各种标签和属性来定义网页的结构和内容。掌握 HTML 的基本结构、常用标签、属性和注释的使用，是学习网页开发的第一步。同时，结合 CSS 和 JavaScript 可以创建出更加美观、交互性强的网页。