我是如何向别人讲解 H5的_1&2

最新推荐文章于 2022-12-06 13:43:56 发布

MR_LP

最新推荐文章于 2022-12-06 13:43:56 发布

阅读量2k

点赞数 1

分类专栏： HTML 学习 H5 学习笔记文章标签：讲师笔记-html

本文链接：https://blog.csdn.net/MR_LP/article/details/50804021

版权

HTML 学习同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

H5 学习笔记

31 篇文章 43 订阅

订阅专栏

前言

首先现在最上面去写一下，自己尝试去做讲师的感觉吧。
首先第一点，也是你最重要的一点，就是你的逻辑思维一定要清晰。
你一定要对你接下来要讲的东西，有一个很明确的认知。
你要明白你讲这个东西要花多长时间。
要涉及到哪些内容。
要通过什么样的方式去让学生们明白你想要做什么。
其次就是，你一定要对你讲的东西持非常确定的态度，如果你自己都不确定你讲的东西是否正确，学生们有怎么会知道，他是否能跟你去学习到正确的东西呢？
还有就是段落清晰，最好在讲东西之前，先通过让学生们看看具体实现出来的效果到底是什么样子。让他们对做出来的要过一定要有一个清晰的认知。
之后就是每次要开始新的内容的时候，要告诉你的学生，我接下来要开始讲什么了。讲完之后，也要带领学生们，去明确，我刚才学习的这个东西有什么需要注意的地方。

以上就是我个人的一点愚见，如果能够帮到看到这篇文章的你，我的付出就是值得的。

谢谢大家.

预警

以下大约包含3700字的内容，纯粹是把我个人试讲的内容整体的进行了一次整理。其中有很多不完善的地方，需要读者自行补充，仅用作学习交流之用。侵删！

转载请注明出处，并告知在下。谢谢。

CSS 选择器第一次试讲

第一步

首先我们创建三个 DIV
这里介绍一个小技巧，就是通过代码的连写来快速生成标签。div#test_1+div.test_2+div
这时候就生成了我们的程序.

    <div id="test_1">test_1</div>
    <div class="test_2">test_2</div>
    <div>普通的 DIV</div>

第二步

设置了三个不同的 div 之后，我们就分别来对他们设置不同的样式。
在程序上方 <head> 和</head>标签中设置样式<style> 和 </style>

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>CSS选择器</title>
    </head>
    <style>

      #test_1{
        width: 100px;
        height: 50px;
        border: 1px solid blue;
      }
      .test_2{
        width: 100px;
        height: 50px;
        border: 1px solid red;
      }
      div{
        width: 100px;
        height: 50px;
        background: orange;
        margin-bottom: 10px;
      }
      div p{
        color: red;
      }

    </style>

这时候我们就能看到效果了，页面中出现了三个橙色的框，

我们也可以添加 margin-bottom: 10px;来增加边距，看的更清楚。

第三步

那么为什么除了第三个 div 变成橙色，其他两个 div 也变成橙色了呢？

原因：

div	效果范围
第一个 div	只针对 id 为 test_1 的 div
第二个 div	只针对 class 为 test_2 的 div
第三个 div	针对所有的 div

设置问题：
假如类选择器和 DIV 中属性冲突的时候，程序会发生什么样的错误？

涉及到 CSS 优先级的问题。我们下次来谈。

第四步

除了现在看到的这三个，我们还可以通过<p>标签来看一种选择器。

    <body>
      <!--首先我们来创建三个 div-->
      <!--在创建 div 之前首先教大家一个小技巧-->
      <!--div#test_1+div.test_2+div-->
      <div id="test_1">test_1</div>
      <div class="test_2">test_2</div>
      <div>普通的 DIV
        <p>我是 div 中的 P 标签</p>
      </div>
        <p>我是独立的 P 标签</p>
    </body>

之后我们还需要在上面写一个样式

      div p{
        color: red;
      }

需要注意，我们在上面的 CSS 样式中，使用的是 div p,这是什么意思呢？

就是说，我们需要变色的是 div 中的 p 标签。
最后我们就能看到

在 div 中的 P 标签变红了，而独立的 P 标签则没有变红。

CSS 选择器第二次试讲

试讲

1.首先说明一下今天我们都要讲什么，为什么要讲，我们学会之后能做什么？

