Skip to content

Latest commit

 

History

History
304 lines (195 loc) · 6.45 KB

structure_eleInline.md

File metadata and controls

304 lines (195 loc) · 6.45 KB

HTML内联元素

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

 

通用容器

  <span>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者Id属性)，或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span>与<div>元素很相似，但<div>是一个块元素而则是行内元素

<p>Some <span>text</span></p>

 

强调重要

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

<em>  表示强调，<em>元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读

<strong>  表示重要

<p>I am <em>very</em> worried!</p>
<strong>warning</strong>

 

文字间隔

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

<i>

  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>

 

<b>

  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>

 

不精确文字

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

<p>价格<s>￥1298</s>￥998！</p>
<p><s>37度</s> <strong>41度</strong></p>

 

高亮显示

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

<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>
<small>Chris Elhorn | The city Press</small>

 

术语处理

<dfn>  用来定义术语

<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>

 

<abbr>  缩写词，可以配合<dfn>定义术语

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

 

引用

<cite>  表示作品标题的引用，可以是书影音画等

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

 

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

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

 

换行

<br>  换行

  注意：<br>标签是文本级语义元素，可以设置行高和字体大小，但设置宽高无效

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

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

<i>Irrigation<wbr /> Direct</i>

 

上标下标

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

<sup>  表示上标

<p>
    a<sup>2</sup>
    +
    b<sup>2</sup>
    =
    c<sup>2</sup>
</p>

 

<sub>  表示下标

<p>
    H<sub>2</sub>
    SO<sub>4</sub>
</p>

 

文本删改

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

<ins>  文档中插入的内容

<del>  文档中删除的内容

  注意：<ins>和<del>可以嵌套任何元素

【属性】

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

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

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

 

特定时间

<time>  表示日期或时间

【属性】

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

  2、pubdate表示<time>元素中的日期或时间是文档的发布日期

<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标记

<rt>  表示ruby标记文字

<rp>  表示ruby标记括号

<ruby>
 漢 <rt> ㄏㄢˋ </rt>
</ruby>

<ruby>
  汉
  <rp>(</rp>
  <rt>hàn</rt>
  <rp>)</rp>
  语
  <rp>(</rp>
  <rt>yǔ</rt>
  <rp>)</rp>    
</ruby>

 

文字方向

<bdi>  忽略周围文字方向的文字

<bdo>  覆盖两种方向的设置，允许显式设置方向，并覆盖所有其他当前方向

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

 

代码

<code>  表示计算机代码

<kbd>  定义键盘码

<samp>  定义计算机例子代码

<tt>  定义打字机代码

<var>  定义变量

<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>

 

例子演示

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

<iframe src="https://demo.xiaohuochai.site/html/inline/i111.html" frameborder="0" width="100%" height="350"></iframe>