html+css学习<code>标签和<pre>标签
2016-03-15 23:53
495 查看
想加入一行代码吗?使用<code>标签
在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:<code>var i=i+300;</code>
注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。
语法:
<code>代码语言</code>
注:如果是多行代码,可以使用<pre>标签。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>code标签介绍</title>
</head>
<body>
<p>我们可能知道水平渐变的实现,类似这样:<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
</body>
</html>
使用<pre>标签为你的网页加入大段代码
在上节中介绍加入一行代码的标签为<code>,但是在大多数情况下是需要加入大段代码的,如下图:怎么办?不会是每一代码都加入一个<code>标签吧,没有这么复杂,这时候就可以使用<pre>标签。
语法:
<pre>语言代码段</pre>
<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
如下代码:
<pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
在浏览器中的显示结果为:
在上面的例子中可以看到代码中的空格,换行符都保留下来。如果用以前的方法,回车需要输入
<br>签,空格需要输入
注意:
<pre>标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是
<pre>标签的一个常见应用就是用来展示计算机的源代码。
相关文章推荐
- 《Html+CSS》笔记
- 20 个 CSS 高级技巧汇总
- 08.iOS字体的样式
- css样式的层叠
- 巧用cssText属性
- 学习《HTML+CSS基础课程》里的权值
- 关于css的简介?
- CSS样式
- CSS学习笔记(三):继承、结构和层叠
- 轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher
- DIV+CSS左右列高度自适应问题
- dede过滤内容html样式的函数
- # img 图片垂直剧中
- CSS的三种引入方式
- RadioButton自定义样式及点击事件全解析
- 普通table表格样式及代码大全
- CSS3系列:响应式布局
- CSS3系列:流式(弹性)布局(flex布局)
- Qt中QSlider的样式表设置
- CSS中的块级元素、内联元素(行内元素)