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>签,空格需要输入&nbsp;

注意:<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>

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/425742.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sudoku Extension UVALive - 4763

题目地址 https://icpcarchive.ecs.baylor.edu/index.php?optioncom_onlinejudge&Itemid8&pageshow_problem&problem2764就是让你写一个计算数独的程序 这个程序有几个条件 1 输入o处填奇数2 输入e处天偶数3 输入0处随便填4 输入相同小写字符的地方要写相同的数5 …

[Leedcode][JAVA][第394题][字符串解码][栈][类型转换]

【问题描述】[中等] 给定一个经过编码的字符串&#xff0c;返回它解码后的字符串。编码规则为: k[encoded_string]&#xff0c;表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。你可以认为输入字符串总是有效的&#xff1b;输入字符串中没有额外的空…

2019昆明计算机会议,计算机 | ACSAC 2019等国际会议信息6条

图形学与多媒体IPTA 2019International Conference on Image Processing Theory, Tools and Applications全文截稿: 2019-06-02开会时间: 2019-11-06会议难度: ★★CCF分类: 无会议地点: Istanbul, Turkey网址&#xff1a;http://www.ipta-conference.com/ipta19/The ninth Int…

html:(13):ol-li和div作用

使用ol&#xff0c;添加图书销售排行榜 如果想在网页中展示有前后顺序的信息列表&#xff0c;怎么办呢&#xff1f;如&#xff0c;当当网上的书籍热卖排行榜&#xff0c;如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。 语法&#xff1a; <ol>…

粮草先行——Android折叠屏开发技术点番外篇之运行时变更处理原则

上一篇文章中&#xff0c;我们有提到Activity在屏幕尺寸发生变更时的处理方式&#xff0c;总共有两种&#xff1a; 重启APP以适应屏幕改变&#xff1b;手动处理数据&#xff0c;避免APP重启。同样&#xff0c;这两种方式也同时适用于改变屏幕方向、更改系统语言、甚至输入法等等…

Not Equal on a Segment CodeForces - 622C

