网页中标记代码内容使用code和pre标签

要在HTML中显示标签本来的样子需要转化为实体

　　在此附上百度的实体字符：http://baike.baidu.com/view/4757776.htm#3

code标签标注行内的代码内容

　　我要在代码中显示如下效果：

　　　　

　　　　需要这么使用code标签

　　　　在前面几节中有是否还是记得：我们在 <code>&lt;div&gt;&lt;/div&gt;</code>标签中添加了一个类<code>.page-header</code>来显示一条分割线

pre标签标注一段代码内容--同样需要转化实体

　　<pre>

　　　　&lt;script type='text/javascript' src='./bootstrap/bootstrap.js'&gt&lt;/script&gt;

　　</pre>

　　效果如图：

　　　　

　　bootstrap为代码和代码块提供了好看的样式，我们只需要调用它的code或者pre标签即可，值得注意的是需要注意将需要显示的HTML特殊标签转化为实体

　　下面我们来讲讲，如何更加美化自己要美化的代码块<pre></pre>中的代码

　　①首先网上搜索google-code-prettify ，下载得到2个文件

　　　　prettify.js 和prettify.css 

　　②分别保存在路径中然后引入这2个文件

　　　　<link href="./bootstrap/css/prettify.css" rel="stylesheet">

　　　　<script type="text/javascript" src="./bootstrap/js/prettify.js"></script>

　　③要显示行号，需要添加如下css样式在 <style type='text/css'></style>标签中

　　　　li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }

　　　　如果不添加行CSS代码那么显示的效果是每隔5行显示一个行号即 5n (n为整数) 才会显示一个行号

　　④给body标签添加onload='prettyPrint();' --> 注意有大写

　　　　<body onload='prettyPrint();'></body>

　　⑤给pre标签添加class='prettyprint linenums' -->注意是小写

　　　　<pre class='prettyprint linenums'></pre>

　　如图效果：

　　　　

　　看这样效果是不是很赞！！！

Bootstrap页面布局10 - BS代码的更多相关文章

  1. Bootstrap页面布局10 - BS表格

    ①了解需要怎样的表格标签结构 ②bootstrap为我们提供了一些类来变换表格样式 1.table中添加 <table class='table'></table> 如图: 2 ...

  2. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  3. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  4. Bootstrap页面布局9 - BS列表

    列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...

  5. Bootstrap页面布局17 - BS选项卡

    代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...

  6. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

  7. Bootstrap页面布局23 - BS折叠内容

    <div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...

  8. Bootstrap页面布局20 - BS缩略图

    <div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...

  9. Bootstrap页面布局19 - BS提示信息

    提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...

随机推荐

  1. UML从需求到实现----包图

    上接:UML中图出现顺序 上回讲到用例图,UML中各个图之间的关系.接着根据UML建模中图出现的顺序来总结包图. 用例图确定以后.用户的需求基本上就确定了.接下来要根据用户的要求去设计系统.建模的顺序 ...

  2. Android开发中Bundle用法包裹数据（转）

    Android开发中Bundle用法包裹数据 Bundle的经典用法,包裹数据放入Intent中,目的在于传输数据. SDK 里是这样描述: A mapping from String values ...

  3. java阿拉伯数字表示的金额转换成中文大写金额

    最大数字要处理到千亿也就是12位整数部分我们可以分成3段处理,xxxx亿,xxxx万,xxxx元,然后小数部分比较好处理我们发现0比较难处理什么时候会出现零呢那就是两个数字之间出现一个或多个零那么数字 ...

  4. env

    shell环境变量以及set,env,export的区别 原文链接 一.shell环境变量的分类以及set env export的区别: set:显示(设置)shell变量 包括的私有变量以及用户变量 ...

  5. JIT晚期(运行期)

    在部分的商用虚拟机(Sun HotSpot.IBM J9)中,Java程序最初是通过解释器(Interpreter)进行解释执行的,当虚拟机发现某个方法或代码块的运行特别频繁时,就会把这些代码认定为& ...

  6. PHP 输出表格单元格的数据之用表单的方式；

    echo "<table border=1 class="imagetable" >"; //使用表格格式化数据echo "<for ...

  7. js:数据结构笔记7--哈希表

    哈希表(散列表):通过哈希函数将键值映射为一个字典; 哈希函数:依赖键值的数据类型来构建一个哈希函数: 一个基本的哈希表:(按字符串计算键值) function HashTable() { this. ...

  8. Bash的基础知识man手册

    Bash的基础知识man手册 由于基于Android类设备的渗透测试都是通过各类终端实现.所以掌握Shell相关操作就显得尤为重要.Bash是一个为GNU计划编写的Unix Shell本文选自基于An ...

  9. win 7 普通家庭版 装IIS

    每当一个程序员入职的时候,几乎都会干一件事情,就是重装操作系统,这是一场不易之战: 1)耗时太长: 2)容易遇到怪异的系统行为. 1.win7为毛装不上VS2012 先装一个win7 x64 旗舰版, ...

  10. UVa10917 A Walk Through the Forest（SPFA+记忆化搜索）

    题目给一张有向图,问从起点1到终点2沿着合法的路走有种走法,合法的路指从u到v的路,v到终点的距离严格小于u到终点的距离. 先SPFA预处理出所有合法的路,然后这些路肯定形成一个DAG,然后DP一下就 ...