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

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

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

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



换行和div span标签

目录:

1,换行标签的定义

2,div 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>

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

2,div 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

相关文章
|
9月前
|
前端开发
HTML段落标签与换行标签的详解与应用
HTML段落标签与换行标签的详解与应用
498 0
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
|
前端开发
div标签中的span标签,多行文字水平,垂直居中
div标签中的span标签,多行文字水平,垂直居中
259 0
|
前端开发 开发者 容器
DIV 和 SPAN 标签介绍| 学习笔记
快速学习 DIV 和 SPAN 标签介绍。
DIV 和 SPAN 标签介绍| 学习笔记
|
前端开发
CSS中强制ul li中的文字换行
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
1875 0
|
前端开发
css3 新属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替,类似这样的效果: 做到这样的效果,我们不仅需要运用到css3的新属性 text-overflow ,该属性的作用就是设置一下被隐藏文本的展示形式(例如隐藏文本用……展示),除此之外还需要用到属性 white-space 使文字不换行,以及使用属性 overflow:hidden 隐藏多余的文字 接下来我们就来分步讲解一下这几个属性的应用吧
347 0
css3 新属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
html中table标签及其它标签居中
html中table标签及其它标签居中
424 0
html中table标签及其它标签居中
在div标签中显示特殊字符(包括html标签)
在div标签中显示特殊字符(包括html标签)
控制label标签的宽度,不让它换行 label标签左对齐
控制label标签的宽度,不让它换行 label标签左对齐
|
JSON 前端开发 JavaScript
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距