HTML5基础学习之文本标签控制


Posted in HTML / CSS onMarch 25, 2022

一、文本标签控制

设计Web页面时要组织好页面的基本元素,同时再配合一些特效,构成一个绚丽多彩的页面。页面的组成对象包括文本、图片、表单、超链接以及多媒体等。内容是网站的灵魂,而文本则是构成网站灵魂的物质基础。文本与图片在网站上的运用是最广泛的,一个内容充实的网站必然会用大量的文本和图片,然后把超级链接应用到文本和图片上,才能使这些文本和图片“活”起来。

1.标题段落标签

标题段落在页面文字中起到格式化文本的作用,可以使得文本信息结构更清晰,读者可以一目了然。

1.1标题标签<hi>

<hi>标签用于定义段落标题的大小级数。

<hi>标题</hi>

其中i表示标题级数,取值范围为1到6之间的正整数。最大的标题级数是<h1>,最小的标题级数是<h6>。

可使用<hi>标签的align属性来控制文字的对齐方式,属性值可以是left(左看齐)、center(居中对齐)、right(右对齐)和justify(两端对齐,对齐进行伸展,这样每行都可以有相等的长度),默认的属性值为left。

<!DOCTYPE html>

<html>

  <head>

    <title>各级标题</title>

  </head>

  <body>

      <h1>这是第一级标题</h1>

      <h2>这是第二级标题</h2>      

      <h3>这是第三级标题</h3>      

      <h4>这是第四级标题</h4>      

      <h5>这是第五级标题</h5>      

      <h6>这是第六级标题</h6>   

  </body>

</html>

 HTML5基础学习之文本标签控制

1.2段落标签<p>

<p>标签用于划分段落,控制文本的位置。

<p>段落内容</p>

<p>是成对标签,用于定义内容从新的一行开始,并与上段之间有一个空行。开始标签<p>和结束标签</p>之间写入段落内容。

可使用<p>标签的algin属性定义新开始的一行的内容在页面中的对齐位置,属性值可以是left(左对齐)、center(居中对齐)、right(右对齐)和justify(两段对齐,对行进行伸展,这样每行都可以有相等的长度)。<p>标签的align属性不建议使用,可以利用CSS来代替。

<!DOCTYPE html>

<html>

  <head>

    <title>段落标签</title>

  </head>

  <body>

    <p align="left"> HTML5 的时代已经到来,各大浏览器早已做好准备,能很好的支持 HTML5 规范。

      当前互联网技术飞速发展,但几乎每一个互联网产品,都无法回避前端开发这一环节</p>

    <p align="center"> HTML5 的时代已经到来,各大浏览器早已做好准备,能很好的支持 HTML5 规范。

      当前互联网技术飞速发展,但几乎每一个互联网产品,都无法回避前端开发这一环节</p>

    <p align="right"> HTML5 的时代已经到来,各大浏览器早已做好准备,能很好的支持 HTML5 规范。

      当前互联网技术飞速发展,但几乎每一个互联网产品,都无法回避前端开发这一环节</p>

    <p align="justify"> HTML5 的时代已经到来,各大浏览器早已做好准备,能很好的支持 HTML5 规范。

      当前互联网技术飞速发展,但几乎每一个互联网产品,都无法回避前端开发这一环节</p>

  </body>

</html>

 HTML5基础学习之文本标签控制

2.文本格式化标签

2.1换行标签<br>

<br>标签用于定义文本从新的一行显示。

<br>

它不产生一个空行,但连续多个的<br>标签可以产生多个空行的效果。

<br>标签是非成对标签,所以规范的换行标签在使用的时候记为<br>。

注意:<br>标签只是简单地开始新的一行,而当浏览器遇到<p>标签时,通常会在相邻的段落之间插入一些垂直的间距。

<!DOCTYPE html>

<html>

  <head>

    <title>换行标签</title>

  </head>

  <body>

    <p> HTML5 的时代已经到来,各大浏览器早已做好准备,能很好的支持 HTML5 规范。

      当前互联网技术飞速发展,但几乎每一个互联网产品,都无法回避前端开发这一环节</p>

    <p> HTML5 的时代已经到来,各大浏览器早已做好准备,能很好的支持 HTML5 规范。<br>

      当前互联网技术飞速发展,但几乎每一个互联网产品,都无法回避前端开发这一环节</p>

  </body>

</html>

 HTML5基础学习之文本标签控制

注意:注意观察<br>标签与<p>标签的区别,特别是行间距

2.2水平标签<hr>

​<hr>标签用于产生一条水平的线,以分隔文档的不同部分。​

<hr>

<hr>标签是非成对标签,所以规范的换行标签在使用的时候记为<hr>

 HTML5基础学习之文本标签控制

<!DOCTYPE html>

<html>

  <head>

    <title>水平标签</title>

  </head>

  <body>

    <h1>前言</h1>

    <hr>

    <p> HTML5 的时代已经到来,各大浏览器早已做好准备,能很好的支持 HTML5 规范。<br>

      当前互联网技术飞速发展,但几乎每一个互联网产品,都无法回避前端开发这一环节</p>

  </body>

</html>

 HTML5基础学习之文本标签控制

2.3字形标签

​字形标签用于设置文字的风格。

 HTML5基础学习之文本标签控制

HMTL规范声明:

  • 应该使用<h1>~<h6>来表示标题
  • 使用<em>标签来表示强调的文本
  • 使用<strong>标签来表示重要文本
  • 使用<mark>标签来表示标注的或突出显示的文本
  • 根据HTML5规范,在没有其他标签更合适时,才应该把<b>标签作为最后的选项。

2.4<div>标签

​<div>标签可以用来排版大块的HTML段落,设置多个段落的文本对齐方式等。​

<div></div>

目前<div>标签最重要的功能是结合CSS设计页面布局。<div>标签是一种块(block)容器,默认状态时占据一行。

<div style="color:#0000FF">

  <h3>这是一个在div元素中的标题</h3>

  <p>这是一个在div元素中的文本</p>

</div>

2.5<span>标签

​<span>标签被用来组合文档中的行内元素。使用方法和<div>标签基本相同。​

<span>行内容</span>

<span>标签没有固定的格式表现。当对他应用样式时,才会产生视觉上的变化。如果不对<span>应用样式,那么span元素中的文本与其他文本不会有任何视觉上的差异。可以通过CSS对它定义样式,也可以通过JavaScript对它进行操作。

<span>标签和<div>标签主要区别为:

  • <span>标签不换行,而<div>标签换行
  • <span>标签不包含<div><p>标签,而<div>标签可以包含<span>标签和<p>标签。

3.特殊字符标签

在HTML中:

  • 特殊字符以“&”开头,以“;”结尾,中间为相关字符编码。
  • 如用于声明标签的“<”和“>”,在页面上需要显示这两个符号的时候需要进行特殊处理。
  • 在HTML编码中,用“&lt;”表示“<”,用“&gt;”表示“>”

 HTML5基础学习之文本标签控制

到此这篇关于 HTML5基础学习之文本标签控制 的文章就介绍到这了,更多相关 HTML5文本标签控制 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3图片边框border-image的用法
Jun 30 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 #HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
flex弹性布局详解
HTML常用标签超详细整理
Mar 19 #HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 #HTML / CSS
CSS精灵图的原理与使用方法介绍
CSS3实现指纹特效代码
You might like
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
php实现session共享的实例方法
2019/09/19 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Django web框架使用url path name详解
2019/04/29 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
环保建议书100字
2014/05/14 职场文书
防火标语大全
2014/10/06 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书