HTML/CSS/Text/code
Содержание
Blocked and preserved Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .blocked {
display: block;
}
* .preserved {
white-space: pre;
}
</style>
</head>
<body>
<p>
<code class="blocked preserved">
*.blocked { display:block; }
*.preserved { white-space:pre; }
*.code { font-family:monospace; }
</code>
</p>
</body>
</html>
code Element For Adding Code to Your Web Pages
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Representing Code, Keyboard Instructions and Programming Variables</title>
</head>
<body>
<h2>The <code> Element For Adding Code to Your Web Pages</h2>
<p>The following line appears inside a <code> element.</p>
<p><code><h1>This is a primary heading</h1></code></p>
</body>
</html>
code must be within pre (inline elements can"t contain block-level elements)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Listing 4-18. Code</title>
</head>
<body>
<pre><code>
function helloWorld() {
var button = document.getElementById("button");
if (button) {
button.onclick = function(){
alert("Hello world!");
}
}
}
</code></pre>
</body>
</html>
Displaying blocks of code online
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Displaying blocks of code online</title>
<style type="text/css" media="screen">
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
.codeList {
border: 1px solid #aaa;
}
.codeList dt {
background: #dddddd;
padding: 7px;
font-weight: bold;
border-bottom: 2px solid #ccc;
}
.codeList li {
background: #ddd;
margin-left: 2.5em;
}
.codeList code {
background: #eaeaea;
display: block;
border-bottom: 2px solid #ffffff;
border-right: 2px solid #ffffff;
font : 1.2em "Courier New", Courier, monospace;
padding: 2px 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<dl class="codeList">
<dt>Writing out list styles in full</dt>
<dd>
<ol>
<li><code>import java</code></li>
<li><code>class MainClass{</code></li>
<li><code> int i;</code></li>
<li><code>public static void main</code></li>
<li><code>}</code></li>
</ol>
</dd>
</dl>
</div>
</body>
</html>
Formula input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .nowrap {
white-space: nowrap;
}
* .preserved {
white-space: pre;
}
</style>
</head>
<body>
<p><code class="nowrap preserved">a = x(y<sup>2</sup> + z<sup>3</sup>) + 1</code>.
</body>
</html>