【HTML】HTML 标签 ② ( 排版标签 | 标题标签 | 段落标签 | 水平线标签 | 换行标签 | div 标签 | span 标签 )

韩曙亮

发布于 2023-03-30 19:02:38

10.1K0

发布于 2023-03-30 19:02:38

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、排版标签

HTML 常用的标签有如下类型 :

排版标签
文本格式化标签
图像标签
链接标签 , 其中链接涉及到相对路径与绝对路径问题 ;

一、排版标签

排版标签 是网页布局中 , 最常用的标签 , 排版标签又分为如下几个类型 :

标题标签
段落标签
水平线标签
换行标签
div 标签
span 标签

1、标题标签

HTML 提供了 6 个等级的标题 , 分别是

<h1>   一级标题   </h1>
<h2>   二级标题   </h2>
<h3>   三级标题   </h3>
<h4>   四级标题   </h4>
<h5>   五级标题   </h5>
<h6>   六级标题   </h6>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<h1>   一级标题   </h1>
		<h2>   二级标题   </h2>
		<h3>   三级标题   </h3>
		<h4>   四级标题   </h4>
		<h5>   五级标题   </h5>
		<h6>   六级标题   </h6>
    </body>
</html>

展示效果 :

2、段落标签

HTML 中的段落标签使用  表示 , 段落内容在开始标签  和结束标签  之间 ;

<p>   段落内容   </p>

将下面的文字分成 2 个段落 ,

编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ; 介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ; 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;

直接将文字拷贝到 HTML 中 , 所有的文字都显示成一段文字 ;

使用段落标签后 , 代码如下 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<h1>   一级标题   </h1>
		<h2>   二级标题   </h2>
		<h3>   三级标题   </h3>
		<h4>   四级标题   </h4>
		<h5>   五级标题   </h5>
		<h6>   六级标题   </h6>
		
		<p>编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ;</p> 
		<p>介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ; 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;</p>
		
    </body>
</html>

效果展示 :

3、水平线标签

水平线标签 , 可以在网页中添加一条分割横线 , 标签代码如下 :

<hr />

在标题下添加了 <hr /> 标签后的效果 , 在网页中 , 显示了一条横线 ;

4、换行标签

换行标签 :

<br />

在 HTML 中的文字 , 不管里面有回车 , 空格 , 换行 , 都会被忽略 , 默认按照一行显示 ;

如果分段需要使用段落标签  ;

如果换行 , 需要使用换行标签  

换行标签使用代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<h1>   一级标题   </h1>
		<h2>   二级标题   </h2>
		<h3>   三级标题   </h3>
		<h4>   四级标题   </h4>
		<h5>   五级标题   </h5>
		<h6>   六级标题   </h6>
		
		<hr />
		
		<p>编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 
		<br />与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ;</p> 
		<p>介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ;
		<br /> 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;</p>
		
    </body>
</html>

效果展示 : 换行处使用箭头进行标记 ;

5、div 标签和 span 标签

div 标签和 span 标签都用于网页布局 ;

div 标签一行只能设置一个 ;

<div> 布局内容 </div>

span 标签一行可以设置多个 ;

<span> 布局内容 </span>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<h1>   一级标题   </h1>
		<h2>   二级标题   </h2>
		<h3>   三级标题   </h3>
		<h4>   四级标题   </h4>
		<h5>   五级标题   </h5>
		<h6>   六级标题   </h6>
		
		<hr />
		
		<p>编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 
		<br />与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ;</p> 
		<p>介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ;
		<br /> 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;</p>
		
		<hr />
		
		<div> div1 </div>
		<div> div2 </div>
		
		<span> span1 </span>
		<span> span2 </span>
		
    </body>
</html>

效果展示 :

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-02-05，如有侵权请联系 cloudcommunity@tencent.com 删除

html

图像标签

布局

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

图像标签

布局

登录后参与评论

0 条评论

热度