HTML 5 <blockquote><p>的分工与合作
一提到文档标签,大家首先想到的就是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>的分工与合作的更多相关文章
- 传统IT企业与互联网企业的一点思考
[注意前提]应当说,比较常用的管理策略并没有界线分明的优劣之分,只有适不适合企业的经营战略,团队文化,发展状况等. 之所以有传统IT企业与互联网企业的区别,主要的原因是两者所处的市场环境与经营思路造成 ...
- 测试为什么Low
你从来没有因为一个歌手不会写曲填词而说歌手很Low! 你从来没有因为一个演员不会摄影.唱歌而说演员很Low! 你从来没有因为一个记者不会摄影,拍照而说记者很Low! 你从来没有因为一个美食家不会烧菜, ...
- Javascript中构造函数与new命令
典型的面向对象编程语言(比如C++和Java),存在“类”(class)这个概念.所谓“类”就是对象的模板,对象就是“类”的实例.但是,在JavaScript语言的对象体系,不是基于“类”的,而是基于 ...
- 站在移动互联时代的十字路口上_deviceone
最近总能看到类似“App已死,服务永生”.“App必死,web永生” .“App已死,微信建站已生”这样的文章.不晓得这些网络写手到底是想代表某些公司的立场.还是想要表达怎么样的一个情结,文章中语气都 ...
- Javascript中构造函数与new命令2
典型的面向对象编程语言(比如C++和Java),存在"类"(class)这个概念.所谓"类"就是对象的模板,对象就是"类"的实例.但是,在J ...
- [No000025]停止自嘲—IT 技术人必须思考的 15 个问题
行内的人自嘲是程序猿.屌丝和码农,行外的人也经常拿IT人调侃,那么究竟是IT人没有价值,还是没有仔细思考过自身的价值? 1.搞 IT 的是屌丝.码农.程序猿? 人们提到IT人的时候,总会想到他们呆板. ...
- 【Alpha版本】冲刺阶段——Day 8
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 0414-复利计算器6.0.Release
复利计算器6.0--Release 前言 本次复利计算器的版本更新,主要有以下内容的完善: 1.优化了Web版的页面,提供了更舒服美观的用户体现. 2.新增了移动端(安卓)app版本. 版本信息 项目 ...
- 20145227《Java程序设计》课程总结
20145227<Java程序设计>课程总结 每周读书笔记链接汇总 20145227 <Java程序设计>第1周学习总结 20145227 <Java程序设计>第2 ...
随机推荐
- 4-form表单的双向绑定
概念:表单中的input框等其他标签,值变化时会触发函数,改变state中的值,反过来修改state中的值也会改变input框中值的展现 实现:利用类组件里的state属性来实现(setState会再 ...
- Netsparker介绍
Netsparker是一款综合型的web应用安全漏洞扫描工具,它分为专业版和免费版,免费版的功能也比较强大.Netsparker与其他综合性的web应用安全扫描工具相比的一个特点是它能够更好的检测SQ ...
- spring demo
参考: https://www.tutorialspoint.com/spring/spring_applicationcontext_container.htm
- myBatis mapper接口方法重载问题
在mybatis框架中,写dao层的mapper接口时,是不可以进行方法的重载的,下面是截图证明: 当mapper接口中有方法的重载时,会出现异常, 这是mapper接口中定义的两个方法,进行 ...
- Electron调用C++的DLL
1. 安装ffi-napi npm install ffi-napi 2. c++ dll 注意,若electron是X64的,则dll也应为X64,同理32位. myAddDll是c++的dll ...
- vscode调试开发C/C++程序
https://www.cnblogs.com/TAMING/p/8560253.html
- 如何在ubuntu14.04(64位)编译运行32位程序
sudo -i cd /etc/apt/sources.list.d echo "deb http://archive.ubuntu.com/ubuntu/ raring main rest ...
- 记一次NoHttpResponseException问题排查
上传文件程序会有一定的概率提示错误,错误率大概在1%以下,错误信息是:org.apache.http.NoHttpResponseException , s3-us-west-1.amazonaws. ...
- STP 指定端口 根端口 区别和理解
不多说,先上图,A为指定端口,B为非指定端口. 看本文的网友应该知道根端口和指定端口的选举,但是对指定端口和根端口的理解不清楚.这里我就略过选举过程,直接描述这两者的区别和存在的意义. 指定端口:转发 ...
- 论文写作+gnuplot制图
一:论文写作 论文写作推荐使用LATEX+TEXStudio+TEXLive 1.CTeX官方网站:http://www.ctex.org/HomePage ,他类似于python环境 2.TeXst ...