首页 前端知识 一篇文章讲清楚html css js三件套之html

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

2024-08-14 22:08:23 前端知识 前端哥 833 12 我要收藏

目录

HTML

HTML发展史

HTML概念和语法

常见的HTML标签:

 HTML 调试

错误信息分析

HTML文档结构

HTML5的新特性

结论

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标签及其用法示例:

  1. <p> - 段落标签

    <p>这是一个段落。</p>
  2. <h1><h6> - 标题标签,<h1>是最高级别的标题

    <h1>这是主标题</h1>
    <h2>这是副标题</h2>
  3. <a> - 超链接标签,用于链接到另一个页面或锚点

    <a href="https://www.example.com">访问示例网站</a>
  4. <img> - 图片标签,用于在网页上显示图片

    <img src="image.jpg" alt="示例图片">
  5. <ul><ol> - 无序列表和有序列表

    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
    <ol>
      <li>第一项</li>
      <li>第二项</li>
    </ol>
  6. <li> - 列表项标签,用于在列表中创建单个列表项

    <ul>
      <li>这是列表中的一个项目。</li>
    </ul>
  7. <strong> - 强调标签,表示文本非常重要

    <strong>这很重要!</strong>
  8. <em> - 斜体标签,表示文本需要被强调

    <em>这是斜体文本。</em>
  9. <b> - 粗体标签,使文本显示为粗体

    <b>这是粗体文本。</b>
  10. <i> - 斜体标签,用于显示斜体文本

    <i>这是斜体文本。</i>
  11. <u> - 下划线标签,为文本添加下划线

    <u>这是带下划线的文本。</u>
  12. <br> - 换行标签,用于在文本中创建换行

    这是第一行。<br>这是第二行。
  13. <hr> - 水平线标签,用于在页面上创建一条水平线

    <hr>
  14. <table> - 表格标签,用于创建表格

    <table>
      <tr>
        <th>标题1</th>
        <th>标题2</th>
      </tr>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
      </tr>
    </table>
  15. <tr> - 表格行标签,用于在表格中创建行

  16. <td><th> - 表格单元格标签,<td>用于数据,<th>用于表头

  17. <form> - 表单标签,用于创建用户输入表单

    <form action="/submit" method="post">
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name">
      <input type="submit" value="提交">
    </form>
  18. <input> - 输入字段标签,用于创建不同类型的输入控件

    <input type="text" name="username" placeholder="输入用户名">
  19. <button> - 按钮标签,用于创建可点击的按钮

    <button type="button">点击我</button>
  20. <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>等,提供了更好的内容结构。
  • 本地存储:通过localStoragesessionStorage提供了更多的客户端存储选项。

结论

HTML是构建网页的基础,它的不断发展和改进使得Web开发更加强大和灵活。了解HTML的历史和基本概念对于任何希望掌握Web开发的人来说都是必要的。随着HTML5的推出,Web开发者现在拥有了更多工具来创建丰富、互动和易于访问的网页。

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15606.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!