HTML文本级元素_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:31:11
Original
1213 Leute haben es durchsucht

目录 [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>
Nach dem Login kopieren

文字间隔

  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>
Nach dem Login kopieren

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

<i lang="fr">Oh la la!</i>    
Nach dem Login kopieren

  [1]用于分隔文字

<p>After bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b></p>
Nach dem Login kopieren

  [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>
Nach dem Login kopieren

不精确文字

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

<p>价格<s>¥1298</s>¥998!</p><p><s>37度</s> <strong>41度</strong></p>    
Nach dem Login kopieren

高亮显示

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

<p><mark>We're all hoping it rains soon</mark>, some farmers have installed irrigation systems, at <em>considerable</em> expense</p>
Nach dem Login kopieren

次要评论

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

<small>图片仅供参考,请以实物为准</small><small>Chris Elhorn | The city Press</small>
Nach dem Login kopieren

术语处理

  用来定义术语

<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>
Nach dem Login kopieren

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

<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.</p>
Nach dem Login kopieren

引用

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

<p>我最喜欢的电影是<cite>千与千寻</cite></p>
Nach dem Login kopieren

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

<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>
Nach dem Login kopieren

换行


  换行

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

<p>    <b>The City Press</b><br />    123 General Street <br />    Springfield, OH 45501</p>
Nach dem Login kopieren

 

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

<i>Irrigation<wbr /> Direct</i>
Nach dem Login kopieren

上标下标

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

   表示上标

<p>    a<sup>2</sup>    +    b<sup>2</sup>    =    c<sup>2</sup></p>
Nach dem Login kopieren

   表示下标

<p>    H<sub>2</sub>    SO<sub>4</sub></p>
Nach dem Login kopieren

文本删改

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

   文档中插入的内容

  文档中删除的内容

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

  <属性>

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

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

<p>一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。</p>
Nach dem Login kopieren

特定时间

  <属性>

  [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>
Nach dem Login kopieren

注音标识

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

   表示ruby标记

     表示ruby标记文字

    表示ruby标记括号

<ruby> 漢 <rt> ㄏㄢˋ </rt></ruby>
Nach dem Login kopieren

<ruby>    汉    <rp>(</rp>    <rt>h&agrave;n</rt>    <rp>)</rp>    语    <rp>(</rp>    <rt>yǔ</rt>    <rp>)</rp>    </ruby>
Nach dem Login kopieren

文字方向

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

<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>
Nach dem Login kopieren

计算机代码

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

<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>
Nach dem Login kopieren

 

例子演示

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage