文本层面的元素(简称文本元素),把这些元素加入文本当中,也就引入了结构和含义。

html5规范明确指出:使用元素应该完全从元素的语义出发。但这类元素中有些元素的含义非常明确,有些则比较含糊。在元素的使用上最好做到“将呈现工作交给css打理”,但这并不是绝对的,有时候只要保持html文档中的一致性就好。

生成超链接

a元素用于生成超链接,a元素有6个局部属性:

1)href:指定a元素所指资源的url;

2)hreflang:说明所链接资源使用的语言;

3)media:说明说链接资源用于哪种设备,同style元素的media属性;

4)rel:说明文档与所链接资源的关系类型,同link元素的rel属性;

5)target:指定用于打开所链接资源的浏览环境;

6)type:说明所链接资源的mime类型(比如text/html)。

生成指向外部的超链接

i like apples and oranges.url中用得最多的协议就是http,但也支持其它协议,例如:https和ftp。如果想引用一个电子邮箱地址,可以使用mailto协议,如:mailto:adam@mydomain.com。

使用相对url

...... you can see other fruits i like here.默认情况下,浏览器会假定目标资源与当前文档位于同一位置,不过可以通过base元素提供一个基础url加以改变。

生成内部超链接

该方式用于将统一文档中的另一个元素移入视野,需要是使用id选择表达式:#。

...... you can see other fruits i like here. ......

i also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.

用户点击链接,文档就会滚动到能看到id为fruits的元素的位置。

设置浏览环境

target属性用于告诉浏览器希望将所链接的资源显示在哪里。默认情况下,浏览器使用当前文档的窗口、标签页或窗框,所以新文档会取代现在显示的文档,但你可以设置其它值:

1)_blank:在新窗口或标签页中打开文档;

2)_parent:在父窗框(frameset)中打开文档;

3)_self:在当前窗口中打开文档(默认);

4)_top:在顶层窗口打开文档;

5):在指定窗框中打开文档,这里的是表示窗口的名称。

下面通过一个例子帮助你理解frame。假定testframe.html文档中的代码如下:

这里定义了一个frameset,里面包含两个frame,宽度各占一半,第一个frame指向了一个html文档,第二个frame被赋予了名称frame1。test.html的内容如下:

w3c web site在a元素中我们定义了target微frame1,这样在点击链接时,将在frame1中打开新的页面。

标记内容

b元素

在html4中b元素只具有呈线性质的含义,在html5中,用于标识关键词和产品评论中的产品名称。

i like apples and oranges.b元素的默认样式是粗体。

em元素

em元素表示对一段文字的强调,可以用来向读者提供关于句子或段落含义的一种语境。

i like apples and oranges.em元素的习惯样式是斜体字。此例对句子开头的i进行了强调。

i元素

i元素表示一段文字与周围内容有本质区别,常用于外文词语、科技术语甚至某人的想法。

i like apples and oranges. my favorite kind of orange is the mandarin, properly known as citrus reticulata.i元素的习惯样式是斜体,同em元素。

s元素

s元素用来表示一段文字不再正确或准确,习惯样式是在文字上显示一条删除线。

i like apples and oranges. my favorite kind of orange is the mandarin, properly known as citrus reticulata. oranges at my local store cost $1 eanch $2 for 3.

strong元素

strong元素表示一段重要文字。

i like apples and oranges. warning: eating too many oranges can give you heart burn.strong元素的样式同b元素。

u元素

u元素让一段文字从周围内容中凸现出来,但并不表示强调或其重要性有所增加。效果就是为文字添加下划线。

i like apples and oranges. warning: eating too many oranges can give you heart burn.由于u元素的习惯样式与a元素类似,为了防止混淆,应该尽量避免使用u元素。

small元素

html5中使用small标签指定细则,通常包括免责声明、注意事项、法律限制、版权信息等。有时还可以用它来表示署名,或者满足许可要求。

order now to receive free shipping. (some restrictions may apply.)

...

© 2013 the super store. all rights reserved.

注意:small只适用于短语,不要用它标记长的法律声明,如“使用条款”和“隐私政策”页面。

sub和sup元素

sub和sup元素分别用于表示下标和上标。

the point x10 is the 10th point.

换行

