范仁义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. Step by Step to create orders by consuming SAP Commerce Cloud Restful API

    Recently Jerry is working on an integration project about creating orders in Wechat platform by cons ...

  2. nginx反向代理实现均衡负载及调度方法

    http upstream配置参数: ngx_http_upstream_module模块将多个服务器定义成服务器组,而由proxy_pass, fastcgi_pass等指令进行引用 upstrea ...

  3. MySQL数据库机房裁撤问题总结

    背景:公司某一机房需要裁撤,涉及到大量DB服务器,需要在裁撤截止日期以前完成业务的平滑迁移和设备退还工作. 历时2个多月,经历了设备梳理.裁撤资源评估.裁撤资源申请.裁撤DB部署.裁撤DB业务关系梳理 ...

  4. 小程序缓存Storage的基本用法

    wx.setStorageSync('key', 'hello world') 然后在小程序调试器里面的Storage里面就能看到设置的值.在小程序里面,如果用户不主动清除缓存,这个缓存是一直在的. ...

  5. 通过mock-api模拟真实数据

    一.什么是 mock-api mock-api(模客)是一个便捷的 REST 接口数据模拟工具,用于前后端隔离测试,开发调试. 二.mock-api 的使用 1.注册登录 http://mock-ap ...

  6. Ajax -02 -JQuery+Servlet -实现页面点击刷出表格数据

    demo功能分析 jquery 的js文件需要导入,json的三个文件需要导入,不然writeValueAsString 会转化成JsonArray(json 数组)失败 $("#mytbo ...

  7. redis和memcached有什么区别?redis的线程模型是什么?为什么单线程的redis比多线程的memcached效率要高得多(为什么redis是单线程的但是还可以支撑高并发)?

    1.redis和memcached有什么区别? 这个事儿吧,你可以比较出N多个区别来,但是我还是采取redis作者给出的几个比较吧 1)Redis支持服务器端的数据操作:Redis相比Memcache ...

  8. (java)selenium webdriver学习,选择模块,点击下一页,获取当前url

    selenium webdriver学习,选择模块,点击下一页,获取当前url 查找下一页有多种方法,这里列举两种: isSelected()函数用于判断是否点击选中,返回Boolean类型 impo ...

  9. 关于List集合中元素排序问题

    问题描述: 有一个list集合,其中元素是Student对象,根据student的age排序. Student对象 /** * description * * @author 70KG * @date ...

  10. 完成一个springboot项目的完整总结-------二

    我们接着上篇继续写,继续进行springboot项目 一. swagger2 接口描述,测试每个接口是否有效 1. 添加依赖 pom.xml 在编辑pom.xml之前,要先关闭spring-boot项 ...