首頁 > web前端 > html教學 > HTML文本级元素_html/css_WEB-ITnose

HTML文本级元素_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:31:11
原創
1232 人瀏覽過

目录 [1]强调重要 [2]文字间隔 [3]不精确文字 [4]高亮显示 [5]次要评论 [6]术语处理 [7]引用 [8]换行 [9]上标下标 [10]文本删改 [11]特定时间 [12]注音标识 [13]文字方向 [14]计算机代码 例子演示

前面的话

  用于标记段落里的文本和其他内容组的元素种类很多,将这些文本级元素进行简单分类,便于整理和记忆

 

文本元素

强调重要

  虽然浏览器通常用斜体和粗体来显示em和strong,但这些元素不应用作加粗和斜体。这两个元素分别用来提升包含内容的强调程度和重要性

      表示强调

   表示重要

<p>I am <em>very</em> worried!</p><strong>warning</strong>
登入後複製

文字间隔

  i和b元素历来是用来展示粗体和斜体字体的,但在HTML5中,它们有了新的语义

  [1]表示不同情绪或声音的文本,如内心对白

<p>Simon smirked,"Yes,I'm happy to take the garbage out." <i>Ugh,I <em>really</em> don't want to !</i> he thought as he picked up the garbage bag.</p>
登入後複製

  [2]表示外来语、分类学名和技术术语等

<i lang="fr">Oh la la!</i>    
登入後複製

  [1]用于分隔文字

<p>After bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b></p>
登入後複製

  [2]用于文章或故事的引言

<p><b class="lede">Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.</b></p>
登入後複製

不精确文字

   在HTML5中重新定义为有错的、过时的、不被建议使用的文本,常用于表示价格变动等

<p>价格<s>¥1298</s>¥998!</p><p><s>37度</s> <strong>41度</strong></p>    
登入後複製

高亮显示

   表示高亮或用于引用而标记的文字

<p><mark>We're all hoping it rains soon</mark>, some farmers have installed irrigation systems, at <em>considerable</em> expense</p>
登入後複製

次要评论

   表示旁注,可用于免责声明、使用条款和版权信息等需要小字体的场景

<small>图片仅供参考,请以实物为准</small><small>Chris Elhorn | The city Press</small>
登入後複製

术语处理

  用来定义术语

<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>
登入後複製

   缩写词,可以配合定义术语

<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.</p>
登入後複製

引用

   表示作品标题的引用,可以是书影音画等

<p>我最喜欢的电影是<cite>千与千寻</cite></p>
登入後複製

   表示短引用,常用于引用别人说的话,用引号可以表达等价语义

<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>
登入後複製

换行


  换行

  [注意]
标签是文本级语义元素,可以设置行高和字体大小,但设置宽高无效

<p>    <b>The City Press</b><br />    123 General Street <br />    Springfield, OH 45501</p>
登入後複製

 

   需要时指定单词可以换行的位置

<i>Irrigation<wbr /> Direct</i>
登入後複製

上标下标

  这两个标签在数学等式、科学符号和化学公式中非常有用

   表示上标

<p>    a<sup>2</sup>    +    b<sup>2</sup>    =    c<sup>2</sup></p>
登入後複製

   表示下标

<p>    H<sub>2</sub>    SO<sub>4</sub></p>
登入後複製

文本删改

  如果要表示文档的增删改记录,则应该使用ins和del标签

   文档中插入的内容

  文档中删除的内容

  [注意]可以嵌套任何元素

  <属性>

  [1]datetime:用于标明编辑的日期和可选的时间

  [2]cite:用于指定说明编辑的文档网址

<p>一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。</p>
登入後複製

特定时间

  <属性>

  [1]datatime表示确切的时间,遵循格式YYYY-MM-DDThh:mm:ssTZD,表示年-月-天-分割符T-时-分-秒-时区

  [2]pubdate表示

<p>我们在每天早上 <time>9:00</time> 开始营业。</p><p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p><small>Posted <time datetime="2015-12-30T00:00:00UTC+08:00"></time></small>
登入後複製

注音标识

  ruby标签定义注音标识,多用于CJK文字,CJK是指中日韩统一表意文字(Chinese、Japanese、Korean)

   表示ruby标记

     表示ruby标记文字

    表示ruby标记括号

<ruby> 漢 <rt> ㄏㄢˋ </rt></ruby>
登入後複製

<ruby>    汉    <rp>(</rp>    <rt>h&agrave;n</rt>    <rp>)</rp>    语    <rp>(</rp>    <rt>yǔ</rt>    <rp>)</rp>    </ruby>
登入後複製

文字方向

   忽略周围文字方向的文字
   覆盖两种方向的设置,允许显式设置方向,并覆盖所有其他当前方向

<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>
登入後複製

计算机代码

    表示计算机代码
    定义键盘码
   定义计算机例子代码
     定义打字机代码
     定义变量

<p>    <code>Computer code</code>    <br />    <kbd>Keyboard input</kbd>    <br />    <tt>Teletype text</tt>    <br />    <samp>Sample text</samp>    <br />    <var>Computer variable</var>    <br /></p>
登入後複製

 

例子演示

   点击下列相应标签名可进行演示

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板