页面中显示HTML标签源代码
归纳几种方法,根据需求选用:
a: 把代码写在文本区域 <textarea>标签中。可以设置 disabled="disabled" 属性,禁止用户操作。
b: 把要显示在html文档中标签的 "<"、">" 用实体字符替换掉。如:&ltp&gt&lt/p&gt 外层嵌套<pre>标签可使页面与HTML格式一致。
C: 用程序批量替换。
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<body>标签中,输入html代码:hello world!。
3、浏览器运行index.html页面,此时页面成功以html的方式渲染了html代码,显示了内容。
html:
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<div>
<h1>My first div</h1>
<p>This div uses inline CSS to style its content.</p>
<style>
h1 {
color: red
}
p {
font-size: 16px
text-align: center
}
</style>
</div>
<div>
<h1>My second div</h1>
<p>This div uses an external CSS file to style its content.</p>
<link rel="stylesheet" type="text/css" href="styles.css">
</div>
<div>
<h1>My third div</h1>
<p>This div uses an embedded style sheet to style its content.</p>
<style>
/* This is an embedded style sheet */
h1 {
color: blue
}
p {
font-size: 14px
text-align: left
}
</style>
</div>
</body>
</html>
style.css:
/* This is an external style sheet */
h1 {
color: green
}
p {
font-size: 18px
text-align: right
}
这段代码中,第一个div使用内联CSS来样式其内容,第二个div使用外部CSS文件来样式其内容,第三个div使用嵌入式样式表来样式其内容。