一、基础认识

  1. 基础概念

    1. 认识网页

      • 网页有哪些部分组成？

        文字、图片、音频、视频、超链接

      • 我们看到的网页背后的本质是什么？

        前端程序员所写的代码

      • 前端代码通过什么软件转换成用户看到的页面？

        浏览器

    2. 五大浏览器和渲染引擎

      • 五大浏览器

        • 浏览器：是网页显示、运行的平台，是前端开发的必备利器

        • 常见的五大浏览器：

          IE浏览器、火狐浏览器（FireFox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opear）

      • 渲染引擎

        • 渲染引擎（浏览器内核）：浏览器专门对代码进行解析渲染的部分

        • 浏览器出品的公司不同，内在的渲染引擎也是不同的：

          浏览器 内核  
          IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
          FireFox Gecko 火狐浏览器内核
          Safari Webkit 苹果浏览器内核
          Chrome/Opera Blink Blink其实是Webkit的分支

        • 注意点：

          • 渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的

          • 谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱(推荐)

    3. Web标准

      • 为什么需要Web标准

        • 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

          如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差!

        • Web标准:让不同的浏览器按照相同的标准显示结果，让展示的效果统一!

      • Web标准的构成

        构成 语言 说明
        结构 HTML 页面元素和内容
        表现 CSS 网页元素的外观和位置等页面样式(如:颜色、大小等)
        行为 JavaScript 网页模型的定义与页面交互

      • Web标准的记忆方法

        • Web标准要求页面实现:结构、表现、行为三层分离

          • 结构:HTML(决定了身体)

          • 表现:CSS(决定了样式美观)

          • 行为:JavaScript(决定了交互的动态效果)

  2. HTML初体验

    1. HTML的感知

      • HTML(Hyper Text Markup Language)中文译为:超文本标记语言 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

      • 案例:文字变粗案例 体验构建一个网页，需要在网页中显示一个加粗的文字

        • 网页体验-构建基本网页的步骤

          1. 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:文字变粗案例.txt

          2. 双击这个文件，输入代码等内容 → 记得保存!

          3. 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html

          4. 双击文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容

            文字要变粗体
            <strong>文字要变粗体</strong>
            <h1>文字要变成一号标题变成粗体</h1>

    2. HTML骨架结构

      • HTML页面固定结构

        • 网页类似于一篇文章:

          • 每一页文章内容是有固定的结构的，如:开头、正文、落款等......

          • 网页中也是存在固定的结构的，如:整体、头部、标题、主体

        • 网页中的固定结构是要通过特点的 HTML标签 进行描述的

          <html>
            <head>
              <title>网页的标题</title>
            </head>
            <body>
              网页的主体内容
            </body>
          </html>

    3. 开发工具的使用

      1. 为什么使用VS Code？

        • 通过文本编辑器，如:记事本，完全可以编写网页源代码

          但是效率......不忍直视

        • 实际开发中，注重开发的 效率和便捷性 ，因此我们会使用一些开发工具

          开发工具有很多: Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder

        • 前端开发神器:VS Code → 速度快、体积小、插件多

      2. VS Code使用前安装要求

        • VSCode 软件安装完毕

        • Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕

        • open in browser 直接打开浏览器插件安装

      3. VS Code创建网页的步骤

        • 双击打开VS Code软件

        • 将day01代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上

        • 点击目录上的+新建文件按钮创建页面，注意:文件后缀名需要是.html

      4. VS Code的基本快捷键

        • 快速生成标签:英文 + tab

        • 保存文件:ctrl + s(win)/command+s(mac)

          • 注意1:写完文件之后务必需要保存文件，否则网页无变化

          • 注意2:可以设置自动保存省去每次保存的麻烦

        • 快速查看网页效果:右击 → Open in Default Browser

          • 快捷键:alt + b(win)/option+b(mac)

          • 注意:必须安装了open in browser 插件

        • 快速生成结构标签:! + tab

          • 注意1:!必须是英文的，中文!无效

          • 注意2:必须保证当前文件后缀名是.html，否则无效

          • VS Code自动生成的骨架多了其他标签，之后会介绍

      5. VS Code的其他快捷键

        • 快速复制一整行:ctrl + c(win)/command+c(mac)

        • 快速粘贴一整行:ctrl + v(win)/command+v(mac)

        • 快速删除(剪切)一整行:ctrl + x(win)/command+x(mac)

          ......

        • 其他快捷键会在学习过程中用到一个介绍一个，同学们先需要把基础快捷键操作记牢!

  3. 语法规范

    1. HTML的注释

      1. 什么是注释

        • 注释的作用:

          • 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码

          • 浏览器执行代码时会忽略所有的注释

        • 注释的快捷键:

          • 在VS Code中:ctrl + /

      2. 注释的作用和写法

        • 注释的作用:

          • 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码

          • 浏览器执行代码时会忽略所有的注释

        • 注释的快捷键:

          • 在VS Code中:ctrl + /

    2. HTML标签的构成

      • HTML标签的结构

        • 标签的结构图:

          前端学习笔记Day01_渲染引擎

        • 结构说明:

          1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名

          2. 常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容**

          3. 少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容

      • 小结

        • 常见标签由几部分组成?称之为?

          两部分，双标签

        • 少数标签由几部分组成?称之为?

          一部分，单标签

        • 以下标签按照结构划分，分别属于哪一类标签? 

          <p>我是标签</p>
          <h1>我是标签</h1>
          <hr>
          <br>

    3. HTML标签的属性

      • HTML标签的属性

        • 标签的完整结构图:

          前端学习笔记Day01_a标签_02

        • 属性注意点:

          1. 标签的属性写在开始标签内部

          2. 标签上可以同时存在多个属性

          3. 属性之间以空格隔开

          4. 标签名与属性之间必须以空格隔开 5. 属性之间没有顺序之分

      • 小结

        • 双标签的属性需要写在开始标签还是结束标签中? • 开始标签

        • 标签上可以同时存在几个属性?

          多个

        • 标签名与属性之间，属性与属性之间以什么隔开? • 空格

    4. HTML标签的关系

      • HTML标签与标签之间的关系可分为:

        • 父子关系(嵌套关系)

          <head>
            <title></title>
          </head>

        • 兄弟关系(并列关系)

          <head></head>
          <body></body>

      • 小结

        • 标签之间的关系可分为哪几种?

          • 父子关系(嵌套关系)

          • 兄弟关系(并列关系)

        • 以下标签之间的关系书写错误的是?

          A:
            <head></head>
            <body></body>
          B:
            <div><p></p></div>
          C:
            <head><title></head></title>
          D:
            <body><div></div></body>
          答案：C

