转自:https://i.cnblogs.com/posts?categoryid=1121494

网页的排版部份也是很重要的一环,有些现成的卷标就可以让您轻易的完成缩排或是一些特殊格式的编排喔!

【文字置左、置中、置右】

1. 使用方法:老实说,刚刚我们学过的分段卷标<p>再加上一些简单的属性设定,就可以让其整个文字段落置左、置中或置右了,就如下表所示:

 

原始码 呈现结果
<p align=left>文字靠左</p>

文字靠左

<p align=center>文字置中</p>

文字置中

<p align=right>文字靠右</p>

文字靠右

2. 卷标解说:嗯!秘诀就在于「align=对齐位置」而已啦!align是分段卷标<p>的属性之一,这个属性将来会常常在不同卷标中看到,它的功能是专门在设定「水平对齐位置」,其常见的设定值有三个,也就是置左(align=left)、置中(align=center)、置右(align=right)。
【置中卷标】
1. 使用方法:<center>这是置中</center>

2. 卷标解说:这个卷标是最常用到的卷标了,除了文字,对于图片、表格,任何可以显现在网页上的东西都可以置中喔!

3. 使用范例:

原始码 呈现结果
<center>这是最中间</center>                   这是最中间

【向右缩排卷标】
1. 使用方法:<blockquote>要缩排的文字</blockquote>

2. 卷标解说:利用<blockquote></blockquote>这个卷标可以将其包起来的文字,全部往右缩排。而且加一组卷标,往右缩排一单位,加两组卷标,往右缩排两单位,依此类推。

3. 使用范例:

原始码 呈现结果
<blockquote>缩排1单位</blockquote>

缩排1单位

<blockquote><blockquote>缩排2单位</blockquote></blockquote>
缩排2单位

【保存原始格式卷标】

1. 使用方法:<pre>文字内容</pre>

2. 卷标解说:利用<pre></pre>这个卷标可以将其包起来的文字排版、格式,原封不动的呈现出来。算是相当好用的卷标之一。

3. 使用范例:

原始码 呈现结果
<pre>
文 字
 格 式
</pre>
文 字
 格 式

HTML基础第十讲---排版卷标的更多相关文章

  1. HTML基础第八讲---序列卷标

    转自:https://i.cnblogs.com/posts?categoryid=1121494 什么叫做序列卷标?其实,这是一个大家都蛮熟悉的东西,只是在网页中换个名称来称呼罢了,序列卷标的功能在 ...

  2. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  3. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  4. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  5. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  6. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  7. Bootstrap <基础二十五>警告(Alerts)

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  8. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  9. Bootstrap <基础二十二>超大屏幕(Jumbotron)

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

随机推荐

  1. The method getDispatcherType() is undefined for the type HttpServletRequest错误解决方法

    使用Eclipse Luna版本,jdk1.7和tomcat8.0开发JAVA EE应用.写一个简单的JSP部署后访问报JSP编译错误,具体错误信息如下: The method getDispatch ...

  2. OPENCV(3) —— 对XML和YAML文件实现I/O 操作

    XML\YAML文件在OpenCV中的数据结构为FileStorage string filename = "I.xml"; FileStorage fs(filename, Fi ...

  3. 安装完Python之后,如何设置Python环境变量

    人生苦短,我用Python.最近有许多加群的萌新在咨询Python安装的事宜,Python安装问题不大,可以戳这篇文章:.本以为安装Python之后就可以万事大吉,高枕无忧了,往命令行中输入pytho ...

  4. Tensorflow 函数学习笔记

    A: A:## tf.argmax(A, axis).eval() 输出axis维度上最大的数的索引 axis=0:列,axis=1:行 A:## tf.add(a,b)  创建a+b的计算图 A:# ...

  5. 兼容IE浏览器的canvas画线和圆圈

    1.新建test.html文件,代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8& ...

  6. 【剑指offer】Q25:二叉树中和为某一值的路径

    说明:最烦的就是看别人的博客,题解里直接上代码,一行分析都没有.只是这个题... class BTNode(): def __init__(self, val = -1): self.val = va ...

  7. 【POJ 2482】 Stars in Your Window(线段树+离散化+扫描线)

    [POJ 2482] Stars in Your Window(线段树+离散化+扫描线) Time Limit: 1000MS   Memory Limit: 65536K Total Submiss ...

  8. Redisclient连接方式Hiredis简单封装使用,连接池、屏蔽连接细节

    工作须要对Hiredis进行了简单封装,实现功能: 1.API进行统一,对外仅仅提供一个接口. 2.屏蔽上层应用对连接的细节处理: 3.底层採用队列的方式保持连接池,保存连接会话. 4.重连时採用时间 ...

  9. AFNetworking 取消请求

    取消单个操作: AFHTTPRequestOperation *operation = [[AFHTTPRequestOperation alloc] initWithRequest:request] ...

  10. 自建的IPV6管道

    前阵子琢磨IPV6,建立了一个给本机分配IPV6地址的管道,不怎么稳定  http://6tu.me