有两个元素可以用来控制内容换行:br和wbr元素。

br元素

br元素会引起一次换行,br元素只宜用在换行也是内容的一部分的情况,切勿用它创建段落或别的内容组。

i wandered lonely as a cloud

that floats on high 0'er vales and hills,

when all at once i saw a crowd,

a host, of golden daffodils;

wbr元素

html5新增,用于表示长度超过当前浏览器窗口的内容适合再次换行,究竟换不换行由浏览器决定,wbr元素只不过是对恰当的换行位置的建议而已。

this is a very long word: supercalifragilisticexpialidocious.不使用wbr元素时,浏览器会将长单词作为一个整体进行处理,而使用了wbr元素,浏览器则可以选择在建议处换行。使用wbr元素,就是告诉浏览器一个单词最适合在什么地方那个拆分。

表示输入和输出

1)code:表示计算机代码片段

2)var:在语境中表示变量,也可表示一个供读者在想象中插入一个指定值的占位符

3)samp:表示程序或计算机的输出

4)kbd:表示用户输入

var fruits = ["apples", "oranges", "mangoes", "cherries"];

document.writeln("i like " + fruits.length + " fruits");

the variable in this example is fruits

the output from the code is: i like 4 fruits

when prompted for my favorite fruit, i typed: cherries

使用标题引用、引文、定义和缩写

abbr元素

表示缩写,其title属性表示该缩写代表的完整词语。

i like apples and oranges. the vcmlkysbezxbhcnrtzw50ig9mienpdhj1cw==">fdoc regulates the florida citrus industry.

dfn元素

表示定义中的术语,即用来解释一个词(或短语)的含义的句子中的词(或短语)。如果要为dfn元素设置title属性,那么必须将其设置为所定义的术语。

the apple is the pomaceous fruit of the apple tree, species malus domestica in the rose family.

该元素没有习惯样式,因此其内容看上去没有什么特别之处。

q元素

表示引自他处的内容。q元素的cite属性可以用来指定来源文章的url。

the apple is the pomaceous fruit of the apple tree, species malus domestica in the rose family.

q元素的习惯样式是在引文前后生成引号。

cite元素

表示所引用作品的标题。

my favorite book on fruit is fruit: edible, inedible, incredible by stuppy & kesseler其习惯样式是斜体。

使用语言元素

ruby、rt和rp元素

ruby元素表示一段包含注音符号的文字,需要与rt元素和rp元素搭配使用,rt元素用来标记注音符号,rp元素则用来标记供不支持注音符号特性的浏览器显示在注音符号前后的括号。

魑(chi) 魅(mei)当显示在支持注音符号的浏览器中时,rp元素及其内容会被忽略,rt元素的内容则会作为注音符号显示。而在不支持注音符号的浏览器中显示该文档,那么rp和rt元素的内容都会被显示出来。

bdo元素

用来设置其内容中文字的方向。bdo元素必须加上dir属性,支持的值为:1)rtl(从右到左);2)ltr(从左到右)。

this is left-to-right: i like oranges

this is right-to-left: i like oranges

其他文本元素

span元素

本身没有任何含义,通常用来把一些全局属性应用到一段内容上。

i like apples and oranges.

mark元素

html5中新增的,用来表示因为与某段上下文相关而被突出显示的一段文字。

i would like a pair of pears

ins元素和del元素

ins元素和del元素可以分别用来表示文档中添加和删除的文字。

i can sea the see i can see the sea

time元素

表示时间和日期。如果布尔属性pubdate存在,那么time元素表示的是整个html文档或离该元素最近的article元素的发布日期。datetime属性以rfc3339规定的格式指定日期和时间。有了datetime,就能在元素中以便于的形式设置日期或时间,同时又确保计算机能无歧义地解析指定的日期或时间。

i still remember the best apple i ever tasted. i bought it at

3 o'clock

on

december 7th

.time元素可以不包含datetime属性,这时需要提供具备有效的机器可读格式的时间和日期,当时间和日期格式不规范时,则需要使用datetime属性来指定文本内容的机器可读格式。

