HTML内联元素

前面的话

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

 

通用容器

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

元素很相似，但

是一个块元素而则是行内元素

Some text

 

强调重要

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

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

 　　 表示重要

I am very worried!
warning

 

文字间隔

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

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

Simon smirked,"Yes,I'm happy to take the garbage out." Ugh,I really don't want to ! he thought as he picked up the garbage bag.

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

"fr">Oh la la!    

 

　　[1]用于分隔文字

After bringing water to a boil, add potatoes and carrots

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

class="lede">Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.

 

不精确文字

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

价格￥1298￥998！
37度 41度
    

 

高亮显示

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

We're all hoping it rains soon, some farmers have installed irrigation systems, at considerable expense

 

次要评论

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

图片仅供参考，请以实物为准
Chris Elhorn | The city Press

 

术语处理

 　　用来定义术语

The term organic food refers to food produced without synthetic chemicals

 

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

The "Garage Door Operner">GDO id a device allows off-world teams to open the iris.

 

引用

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

我最喜欢的电影是千与千寻

 

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

The judge said You can drink water form the fish tank but advised against it.

 

换行

 　　换行

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

    The City Press

    123 General Street 

    Springfield, OH 45501

　

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

Irrigation Direct

 

上标下标

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

　　 表示上标

    a2
    +
    b2
    =
    c2

 

　　 表示下标

    H2
    SO4

 

文本删改

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

　　 文档中插入的内容

 　　文档中删除的内容

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

　　<属性>

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

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

一打有 "2015-12-30T00:00Z" cite="edit.html">二十 十二 件。

 

特定时间

 　　表示日期或时间

　　<属性>

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

　　[2]pubdate表示元素中的日期或时间是文档的发布日期

我们在每天早上 9:00 开始营业。
我在"2008-02-14">情人节有个约会。
Posted "2015-12-30T00:00:00UTC+08:00">

 

注音标识

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

 　   　表示ruby标记

 　　　 　表示ruby标记文字

 　　　　表示ruby标记括号

 漢  ㄏㄢˋ 

    汉
    (
    hàn
    )
    语
    (
    yǔ
    )    

 

文字方向

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

When rendered by a browser, "rtl">these words will appear as 'sdroweseht'

 

代码

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

    Computer code
    

    Keyboard input
    

    Teletype text
    

    Sample text
    

    <var>Computer variablevar>
    

 

例子演示

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