换行和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

相关文章
|
7月前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
271 0
|
7月前
|
前端开发
HTML段落标签与换行标签的详解与应用
HTML段落标签与换行标签的详解与应用
449 0
|
前端开发
div标签中的span标签,多行文字水平,垂直居中
div标签中的span标签,多行文字水平,垂直居中
233 0
ul li 的属性值 去掉li的圆点
ul li 的属性值 去掉li的圆点
|
前端开发 开发者 容器
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
1857 0
|
开发者
换行和div span标签|学习笔记
快速学习换行和div span标签
173 0
换行和div span标签|学习笔记
在div标签中显示特殊字符(包括html标签)
在div标签中显示特殊字符(包括html标签)
|
JSON 前端开发 JavaScript
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
控制label标签的宽度,不让它换行 label标签左对齐
控制label标签的宽度,不让它换行 label标签左对齐