二、HTML标签学习

  1. 排版标签

    1. 标题标签

      • 场景:在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

      • 代码:h系列标签

          <h1>我是1级标题</h1>
          <h2>我是2级标题</h2>
          <h3>我是3级标题</h3>
          <h4>我是4级标题</h4>
          <h5>我是5级标题</h5>
          <h6>我是6级标题</h6>  

      • 语义:1~6级标题，重要程度依次递减

      • 特点:

        • 文字都有加粗

        • 文字都有变大，并且从h1 → h6文字逐渐减小

        • 独占一行

      • 注意点:h1标签对于网页尤为重要，开发中有特定的使用场景，如:新闻的标题、网页的logo部分

      • 小结

        • 标题标签一共有几个?分别表示什么含义?

          • h1标签:一级标题

          • h2标签:二级标题

          • h3标签:三级标题

          • h4标签:四级标题

          • h5标签:五级标题

          • h6标签:六级标题

        • 标题标签有哪些特点?

          • 文字都有加粗

          • 文字都有变大，但是从h1 → h6文字逐渐减小

          • 独占一行

    2. 段落标签

      • 场景:在新闻和文章的页面中，用于分段显示

      • 代码

        <p>我是一段文字</p>

      • 语义:段落

      • 特点:

        • 段落之间存在间隙

        • 独占一行

      • 小结

        • 段落标签的标签名是?

          • p标签

        • 段落标签有哪些特点?

          • 段落之间存在间隙

          • 独占一行

    3. 换行标签

      • 场景:让文字强制换行显示

      • 代码:

      <br/>
         <!--/可加可不加，但最好带/-->

      • 语义:换行

      • 特点:

        • 单标签

        • 让文字强制换行

    4. 水平线标签

      • 场景:分割不同主题内容的水平线

      • 代码:

        <hr/> 
        <!--/可加可不加，但最好带/-->

      • 语义:主题的分割转换

      • 特点:

        • 单标签

        • 在页面中显示一条水平线

  2. 文本格式化标签

    1. 文本格式化标签的介绍

      • 场景:需要让文字加粗、下划线、倾斜、删除线等效果

      • 代码:

      标签 说明 标签 说明
      b 加粗 strong 加粗
      u 下划线 ins 下划线
      i 倾斜 em 倾斜
      s 删除线 del 删除线

      • 语义:突出重要性的强调语境

    2. 标签语义化(了解)

      • 实际项目开发中选择标签的原则:标签语义化

        • 即:根据语义选择对应正确的标签

        • 如:需要写标题，就使用h系列标签

        • 如:需要写段落，就使用p标签

        • ......

      • 好处:

        • 对人:好理解，好记忆

        • 对机器:有利于机器解析，对搜索引擎(SEO)有帮助

      • 推荐:

        • strong、ins、em、del，表示的强调语义更强烈!

  3. 媒体标签

    1. 图片标签

      1. 图片标签的介绍

        • 场景:在网页中显示图片

        • 代码:

          <img src="" alt="">

        • 特点:

          • 单标签

          • img标签需要展示对应的效果，需要借助标签的属性进行设置

      2. 图片标签的src属性

        • 属性名:src

        • 属性值:目标图片的路径

        • 注意点:

          • 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可(包括后缀名)

          • 路径的情况有很多

          <body>
            <img src="./1.jpg" alt="" title="">
          </body>
          </html>

      3. 图片标签的alt属性

        • 属性名:alt

        • 属性值:替换文本

          • 当图片加载失败时，才显示alt的文本

          • 当图片加载成功时，不会显示alt的文本

      4. 图片标签的title属性

        • 属性名:title

        • 属性值:提示文本

          • 当鼠标悬停时，才显示的文本

        • 注意点:title属性不仅仅可以用于图片标签，还可以用于其他标签

      5. 图片标签的width和height属性

        • 属性名:width和height

        • 属性值:宽度和高度(数字)

        • 注意点:

          • 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放(此时图片不会变形)

          • 如果同时设置了width和height两个，若设置不当此时图片可能会变形

    2. 路径

      1. 路径的介绍

        • 场景:页面需要加载图片，需要先找到对应的图片

        • 类似于:生活中两个人，我要去找你，需要通过一定的路径才能找到!

        • 同理:页面需要找到图片，也是需要通过路径才能找到

        • 路径可分为:

          • 绝对路径(了解)

          • 相对路径(常用

      2. 绝对路径(了解)

      3. 相对路径有哪三种情况:

        • 同级目录:直接写:目标文件名字!

        • 下级目录:直接写:文件夹名/目标文件名字!

        • 上级目录:直接下:../目标文件名字!

      4. VScode中路径的快捷键

        • 同级和下级目录:./ 之后选择即可

        • 上级目录:../ 之后选择即可

    3. 音频标签

      • 场景:在页面中插入音频

      • 代码:

        <audio src="./music.mp3" controls autoplay loop></audio>

      • 常见属性:

        属性名 功能
        src 音频的路径
        controls 显示播放的控件
        autoplay 自动播放（部分浏览器不支持）
        loop 循环播放

      • 注意点:

        • 音频标签目前支持三种格式:MP3、Wav、Ogg

    4. 视频标签

      • 场景:在页面中插入音频

      • 代码:

        <video src="./video.mp4" controls autoplay muted loop></video>

      • 常见属性:

        属性名 功能
        src 视频的路径
        controls 显示播放的控件
        autoplay 自动播放（部分浏览器不支持)→谷歌浏览器中写muted可以完成静音的自动播放
        loop 循环播放

      • 注意点:

        • 音频标签目前支持三种格式:MP4 、WebM 、Ogg

  4. 链接标签

    1. 链接标签的介绍

      • 场景:点击之后，从一个页面跳转到另一个页面

      • 称呼: a标签、超链接、锚链接

      • 代码:

        <a href="https://www.baidu.com/">超链接</a>

      • 特点:

        • 双标签，内部可以包裹内容

        • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

    2. 链接标签的href属性

      • 属性名:href

      • 属性值:点击之后跳转去哪一个网页(目标网页的路径)

        • 外部链接:

          <a href="https://www.baidu.com/">百度一下</a>

        • 内部链接:

          <a href="./目标网页.html">目标网页</a>

    3. 链接标签的显示特点(了解)

      • a标签默认文字有下划线

      • a标签从未点击过，默认文字显示蓝色

      • a标签点击过之后，文字显示为紫色(清除浏览器历史记录可恢复蓝色)

    4. 链接标签的target属性

      • 属性名:target

      • 属性值:目标网页的打开形式

        取值 效果
        _self 在当前窗口中跳转
        _blank 在新窗口中跳转

    1. 空链接(拓展补充)

      • 代码:

        <a href="#">空链接</a>

      • 功能:

        • 点击之后回到网页顶部

        • 开发中不确定该链接最终跳转位置，用空链接占个位置