【HTML 元素】标记文字详解

1.用基本的文字元素标记内容

先看显示效果：

对应HTML代码：

1. !DOCTYPE html>   
2. html lang="en">   
3. head>   
4.     meta charset="UTF-8">   
5.     tITle> Learn4Font/title>   
6. /head>   
7. body>   
8. p>  元素 b —— b>  I am the example./b> /p>   
9. p>  元素 em —— em>  I am the example./em> /p>   
10. p>  元素 i —— i>  I am the example./i> /p>   
11. p>  元素 s —— s>  I am the example./s> /p>   
12. p>  元素 strong —— strong>  I am the example./strong> /p>   
13. p>  元素 u —— u>  I am the example./u> /p>   
14. p>  元素 small —— small>  I am the example./small> /p>   
15. p>  元素 sub —— sub>  I am the example./sub> /p>   
16. p>  元素 sup —— sup>  I am the example./sup> /p>   
17. /body>   
18. /html>   

对应元素习惯样式：

1. *一般表示关键词和产品名称*   
2. b{ font-weight: bolder; }   
3.   
4. *一般表示加以强调*   
5. em { font-style: italic; }   
6.   
7. *一般表示外文词语或科技术语*   
8. i { font-style: italic; }   
9.   
10. *一般表示不准确或校正*   
11. s { text-decoration: line-through; }   
12.   
13. *一般表示重要文字*   
14. strong { font-weight: bolder; }   
15.   
16. *一般表示为文字添加下划线*   
17. u { text-decoration: underline; }   
18.   
19. *一般表示为添加小号字体内容*   
20. small { font-Size: small; }   
21.   
22. *一般表示添加上标和下标*   
23. sup { vertical-align: sub;  font-size: smaller; }   
24. sub { vertical-align: super;  font-size:smaller; }   

2.使用语言元素

ruby、rt 和 rp 元素，先看效果：

对应代码：

1. p style=" font-size: 3em; ">   
2.     ruby> 魑rp> (/rp> rt> chī/rt> rp> )/rp> /ruby>   
3.     ruby> 魅rp> (/rp> rt> mèi/rt> rp> )/rp> /ruby>   
4.     ruby> 魍rp> (/rp> rt> wǎng/rt> rp> )/rp> /ruby>   
5.     ruby> 魉rp> (/rp> rt> liǎng/rt> rp> )/rp> /ruby>   
6. /p>   

3.使用预先编排好格式的内容

PRe 元素可以改变浏览器处理内容的方式，阻止合并空白字符，让源文档中的格式得以保留。

1. pre>   
2.     code>   
3.         VAR fruits = ["apples","oranges","mangoes","cherries"];   
4.         for(var i= 0;  i  fruits.length;  i++){   
5.             document.writeln("I like " + fruits[i]);   
6.         }   
7.     /code>   
8. /pre>   

以上这篇【HTML 元素】标记文字详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.COM/luka/Archive/2016/07/23/5532134.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！