首先来给大家看一下我们都很熟悉的百度页面。

我们今天大概花20分钟来学习一下，什么是 CSS 选择器，那我们为什么要学习这个呢？
因为之前学习的HTML 做出的样式基本都是固定的，我们没有办法去更改它的样式。
例如下面这段

大家好，今天来给大家用15分钟讲一下我们的CSS 选择器，那我们为什么要学习 CSS 选择器？

因为我们之前学习的样式都是很单一的，但是我们又想要更改我们的样式，我们该怎么办？
对，就是我们的 CSS , 也就是 层叠样式表，因为我们 HTML 是用来书写我们的页面基础标签，我们的 CSS 是用来控制我们的标签以什么样的形式来展示的。而我们最后需要学习的 JavaScrpit 则是用来控制页面动态效果。

这些我们在之后的课程中都会学习到，在这里不做更多的解释。
那我们又该如何确定我们的这个页面，哪一个标签去变颜色？哪个变大小呢？
这就是我们今天要介绍的 CSS 选择器。

2.学习内容介绍，同时学习过一个标签之后，最好能做一个总结，来让学生们知道，我们现在所需要学的东西到底是什么。同时要区分每一个选择器之间的区别，清楚的告诉学生们，我们在什么样的情况下需要使用这个选择器。

那我们知道了选择器是做什么的，那我们就要先来了解一下我们 CSS 样式的三种写法。

1.首先是直接在属性中间去写，直接在属性的后面跟上 Style ，之后在后面书写我们的样式。
2.在 Head 中书写，这样写的好处是我们的代码逻辑会更清晰，同时也方便我们查找。
3.通过 link，我们可以直接通过 link 链接的方式，去直接将一个 CSS 样式文件绑定到我们的 html 文件中，这样我们就可以直接通过调用 CSS 文件，来控制我们的样式了。

这些CSS 书写方式我们以后都会学到，在这里也不做更多的解释了。

那我们有些同学可能就会问了。选择器就是一种书写样式么？
如果你真的这样想，你就真的· 图样图森破 · 了。
选择器的种类非常多，但是归根溯源，就只有四大类型的选择器，就是我们今天要学习的。

1.ID 选择器。
2.类选择器。
3.标签选择器。
4.派生选择器。

那这四种选择器都是怎么使用的呢？来跟我们一起学习一下。

接下来开始代码部分

首先进入我们的开发工具 ATOM.
在我们的右下角，更改我们的输入方式，改成 HTML.
我们需要告诉我们的编译器，我接下来要输入的东西是网页。
同时我们的编译器也会给我们很多便利的操作，例如我们 HTML 基础的代码补全。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

之后我们更改我们的 title 标题，改成我们今天学习的 CSS 选择器。
接下来我们来创建三个 div 标签，我们今天学习就靠这三个标签。
先教大家一个 HTML 的标签连写。

#test_1+.test_2+div

那这一段代码有什么效果呢？
我们按一下 TAB 键看一下。

  <div id="test_1"></div>
  <div class="test_2"></div>
  <div></div>

系统直接帮助我们创建了三个分区，也就是我们的 div （定义文档中的分区或节）。
之后我们分别对着三个标签进行命名。

在命名之后我们就需要开始写我们的 CSS 样式了。
那样式的英文怎么说？style.
输入 style 之后，我们就要开始学习我们今天的第一个选择器，ID 选择器了。

ID 选择器

首先进行一下标注 /*ID选择器*/。
那我们 id 选择器的标志是什么？ #井号，回头大家看见#号，那就一定是 ID 选择器了。
那我们更改一下我们的样式，

#test_1{
    width: 100px;
    height: 50px;
    border: 1px solid blue;
  }

之后我们来看一下我们的效果。

大家可以看见，我们的test_1边上出现了一个边框，颜色是蓝色的。

大家需要注意一个问题，
我们的 ID 选择器，在一个 HTML 页面中，只能出现一次。
原因是因为，我们的 ID 选择器，是标签最精确的标记，而且是一次性的。
而且在万维网联盟明确定义，我们的这个 ID 只能出现一次。
所以大家为了不显得自己那么 LOW ，就尽量避免多次使用 ID 选择器吧。
最后再大家回顾一下，我们的 ID 选择器，是控制标签最精确还是最模糊的？
我们的 ID 选择器，使用什么来做标识的？
我们的 ID 选择器在网页中能出现几次？
好的，看来大家都已经有一定的了解了，那我们接下来学习我们的类选择器。

