如何在网页上显示html代码

html-css04

如何在网页上显示html代码,第1张

页面中显示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使用嵌入式样式表来样式其内容。