[toc]

📖第一个网页

Emmet插件：自动生成HTMl代码片段的插件（默认内置Emmet）

输入英文!即可生成整个html文档格式

🔖1.注释

注释为代码的阅读者提供帮助，注释不参与运行

在html文档中，注释使用以下格式书写：
快捷键（Ctrl+/）

  1. <!--注释类容-->

🔖2.元素

其他叫法：标签，标记

区分大小写

  1. <a href="https://www.duqianedu.com" title="渡阡科技">渡阡科技</a>
  3. <起始标签 属性名:"属性值">元素内容</结束标签>

整体：element（元素）

元素 = 起始标签（begin tag）+ 元素内容 +结束标签（end tag）

每个起始标签内含有特定的元素属性

属性 = 属性名 + 属性值
属性的分类：

  • 局部属性：某些元素特有的属性
  • 全局属性：全部元素都有的属性
  1. <meta charset="UTF-8">

有些元素没有结束标签，这样的元素被称为空元素

空元素的两种写法：

  1. html5之后的写法
    html <meta charset="UTF-8">
  2. html5之前的写法
    html <meta charset="UTF-8"/>

🔖3.元素的嵌套

元素不能相互嵌套

错误写法示例

  1. <div>
  2.         <p>
  3.     </div>
  4.         </p>

术语：

  • 父元素
  • 子元素
  • 祖先元素
  • 后代元素
  • 兄弟元素（拥有同一个父元素的两个元素）

🔖4.标准的文档结构

  1. <!-- 
  2.     文档类型声明，告诉浏览器我们当前的文档是html类型 
  3.     不写文档声明会导致浏览器进入怪异渲染模式（即自动选择html版本进行渲染）
  4. -->
  5. <!DOCTYPE html>
  6. <!-- 
  7.     根元素，一个页面只能有一个，并且该元素是所有其他元素的父元素或祖先元素。
  8.     HTML5版本中，并不强制要求写这个元素
  9.     lang属性：language，全局属性，表示该元素内部所使用的文字是使用哪一种自然语言书写而成的。
  10.     如何将lang改为中文？
  11.     + 将属性性质改为zh-CN（已经过时）
  12.     + cmn-hans 表示中国大陆官方用语（普通话，简体中文）
  13. -->
  14. <html lang="en">
  15. <!-- 
  16.     文档头：（可以理解为人的头脑思想）
  17.     HTML5版本中，并不强制要求写这个元素
  18.     文档头中的所有内容并不显示到页面上。
  19. -->
  20. <head>
  21.     <!-- 
  22.         文档的元数据
  23.      -->
  24.      <meta>
  25.     <!-- 
  26.         局部属性 meta特有，charset指定网页内容编码
  27.         计算机中，低压电（0-2v） 0，高压电（2-5v）1，表示数字2用二进制的10（逢2进1）
  28.         计算机中只能存储数字，计算机要存储文字，只能将文字与数字相对应（ASSIC编码）
  29.         例如：
  30.         A-64
  31.         a-97
  32.         其他的字符编码：
  33.         + 中国大陆 GB2312（不支持繁体中文）
  34.         + 台湾 BIG5 大五码
  35.         + 中国 GBK 
  36.         + UTF-8 是Unicode编码的一个版本
  37.         + Unicode 万国码
  38.      -->
  39.     <meta charset="UTF-8">
  40.     <!-- 适配IE浏览器，因为IE的内核有问题，难以升级，所以微软弃用IE，发布Edge -->
  41.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  42.     <!-- 适配手机端（响应式布局） -->
  43.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  44.     <!-- 网页标题，显示在浏览器标签栏的内容 -->
  45.     <title>Document</title>
  46.     <!-- 引入script代码 -->
  47.     <script src=""></script>
  48.     <!-- 内部scc样式 -->
  49.     <style></style>
  50.     <!-- 
  51.         页面中#占位符或者为空的链接
  52.         指定用于一个文档中包含的所有相对 URL 的根 URL 
  53.         后续会详细讲解
  54.     -->
  55.     <base href="">
  56. </head>
  57. <!-- 
  58.     文档体：
  59.     HTML5版本中，并不强制要求写这个元素
  60.     所有页面中要显示的东西，都要显示在文档体中
  61. -->
  62. <body>
  63. </body>
  64. </html>