类选择器

我们的类选择器跟 ID 选择器差不多，都是采用标签符号来进行标记，其中不同的是，我们的 ID 选择器采用的是 # 号，而我们的类选择器，则是用英文的 . 来做标记的。
我们继续回到我们的代码中，我们在我们的样式中，声明我们的类选择器。

  .test_2{
    width: 100px;
    height: 50px;
    border: 1px solid red;
  }

保存，刷新一下页面看一下，发现我们的 test_2已经变成了红色边框的 div，
那么我们为什么叫做类选择器呢？
是因为我们的类选择器，和 ID 选择器不同，我们可以控制很多个标签。
例如我们的重点文字设置为红色，而我们在整篇文章中，有很多文字都需要变成红色，我们就可以设置一个类选择器，在每一个需要重点标注的文字前面都加上我们的标签，这样就能极大的减少我们日常的工作量了，这也是类选择器和 ID 选择器最大的区别。
回顾一下，我们的类选择器是用什么开头？
它能够作用在多个标签之上么？

标签选择器

讲完了 ID 选择器和类选择器，我们就需要讲一下我们的标签选择器。
什么是标签选择器？
就是我们设置完标签选择器的属性，我们的作用效果是作用在所有的这个标签之上的。
我们可以来试一下。

div{
    width: 100px;
    height: 100px;
    background: orange;
    margin-bottom: 50px;
  }

保存，刷新一下页面，我们发现，我们标签选择器的作用范围，不仅仅存在于这个 div 本身，而在我们上面的类选择器和 ID 选择器上，我们同样发生了作用，但是给大家提一个问题，那假如我们我们把标签选择器中的高度进行更改，把高度设置为100px 的话，那我们上面的标签会发生改变么？

不会，对么。我们可以去火狐浏览器中看一下，在我们的右下角，我们发现我们的 div 的属性被画了一道横线，而上面显示我们的。test_2的属性在上面，这说明我们的属性已经被替代了。

这也就是我们下节课要讲的 CSS 优先级问题。

派生选择器

说完了标签选择器，我们再来说一说派生选择器。
我们在日常的开发中经常会遇到一个问题，就是我们需要在某一个标签内部的文字颜色进行改变，那我们应该怎么办呢？
对了，这时候就需要用到我们的派生选贼器了，我们可以通过我们的派生选择器来控制我们在某一个标签下面具体哪一个标签进行颜色的改变。例如：

  div p{
    color: red;
  }

那我们的派生选择器应用的场景就要多很多了，例如我们在更改我们的某个标签的颜色，我们往往可以透过多个标签来控制某一个文字的颜色。同样也就是说，我们的派生选择器往往使用在标签嵌套较多的情况下。

最后总结

我们今天总共学习了几种标签？
四种对么。

那么他们分别是什么？

1.ID 选择器。
2.类选择器。
3.标签选择器。
4.派生选择器。

在使用 ID 选择器的时候，需要注意什么？ ID 选择器只能使用一次。

在我们的类选择器的优势是什么？ 类选择器可以使用在多个地方，当我们样式使用次数较多的时候要使用类选择器。

我们标签选择器的优先级最高还是最低？ 最低

我们派生选择器中间用什么去连接？ 空格

课后作业

给大家留一个课后作业，

回去总结一下，除了今天上课所学习的这四种选择器之外，还有没有其他的选择器，他们的样式，使用方法是什么？

我们明天课上要用，好，今天课就上到这里。

谢谢大家。

MR_LP

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
我是如何向别人讲解 H5的_1&2

前言首先现在最上面去写一下，自己尝试去做讲师的感觉吧。首先第一点，也是你最重要的一点，就是你的逻辑思维一定要清晰。你一定要对你接下来要讲的东西，有一个很明确的认知。你要明白你讲这个东西要花多长时间。要涉及到哪些内容。要通过什么样的方式去让学生们明白你想要做什么。其次就是，你一定要对你讲的东西持非常确定的态度，如果你自己都不确定你讲的东西是否正确，
复制链接

扫一扫