HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。 ——MDN

HTML是由Web的发明者 Tim Berners-Lee 和同事 _Daniel W. Connolly 于1990年创立的一种标记语言！

HTML和HTML5是什么关系

两种含义：

  • HTML5是HTML最新版本的HTML语言，包含旧标签和32个新标签。
  • HTML5和它的朋友：
    • 新标签、新属性
    • 新的通信技术：WebSockets、WebRTC等
    • 离线存储技术：LocalStorage、断网检测
    • 多媒体技术：视频、音频
    • 图像技术：Canvas、SVG、WebGL
    • Web增强技术：History API、全屏
    • 设备相关技术：摄像头、触摸屏
    • 新的样式技术：CSS3新的Flex、Grid布局方式

HTML的语法

  1. <!DOCTYPE html>
  2. <tag attr = value>
  3.     内容
  4. </tag>
  5. <tag attr>
  6.     内容
  7. </tag>
  8. <tag attr = value>
  10. <!-- 要注释的内容 -->
  12. <!--
  13. 要
  14. 注
  15. 释
  16. 的
  17. 内
  18. 容
  19. -->

:::warning 注：

  • vlaue 可以加单/双引号，也可以不加。前提是没有特殊字符，有就加引号。 :::

起手代码如下：

  1. <!DOCTYPE html>
  2. <!-- DOCTYPE是文档类型，要是被问到DOCTYPE是什么？直接回答是文档类型即可 -->
  4. <html lang="zh-CN">
  5. <!-- html标签：默认lang="en"声明本页面是英文页面，可以改写成lang="zh-CN",即声明本页面是简体中文 -->
  7. <head>  
  8.     <meta charset="UTF-8">
  9.     <!-- 文件的字符编码，默认UTF-8即可 -->
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.     <!-- meta很多属性，其中 width=device-width 指的是禁用缩放，兼容手机的，其他的请自行查资料-->
  14.     <title>Document</title>
  15.     <!-- title是页面标签，即浏览器的标签页里面的标题，写给用户看的 -->
  17. </head>
  19. <body>
  20.   <!-- body标签，就是我们前端程序员要写给用户看得到的东西，我们在这边起手 -->
  22. </body>
  24. </html>

如何排错

  • 看代码提示
  • 看代码颜色
  • 使用html5验证器（在线npm工具，使用node-w3c-validator命令）