一篇文章讲清楚html css js三件套之html

HTML

HTML发展史

HTML概念和语法

常见的HTML标签:

[HTML 调试](#HTML 调试)

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 li implied, but there were open elements（需要 li 的结束标签，但又开始了新的元素）（共出现 2 次）：这条信息表明有开始标签必须有结束标签，必须出现结束标签的地方却没有找到它。行/列信息指出结束标签必须出现的位置的第一行，这一线索已经足够明显了。
Unclosed element strong（未闭合元素 strong ）：**非常容易理解，<strong> 元素没有闭合，**行/列信息表明了它的位置。
End tag strong violates 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开发者现在拥有了更多工具来创建丰富、互动和易于访问的网页。

期末放假自学三件套,希望我们可以一起学习!