前端开发 ：（二）HTML基础
1. 介绍HTML
1.1 HTML的定义和作用
HTML（HyperText Markup Language）是一种标记语言，用于创建和设计网页的结构和内容。它通过使用标签来描述文档的结构，使得浏览器能够正确地解释和显示页面。
1.2 HTML的发展历史
HTML的发展可以追溯到1990年代初，随着互联网的发展，HTML逐渐演变为不同的版本。从HTML 2.0到HTML5，每个版本都带来了新的特性和改进，以适应不断变化的互联网环境。
1.3 HTML5的新特性
HTML5引入了许多令人振奋的功能，包括语义化标签、新的表单元素、Web存储和离线应用等。这些特性不仅提升了开发者的工作效率，还改善了用户体验。
2. HTML基础
2.1 HTML文档的结构
一个标准的HTML文档包含声明、元素、元素和元素。
DOCTYPE html>
<html>
<head>
head>
<body>
body>
html>
2.2 HTML元素和标签
HTML元素是构建页面的基本单元，由开始标签、内容和结束标签组成。例如，表示段落，表示超链接。
2.3 HTML属性
HTML元素可以包含属性，属性提供了有关元素的额外信息。例如，src属性，指定要显示的图像的路径。
2.4 HTML注释
通过注释，开发者可以在HTML代码中添加说明或临时禁用某部分代码，提高代码的可维护性。
3. HTML文档的结构
3.1 HTML文档的基本结构
HTML文档的基本结构已在上述介绍中提到，是确保页面正确渲染的关键。
3.2 head元素的作用和常用标签
元素包含页面的元信息，如标题、字符集定义、样式表和脚本链接等。
<head>
<title>页面标题title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
head>
3.3 body元素的结构和常用标签
元素包含页面的主要内容，可以包含标题、段落、列表、图像等。
<body>
<h1>主标题h1>
<p>这是一个段落。p>
<img src="image.jpg" alt="图片描述">
body>
3.4 HTML文档的语法规范
遵循HTML的语法规范对于确保页面正确解析至关重要，包括正确使用标签、嵌套规则等。
4. 文本标签
4.1 标题标签
HTML提供了到共六个标题标签，用于定义标题的重要性，最高，最低。
<h1>主标题h1>
<h2>副标题h2>
4.2 段落标签
段落由标签定义，用于将文本组织成段落。
<p>这是一个段落。p>
4.3 换行标签
这是一行文本。<br>这是下一行文本。
4.4 注释标签
通过可以在HTML代码中添加注释。
5. 列表
5.1 有序列表（ol）
有序列表使用标签定义的列表项。
<ol>
<li>第一项li>
<li>第二项li>
ol>
5.2 无序列表（ul）
无序列表使用标签定义的列表项。
<ul>
<li>第一项li>
<li>第二项li>
ul>
5.3 列表项（li）
标签定义列表项，可以嵌套在有序或无序列表中。
<ul>
<li>第一项li>
<li>第二项li>
ul>
6. 链接与超文本
6.1 超链接标签（a）
<a href="https://www.example.com">访问示例网站a>
6.2 锚点标签（anchor）
锚点用于在同一页面内快速跳转，通过在目标位置添加id属性，再使用标签指向该id。
<a href="#section2">跳转到第二部分a>
...
<h2 id="section2">第二部分h2>
6.3 相对路径和绝对路径
链接可以使用相对路径（相对于当前文件位置）或绝对路径（完整的URL路径）。
<a href="images/pic.jpg">查看图片a>
<a href="https://www.example.com/images/pic.jpg">查看图片a>
7. 图像标签
7.1 图像标签（img）
src属性指定图像路径。
<img src="image.jpg" alt="示例图片">
7.2 图像路径和替代文本
良好的图像路径和替代文本有助于页面的可访问性和用户体验。
<img src="images/pic.jpg" alt="美丽的风景">
7.3 图像的尺寸和样式
通过width和height属性可以指定图像的尺寸，同时可以使用CSS样式调整图像的外观。
<img src="image.jpg" alt="示例图片" width="300" height="200" style="border: 1px solid #ccc;">
8. 表格标签
8.1 表格的基本结构
表格由 表头使用 表单通过 HTML5引入了一系列语义化标签，如 HTML5新增了一些表单元素，如 HTML5提供了本地存储和离线应用的支持，通过 响应式设计采用“移动优先”原则，首先针对移动设备进行设计和优化，然后逐步适配更大的屏幕。 使用媒体查询可以根据不同设备特性应用不同的样式，以实现响应式布局。 通过设置 内联样式通过在HTML元素中使用 内部样式表嵌入在HTML文档的标签定义，包含
（行）和 （数据）标签。
<table>
<tr>
<td>第一行第一列td>
<td>第一行第二列td>
tr>
<tr>
<td>第二行第一列td>
<td>第二行第二列td>
tr>
table>
8.2 表头标签（thead）
标签定义，包含标签作为列标题。
<table>
<thead>
<tr>
<th>姓名th>
<th>年龄th>
tr>
thead>
<tbody>
tbody>
table>
8.3 表格行标签（tr）
标签定义表格中的行。
<tr>
<td>Johntd>
<td>25td>
tr>
8.4 表格数据标签（td）
标签定义表格中的数据。
<td>25td>
9. 表单标签
9.1 表单的创建和基本结构
标签定义，包含输入框、下拉框、按钮等表单元素。<form action="/submit" method="post">
form>
9.2 输入框（input）
标签用于创建文本框、密码框等输入元素。<input type="text" name="username" placeholder="请输入用户名">
9.3 下拉框（select）
标签定义下拉框，包含标签作为选项。<select name="country">
<option value="us">美国option>
<option value="cn">中国option>
select>
9.4 按钮标签（button）
标签定义按钮，可以用于提交表单或执行JavaScript函数。<button type="submit">提交button>
10. 多媒体标签
10.1 音频标签（audio）
标签用于嵌入音频文件，支持多种音频格式。<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
audio>
10.2 视频标签（video）
标签用于嵌入视频文件，同样支持多种视频格式。<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
video>
10.3 嵌入标签（embed）
标签可用于嵌入其他媒体类型，如Flash动画。<embed src="animation.swf" width="300" height="200">
11. HTML5新特性
11.1 语义化标签
、、等，提高了页面的结构清晰性和可读性。<article>
<header>
<h2>文章标题h2>
header>
<p>文章内容p>
<footer>发布日期：2024年02月06日footer>
article>
11.2 新的表单元素
、、等，简化了表单输入的验证和展示。<label for="birthdate">生日：label>
<input type="date" id="birthdate" name="birthdate">
11.3 Web存储和离线应用
localStorage和service workers等技术，提升了Web应用的性能和用户体验。// 使用localStorage存储数据
localStorage.setItem("username", "John Doe");
// 注册service worker以实现离线缓存
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service Worker 注册成功:', registration);
}).catch(function(error) {
console.log('Service Worker 注册失败:', error);
});
}
12. 响应式Web设计
12.1 移动优先设计理念
12.2 媒体查询（media queries）
@media screen and (min-width: 768px) {
/* 在宽度大于等于768px的屏幕上应用的样式 */
body {
font-size: 16px;
}
}
12.3 viewport设置
标签的viewport属性，可以控制页面在移动设备上的显示效果。<meta name="viewport" content="width=device-width, initial-scale=1.0">
13. HTML元素的样式
13.1 内联样式
style属性来定义，适用于个别元素的样式设置。<p style="color: blue; font-size: 14px;">这是一个蓝色字体的段落。p>
13.2 内部样式表