锐客网

  1. 首页 > 睿知 > it技术 > >

html格式化 – HTML教程

htmlhtml格式化

上一章HTML教程请查看：html属性
【html格式化 – HTML教程】如果你使用文字处理程序，你必须熟悉使文本加粗、斜体或下划线的能力，这只是10个选项中的3个，这些选项用于指示文本如何在HTML和XHTML中显示。
粗体文本任何出现在< b> …< /b> 元素，以粗体显示，如下所示
例子

< !DOCTYPE html> < html>< head> < title>粗体文本示例< /title> < /head>< body> < p>下面的文本字体为< b>粗体< /b> 文本< /p> < /body>< /html>

斜体文本任何出现在< i> …< /i> 元素以斜体显示，如下例所示
< !DOCTYPE html> < html>< head> < title>斜体文本< /title> < /head>< body> < p>下面是一个 < i>斜体文本< /i> 示例.< /p> < /body>< /html>

下划线任何出现在< u> …< u> 元素，用下划线显示，如下例所示
< !DOCTYPE html> < html>< head> < title>下划线文本示例< /title> < /head>< body> < p>以下文字使用< u>下划线< /u>字体。< /p> < /body>< /html>

删除线文本任何出现在< strike> …< strike> 元素显示为删除线，这是一条贯穿文本的细线，如下所示例子：
< !DOCTYPE html> < html>< head> < title>删除线文本< /title> < /head>< body> < p>这里的文本使用< strike>删除线< /strike>字体。< /p> < /body>< /html>

等宽字体< tt> …< /tt> 元素的内容是用等宽字体的，大多数字体被称为可变宽度字体，因为不同的字母有不同的宽度(例如，字母“m”比字母“i”宽)。然而，在等宽字体中，每个字母都有相同的宽度。
例子
< !DOCTYPE html> < html>< head> < title>等宽字体示例< /title> < /head>< body> < p>以下文本使用< tt>等宽< /tt>字体。< /p> < /body>< /html>

上标文本< sup> …< /sup> 元素的文本作为上标，使用的字体大小与周围的字符大小相同，但显示的高度比其他字符高一半。例子
< !DOCTYPE html> < html>< head> < title>上标字体示例< /title> < /head>< body> < p>这是一个 < sup>上标文本< /sup> 示例.< /p> < /body>< /html>

下标文本< sub> …< /sub> 元素的内容为下标文本，使用的字体大小与周围的字符相同，但显示的高度比其他字符低一半。
例子
< !DOCTYPE html> < html>< head> < title>下标文本示例< /title> < /head>< body> < p>这是一个 < sub>下标文本< /sub> 示例.< /p> < /body>< /html>

插入文本出现在< ins> …< /ins> 元素显示为插入的文本。
例子
< !DOCTYPE html> < html>< head> < title>插入文本示例< /title> < /head>< body> < p>我需要 < del>吃饭< /del> < ins>睡觉< /ins>< /p> < /body>< /html>

已删除文本出现在< del> 元素，显示为已删除的文本。
例子
< !DOCTYPE html> < html>< head> < title>已删除文本示例< /title> < /head>< body> < p>我需要 < del>睡觉< /del> < ins>吃饭< /ins>< /p> < /body>< /html>

大文本< big> …< /big> 元素显示的字体比它周围的其他文本大一个，如下所示
例子
< !DOCTYPE html> < html>< head> < title>大文本示例< /title> < /head>< body> < p>这是一个< big>使用大文本< /big> 的示例.< /p> < /body>< /html>

小文本< small> …< /small> 元素显示的字体比它周围的其他文本小一倍，如下所示
例子
< !DOCTYPE html> < html>< head> < title>小文本示例< /title> < /head>< body> < p>以下文本使用< small>很小文本的< /small>字体。< /p> < /body>< /html>

内容分组< div> 和< span> 元素允许你将几个元素组合在一起来创建页面的节或子节。
例如，你可能希望将所有脚注放在< div> 元素内的页面上，以指示< div> 元素内的所有元素都与脚注相关。然后可以将样式附加到这个< div> 元素，以便使用一组特殊的样式规则显示它们。
例子< !DOCTYPE  htm
< !DOCTYPE html> < html>< head> < title>div标签示例< /title> < /head>< body> < div id = "menu" align = "middle" > < a href = "http://www.srcmini.com/index.htm">主页< /a> | < a href = "http://www.srcmini.com/about/contact_us.htm">联系< /a> | < a href = "http://www.srcmini.com/about/index.htm">关于< /a> < /div>< div id = "content" align = "left" bgcolor = "white"> < h5>文章内容< /h5> < p>这里是实际内容.....< /p> < /div> < /body>< /html>

另一方面，< span> 元素只能用于对内联元素进行分组，因此，如果你想将句子或段落的一部分组合在一起，可以使用< span> 元素，如下所示。
例子
< !DOCTYPE html> < html>< head> < title>Span标签示例< /title> < /head>< body> < p>这是一个 < span style = "color:green">span标签< /span>的例子 ，这里是一个< span style = "color:red">div标签< /span>的例子< /p> < /body>< /html>

这些标记通常与CSS一起使用，以便将样式附加到页面的某个部分。

    推荐阅读


    上一篇：html属性 &#8211; HTML教程

    下一篇：html短语标签 &#8211; HTML教程