HTML段落
段落是通过 <p> 标签定义的。
实例:
<p>This is a paragraph</p> <p>This is another paragraph</p>注释:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)
提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。)
HTML 输出 - 有用的提示
我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。对于 HTML,无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
实例:
<html>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
</p>
<p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>
</body>
</html>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
</p>
<p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>
</body>
</html>
以上实例运行的结果是:春眠不觉晓, 处处闻啼鸟。 夜来风雨声, 花落知多少。
注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。
注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。
如需保留空格和换行,可以使用 <pre> 标签:
<pre>
for i = 1 to 10
print i
next i
</pre>
for i = 1 to 10
print i
next i
</pre>
输出结果为:
for i = 1 to 10
print i
next i
print i
next i
文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本。 |
<big> | 定义大号字。 |
<em> | 定义着重文字。 |
<i> | 定义斜体字。 |
<small> | 定义小号字。 |
<strong> | 定义加重语气。 |
<sub> | 定义下标字。 |
<sup> | 定义上标字。 |
<ins> | 定义插入字。 |
<del> | 定义删除字。 |
<s> | 不赞成使用。使用 <del> 代替。 |
<strike> | 不赞成使用。使用 <del> 代替。 |
<u> | 不赞成使用。使用样式(style)代替。 |
HTML 布局 - 使用 <div> 元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局
下面的例子使用五个 div 元素来创建多列布局
<!DOCTYPE html> <html> <head> <style type="text/css"> div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99; height:200px; width:100px; float:left;} div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;} div#footer {background-color:#99bbbb; clear:both; text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0; font-size:14px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright W3School.com.cn</div> </div> </body> </html>