html:(12):pre和ul-li

使用<pre>标签为你的网页加入大段代码

在上节中介绍加入一行代码的标签为<code>，但是在大多数情况下是需要加入大段代码的，如下图：

怎么办？不会是每一代码都加入一个<code>标签吧，没有这么复杂，这时候就可以使用<pre>标签。

语法：

<pre>语言代码段</pre>

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

如下代码：

<pre>var message="欢迎";for(var i=1;i<=10;i++){alert(message);}
</pre>

在浏览器中的显示结果为：

在上面的例子中可以看到代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入<br>签，空格需要输入 

注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pre标签的使用</title>
</head><body><pre>
var message="欢迎";
for(var i=1;i<=10;i++)<br>
{<br>alert(message); <br>
}<br></pre>
</body>
</html>

运行结果

使用ul，添加新闻信息列表

在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。

新闻列表

图片列表

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

语法：

<ul><li>信息</li><li>信息</li>......
</ul>

举例：

<ul><li>精彩少年</li><li>美丽突然出现</li><li>触动心灵的旋律</li>
</ul>

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<ul><li>我的第一个列表信息</li></ul></body>
</html>

运行结果

html:(12):pre和ul-li相关推荐

如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]
本文翻译自:How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [du ...
css技巧之如何实现ul li边框重合
提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...
用ul li实现边框重合并附带鼠标经过效果
边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 1 <!DOCTYPE html> 2 <html lang ...
html5 ul li 自动收回,vue遍历四个ul ，每个ul中有四个li.如何不破坏html结构？
由于页面中使用了css3方法 ul>li*4 margin-right:0; 导致只能用ul允许存在四个li .不然在ul多了五个li. 页面就不好看了. // CurriculumSpeci ...
html怎么实现单个li效果,基于DIV+ul+li实现的表格(多示例)
普通的显示数据的时候,ul就是项目列表,li就是列表项.可以用来显示数据.如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度.行间距.背景边框等需要配合CSS一起设 ...
jquery ul li左右拖动
最近做影视的时候遇到一个集数分集显示,类似下面的效果[用的jquery iscroll插件] 在手机端预览的时候可以左右拖动集数效果如下 html: <div class="le ...
html ul做成表格,ul li css制作表格
实现方法:(利用div的ul和li列表标记打造类似表格效果) 我们首先分析一下如何制作:li是固定的宽度与高度(单元格),设置li在ul中浮动,当ul不够宽的时候,li就会自动另起一行排列(一行有多少 ...
html ul li 行显示li 间距,[ 求助 ] 让ul li缩小行间距的CSS代码是什么？
我在网页中插入如下一段RSS阅读器代码: 复制内容到剪贴板代码: Subscribe to RSS headline updates from: Powered by FeedBurner 可是保存 ...
ul li设置横排，并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单让ul li横向排列及圆点处理我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

html:(12):pre和ul-li

使用<pre>标签为你的网页加入大段代码

使用ul，添加新闻信息列表

html:(12):pre和ul-li相关推荐

最新文章

热门文章