DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 【HTML 元素】標記文字詳解
【HTML 元素】標記文字詳解
編輯：HTML和Xhtml     

1.用基本的文字元素標記內容

先看顯示效果：

對應HTML代碼：

XML/HTML Code復制內容到剪貼板
  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>  

對應元素習慣樣式：

XML/HTML Code復制內容到剪貼板
  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 元素，先看效果：

對應代碼：

XML/HTML Code復制內容到剪貼板
  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 元素可以改變浏覽器處理內容的方式，阻止合並空白字符，讓源文檔中的格式得以保留。

 

XML/HTML Code復制內容到剪貼板
  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

HTML和Xhtml
hr 水平線樣式示例代碼
復制代碼代碼如下: <hr style=width:490px; /> <hr s
開發web app初探:HTML5本地存儲
html5帶給我們的不僅僅是更多語義豐富的標簽，還有更多更牛逼的特性，比如“離線存儲&r
前端開發每天必學之HTML入門介紹
1 HTML介紹1.1 代碼初體驗，制作第一個網頁XML/HTML Code復制內容到剪貼板

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
CSS3文本陰影text-shadow屬性詳解 html插入圖片示例(html添加圖片) 如何實現框架窗口間的關聯及超鏈接的target屬性的使用 src或者css背景圖的url值為base64編碼代碼 通過CSS樣式實現的html背景色漸變效果 在html文件裡include文件內容的方法小結 使用語義化標簽去寫你的HTML 兼容IE6,7,8 HTML 超級鏈接詳細講解 網頁表單元素Input的高級用法11例 當td為空時怎樣顯示其邊框
熱門推薦
HTML5 Canvas的文本筆觸顏色 HTML中div與span的區別(共同點與不同點) 不可不知的URL知識 html中異步上傳文件實現示例 textarea文本域寬度和高度width及height自動適應實現代碼 css sprites適用范圍和css sprites的利弊 HTML5 Canvas的文本度量 折疊的table行元素bug 表格標簽（table）深入了解
大家都在看
CSS 3備受期待的8大功能 jquery五角星評分插件示例分享 CSS中區分IE6，IE7，Firefox三大浏覽器 CSS有趣實例:讓整個網頁翻轉效果 CSS實例:讓頁腳保持在未滿屏頁面的底部 Javascript保存網頁為圖片借助於html2canvas庫實現 CSS中的class與id區別及用法 js格式化時間和js格式化時間戳示例
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved