提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

HTML 标签 标题 div 换行 排版 Span 段落
2023-06-13 09:18:07 时间

文章目录

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> 和 结束标签 </p> 之间 ;

<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 中的文字 , 不管里面有回车 , 空格 , 换行 , 都会被忽略 , 默认按照一行显示 ;

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

如果换行 , 需要使用 换行标签 <br />

换行标签使用代码示例 :

<!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>

效果展示 :

相关文章