一提到文档标签,大家首先想到的就是p,那如果要实现缩进及间距,还得使用margin,padding及text-indent等css样式。

但现在html5的一个新标签解决了以上所有问题,它可以自缩进和自间距,这就是blockquote标签一个人的功劳。

<blockquote> 标签定义摘自另一个源的块引用。

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

实例

毛主席说过:
<blockquote>帝国主义都是纸老虎 ... </blockquote>

亲自试一试

如果标记是不需要段落分隔的短引用,请使用 <q> 元素。blockquote 只应该应用于来自另一个源的引用。

<q>标签标记短的引用,浏览器经常在引用的内容周围添加引号。

实例

<q>Here is a short quotation here is a short quotation</q>

亲自试一试

-----------------------------------------------------------

如需把页面作为 strict XHTML 进行验证,那么 <blockquote> 元素必须包含块级元素,比如这样:

<blockquote>
<p>here is a long quotation here is a long quotation</p>
</blockquote>

----------------------------------------------------------------------------------------

那问题来了,CSS中如何让blockquote里的段落<p>不缩进呢?

P已经全局定义为缩进两个字符。当段落中需要加Blockquote时,这行文字是<blockquote><P>... ... ...<P> </blockquote>,文字同样缩进了两个字符。有什么方法实现呢?

最佳答案
 
blockquote{ margin:0; }/*去掉blockquote本身带的缩进。*/
blockquote p{text-indent:0;}

<q> 与 <blockquote> 的区别

<q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分(通常显示为缩进的块),请使用 <blockquote> 标签。

HTML 5 <blockquote><p>的分工与合作的更多相关文章

  1. 传统IT企业与互联网企业的一点思考

    [注意前提]应当说,比较常用的管理策略并没有界线分明的优劣之分,只有适不适合企业的经营战略,团队文化,发展状况等. 之所以有传统IT企业与互联网企业的区别,主要的原因是两者所处的市场环境与经营思路造成 ...

  2. 测试为什么Low

    你从来没有因为一个歌手不会写曲填词而说歌手很Low! 你从来没有因为一个演员不会摄影.唱歌而说演员很Low! 你从来没有因为一个记者不会摄影,拍照而说记者很Low! 你从来没有因为一个美食家不会烧菜, ...

  3. Javascript中构造函数与new命令

    典型的面向对象编程语言(比如C++和Java),存在“类”(class)这个概念.所谓“类”就是对象的模板,对象就是“类”的实例.但是,在JavaScript语言的对象体系,不是基于“类”的,而是基于 ...

  4. 站在移动互联时代的十字路口上_deviceone

    最近总能看到类似“App已死,服务永生”.“App必死,web永生” .“App已死,微信建站已生”这样的文章.不晓得这些网络写手到底是想代表某些公司的立场.还是想要表达怎么样的一个情结,文章中语气都 ...

  5. Javascript中构造函数与new命令2

    典型的面向对象编程语言(比如C++和Java),存在"类"(class)这个概念.所谓"类"就是对象的模板,对象就是"类"的实例.但是,在J ...

  6. [No000025]停止自嘲—IT 技术人必须思考的 15 个问题

    行内的人自嘲是程序猿.屌丝和码农,行外的人也经常拿IT人调侃,那么究竟是IT人没有价值,还是没有仔细思考过自身的价值? 1.搞 IT 的是屌丝.码农.程序猿? 人们提到IT人的时候,总会想到他们呆板. ...

  7. 【Alpha版本】冲刺阶段——Day 8

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  8. 0414-复利计算器6.0.Release

    复利计算器6.0--Release 前言 本次复利计算器的版本更新,主要有以下内容的完善: 1.优化了Web版的页面,提供了更舒服美观的用户体现. 2.新增了移动端(安卓)app版本. 版本信息 项目 ...

  9. 20145227《Java程序设计》课程总结

    20145227<Java程序设计>课程总结 每周读书笔记链接汇总 20145227 <Java程序设计>第1周学习总结 20145227 <Java程序设计>第2 ...

随机推荐

  1. [转]Mysql连表之多对多

    转自 回到顶部 连表多对多 可以理解成一夫多妻和一妻多夫. 男人表: nid name 1 xxx 2 yyy 3 zzz 女人表: nid name 1 aaa 2 bbb 3 ccc 要让两个表建 ...

  2. python学习记录(持续更新)--最最最基础的一部分(方法,异常处理,注释,类)

    写在前面 本系列教程针对有一定编程经验的伙伴快速入门python基础,一些涉及开发的常识问题,本文并不涉及. 方法 function def greet_user(name): print(f'Hi ...

  3. 如何批量删除.svn文件

    参考资料:https://www.cnblogs.com/kisf/articles/4760367.html 当项目不需要SVN标志的时候,我们一般怎么办哪??可能很多人设置Windows显示隐藏文 ...

  4. Java 8 有哪些新特性

    一.支持 lambda 表达式 例如:查询学生信息,并打印 List<Student> studentList = Student.findAllStudent(); for(Studen ...

  5. c3p0 获取数据源

    getDataSourcec3p0Resource private static void f3Resource() throws Exception { Connection conn = getD ...

  6. day18-Python运维开发基础(单继承 / 多继承 / 菱形继承、类的多态)

    1. 单继承 / 多继承 / 菱形继承 # ### 继承 : 一个类除了自身所拥有的属性方法之外,还获取了另外一个类的成员属性和方法 """ 一个类可以继承另外一个类,那 ...

  7. C++面试常见问题——04链表的逆序与合并

    链表的逆序与合并 链表的逆序 已知一个链表的头指针为head,将该链表逆序. #include<iostream> using namespace std; struct Node{ in ...

  8. [swscaler @ ...] deprecated pixel format used, make sure you did set range correctly

    我自己在使用如下函数进行转换时报的错 int sws_scale(struct SwsContext *c, const uint8_t *const srcSlice[], const int sr ...

  9. 图论初步<蒟蒻专属文章>

    前言:    图论乃noip之重要知识点,但有点难理解 本人因此吃过不少亏 因为本人实在太弱,所以此篇乃正宗<蒟蒻专属文章> 正文:(本文仅介绍图论中的重点.难点,其余部分略将或不讲) 图 ...

  10. Spark调优(三) JVM调优

    调节Executor堆外内存 概述: Spark底层shuffle的传输方式是使用netty传输,netty在进行网络传输的过程会申请堆外 内存(netty是零拷贝),所以使用了堆外内存. 什么时候需 ...