换行和div span标签|学习笔记

简介: 快速学习换行和div span标签

开发者学堂课程【HTML 入门与实战换行和div span标签】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/593



换行和div span标签

 

目录:

1,换行标签的定义

2div span标签

 

1,换行标签的定义

单词缩写:break打断,换行

HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

其中<br />就是换行标签的符号,具体操作如下:

<! DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

< / head>

<body>

<h3>------------中国四大美女---------<h3>

1,  貂蝉<br />

2,  王昭君<br />

3,  杨玉环<br />

4,  凤姐思密达<br />

< / body>

< / html>

这就是一个换行标签的使用。

2div span标签

div span标签(重点)

div span是没有语义的,是我们网页布局主要的2个盒子。

div就是division的缩写分割,分区的意思其实有很多div来组合网页。

span,跨度,跨距;范围

语法格式:

<div>这是头部</div>   <span>今日价格</span>

它们使用例子如下:

<! DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

< / head>

<body>

<h3>------------中国四大美女---------<h3>

5,  貂蝉<br />

6,  王昭君<br />

7,  杨玉环<br />

8,  凤姐思密达<br />

Div 标签的使用

<div>我是刘德华</div>

Span 标签的使用

<span>我是刘晓庆</span>

< / body>

< / html>

使用结果如下:image.png

相关文章
|
3月前
|
SQL 数据可视化 关系型数据库
MCP与PolarDB集成技术分析:降低SQL门槛与简化数据可视化流程的机制解析
阿里云PolarDB与MCP协议融合,打造“自然语言即分析”的新范式。通过云原生数据库与标准化AI接口协同,实现零代码、分钟级从数据到可视化洞察,打破技术壁垒,提升分析效率99%,推动企业数据能力普惠化。
316 3
|
3月前
|
JavaScript Java 大数据
基于JavaWeb的销售管理系统设计系统
本系统基于Java、MySQL、Spring Boot与Vue.js技术,构建高效、可扩展的销售管理平台,实现客户、订单、数据可视化等全流程自动化管理,提升企业运营效率与决策能力。
|
安全 Python Linux
Volatility2.6内存取证工具安装及入门-1
Volatility2.6内存取证工具安装及入门
1724 0
Volatility2.6内存取证工具安装及入门-1
|
算法 定位技术
最优化方法(最速下降、牛顿法、高斯牛顿法、LM算法)
最优化方法(最速下降、牛顿法、高斯牛顿法、LM算法)
1306 0
最优化方法(最速下降、牛顿法、高斯牛顿法、LM算法)
|
虚拟化 iOS开发 MacOS
客户机操作系统已禁用 CPU。请关闭或重置虚拟机。解决方法
客户机操作系统已禁用 CPU。请关闭或重置虚拟机。解决方法
5480 0
|
存储 消息中间件 运维
Elasticsearch 结合大数据产品最佳实践
本文整理自阿里云解决方案架构师闫勖勉(三秋)在 阿里云Elasticsearch 自研引擎年度发布 的演讲。
1696 0
Elasticsearch 结合大数据产品最佳实践
|
缓存 JavaScript 算法
Vue.js中的diff算法:让虚拟DOM更高效
Vue.js中的diff算法:让虚拟DOM更高效
|
JSON JavaScript 前端开发
Gson与Fastjson两种Json解析神器保姆级使用攻略
Gson与Fastjson两种Json解析神器保姆级使用攻略
642 0
Gson与Fastjson两种Json解析神器保姆级使用攻略
uniapp中组件库的丰富NumberBox 步进器的用法
uniapp中组件库的丰富NumberBox 步进器的用法
591 0
|
供应链 监控 JavaScript
如何用万界星空科技低代码平台快速开发一个MES系统?
万界星空科技平台作为一款“乐高型”的企业级管理系统平台,其具有高度灵活的“数据+流程+角色”动态信息管理模型。 可以更专业与快速的搭建企业运营所需的各类管理系统,大幅节约研发成本和时间,帮助企业实现全方位的数字化转型;万界星空深耕制造业,专注低代码行业解决方案。
614 0
如何用万界星空科技低代码平台快速开发一个MES系统?