一、HTML定义

HTMLHyperText Markup Language``超文本标记语言是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。

• HyperText超文本
  • 是指连个单个网站内或多个网站间的网站连接
  • 简单讲就是超出普通的文本，他可以添加图片、输入框、单选框、并且可以跳转到其他网站

• Markup标记

  • 是指HTML使用标记来注明文本、图片和其他内容，以便于在 Web 浏览器中显示

    二、认识标签/元素

    元素结构

    

• 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。

• 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
• 内容（Content）：元素的内容，本例中就是所输入的文本本身。

• 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

  了解空元素

  <input>,<meta>,<img>等标签被称之为空标签，也有单标签元素、闭合元素的称呼
  不同于一般的标签是有开始标签和结束标签，他们开始标签和结束标签在书写时是同一个标签
  空元素名字的由来：由于开始标签和结束标签之间是写元素内容的，而它们不需写元素内容（单标签元素、闭合元素也是类似道理）

  嵌套元素

  也可以将一个元素置于其他元素之中 —— 称作嵌套
  例如此处，p为父元素，strong为子元素，他们为父子关系

  <p>
  My cat is 
  <strong>very</strong>
  grumpy.
  </p>

  二、认识属性

  属性结构

  
  属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用

  属性分类

• 公共属性

  • 所有的元素都可使用的属性
  • class,id,title

• 元素特有属性

  • 部分属性自身特有的属性
  • src,href等

    三、认识注释

    注释并非某一个或某一些技术有的东西，而是如今几乎所有技术都会有注释，注释不同于其他代码，一般运行时不会读取和造成影响，即其作用是用于程序员可以在代码中插入描述和解释，只是提供给程序员观看

    注释作用

• 帮助我们自己理清代码的思路，方便以后进行查询

• 与别人合作开发时，添加注释，可以减少沟通成本
• 开发自己的框架时，加入适当的注释，方便别人使用和学习
• 可以临时注释掉一些代码，方便测试

  作用情景 某一天我突然灵感爆发，一天写了1k行代码，这些代码中我使用了奇妙的设计，一般的程序员可看不懂我这些“高级代码”，想必也只有我和上帝可以看得懂了 一周后运行项目我突然发现在这1k行代码里存在一些问题，在当我回来看想修正时，发现如今只有上帝能看懂了

注释分类

• 单行注释
  • 只能注释本行的内容，不顾其上下行
• 多行注释
  • 可以注释多个相邻行的内容一般存在头部注释符号和尾部注释符号，其会将中间文本注释掉，因此可以注释多个相邻行
• 文档注释
  • 与多行注释大致相同，一般是用于给函数/方法编写文档，描述其功能

    <!-- 这是html的注释，其只存在多行注释 -->

    /* 这是CSS的多行注释，其只存在多行注释 */

    ```javascript // 这是JS的单行注释

/ 这是JS的多行注释 可以写多行文本 /

/**

• 这是JS的文档注释
• 用于描述此模块、包、文件、类或方法的简短描述
• 详细说明，如有必要。任意数量的句子。
• @beta
• @param {number} depth */ ```

  四、认识特殊字符

  由于HTML规定的格式结构，导致有些字符被用于当代码解析而出现无法使用的情况，这些特殊字符又称之为保留字符或转义字符
  保留字符其实类似于保留字，今后学习JS时会提及关键字、保留字
  不仅仅是保留字符的影响，还有一些字符无法通过键盘输入，也算作了特殊字符里，这些特殊字符的使用格式为&编码;（注意以&开头，以;结尾）

  例如<或>，html解析时会将这两个符号当做标签的结构而导致解析出错，因此我们常需要使用其对应的特殊字符 <小于英文缩写和>大于英文缩写，具体特殊字符可以在使用时自行搜索

五、课后补充

以上内容为HTML语法相关基础，而实用HTML更多的是需要对各种常见标签的熟悉使用，这块内容过多且大多数网课都有该内容，请自己尝试自学

请熟悉常用HTML标签

如果你能对着以下标签说出其使用场景和常见使用方法，则说明你过关了，不会请看[扩展-如何自学]或群里提问

• 基础结构html,head,body
• 容器标签div,header,main,footer,article,aside,nav,section
• 文本标签a,span,em,strong,br,hr,p,h1~h6
• 图片标签img
• 表单标签input,button,form,label,select,option
• 列表标签ul,ol,li
• 表格标签table
  • thead,tr,th
  • tbody,tr,td
  • tfoot
• 音频/视频标签audio/video

请熟悉常用全局属性

如果你能对着以下属性说出其使用场景和常见使用方法，则说明你过关了，不会请看[扩展-如何自学]或群里提问

• 类class
• IDid
• 样式属性style
• 自定义属性data-*