HTML文本级元素_html/css_WEB-ITnose-HTML Tutorial-php.cn

HTML文本级元素_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:31:11

Original

1233 people have browsed it

目录 [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>

Copy after login

文字间隔

　　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.
Copy after login

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

Oh la la!
Copy after login

　　[1]用于分隔文字

After bringing water to a boil, add potatoes and carrots
Copy after login

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

Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.
Copy after login

不精确文字

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

价格<s>￥1298</s>￥998！<s>37度</s> 41度
Copy after login

高亮显示

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

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

次要评论

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

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

术语处理

　　用来定义术语

The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals
Copy after login

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

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

引用

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

我最喜欢的电影是<cite>千与千寻</cite>
Copy after login

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

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

换行

　　换行

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

 The City Press 123 General Street Springfield, OH 45501
Copy after login

　

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

Irrigation Direct
Copy after login

上标下标

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

^表示上标

 a2 + b2 = c2
Copy after login

_表示下标

 H2 SO4
Copy after login

文本删改

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

　　文档中插入的内容

　　~~文档中删除的内容~~

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

　　<属性>

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

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

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

特定时间

　　表示日期或时间

　　<属性>

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

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

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

注音标识

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

　　表示ruby标记

　　　　表示ruby标记文字

　　　　表示ruby标记括号

<ruby> 漢 <rt> ㄏㄢˋ </rt></ruby>
Copy after login

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

文字方向

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

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

计算机代码

　　　 表示计算机代码　　　定义键盘码　　定义计算机例子代码　　　　定义打字机代码　　　　定义变量
 <code>Computer code</code> <kbd>Keyboard input</kbd> <tt>Teletype text</tt> <samp>Sample text</samp> <var>Computer variable</var> Copy after login 例子演示　　点击下列相应标签名可进行演示