范仁义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、代码

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

 

范仁义html+css课程---2、html常用标签的更多相关文章

  1. 范仁义html+css课程---10、其它标签

    范仁义html+css课程---10.其它标签 一.总结 一句话总结: 了解iframe.Figure与Figcaption.address.progress.meter.datalist.field ...

  2. 范仁义html+css课程---11、html补充知识

    范仁义html+css课程---11.html补充知识 一.总结 一句话总结: 小于号(<):< 大于号(>):> 空格:  二.html 字符实体 1.小于号(<)和大 ...

  3. 范仁义html+css课程---7、表单

    范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...

  4. 范仁义html+css课程---6、表格

    范仁义html+css课程---6.表格 一.总结 一句话总结: 表格中最常用的元素就是table.tr.td.th,还有语义化的thead.tbody.tfoot标签 1.表格构成三个基本要素? t ...

  5. 范仁义html+css课程---5、列表

    范仁义html+css课程---5.列表 一.总结 一句话总结: 学会基本的使用有序列表.无序列表.定义列表,设置样式的话尽量通过css而不是属性 1.无序列表基本形式(实例)? ul标签包裹li标签 ...

  6. 范仁义html+css课程---3、图片和超链接

    范仁义html+css课程---3.图片和超链接 一.总结 一句话总结: img标签是图片标签,定义 HTML 页面中的图像 a标签是超链接标签,用于从一个页面链接到另一个页面. 1.img标签要点? ...

  7. 范仁义html+css课程---9、video、audio、canvas和svg元素略讲

    范仁义html+css课程---9.video.audio.canvas和svg元素略讲 一.总结 一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...

  8. 范仁义html+css课程---8、新元素布局

    范仁义html+css课程---8.新元素布局 一.总结 一句话总结: 推荐用新标签(语义化的标签)来布局:header(头部),footer(尾部),aside(侧边栏),nav(导航),artic ...

  9. 范仁义html+css课程---4、文本标签

    范仁义html+css课程---4.文本标签 一.总结 一句话总结: 文本标签大致掌握一下,做到它站在你对面的时候最好认得,认不得也没关系,直接百度 1.ins标签.u标签和del标签 作用? ins ...

随机推荐

  1. python使用tkinter无法给顶层窗体的输入框设定默认值

    这几天某同学遇到了一个棘手的问题,困扰了很久.今天终于解决了,我来记录一下坑. 情景:python 使用tkinter为第二层窗体(顶层窗体)中的一个输入框设定默认值时,总是无法设置,而且对输入框获取 ...

  2. 大数据的前世今生【Hadoop、Spark】

      一.大数据简介 大数据是一个很热门的话题,但它是什么时候开始兴起的呢? 大数据[big data]这个词最早在UNIX用户协会的会议上被使用,来自SGI公司的科学家在其文章“大数据与下一代基础架构 ...

  3. 关于maven中版本控制问题

    之前我们说过Maven的版本分为快照和稳定版本,快照版本使用在开发的过程中,方便于团队内部交流学习.而所说的稳定版本,理想状态下是项目到了某个比较稳定的状态,这个稳定包含了源代码和构建都要稳定. ma ...

  4. MySQL Hardware--RAID卡常用信息查看

    MegaRAID信息查看 #查raid卡信息(生产商.电池信息及所支持的raid级别) /usr/local/sbin/MegaCli -AdpAllInfo -aALL |grep -E " ...

  5. c# 日期和时间System.DateTime

  6. log4j:WARN No appenders could be found for logger (org.springframework.core.env.StandardEnvironment)的解决

    报错:log4j:WARN No appenders could be found for logger (org.springframework.core.env.StandardEnvironme ...

  7. Python日记(二):Python之禅

    The Zen of Python, by Tim Peters Beautiful is better than ugly. Explicit is better than implicit. Si ...

  8. Linux查找工具locate和find

    linux 中有很多查找工具,今天主要讲解locate,find两个工具. 一.locate 1.性能介绍 非实时查找(数据库查找):locate 查询系统上预建的文件索引数据库 /var/lib/m ...

  9. java.lang.IllegalArgumentException: No enum constant org.apache.ibatis.type.JdbcType.Integer

    mybatis配置的jdbaType类型要是大写的,否则就会出现此种异常 原因是在xml中配置的 jdbcType中有小写字母

  10. SQL中 count(*)和count(1)的对比,区别

    执行效果: 1.  count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了! 从执行计划来看,count(1)和coun ...