目录
HTML
HTML是网页的基础，它是一种标记语言，用于定义网页的结构和内容。HTML标签告诉浏览器如何显示网页元素，例如段落、标题、列表、链接、图片和表格等。
HTML发展史
- 1990年：Tim Berners-Lee提出了超文本的概念，这是HTML的前身。
- 1991年：HTML作为SGML的一个应用被正式定义。
- 1993年：IETF开始制定HTML规范。
- 1995年：HTML 2.0发布。
- 1994年：W3C（万维网联盟）成立，致力于推动Web标准的发展。
- 1997年：HTML 3.2发布。
- 1999年：HTML 4.0发布，2000年成为ISO标准。
- 2000年代初：W3C转向XHTML，但随后又重新关注HTML。
- 2004年：WHATWG成立，独立于W3C之外。
- 2008年：W3C和WHATWG合作，发布了HTML5的第一份草案。
- 2014年：HTML5作为官方标准发布。
HTML概念和语法
- 元素：HTML文档由多个元素组成，每个元素由开始标签和结束标签定义。
- 标签：HTML标签用尖括号
<>包围，例如<p>...</p>。 - 属性：HTML标签可以包含属性，属性提供关于元素的额外信息，通常在开始标签中定义，例如
<img src="image.jpg" alt="描述">。 - 空标签：某些HTML标签不需要结束标签，如
<img>、<br>、<hr>等。 - 扩展名：HTML文件通常以
.html或.htm结尾。 - 备注： HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 <title> 可以写作 <title>、<TITLE>、<Title>、<TiTlE> 等，也都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母。
常见的HTML标签:
以下是一些常见的HTML标签及其用法示例：
-
<p>- 段落标签<p>这是一个段落。</p> -
<h1>到<h6>- 标题标签，<h1>是最高级别的标题<h1>这是主标题</h1> <h2>这是副标题</h2> -
<a>- 超链接标签，用于链接到另一个页面或锚点<a href="https://www.example.com">访问示例网站</a> -
<img>- 图片标签，用于在网页上显示图片<img src="image.jpg" alt="示例图片"> -
<ul>和<ol>- 无序列表和有序列表<ul> <li>列表项1</li> <li>列表项2</li> </ul> <ol> <li>第一项</li> <li>第二项</li> </ol> -
<li>- 列表项标签，用于在列表中创建单个列表项<ul> <li>这是列表中的一个项目。</li> </ul> -
<strong>- 强调标签，表示文本非常重要<strong>这很重要！</strong> -
<em>- 斜体标签，表示文本需要被强调<em>这是斜体文本。</em> -
<b>- 粗体标签，使文本显示为粗体<b>这是粗体文本。</b> -
<i>- 斜体标签，用于显示斜体文本<i>这是斜体文本。</i> -
<u>- 下划线标签，为文本添加下划线<u>这是带下划线的文本。</u> -
<br>- 换行标签，用于在文本中创建换行这是第一行。<br>这是第二行。 -
<hr>- 水平线标签，用于在页面上创建一条水平线<hr> -
<table>- 表格标签，用于创建表格<table> <tr> <th>标题1</th> <th>标题2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table> -
<tr>- 表格行标签，用于在表格中创建行 -
<td>和<th>- 表格单元格标签，<td>用于数据，<th>用于表头 -
<form>- 表单标签，用于创建用户输入表单<form action="/submit" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <input type="submit" value="提交"> </form> -
<input>- 输入字段标签，用于创建不同类型的输入控件<input type="text" name="username" placeholder="输入用户名"> -
<button>- 按钮标签，用于创建可点击的按钮<button type="button">点击我</button> -
<div>- 区块标签，用于布局和分组元素<div>这是一个区块元素。</div>
这些只是HTML中众多标签的一部分。每种标签都有其特定的用途和属性，通过组合使用这些标签，可以创建结构丰富、功能多样的网页。
为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：
<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>二次元俱乐部</title>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe"
rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<!-- 本站所有网页的统一主标题 -->
<h1>聆听电子天籁之音</h1>
</header>
<nav>
<!-- 本站统一的导航栏 -->
<ul>
<li><a href="#">主页</a></li>
<!-- 共 n 个导航栏项目，省略…… -->
</ul>
<form>
<!-- 搜索栏是站点内导航的一个非线性的方式。 -->
<input type="search" name="q" placeholder="要搜索的内容" />
<input type="submit" value="搜索" />
</form>
</nav>
<main>
<!-- 网页主体内容 -->
<article>
<!-- 此处包含一个 article（一篇文章），内容略…… -->
</article>
<aside>
<!-- 侧边栏在主内容右侧 -->
<h2>相关链接</h2>
<ul>
<li><a href="#">这是一个超链接</a></li>
<!-- 侧边栏有 n 个超链接，略略略…… -->
</ul>
</aside>
</main>
<footer>
<!-- 本站所有网页的统一页脚 -->
<p>© 2050 某某保留所有权利</p>
</footer>
</body>
</html>
HTML 调试
HTML 并不像 Rust 那么难以理解，浏览器并不会将 HTML 编译成其他形式，而是直接解析并显示结果（称之为解释，而非编译）。可以说 HTML 的 元素 语法比 Rust、JavaScript 或 Python 这样“真正的编程语言”更容易理解。浏览器解析 HTML 的过程比编程语言的编译运行的过程要宽松得多，但这是一把双刃剑。
错误信息分析
错误信息一般都是有用的，也有没用的，有一些经验后你就能够分析并修复这些错误。下面来观察这些错误信息。可以看到每条信息都对应一个行号和一条信息，使得定位错误更方便。
- End tag
liimplied, but there were open elements（需要li的结束标签，但又开始了新的元素）（共出现 2 次）：这条信息表明有开始标签必须有结束标签，必须出现结束标签的地方却没有找到它。行/列信息指出结束标签必须出现的位置的第一行，这一线索已经足够明显了。 - Unclosed element
strong（未闭合元素strong）：非常容易理解，<strong> 元素没有闭合，行/列信息表明了它的位置。 - End tag
strongviolates nesting rules（结束标签strong违反了嵌套规则）：指出了错误嵌套的元素，行/列信息表明了它的位置。 - End of file reached when inside an attribute value. Ignoring tag（在属性值内达到文件末尾。忽略标签）: 这个比较难懂，它说的是在某个地方有一个属性的值格式有误，估计是在文件末尾附近，因为文件的结尾出现在了一个属性值里。事实上浏览器没有渲染超链接已经是一个很明显的线索了。
- End of file seen and there were open elements（文件结尾有未闭合的元素）：这个略有歧义，但基本上表明了有元素没有正确闭合。行号指向文件最后几行，且错误信息给出了一个这种错误的案例：
-
来看一个示例：<a href="https://www.mozilla.org/>Mozilla 主页链接</a> ↩ </ul>↩ </body>↩</html>备注： 属性缺少结束引号会导致元素无法闭合。因为文档所有剩余部分（直到文档某处出现一个引号）都将被解析为属性的内容。
- Unclosed element
ul（未闭合元素ul）：这个意义不大，因为 <ul> 已经正确闭合了。出现这个错误是因为 <a> 元素没有右引号而没有闭合。
如果你不能一次弄懂所有的错误，别着急，可以试试先修复那些已经弄懂的，再申请验证，看看剩下哪些错误。有时候先修复的错误可能让你摆脱后面一系列的错误，因为一个小问题可能引发一连串错误，就像多米诺骨牌。
HTML文档结构
一个典型的HTML文档结构如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>HTML5的新特性
HTML5不仅仅是HTML的一个新版本，它引入了一系列新特性和改进，以适应现代Web应用的需求：
- 多媒体：
<video>和<audio>标签允许直接嵌入视频和音频内容。 - 图形：
<canvas>标签提供了一个绘图API。 - 表单控件：新增了日期选择器、电子邮件输入等控件。
- 语义化标签：如
<article>、<section>、<nav>等，提供了更好的内容结构。 - 本地存储：通过
localStorage和sessionStorage提供了更多的客户端存储选项。
结论
HTML是构建网页的基础，它的不断发展和改进使得Web开发更加强大和灵活。了解HTML的历史和基本概念对于任何希望掌握Web开发的人来说都是必要的。随着HTML5的推出，Web开发者现在拥有了更多工具来创建丰富、互动和易于访问的网页。
期末放假自学三件套,希望我们可以一起学习!
