范仁义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、代码
<!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常用标签的更多相关文章
- 范仁义html+css课程---10、其它标签
范仁义html+css课程---10.其它标签 一.总结 一句话总结: 了解iframe.Figure与Figcaption.address.progress.meter.datalist.field ...
- 范仁义html+css课程---11、html补充知识
范仁义html+css课程---11.html补充知识 一.总结 一句话总结: 小于号(<):< 大于号(>):> 空格: 二.html 字符实体 1.小于号(<)和大 ...
- 范仁义html+css课程---7、表单
范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...
- 范仁义html+css课程---6、表格
范仁义html+css课程---6.表格 一.总结 一句话总结: 表格中最常用的元素就是table.tr.td.th,还有语义化的thead.tbody.tfoot标签 1.表格构成三个基本要素? t ...
- 范仁义html+css课程---5、列表
范仁义html+css课程---5.列表 一.总结 一句话总结: 学会基本的使用有序列表.无序列表.定义列表,设置样式的话尽量通过css而不是属性 1.无序列表基本形式(实例)? ul标签包裹li标签 ...
- 范仁义html+css课程---3、图片和超链接
范仁义html+css课程---3.图片和超链接 一.总结 一句话总结: img标签是图片标签,定义 HTML 页面中的图像 a标签是超链接标签,用于从一个页面链接到另一个页面. 1.img标签要点? ...
- 范仁义html+css课程---9、video、audio、canvas和svg元素略讲
范仁义html+css课程---9.video.audio.canvas和svg元素略讲 一.总结 一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...
- 范仁义html+css课程---8、新元素布局
范仁义html+css课程---8.新元素布局 一.总结 一句话总结: 推荐用新标签(语义化的标签)来布局:header(头部),footer(尾部),aside(侧边栏),nav(导航),artic ...
- 范仁义html+css课程---4、文本标签
范仁义html+css课程---4.文本标签 一.总结 一句话总结: 文本标签大致掌握一下,做到它站在你对面的时候最好认得,认不得也没关系,直接百度 1.ins标签.u标签和del标签 作用? ins ...
随机推荐
- 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 ...
- nginx反向代理实现均衡负载及调度方法
http upstream配置参数: ngx_http_upstream_module模块将多个服务器定义成服务器组,而由proxy_pass, fastcgi_pass等指令进行引用 upstrea ...
- MySQL数据库机房裁撤问题总结
背景:公司某一机房需要裁撤,涉及到大量DB服务器,需要在裁撤截止日期以前完成业务的平滑迁移和设备退还工作. 历时2个多月,经历了设备梳理.裁撤资源评估.裁撤资源申请.裁撤DB部署.裁撤DB业务关系梳理 ...
- 小程序缓存Storage的基本用法
wx.setStorageSync('key', 'hello world') 然后在小程序调试器里面的Storage里面就能看到设置的值.在小程序里面,如果用户不主动清除缓存,这个缓存是一直在的. ...
- 通过mock-api模拟真实数据
一.什么是 mock-api mock-api(模客)是一个便捷的 REST 接口数据模拟工具,用于前后端隔离测试,开发调试. 二.mock-api 的使用 1.注册登录 http://mock-ap ...
- Ajax -02 -JQuery+Servlet -实现页面点击刷出表格数据
demo功能分析 jquery 的js文件需要导入,json的三个文件需要导入,不然writeValueAsString 会转化成JsonArray(json 数组)失败 $("#mytbo ...
- redis和memcached有什么区别?redis的线程模型是什么?为什么单线程的redis比多线程的memcached效率要高得多(为什么redis是单线程的但是还可以支撑高并发)?
1.redis和memcached有什么区别? 这个事儿吧,你可以比较出N多个区别来,但是我还是采取redis作者给出的几个比较吧 1)Redis支持服务器端的数据操作:Redis相比Memcache ...
- (java)selenium webdriver学习,选择模块,点击下一页,获取当前url
selenium webdriver学习,选择模块,点击下一页,获取当前url 查找下一页有多种方法,这里列举两种: isSelected()函数用于判断是否点击选中,返回Boolean类型 impo ...
- 关于List集合中元素排序问题
问题描述: 有一个list集合,其中元素是Student对象,根据student的age排序. Student对象 /** * description * * @author 70KG * @date ...
- 完成一个springboot项目的完整总结-------二
我们接着上篇继续写,继续进行springboot项目 一. swagger2 接口描述,测试每个接口是否有效 1. 添加依赖 pom.xml 在编辑pom.xml之前,要先关闭spring-boot项 ...