让字跑起来的HTML5标签,HTML5:标记文字相关推荐

  1. 百度能抓取html5标签,HTML5头部标签代码,可以禁止百度转码!

    如今是移动端的天下了,早在2011年智能手机开始大规模普及的时候,谁有不会想到互联网如今的趋势,要不然我们每个搞网络的人好像都可以改变本身的命运,曩昔的就让它曩昔吧,捉住将来才是如今要做的事,今天禀享 ...

  2. html5 支持php标签吗,HTML5标签大全

    本文给大家总结了html5标签知识,包括可以省略的标签.新增的标签,本文给大家介绍的非常详细,具有参考借鉴价值,感兴趣的朋友参考下吧 可以进行省略的标签 不允许写结束标记的标签:area(定义图像映射 ...

  3. HTML5标签的语义认知和理解

    HTML5标签的语义认知和理解 http://blog.csdn.net/shyleoking/article/details/7269137 转载于:https://www.cnblogs.com/ ...

  4. html5常用的属性标签,HTML5常用标签及其属性设置

    一.Html5的基本结构 网页的内容 二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...

  5. html5标签及属性大全,HTML5 标签 和属性 列表.pdf

    HTML5 标签 和属性 列表 按字母顺序排列的标签列表 4: 指在HTML 4.01 中定义了该 元素 标签 描述 5: 指在HTML 5 中定义了该元 素 定义注释 4 5 定义文档类型 4 5 ...

  6. HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册

    随着主流浏览器对 HTML5 的不断支持和完善,越来越多的开发者开始使用 HTML5 来开发各种功能强大的 Web 应用程序,HTML5 正引领互联网新革命.为了方便大家更好的学习 HTML5,今天这 ...

  7. HTML5中常见的列表标签包括,介绍几个常用的HTML5标签

    一.Html的基本结构: 网页的文本.图片等信息: 二.Head部分:用于表示网页的元数据即描述网页的基本信息 其常用标签及属性有: 1.title标签:浏览器标签页显示的标题 2.meta标签:其常 ...

  8. label标签 html5,HTML5 label 标签

    实例 HTML5 标签用于为 input 元素做出标记. 带有两个输入字段和相关标记的简单 HTML 表单: Male Female 尝试一下 » 浏览器支持 目前大多数浏览器支持 标签. 标签定义及 ...

  9. html5标签的兼容性处理

    HTML5的语义化标签以及属性 1.可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单 2.使用他们能让代码语义化更直观,而且更方便SEO ...

最新文章

  1. 一个简单的Java范例
  2. 美国多个州对谷歌提起新的反垄断诉讼
  3. 为什么单片机通常只有那么小的数据内存?
  4. access超过255列数据_Access的数据类型,与Excel虽类似,数据库+sql更适合大量数据管理...
  5. 我要看的学习网站——php
  6. 《第一篇》二进制部署高可用K8S集群v1.24.2及运维(亲测无坑)
  7. 一台显示器分成双屏_双屏办公,用起来到底有多爽
  8. android自定义控件不显示,解决Android Studio Design界面不显示layout控件的问题
  9. 用python打开\显示\保存图像
  10. kafka listeners 和 advertised.listeners 的区别及应用
  11. R语言使用循环语句一次性画出多幅图
  12. uniapp 微信签名不对解决方案
  13. 荣联科技转型的一二三四五
  14. ElasticSearch 命令
  15. 算法总结:DFA(自动机)算法是什么,怎么用
  16. Studyacount少壮不努力 老大徒伤悲
  17. harmonyos和emui 11概念股,从 EMUI11 到 HarmonyOS,华为 UX 设计的思考与传承
  18. 智能手机集体“高反”,荣耀V10能否用AI给行业供氧?
  19. 别焦虑了,这才是中国各行业平均工资的真相
  20. CentOS 7 更改 任务栏 高度

热门文章

  1. JavaScript- 正则表达式匹配汉字
  2. HHT变换基本理论-学习笔记
  3. android中bmob云存储,我在将Bmob作为云进行数据存储!但不知道如何把img内的文件上传到bmob云中...
  4. java发送html模板
  5. angular6允许局域网可访问
  6. 三维重建13:点云的局部特征总结
  7. 三维重建:闭环检测-相机闭环
  8. LASSOS方程--图像降噪
  9. VC维与DNN的Boundary
  10. python编辑器对比和推荐