个性化阅读
专注于IT技术分析

html基本标签 – HTML教程

点击下载

上一章HTML教程请查看:html基本概念和入门开发

标题标签

任何文档都以标题开头,你可以使用不同大小的标题。HTML也有6个级别的标题,使用元素<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,在显示任何标题时,浏览器在该标题之前和之后分别添加一行。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>标题标签例子</title>
   </head>
    
   <body>
      <h1>这是标题1</h1>
      <h2>这是标题2</h2>
      <h3>这是标题3</h3>
      <h4>这是标题4</h4>
      <h5>这是标题5</h5>
      <h6>这是标题6</h6>
   </body>
    
</html>

段落标签

<p>标签提供了一种将文本组织成不同段落的方法,每一段文字都应该位于开头<p>和结尾</p>之间,如下例所示:

例子

<!DOCTYPE html>
<html>

   <head>
      <title>段落标签例子</title>
   </head>
    
   <body>
      <p>这是文章的第一段</p>
      <p>这是文章的第二段</p>
      <p>这是文章的第三段</p>
   </body>
    
</html>

换行标签

无论何时使用<br />元素,它后面的任何内容都从下一行开始。这个标签是一个空元素的例子,你不需要打开和关闭标签,因为它们之间没有任何东西。

<br />标记在字符br和正斜杠之间有一个空格。如果你省略了这个空格,旧的浏览器将很难呈现换行符,而如果你错过了正斜杠字符,而只是使用<br>,这在XHTML中是无效的。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>换行标签</title>
   </head>
    
   <body>
      <p>Hello<br />
         第二行<br />
         下一行<br />
         段落结束</p>
   </body>
    
</html>

内容居中标签

可以使用<center>标记将任何内容放到页面中心或任何表单元格中。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>内容居中标签例子</title>
   </head>
    
   <body>
      <p>这个文本不是居中的</p>
      
      <center>
         <p>居中文本</p>
      </center>
   </body>
    
</html>

水平线

水平线用于在视觉上分解文档的各个部分,<hr>标记从文档中的当前位置到右边框创建一行,并相应地中断该行。

例如,你可能想要在两个段落之间划一条线,如下面的例子所示

例子

<!DOCTYPE html>
<html>

   <head>
      <title>水平线例子</title>
   </head>
    
   <body>
      <p>这是第一段,应该在最上面</p>
      <hr />
      <p>这是第二段,应该在下面</p>
   </body>
    
</html>

同样,<hr />标记是空元素的一个例子,你不需要打开和关闭标记,因为在它们之间没有任何内容。

<hr />元素在字符hr和正斜杠之间有一个空格,如果你省略了这个空格,旧的浏览器将难以呈现水平线,而如果你错过了正斜杠字符,而只是使用<hr>,这在XHTML中是无效的

保存格式

有时,你希望文本遵循在HTML文档中编写的格式,在这些情况下,可以使用预格式化标记<pre>。

开始<pre>标记和结束</pre>标记之间的任何文本都将保留源文档的格式。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>保存格式例子</title>
   </head>
    
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
    
</html>

尝试使用相同的代码做对比,而不把它放在<pre>..< / pre >标签之间。

非换行空白Nonbreaking Spaces

假设你想用“十二怒汉”这个短语,在这里,你不会希望浏览器把“十二怒”和“汉”分成两行,

这种技巧的一个例子为电影《十二怒汉》

在不希望客户机浏览器中断文本的情况下,应该使用非换行空白实体,而不是普通的分隔。例如,当你在一个段落中写“十二怒汉”时,你应该使用类似于下面的代码例子

<!DOCTYPE html>
<html>

   <head>
      <title>非换行空白例子</title>
   </head>
    
   <body>
      <p>这种技巧的一个例子为 "12 怒 汉"</p>
   </body>
    
</html>
赞(0)
未经允许不得转载:srcmini » html基本标签 – HTML教程

评论 抢沙发

评论前必须登录!