微信扫一扫打赏支持

范仁义html+css课程---2、html常用标签

范仁义html+css课程---2、html常用标签

一、总结

一句话总结：

html常用的标签有 标题标签、div、span、p、hr、br标签 等

 

1、html中的标题标签有哪些？

<h1></h1>...<h6></h6>

 

2、html文件中最常见的两个标签div标签和span标签分别是干嘛的？

<div></div>：区块标签：分块和设置样式
<span></sapn>：文本标签：设置样式

 

3、自结束标签 hr标签 和 br标签 分别是做什么的？

<hr />：水平线
<br />：换行

 

4、块标签中的 p标签 的作用是什么？

<p></p>：段落标签：表示一个段落

 

 

 

二、html常用标签

课程对应的视频地址：2、html基本标签
https://www.fanrenyi.com/video/2/7

 

1、相关知识

a、块标签：

标题标签<h1></h1>...<h6></h6>

水平线<hr />

换行<br/>

段落<p></p>

区块标签<div></div>

 

b、行标签：

文本标签<span></sapn>

 

c、注意：

1、标签小写，

2、要注意闭合标签

3、标签可以嵌套但是不能交叉嵌套

 

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>html常用标签小实例</title>
 6 </head>
 7 <body>
 8 <div>
 9     <h1>我与学习的二三事</h1>
10     <hr>
11     <br>
12 
13     <div style="color: red;">
14         <h2>为什么在义务教育的应试阶段，很多人如此惧怕 <span style="color: coral;">数学</span> ？</h2>
15         <p> <span style="font-weight: 600;">节点断档</span>：因为你错过了关键节点，套用文艺的说话来说：那天天很蓝，风在吹，所有人都以为那是一个普通的一天——可是之后上课却开始一头雾水<br><br></p>
16     </div>
17 
18 
19     <div>
20         <h2>知识体系化的意义是什么</h2>
21         <p>
22             不是一蹴而就：只要有一点门槛的知识都是体系化的。所谓体系化的意思是，你学习的路径绝对不是一蹴而就的，而是：要达到C点，首先你必须学会B，要达到E点，你必须先达到D。你根本无法给一个小学三年级的孩子讲什么叫微积分，你甚至无法给一个只学过九九乘法表的小学生演算二位数乘除，更不用说分数加减乘除了。<br><br>
23             打通所有知识关键点：就算那个小学生懂得微积分（也就是那个P点）而被称为神童，他也是打通了从A至P的所有关键知识节点而掌握的。<br><br>
24         </p>
25     </div>
26 
27 
28     <div>
29         <h2>为什么 知乎、B站、微博、抖音等平台里面的零散知识点作用不大？</h2>
30         <p>
31             1、知识未成体系：知识点很零散，吸收效果很差，强度也很差<br><br>
32             2、你的知识结构未成体系，导致学习效率低，容易忘记<br><br>
33         </p>
34     </div>
35 
36 
37     <div>
38         <h2>如何做到正向激励并逼迫你去学习？</h2>
39         <p>
40             1、激励奖励：寻找正向激励的奖励——小到在知乎撰写的回答有人点赞、ID粉丝关注，大到考入名校和拿到只有10%-20%的技能证书，或者利用专业知识水平进入一家公司，要知道这些东西是带不走的，他们将成为“资历”一辈子给你一个“我能比别人学得好”的暗示。”只有成就才是学习的最佳诱惑，我们最终寻找的是终生式的正向激励。<br><br>
41             2、体系知识+500小时：订立一个需要体系化的知识，做好投入500-800小时的目标，尽力让自己的日有效时间从4小时开始起步。这意味着你将建立时间观念，知道自己时间的价值，不至于花在游戏时间和社交时间太多。要知道越是把时间花在自己根本感受不到价值的东西上面，你的有效时间越低，效率越低。而一个好消息是，你的竞争对手花在学习上的日有效时间远远低于4个小时。高效学习者最在意的是时间的价值。<br><br>
42             3、体系目标：建立一个体系化的目标，并且明确知道关键时点在哪里。这意味着你需要把目标解剖到具体的关键节点上，并且按照步骤一步一步完成。如果没有体系化的计划和执行，就意味着完不成体系化的知识。<br><br>
43             4、意志力：训练你的意志力，这是学习者之间差距的最大动因，因为它同时影响了时间、效率两大因素。要注意意志力是有限的，注意不断提高它，并花在重要的地方。<br><br>
44         </p>
45     </div>
46 </div>
47 
48 
49 
50 </body>
51 </html>

 

 

 

三、参考资料

1、div定义和用法

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

 

2、span标签的定义和用法

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

提示：可以使用 <span> 来组合行内元素，以便通过样式来格式化它们。

 

例如：

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

 

 

 

 

 
posted @ 2019-12-11 15:53  范仁义  阅读(332)  评论(0)  编辑  收藏  举报