HTML5:标记文字

当前位置 : 首页 > 网页制作 > html5 > HTML5:标记文字

HTML5:标记文字

来源: 作者: 时间:2016-01-30 08:53
文本层面的元素(简称文本元素),把这些元素加入文本当中,也就引入了结构和含义。HTML5规范明确指出:使用元素应该完全从元素的语义出发。但这类元素中有些元素的含义非常明确
文本层面的元素(简称文本元素),把这些元素加入文本当中,也就引入了结构和含义。

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

使用相对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 显示在注音符号前后的括号。

(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 on .time元素可以不包含datetime属性,这时需要提供具备有效的机器可读格式的时间和日期,当时间和日期格式不规范时,则需要使用datetime属性来指定文本内容的机器可读格式。
Tag:
网友评论

<