zoukankan      html  css  js  c++  java
  • 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)。

    生成指向外部的超链接

    <body>
    	I like <a href="http://en.widipedia.org/wiki/Apples">apples</a> and <a href="http://en.wikipeida.org/wiki/Orange_(fruit)">oranges</a>.
    </body>
    URL中用得最多的协议就是http。但浏览器也支持其他协议,比如:https和ftp。

    假设想引用一个电子邮箱地址,能够使用mailto协议,如:mailto:adam@mydomain.com。

    使用相对URL

    <body>
    	......
    	You can see other fruits I like <a href="fruitlist.html">here</a>.
    </body>
    默认情况下,浏览器会假定目标资源与当前文档位于同一位置,只是能够通过base元素提供一个基础URL加以改变。

    生成内部超链接

    该方式用于将统一文档中的还有一个元素移入视野。须要是使用ID选择表达式:#<id>。


    <body>
    	......
    	You can see other fruits I like <a href="#fruits">here</a>.
    	......
    	<p id="fruits">
    		I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
    	</p>
    </body>
    用户点击链接。文档就会滚动到能看到id为fruits的元素的位置。


    设置浏览环境

    target属性用于告诉浏览器希望将所链接的资源显示在哪里。默认情况下。浏览器使用当前文档的窗体、标签页或窗框,所以新文档会代替如今显示的文档,但你能够设置其他值:
    1)_blank:在新窗体或标签页中打开文档;
    2)_parent:在父窗框(frameset)中打开文档;
    3)_self:在当前窗体中打开文档(默认);
    4)_top:在顶层窗体打开文档。
    5)<frame>:在指定窗框中打开文档,这里的<frame>是表示窗体的名称。
    以下通过一个样例帮助你理解frame。假定TestFrame.html文档中的代码例如以下:
    <html>
    <frameset cols="50%,50%">
      <frame src="test.html" />
      <frame name="frame1" />
    </frameset>
    </html>
    这里定义了一个frameset。里面包括两个frame,宽度各占一半。第一个frame指向了一个html文档,第二个frame被赋予了名称frame1。test.html的内容例如以下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8" />
    	<title>Your page title</title>
    	<link href="test.css" rel="stylesheet" id="test"/>
    </head>
    <body>
    	<a title="W3C web site" href="http://w3c.org" target="frame1">W3C web site</a>
    </body>
    </html>
    在a元素中我们定义了target微frame1。这样在点击链接时,将在frame1中打开新的页面。


    标记内容

    b元素

    在HTML4中b元素仅仅具有呈线性质的含义,在HTML5中,用于标识关键词和产品评论中的产品名称。
    <body>
    	I like <b>apples</b> and <b>oranges</b>.
    </body>
    b元素的默认样式是粗体。

    em元素

    em元素表示对一段文字的强调,能够用来向读者提供关于句子或段落含义的一种语境。
    <body>
    	<em>I</em> like <b>apples</b> and <b>oranges</b>.
    </body>
    em元素的习惯样式是斜体字。此例对句子开头的I进行了强调。

    i元素

    i元素表示一段文字与周围内容有本质差别,经常使用于外文词语、科技术语甚至某人的想法。
    <body>
    	<em>I</em> like <b>apples</b> and <b>oranges</b>.
    	My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>.
    </body>
    i元素的习惯样式是斜体,同em元素。

    s元素

    s元素用来表示一段文字不再正确或准确。习惯样式是在文字上显示一条删除线。
    <body>
    	<em>I</em> like <b>apples</b> and <b>oranges</b>.
    	My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>.
    	Oranges at my local store cost <s>$1 eanch</s> $2 for 3.
    </body>

    strong元素

    strong元素表示一段重要文字。
    <body>
    	I like apples and oranges.
    	<strong>Warning:</strong> Eating too many oranges can give you heart burn.
    </body>
    strong元素的样式同b元素。


    u元素

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


    <body>
    	I like apples and oranges.
    	<strong>Warning:</strong> Eating <u>too many</u> oranges can give you heart burn.
    </body>
    由于u元素的习惯样式与a元素相似,为了防止混淆,应该尽量避免使用u元素。

    small元素

    HTML5中使用small标签指定细则,通常包括免责声明、注意事项、法律限制、版权信息等。有时还能够用它来表示署名。或者满足许可要求。
    <body>
    	<p>Order now to receive free shipping.
    	<small>(Some restrictions may apply.)
    	   </small></p>
    	...
    	<footer role="contentinfo">
    	<p><small>&copy; 2013 The Super
    	   Store. All Rights Reserved.
    	   </small></p>
    	</footer>
    </body>
    注意:small仅仅适用于短语。不要用它标记长的法律声明。如“使用条款”和“隐私政策”页面。

    sub和sup元素

    sub和sup元素分别用于表示下标和上标。
    <body>
    	The point x<sub>10</sub> is the 10<sup>th</sup> point.
    </body>

    换行

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


    br元素

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


    <body>
    	I WANDERED lonely as a cloud<br/>
    	That floats on high 0'er vales and hills,<br/>
    	When all at once I saw a crowd,<br>
    	A host, of golden daffodils;
    </body>

    wbr元素

    HTML5新增,用于表示长度超过当前浏览器窗体的内容适合再次换行,到底换不换行由浏览器决定。wbr元素仅仅只是是对恰当的换行位置的建议而已。
    <body>
    	This is a very long word: Super<wbr>califragilistic<wbr>expialidocious.
    </body>
    不使用wbr元素时。浏览器会将长单词作为一个总体进行处理,而使用了wbr元素,浏览器则能够选择在建议处换行。使用wbr元素,就是告诉浏览器一个单词最适合在什么地方那个拆分。


    表示输入和输出

    1)code:表示计算机代码片段
    2)var:在编程语境中表示变量,也可表示一个供读者在想象中插入一个指定值的占位符
    3)samp:表示程序或计算机系统的输出
    4)kbd:表示用户输入
    <body>
    	<p>
    	<code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br> document.writeln("I like " + fruits.length + " fruits");</code>
    	</p>
    	<p>The variable in this example is <var>fruits</var></p>
    	<p>The output from the code is: <samp>I like 4 fruits</samp></p>
    	<p>When prompted for my favorite fruit, I typed: <kbd>cherries</kbd>
    </body>

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

    abbr元素

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


    <body>
    	I like apples and oranges.
    	The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida citrus industry.
    </body>

    dfn元素

    表示定义中的术语,即用来解释一个词(或短语)的含义的句子中的词(或短语)。假设要为dfn元素设置title属性,那么必须将其设置为所定义的术语。
    <body>
    	<p>
    		The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree, species Malus domestica in the rose family.
    	</p>
    </body>
    该元素没有习惯样式,因此其内容看上去没有什么特别之处。


    q元素

    表示引自他处的内容。q元素的cite属性能够用来指定来源文章的URL。
    <body>
    	<p>
    		<q cite="http://en.wikipedia.org/wiki/Apple">The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree, species Malus domestica in the rose family.</q>
    	</p>
    </body>
    q元素的习惯样式是在引文前后生成引號。

    cite元素

    表示所引用作品的标题。
    <body>
    	My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite> by Stuppy & Kesseler
    </body>
    其习惯样式是斜体。


    使用语言元素

    ruby、rt和rp元素

    ruby元素表示一段包括注音符号的文字,须要与rt元素和rp元素搭配使用。rt元素用来标记注音符号。rp元素则用来标记供不支持注音符号特性的浏览器显示在注音符号前后的括号。
    <body>
    	<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
    	<ruby>魅<rp>(</rp><rt>mei</rt><rp>)</rp></ruby>
    </body>
    当显示在支持注音符号的浏览器中时,rp元素及其内容会被忽略,rt元素的内容则会作为注音符号显示。而在不支持注音符号的浏览器中显示该文档,那么rp和rt元素的内容都会被显示出来。

    bdo元素

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


    <body>
    	<p>
    		This is left-to-right: <bdo dir="ltr">I like oranges</bdo>
    	</p>
    	<p>
    		This is right-to-left: <bdo dir="rtl">I like oranges</bdo>
    	</p>
    </body>

    其他文本元素

    span元素

    本身没有不论什么含义,通经常使用来把一些全局属性应用到一段内容上。


    <body>
    	I like <span class="fruit">apples</span> and <span class="fruit">oranges</span>.
    </body>

    mark元素

    HTML5中新增的。用来表示由于与某段上下文相关而被突出显示的一段文字。
    <body>
    	<p>
    		I would like a <mark>pair</mark> of <mark>pears</mark>
    	</p>
    </body>

    ins元素和del元素

    ins元素和del元素能够分别用来表示文档中加入和删除的文字。
    <body>
    	<p>
    		<del>I can <mark>sea</mark> the <mark>see</mark></del>
    		<ins>I can <mark>see</mark> the <mark>sea</mark></ins>
    	</p>
    </body>

    time元素

    表示时间和日期。假设布尔属性pubdate存在,那么time元素表示的是整个HTML文档或离该元素近期的article元素的公布日期。datetime属性以RFC3339规定的格式指定日期和时间。有了datetime,就能在元素中以便于阅读的形式设置日期或时间。同一时候又确保计算机能无歧义地解析指定的日期或时间。
    <body>
    	I still remember the best apple I ever tasted.
    	I bought it at <time datetime="15:00">3 o'clock</time> on <time datetime="1984-12-7">December 7th</time>.
    </body>
    time元素能够不包括datetime属性,这时须要提供具备有效的机器可读格式的时间和日期。当时间和日期格式不规范时,则须要使用datetime属性来指定文本内容的机器可读格式。
  • 相关阅读:
    编写高性能Web应用程序的10个入门技巧
    C#中class与struct的区别[转]
    web架构设计经验分享 (转)
    NUnit入门篇
    sqlserver 重建日志文件
    ExecuteReader如何取得输出参数和返回值
    防止表单重复提交的几种方案
    Web 2.0 versus Virtual Worlds (转)
    ActionScript 3.0 Step By Step系列(七):使用XML和XMLList类处理XML数据 (转)
    PlayButton Component
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/7136122.html
Copyright © 2011-2022 走看看