：侧边栏内容，通常包含与主要内容相关的次要信息。
<aside>
<h2>侧边栏标题</h2>
<p>这是侧边栏内容。</p>
</aside>
<main>
<h1>主要内容</h1>
<p>这是文档的主要内容部分。</p>
</main>
文本标签 :至（标题）标题元素，从 到表示不同级别的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>
（段落）段落元素，用于显示一段文本。
<p>这是一个段落。</p>
<a>
（链接）超链接元素，用于创建链接到其他页面或资源。
<a href="https://www.example.com">访问示例网站</a>
<strong>
（加粗）用于强调文本
<p>这是一段 <strong>加粗</strong> 的文本。</p>
<em>
（斜体）用于强调文本
<p>这是一段 <em>斜体</em> 的文本。</p>
<br>
：换行符，用于在文本中插入换行。
<p>这是第一行。<br>这是第二行。</p>
<blockquote>
：引用块元素，用于引用长段落内容。
<blockquote>
<p>这是一个引用块的示例。</p>
</blockquote>
<code>
：代码元素，用于标记代码片段。
<code>console.log('Hello, world!');</code>
列表标签 :<ul>
（无序列表）无序列表，用于创建项目符号列表。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol>
（有序列表）有序列表，用于创建编号列表。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<li>
（列表项）列表项，用于定义列表中的每个项。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<dl>
（定义列表）：定义列表，用于描述术语及其定义。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
<dt>
（定义术语）：用于在定义列表中表示术语。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>
<dd>
（定义描述）：用于在定义列表中表示术语的描述。
<dl>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
表格标签 :<table>
表格元素，用于创建表格布局。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
<tr>
（行）用于定义表格中的一行。
<tr>
<td>张三</td>
<td>25</td>
</tr>
<td>
（单元格）用于定义表格中的一个单元格。
<tr>
<td>张三</td>
<td>25</td>
</tr>
<th>
（表头）用于定义表头单元格，通常为粗体显示。
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<thead>
：表头部分，用于对表格头部进行分组。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</tbody>
</table>
<tbody>
：表格主体部分，用于对表格主体内容进行分组。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</tbody>
</table>
<tfoot>
：表格尾部部分，用于对表格尾部内容进行分组。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">表格尾部</td>
</tr>
</tfoot>
</table>
表单标签 :<form>
表单元素，用于创建用户输入表单。
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<button type="submit">提交</button>
</form>
<input>
输入控件，用于创建各种输入字段。
<input type="text" id="name" name="name">
<label>
标签元素，用于绑定表单控件，使其与对应的表单字段关联。
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<textarea>
多行文本输入，用于输入长文本内容。
<label for="message">消息：</label>
<textarea id="message" name="message"></textarea>
<button>
按钮元素，用于创建按钮。
<button type="submit">提交</button>
<select>
下拉选择框，用于创建一个带有多个选项的下拉列表。
<label for="department">部门：</label>
<select id="department" name="department">
<option value="hr">人力资源</option>
<option value="it">信息技术</option>
<option value="sales">销售</option>
</select>
<option>
：选择项元素，用于定义下拉选择框中的选项。
<option value="hr">人力资源</option>
<fieldset>
：字段集，用于将表单内的元素分组。
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
</fieldset>
<legend>
：字段集的标题，通常与
<fieldset>
配合使用。
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
</fieldset>
多媒体标签 :<img>
图像元素，用于显示图片。
<img src="https://www.example.com/image.jpg" alt="示例图片">
<audio>
视频元素，用于嵌入视频内容。
<audio controls>
<source src="audio.mp3" type="audio/mp3">
您的浏览器不支持音频元素。
</audio>
<video>
音频元素，用于嵌入音频内容。
<video controls width="320" height="240">
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频元素。
</video>
<iframe>
内联框架，用于在页面中嵌入另一个 HTML 页面。
<iframe src="https://www.example.com" width="600" height="400"></iframe>
<embed>
：嵌入外部内容，用于嵌入外部资源（如PDF、Flash等）
<embed src="file.pdf" width="600" height="400">
<object>
：对象元素，用于嵌入多种外部资源
<object data="file.pdf" type="application/pdf" width="600" height="400">
备用内容：您的浏览器不支持对象标签。
</object>
<param>
：参数元素，用于为
<object>
标签提供参数
<object data="movie.swf" type="application/x-shockwave-flash" width="400" height="300">
<param name="autoplay" value="true">
备用内容：您的浏览器不支持对象标签。
</object>
脚本和样式标签：
<script>
：脚本元素，用于嵌入或引用JavaScript代码
<script>
console.log('Hello, world!');
</script>
<noscript>
：非脚本内容，用于在浏览器不支持或禁用JavaScript时显示的内容
<noscript>
您的浏览器不支持JavaScript，或JavaScript已被禁用。
</noscript>
<style>
：样式元素，用于嵌入CSS代码
<style>
body {
background-color: lightblue;
}
</style>
<link>
：链接元素，用于引用外部CSS文件
<link rel="stylesheet" href="styles.css">
元数据标签：
<meta>
：元数据元素，用于提供页面的元数据
<meta charset="UTF-8">
<meta name="description" content="示例网页">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="作者姓名">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
：标题元素，用于指定页面的标题
<title>示例网页</title>
<base>
：基础URL，用于设置页面上所有相对URL的基准URL
<base href="https://www.example.com/">
3、语义化 HTML
**语义化标签: **理解语义化 HTML 的重要性，学会使用语义化标签使页面内容更加结构化和易于理解。语义化标签不仅有助于 SEO（搜索引擎优化），还提高了代码的可读性和维护性。常见的语义化标签包括：
<header>：定义文档的头部，通常包含导航菜单或引言。<nav>：定义导航链接的区域。<article>：定义独立的内容块，如博客文章或新闻条目。<aside>：定义侧边栏或附属内容，通常与主内容无直接关系。<footer>：定义文档的底部，通常包含版权声明、联系信息等。
**可访问性（Accessibility）: **掌握如何编写可访问性好的 HTML，提高页面对残障用户的友好度，如使用
alt
属性为图片添加描述、使用 ARIA 标签等。
使用 alt 属性为图片提供描述性文本，确保屏幕阅读器用户能够理解图片内容。
使用 ARIA（Accessible Rich Internet Applications）标签增强页面的可访问性，如 aria-label、aria-labelledby 和 aria-describedby，这些标签可以帮助描述界面元素的功能和状态。
4、表单与用户输入
表单控件 : 了解如何创建和使用各种表单控件（如文本框、单选按钮、复选框、下拉列表等）。
文本框 (<input type="text">)：用于输入单行文本。
单选按钮 (<input type="radio">)：用于选择一个选项。
复选框 (<input type="checkbox">)：用于选择多个选项。
下拉列表 (<select>): 提供多个选择项的下拉菜单。
表单验证 : 学习基础的 HTML 表单验证，如使用
required
、
minlength
、
pattern
等属性来验证用户输入，HTML 表单验证功能来确保用户输入的有效性：
required：确保字段必须填写。minlength 和 maxlength：设置输入文本的最小和最大长度。pattern：使用正则表达式模式验证输入的格式。
5、媒体和嵌入内容
图像和多媒体 : 学习如何在网页中嵌入图像、音频、视频等多媒体内容，以及如何使用
<iframe>
嵌入其他网页或地图。以增强页面的视觉和功能：
使用 <img> 标签嵌入图像。
使用 <audio> 和 <video> 标签嵌入音频和视频内容。
使用 <iframe> 嵌入其他网页、地图或其他外部内容。
响应式图片 : 了解如何使用
srcset
和
picture
元素来实现响应式图片，适应不同设备和分辨率。
使用响应式技术确保图片在不同设备和分辨率下显示良好：
使用 srcset 属性为不同屏幕分辨率提供不同尺寸的图片。
使用 <picture> 元素，根据设备特性选择合适的图片格式和尺寸。
6、链接和导航
超链接 : 学习如何使用
<a>
标签创建内部链接、外部链接、锚点链接，以及如何控制链接在新标签页中打开。
内部链接：链接到同一网站的不同页面。
外部链接：链接到其他网站的页面。
锚点链接：链接到页面中的特定位置。
使用 target="_blank" 属性在新标签页中打开链接。
导航栏 : 学会使用列表和链接创建网站的导航栏，使用列表和链接创建有效的导航栏：
使用 <ul> 和 <li> 标签创建无序列表，用于构建导航菜单。
使用 CSS 样式化导航栏，使其符合网站设计。
7、HTML 与 CSS、JavaScript 的结合
CSS : 掌握如何使用
<style>
标签或
<link>
标签将 CSS 引入 HTML 文档，控制页面的外观和布局。
<style> 标签用于在文档内部定义样式。<link> 标签用于引用外部 CSS 文件，推荐用于组织和管理较大样式表。
JavaScript : 学习如何通过
<script>
标签引入 JavaScript，增强页面的交互性和动态效果。
<script> 标签可以放置在文档的 <head> 或 <body> 中。了解如何将 JavaScript 代码分离到外部文件中，并通过 src 属性引入。
8、实践(图书馆系统简化版本)
注意：这个教程只会使用到html所以界面美观和互动能力将大打折扣
1、创建一个存放项目的文件夹（这里命名为library）并使用vscode打开
2、在library下创建一个登录页面的html文件
3、登录页面(login)
用户名输入框
密码输入框
登录按钮
注册按钮
忘记密码
快捷登录
第三方登录
<!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>
<div>
<div>
<label for="username">用户名:</label>
<input type="text">
</div>
<div>
<label for="password">密码:</label>
<input type="password">
</div>
<div>
<button><a href="main.html">登录</a></button>
<button>注册</button>
</div>
<div>
<a href="">忘记密码</a>
</div>
<div>
<button>第三方登录</button>
</div>
</div>
</body>
</html>
4、主页面(Main)
书籍分类
搜索框，搜索按钮
读者指南
图书封面及简介售价
个人头像及用户名
<!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>
<!-- 这部分是顶部菜单栏 -->
<header>
<!-- 读者指南 -->
<div>
<a href="ReadersGuide.html"><p>读者指南</p></a>
</div>
<!-- 下拉筛选书籍 -->
<div>
<select name="" id="">
<option value="">历史</option>
<option value="">教育</option>
<option value="">人文</option>
<option value="">技工</option>
</select>
</div>
<!-- 搜索框搜索书籍 -->
<div>
<input type="text">
<button>搜索</button>
</div>
<!-- 用户头像及用户名 -->
<div>
<img src="" alt="">
<p>用户名</p>
</div>
</header>
<!-- 这部分是图书成列部分 -->
<main>
<section>
<a href="BookDetails.html">
<div>
<img src="" alt="">
<div>
<p>《书名》</p>
<P>简介</P>
<p>售价</p>
</div>
</div>
</a>
</section>
</main>
</body>
</html>
5、书籍页面(ReadersGuide)
书籍图片介绍
书籍文字介绍（作者，简介，出版社，出版时间）
<!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>
<div>
<img src="" alt="">
<div>
<h2>书名</h2>
<hr>
<div>
<label for="">简介：</label>
<textarea>简介内容</textarea>
</div>
</div>
</div>
</body>
</html>
6、用户界面（User）
用户头像
用户名
个性签名
收藏
<!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>
<header>
<div>
<img src="" alt="">
<div>
<p>用户名</p>
<br>
<p>个性签名</p>
</div>
</div>
</header>
<hr>
<main>
<ul>
<li>书架</li>
<li>历史</li>
<li>个人信息</li>
</ul>
</main>
</body>
</html>
7、读者指南（ReadersGuide）
<!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>
<div>
<!-- 视频指南 -->
<video src=""></video>
</div>
<div>
<!-- 文本指南 -->
<textarea name="" id="">文本指南</textarea>
</div>
</body>
</html>
