前端 -- 基础 常用标签 ( 文本格式化标签,<div>,<span>标签)

目录

文本格式化标签

加粗  

倾斜 

删除线 

下划线  

< div > 和 < span > 标签

< div > 标签  

< span > 标签 


文本格式化标签

在网页中,有时需要为文字设置 粗体斜体 下划线 等效果,这时就需要用到 HTML 中的文本

格式化标签,使文字以特殊的方式显示。  

突出重要性,比普通文字重要 ~!! 

加粗  

        

         ===>>>

         

倾斜 

         

         ===>>>

          

删除线 

          

          ===>>>

         

下划线  

            

            ===>>>

           

          

< div > 和 < span > 标签

< div >  和 < span > 是没有语义的,它们就是一个盒子,用来装内容的~!!!

当然了,如果你现在只看上面这句话,你能理解这 < div > 和  < span > 干啥的么 ?? 

当然不能了, 上面这句话最关键的我觉得是   “ 盒子 ”  只要能理解 “ 盒子 ”  那就理解这两个标签的

真正作用了 ~!!

我们直接上图拿实例解释 : 

  

   什么是盒子 ? 

   ===>>>

    那我们平时日常生活中就会用到盒子呀, 拿盒子来装东西 。

    那请看上示图例, 上面所用红色方框圈出来的,那它就是个  “ 盒子  ”  

    里面装了 图片,汉字,等 ,这就是 所谓 “ 盒子 ” 的体现,你就是用来装东西的呗,能有多高大

   上????   就是页面布局都会用到的一个标签而已 ~ !!  

    那至于上面 这个 盒子  是怎么体现的?  怎么实现的?  < span > 和 < div > 既然都是盒子那有啥

    区别?   这个我们接着往下看 ~!!! 

< div > 标签  

#  div  是 division 的缩写,表示 分割、 分区 

 < div > 标签用来布局, 但是它的特点就是,一行只能放一个 < div > ; 是个大盒子 

具体理解看下示 : 

代码示例 : 

     

代码执行效果 :

  

再看 :

为了更加具体的展示 < div > 是要独占一个整行,我们在代码后面加上数字 123 

再来看看具体显示效果 : 

显然,这个时候,即使我们在源代码后面写上 数字,也会由于 < div > 的特性,给自动排到下一行

综上就是 < div > 标签的初步用法~!!

为了更好的在实际应用效果中去感受  <  div > 的作用,我们示例如下 :

           

           上示 红色方框所圈的内容,即可以理解为  一个 大的  < div >, 它自己独占一行,然后往里

           面去添加内容 ~!! 

 

< span > 标签 

#  < span >  标签同样也是用来 页面布局的,一行可以放多个 < span > , 可以把它理解为小盒子。

源码示例 : 

执行结果 : 

可以看到,同一行,有多个 < span > ; 所以,我们暂且就把 < span > 标签就理解成是小盒子即可

< div > 和 < span > 两个具体的标签使用,我们在后续的页面布局中,再做以介绍~!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/307616.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

儿童学python语言能做什么,孩子学python哪个机构好

大家好&#xff0c;小编为大家解答儿童学python语言能做什么的问题。很多人还不知道孩子学python哪个机构好&#xff0c;现在让我们一起来看看吧&#xff01; Source code download: 本文相关源码 我们准备了很久的Python3课程终于要来了。 为什么Python3课程花了我们这么久的时…

一篇文章带你入门PHP魔术方法

PHP魔术方法 PHP 中的"魔术方法"是一组特殊的方法&#xff0c;它们在特定情况下自动被调用。这些方法的名称都是以两个下划线&#xff08;__&#xff09;开头。魔术方法提供了一种方式来执行各种高级编程技巧&#xff0c;使得对象的行为可以更加灵活和强大。以下是一…

机器学习模型可解释性的结果分析

模型的可解释性是机器学习领域的一个重要分支&#xff0c;随着 AI 应用范围的不断扩大&#xff0c;人们越来越不满足于模型的黑盒特性&#xff0c;与此同时&#xff0c;金融、自动驾驶等领域的法律法规也对模型的可解释性提出了更高的要求&#xff0c;在可解释 AI 一文中我们已…

OpenHarmony南向之Camera简述

Camera驱动框架 该驱动框架模型内部分为三层&#xff0c;依次为HDI实现层、框架层和设备适配层&#xff1a; HDI实现层&#xff1a;实现OHOS&#xff08;OpenHarmony Operation System&#xff09;相机标准南向接口。框架层&#xff1a;对接HDI实现层的控制、流的转发&#x…

对SPI总线上挂接多个X5045的读写操作

#include<reg51.h> //包含单片机寄存器的头文件 #include<intrins.h> //包含_nop_()函数定义的头文件 sbit SCKP3^4; //将SCK位定义为P3.4引脚 sbit SIP3^5; //将SI位定义为P3.5引脚 sbit SOP3^6; //将SO位定义为P3.6引脚 sbit CS1P3^7; …

day3双指针

输入一字符串&#xff0c;然后将该字符串中的单词分割开来 #include <iostream> #include <string.h> using namespace std; int main() {char str[1000];gets(str);int nstrlen(str);for(int i0;i<n;i){int ji;while(str[j]! &&j<n) j;for(int ki;k…

ROS仿真R2机器人之安装运行及MoveIt的介绍

R2(Robonaut 2)是NASA美国宇航局与GM通用联合推出的宇航人形机器人&#xff0c;能在国际空间站使用&#xff0c;可想而知其价格是非常昂贵&#xff0c;几百万美刀吧&#xff0c;还好NASA发布了一个R2机器人的Gazebo模型&#xff0c;使用模型就不需要花钱了&#xff0c;由于我们…

进行VMware日志管理

随着公司转向虚拟化其 IT 空间&#xff0c;虚拟环境日志监控正在占据日志管理的很大一部分,除了确保网络安全外&#xff0c;虚拟机日志监控还有助于管理虚拟化工具&#xff0c;这是最复杂的任务之一。 对虚拟环境日志的监控分析 当今公司中最受欢迎的虚拟平台之一是 VMware。…

LVM逻辑卷与扩容

目录 一.LVM&#xff1a; 1.什么是LVM&#xff1a; 2.LVM的基本核心组件&#xff1a; 3.LVM的基本命令&#xff1a; 二.逻辑卷的创建&#xff1a; 第一步&#xff0c;我们先要为虚拟机添加硬盘 然后我们要添加依赖包 然后我们要进行磁盘分区 再添加好分区后&#xff0…

雷军称小米汽车不可能卖 9 万 9;杭州破获重大勒索病毒案丨 RTE 开发者日报 Vol.116

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

Python中matplotlib库的使用1

1 matplotlib库简介 matplotlib是一个数学绘图库&#xff0c;可以将数据通过图形的方式显示出来&#xff0c;也就是数据可视化。 2 matplotlib库的安装 2.1 打开cmd窗口 点击键盘的“Win”“R”键&#xff0c;在弹出的“运行”对话框的“打开”栏中输入“cmd”&#xff0c;…

c语言-string.h库函数初识

目录 前言一、库函数strlen()1.1 strlen()介绍1.2 模拟实现strlen() 二、库函数strcpy()2.1 strcpy()介绍2.2 模拟实现strcpy() 三、库函数strcmp()3.1 strcmp()介绍3.3 模拟实现strcmp() 总结 前言 本篇文章介绍c语言<string.h>头文件中的库函数&#xff0c;包含strlen…