网页中标记代码内容使用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. ***PHP中empty()和isset()的区别

    对于初学php的人来说,empty()和和isset()用法的区别是很难搞清楚的,他们的用法的差别不仔细去琢磨的话确实很难弄清楚. 先说一下他们的共同点: 都可以判定一个变量是否为空: 都返回bool ...

  2. ***CI中的数据库操作(insert_id新增后返回记录ID)

    在system/application/config 文件夹和里面的config文件里已经配置了参数 $active_group = "default";$db['default' ...

  3. Wcf for wp8 连接数据库，读写数据库，显示数据库数据（二）

    下载: Microsoft® SQL Server® 2012 Express http://www.microsoft.com/zh-cn/download/details.aspx?id=2906 ...

  4. phpcms-v9中建立wap手机站点

    web网站用的是phpcms v9搭建的,为了方便手机用户浏览网站,于是用phpcms v9自带的手机门户模块搭建了个wap站(http:.org换成你的wap网站域名----------- 到这一步 ...

  5. mysql中char与varchar的区别分析(补充一句，int和integer没区别)

    转自:http://www.jb51.net/article/23575.htm 在mysql教程中char与varchar的区别呢,都是用来存储字符串的,只是他们的保存方式不一样罢了,char有固定 ...

  6. Android中Dialog

    在Android中,Dialog是一个非常重要的UI, 它可以方便的给用户提示,用最简洁的方式向用户展示信息, 以下的图片是Dialog的一个整体架构,通过它,可以总体对Dialog有一个很清晰的认识 ...

  7. [转]notepad++各种插件

    http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htmls/npp_common_plugins.html

  8. 算法教程（2）zz

    In the previous section we saw how to use vectors to solve geometry problems. Now we are going to le ...

  9. linux安装apache的纠结过程

    本以为linux下安装apache是件很简单的过程.三命令就可以搞定,jxvf解压,make 编译,make install 安装就OK了.没想到这个过程还颇费周折.可能和环境有关吧.先说一下我的环境 ...

  10. Java集合的线程安全用法

    线程安全的集合包含2个问题 1.多线程并发修改一 个 集合 怎么办? 2.如果迭代的过程中 集合 被修改了怎么办? a.一个线程在迭代,另一个线程在修改 b.在同一个线程内用同一个迭代器对象进行迭代. ...