You are given array a with n integers and m queries. The i-th query is given with three integers li, ri, xi. For the i-th query find any position pi (li ≤ pi ≤ ri) so that api ≠ xi. InputThe first line contains two integers n, m (1 ≤ n, m …

[剑指offer][JAVA]面试题第[05]题[替换空格][StringBuilder/Buffer]

【问题描述】[简单] 请实现一个函数&#xff0c;把字符串 s 中的每个空格替换成"%20"。示例 1&#xff1a;输入&#xff1a;s "We are happy." 输出&#xff1a;"We%20are%20happy."限制&#xff1a;0 < s 的长度 < 10000【解答思路】 …

计算机表格最高分,excel表格里怎样算最高分

在Excel中录入好数据以后进行数据统计&#xff0c;再统计过后多数需要算出最高值得&#xff0c;有些朋友可能不太会求最高值&#xff0c;接下来是学习啦小编为大家带来的excel如何求最高值的方法&#xff0c;欢迎大家来到学习啦学习。excel表格算最高分的方法1&#xff1a;下图…

html:(14):给div命名和table标签

给div命名&#xff0c;使逻辑更加清晰 在上一小节中&#xff0c;我们把一些标签放进<div>里&#xff0c;划分出一个独立的逻辑部分。为了使逻辑更加清晰&#xff0c;我们可以为这一个独立的逻辑部分设置一个名称&#xff0c;用id属性来为<div>提供唯一的名称&…

缓存过期时间的设置

使用 slidingExpiration 时间时&#xff0c;如果再次命中&#xff0c;将延长缓存项目的生命期使用 expireTime 时&#xff0c;无论是否命中&#xff0c;时间到时&#xff0c;都将失效。 转载于:https://www.cnblogs.com/yyj/p/10373882.html

不要62-三种写法

杭州人称那些傻乎乎粘嗒嗒的人为62&#xff08;音&#xff1a;laoer&#xff09;。 杭州交通管理局经常会扩充一些的士车牌照&#xff0c;新近出来一个好消息&#xff0c;以后上牌照&#xff0c;不再含有不吉利的数字了&#xff0c;这样一来&#xff0c;就可以消除个别的士司机…

杜克大学计算机硕士要几年,2017杜克大学春季不招计算机专业的硕士?

原标题&#xff1a;2017杜克大学春季不招计算机专业的硕士&#xff1f;计算机科学&#xff0c;理工科中常申请的一个专业&#xff0c;每一年都会有大批的计算机同学奔赴战场&#xff0c;准备材料&#xff0c;刷托福GRE考高分&#xff0c;只为等待自己心中梦寐以求学校的那片橄榄…

[剑指offer][JAVA]面试题第[06]题[从尾到头打印链表][栈][递归]

【问题描述】[简单] 输入一个链表的头节点&#xff0c;从尾到头反过来返回每个节点的值&#xff08;用数组返回&#xff09;。示例 1&#xff1a;输入&#xff1a;head [1,3,2] 输出&#xff1a;[2,3,1]限制&#xff1a; 0 < 链表长度 < 10000【解答思路】 1. 常规思路…

jQuery使用(八):运动方法

show()、hide()、toggle()参数&#xff1a;null或(duration,easing,callblack)fadeIn()、fadeout()、fadeToggle()、fadeTo()参数&#xff1a;null或(duration,[opacity],easing,callblack)slideDown(),slideUp(),slideToggle()参数&#xff1a;null或(duration,easing,callbla…

服务器重装后怎么装系统,服务器如何安装系统,小编教你如何安装

相对于普通PC来说&#xff0c;服务器有很多优点&#xff0c;比如在工作上的效率会比PC高出许多&#xff0c;但也有一些缺点其中的服务器系统的安装有时候缺乏人性化就是原因之一了。第一次安装服务器系统&#xff0c;会遇到很多麻烦&#xff0c;下面&#xff0c;小编就给大家带…

html:(15):用css样式给表格添加边框和caption标签

用css样式&#xff0c;为表格加入边框 Table 表格在没有添加 css 样式之前&#xff0c;是没有边框的。这样不便于我们后期合并单元格知识点的讲解&#xff0c;所以在这一节中我们为表格添加一些样式&#xff0c;为它添加边框。 在右侧代码编辑器中添加如下代码&#xff1a; …

Java集合容器面试题

文章目录集合容器概述什么是集合集合的特点集合和数组的区别使用集合框架的好处常用的集合类有哪些&#xff1f;List&#xff0c;Set&#xff0c;Map三者的区别&#xff1f;List、Set、Map 是否继承自 Collection 接口&#xff1f;List、Map、Set 三个接口存取元素时&#xff0…

Ubuntu Linux 解决 bash ./ 没有那个文件或目录 的方法

Ubuntu Linux 解决 bash ./ 没有那个文件或目录 的方法 遇到这个问题是为了sublime配置c/c 编译环境 当运行程序打开终端时 出现以上问题 先新建build system 用以下代码 {"shell_cmd": "g \"${file}\" -o \"${file_path}/${file_base_name}\&qu…

sql server 备份计划

SSMS 1.管理 2.维护计划 3.维护计划向导 或者 1. server 代理 2. 作业 3. 新建作业 备份计划时间尽量选在闲时&#xff0c; 例如午夜 转载于:https://www.cnblogs.com/dream-life/p/10380621.html

荒野行动服务器维护,荒野行动11月30日维护更新完毕服务器已开放 ! 更新优化内容说明...

荒野行动11月30日服务器维护完了&#xff0c;这里手机乐园寻隐者不遇小编给大家带来了具体的优化和更新的内容&#xff0c;咱们往下看&#xff01;亲爱的荒野精英们&#xff1a;欢迎加入《荒野行动》&#xff0c;享受畅快的射击竞技游戏。我们计划在北京时间11月30日凌晨6-8点&…