前面的话

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

通用容器

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

<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>¥</s>¥!</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 />
General Street <br />
Springfield, OH
</p>

 

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

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

上标下标

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

<sup>   表示上标

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

<sub>   表示下标

<p>
H<sub></sub>
SO<sub></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>:</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>

例子演示

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

HTML内联元素的更多相关文章

  1. Css中的两个重要概念:块状元素和内联元素

    一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...

  2. 为何img、input等内联元素可以设置宽、高

    元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”).但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而&l ...

  3. html标签分两种:块状元素和内联元素

      块状元素一般是其它元素的容器,可以容纳内联元素和其它块状元素,独占一行,宽度和高度起作用.如div,p等标签属于块状元素.     内联元素只能容纳文本和其它内联元素,可与其它内联元素位于同一行, ...

  4. 块状元素(div)与内联元素(span)

    <pre class="html" name="code"><html xmlns="http://www.w3.org/1999/ ...

  5. img 是内联元素

    图片是内联元素 ,同时是内联替换元素(替换元素是能设置宽和高的) 取消图片的magin display:block;(一般初始化标签中会把图片设置成块状) replaced element <i ...

  6. css块级元素,内联元素,内联块状元素

    块元素 什么是块级元素?在html中<div><p><h1><form><ul>之类的就是块级元素.设置display:block是就将元素 ...

  7. span 与p 的区别,以及内联元素的作用

    1.一般标签都有语义,p标签是指一个段落,而且默认是一个块级元素,span是一个行内元素的代表,没有什么意思,一般可以放文字等行内元素,例如<p>这是一段简介内容这是一段 <span ...

  8. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

  9. Code笔记之:CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  10. css 内联元素

    内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念.内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一 ...

随机推荐

  1. MongoDB学习笔记-05 聚合

    MongoDB除了基本查询功能之外,还有强大的聚合工具,其中包括:count().distinct().group().mapreduce. 计数函数count count是最简单的聚合工具,用于返回 ...

  2. ubuntu安装packet提示重复冲突问题

    今天装个zip出现: dpkg: error processing archive /var/cache/apt/archives/libc6-dev-i386_2.19-0ubuntu6.5_amd ...

  3. 5.webService拦截器

    CXF为什么要设计拦截器? 为了在webservice请求过程中,能动态操作请求和响应数据, CXF设计了拦截器. 拦截器分类 1.按所处的位置分:服务器端拦截器,客户端拦截器 2.按消息的方向分:入 ...

  4. bzoj 3110

    题意:戳这里 思路:可以用cdq分治(很明显这种模型妹纸分治法很解决)..不过为了学习树套树特地写了一下.. 所谓的树套树也第一层(最外层)普通的维护的是一个node,而树套树维护的是一个数据结构(一 ...

  5. 在 Vagrant 下启用 SMB 文件共享

    在使用 vagrant 搭建 php 开发环境的时候,需要用到文件同步同步功能.在比对了众多网络文件系统之后,发现对 Windows 下文件同步系统最友好的是 smb, 那么怎么在 vagrant 启 ...

  6. Ubuntu Tftpd服务配置

    ---恢复内容开始--- 服务器端(ip:192.168.1.100) #安装tftpd-hpa sudo apt-get install tftpd-hpa 修改配置文件 sudo vim /etc ...

  7. 我的ORM之十三 -- 性能参数

    我的ORM索引 测试环境 台式机: 主板:映泰Z77 CPU:i5 3470(3.2GHz) 内存:DDR3 1600 8G(单条) 硬盘:创见 SSD 256G ORM从过程上,可以分两个大的部分: ...

  8. 设计模式之美:Template Method(模板方法)

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Template Method 模式结构样式代码. 意图 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中. Templat ...

  9. 【WEB】Tomcat基础使用知识

    由于当前项目性质原因,从开始到现在使用的WEB服务器都是WAS,而Tomcat的基础知识也慢慢地被遗忘.由于种种原因,让我参与到了另外一个全新的项目,使用的是Tomcat6.X,所以复习是必须的,而写 ...

  10. 冲刺阶段 day 14

    项目进展 经过这几个星期的努力,我们已经完成了我们的软件工程项目,经过多次测试,项目已经可以准确无误地运行. 存在问题 测试期间,未发现问题. 心得体会 在这几个星期的努力下,我们终于完成了我们预期的 ...