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

相关文章
|
6月前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
225 0
|
6月前
|
前端开发
HTML段落标签与换行标签的详解与应用
HTML段落标签与换行标签的详解与应用
343 0
|
11月前
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
|
前端开发
div标签中的span标签,多行文字水平,垂直居中
div标签中的span标签,多行文字水平,垂直居中
206 0
|
前端开发 开发者 容器
DIV 和 SPAN 标签介绍| 学习笔记
快速学习 DIV 和 SPAN 标签介绍。
221 0
DIV 和 SPAN 标签介绍| 学习笔记
|
前端开发 JavaScript 开发者
style 标签|学习笔记
快速学习 style 标签
165 0
|
前端开发
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
1837 0
html+css实战11-换行和水平线标签
html+css实战11-换行和水平线标签
200 0
html+css实战11-换行和水平线标签
|
Web App开发 容器
Div并排显示
Div并排显示
在div标签中显示特殊字符(包括html标签)
在div标签中显示特殊字符(包括html标签)