html5标记文字_动力节点Java学院整理


Posted in HTML / CSS onJuly 11, 2017

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>© 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属性来指定文本内容的机器可读格式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 #HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 #HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 #HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 #HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 #HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 #HTML / CSS
HTML5中视频音频的使用详解
Jul 07 #HTML / CSS
You might like
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
python字符类型的一些方法小结
2016/05/16 Python
python和shell获取文本内容的方法
2018/06/05 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Random 在 Python 中的使用方法
2018/08/09 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
学生档案自我鉴定
2013/10/07 职场文书
服装设计专业毕业生推荐信
2013/11/09 职场文书
个人实习生的自我评价
2014/02/16 职场文书
什么是就业协议书
2014/04/17 职场文书
关于工作经历的证明书
2014/10/11 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
孔庙导游词
2015/02/04 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
世界水日宣传活动总结
2015/02/09 职场文书