HTML之网页开发 (二)：第一个网页、认识HTML、开发工具、HTML元素、注释编写

跳转目录🚀

篇章	知识点
HTML之邂逅(一)	软件开发和应用程序开发、网站和网页的关系、网页的显示过程、网页的组成部分、浏览器和浏览器内核
HTML之网页开发(二)	第一个网页、认识HTML、开发工具、HTML元素、注释编写
HTML常见的元素(三)	HTML结构分析、常见的标签、div元素与span元素、HTML全局属性
HTML额外知识补充(四)	字符实体、URL地址、元素语义化、SEO优化、字符编码字符实体、URL地址、元素语义化、SEO优化、字符编码

1. 第一个网页✨

• 使用记事本开发第一个网页：

  1. 新建一个.txt的文件
  2. 在其中添加一些文字，比如Hello World。
  3. 保存文件，修改文件的扩展名为.html文件
  4. 使用浏览器打开页面
     

• 用记事本开发网页的缺点：

  1. 只能显示一段普通的文本；
  2. 浏览器不知道是否要对这段文本加粗、放大、段落之间的间距；

如果有一条新闻网页内阁 ,那么我们需要使用类似于<p></p>这样的HTML元素来编写。

2. 认识HTML✨

2.1 基本概念⭐

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML），是一种用于创建网页的标准标记语言

其中有三个专业名词 超文本 、 标记语言(markup language) 和 元素(element)：

1. 超文本：不仅仅局限于 普通的文本(text) ，还包含了图片、音频、视频、超链接、表格、表单等内容
2. 标记语言(markup language)：由无数个 标签(或标记、tag)组成，每一种标签都是对某些内容进行特殊的标记，以供其它解释器识别处理。例如 <p>标签 所标记的文本会被识别为 段落
3. 元素(element)：标签和其标记的内容组成一个元素

2.2 HTML文件扩展名（后缀名）⭐

因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以有使用 .htm 后缀名。
现在HTML文件的后缀名统一使用 .html

2.3 HTML文件的结构⭐

编写网页的代码是需要具备正确的基本结构的，即使在违反基本结构的一些情况下运行效果相同。

3 开发工具✨

在开发中不推荐使用记事本，因为有创建和管理文件不方便，没有颜色标识/没有智能提示/无法调试程序等缺点

3.1 专业的前端开发工具⭐

特点： 智能提示、高亮识别、语法检测、集成环境、开发效率高

WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver

3.2 推荐使用的开发工具⭐

1. VSCode（自学使用）
   • 优点：轻（相当于一个编辑器），免费
   • 缺点：需要安装一些插件来辅助开发
2. Webstorm
   • 优点：集成开发工具，包罗万象
   • 缺点：重（占用系统资源多），收费

3.3 VSCode工具安装⭐

• VSCode编辑器下载-安装：https://code.visualstudio.com/
• 安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）
  1. 中文插件：Chinese
  2. 颜色主题：atom one dark
  3. 文件夹图标：VSCode Great Icons
  4. 在浏览器中打开网页：open in browser、Live Sever
  5. 自动重命名标签：auto rename tag
• VSCode的配置：
  1. Auto Save 自动保存
  2. Font Size 修改代码字体大小
  3. Word Wrap 代码自动换行
  4. Render Whitespace 空格的渲染方式(个人推荐)
  5. Tab Size 代码缩进 推荐2个空格（公司开发项目基本都是2个空格）

4 HTML元素 ✨

4.1 HTML元素的区别 ⭐

不同的html元素会具备不同的元素特征，例如input在不同的type类型下，元素的类型也是不一样的，没有明确的说明。因此我们需要了解一些以下几个html元素的区别：

1. 块级元素：块级元素的内容区域是一个块区域，独占一行，自动占满父级元素的内容区域，可以设置width、height、line-height、padding，、margin等等。
2. 行内级元素 : 行内元素的内容区域不独占一行，所占区域有内容决定，无法设置width、height。
   • 行内替换元素：浏览器通过标签的元素和属性来判断显示的内容，即内容是通过标签类型及其属性值来决定的，例如<img>图像标签展示内容就是由其src属性来决定。
   • 行内非替换元素：非替换元素就是和替换元素相反。即“展现效果是受css样式来控制的”，通俗将其内容由其标签包裹内容决定，我们平常使用的标签，如div、p、span、ul、li等都是非替换元素。
3. 行内块元素 行内块元素同时具有行内元素和块元素的特征，不独占一行，可以与其它行内元素处于同一行，可以设置width，height，padding， margin等等。

4.2 认识元素⭐

HTML本质上是由一系列元素(Element)构成的，元素是网页的一部分，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含,比如在页面展示的都可以是元素，也有没有展示出来的

• HTML有哪些元素呢？ =>可以参考MDN：https://developer.mozilla.org/zh-CN/

我们会发现元素有非常非常多，但我们只需要记住那些常用的即可，不常用的可以先做了解，或者后续可以查。

4.3 元素的组成⭐

• 剖析一个HTML元素的组成：
  

1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用。
2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。表示着元素在此结束。
3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。
4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

4.3 元素的属性⭐

其中元素拥有属性（Attribute），属性包含元素的额外信息，这些信息不会出现在实际的内容中。

属性的书写格式：

1. 一个空格：属性与元素名称，或者多个属性直接要用空格隔开
2. 属性名称：后面跟着一个等号
3. 一个属性值：由一对引号 “ ”引起来
   

4.4 属性的分类⭐

1. 公共属性：每一个元素都可以设置。比如class、id属性
2. 特有属性：不是每一个元素都可以设置。比如meta元素的charset属性、img元素的alt属性等。

4.5 单标签元素与双标签元素⭐

• html元素分为双标签和单标签
  • 双标签元素（前面大部分看到的元素都是双标签）：html、body、head、h2、p、a元素
  • 单标签元素：br、img、hr、meta、input；

了解：由于历史遗留问题，可以在单标签后 /表示结束，但是现在可以省略

<input type="text" />
<input type="text">

4.6 元素的结构总结

• 元素的结构
  
• 元素的嵌套关系

<ul>
    <!-- alt + shift + 向下箭头 复制上一行并粘贴到下一行 -->
    <li>
      <div>
        <span>aaa</span>
        <span>bbb</span>
        <span>ccc</span>
      </div>
      <div></div>
      <div></div>
    </li>
  </ul>

5 注释编写✨

5.1 HTML注释⭐

注释：

1. 简单来说，就是一段代码说明
2. <!-- 注释内容 -->
3. 注释是只给开发者看的，浏览器并不会把注释显示给用户看

注释的意义：

1. 帮助我们自己理清代码的思路, 方便以后进行查阅.
2. 与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)
3. 开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)
4. 可以临时注释掉一段代码, 方便调试.

注释的快捷键： ctrl + /

5.2 为什么需要注释⭐

1. 随着学习的深入, 你的一个程序不再是几行代码就可以搞定的了，可能我们需要写出有上千行, 甚至上万行的程序。某些代码完成某个功能后, 你写的时候思路很清晰, 但是过段时间会出现忘记为什么这样写的情况, 这很正常。
2. 在实际工作中, 一个项目通常是多人协作完成的.。可能是几个或者十几个等等。这个时候, 你可能需要使用别人写出的代码功能, 别人也可能使用你的代码功能。如果你的代码自己都看不懂了, 更何况你的同事呢。