范仁义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. iOS配置TARGETS

    说一下背景 自从这个项目不死不活的迭代了2年,从项目搭建到现在,一直都是自己在开发和维护,所以项目结构非常清晰,但是之前的水平写的代码现在看来也是惨不忍睹,不过本人比较懒,也就没有考虑过重构的事情 - ...

  2. yum [Errno 12] Timeout on

    今天新安装一台CentOS,进行yum安装时出现以下问题提示 perl-5.16.3-294.el7_6.x86_64.r FAILED                                 ...

  3. Android笔记(六十一)动态添加组件

    想要一个功能,点击按钮,可以在已有的布局上,新添加一组组件. 动态的创建组件,本质上还是创建组件,只不过是在程序中根据逻辑来创建.大致步骤是找到要创建控件的位置,然后将要创建的组件添加进去. 看代码: ...

  4. node+express 搭建本地服务

    首先,得有node环境,其次建个项目 目录例如  酱紫! 再次 写server.js,当然你可以换个名字a.js .b.js.why.js随你喜欢 var express = require('exp ...

  5. 二叉树(python)

    # -*- coding: utf-8 -*- from collections import deque class Queue(object): def __init__(self): self. ...

  6. Centos7安装nginx后提示“Welcome to nginx on Fedora!”,conf.d目录下无default.conf文件

    问题描述 在腾讯云centos7上安装nginx sudo yum install nginx 打开默认网页显示 Welcome to nginx on Fedora! 且 /etc/nginx/co ...

  7. 题解 洛谷P2503 【[HAOI2006]均分数据】

    看了眼题目和数据范围\(n \leq 20,k \leq 6\)自然想到了\(dfs\)分组求解,主要是被这道题坑自闭过. 然而硬来\(dfs\)肯定会被蜜汁\(T\)掉,因为暴力\(n\)个数所在集 ...

  8. 原生JavaScript和jQuery的较量

    JavaScript和jQuery有很多相似知促,那么二者又是如何进行较量,我们先了解一下什么是JavaScript和jQuery,知其源头,才能知其所以然. 简介: [JavaScript] 一种直 ...

  9. python打造漏洞数据导出工具

    功能 [x] 支持导出的数据:IP地址.漏洞名称.风险等级.整改建议.漏洞描述.漏洞CVE编号.漏洞对应端口.漏洞对应协议.漏洞对应服务等. [x] 导出不同端口的同一个漏洞,也就是一个端口对应一个漏 ...

  10. 4.1 vue-resource

    全局拦截器.配置全局地址等: