HTML5:标记文字
HTML5规范明白指出:使用元素应该全然从元素的语义出发。但这类元素中有些元素的含义很明白,有些则比較含糊。
在元素的使用上最好做到“将呈现工作交给CSS打理”,但这并非绝对的,有时候仅仅要保持HTML文档中的一致性就好。
生成超链接
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加以改变。
生成内部超链接
<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的元素的位置。
设置浏览环境
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元素
<body>
I like <b>apples</b> and <b>oranges</b>.
</body>
b元素的默认样式是粗体。
em元素
<body>
<em>I</em> like <b>apples</b> and <b>oranges</b>.
</body>
em元素的习惯样式是斜体字。此例对句子开头的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元素
<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元素
<body>
I like apples and oranges.
<strong>Warning:</strong> Eating too many oranges can give you heart burn.
</body>
strong元素的样式同b元素。
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元素
<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元素
<body>
The point x<sub>10</sub> is the 10<sup>th</sup> point.
</body>
换行
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元素
<body>
This is a very long word: Super<wbr>califragilistic<wbr>expialidocious.
</body>
不使用wbr元素时。浏览器会将长单词作为一个总体进行处理,而使用了wbr元素,浏览器则能够选择在建议处换行。使用wbr元素,就是告诉浏览器一个单词最适合在什么地方那个拆分。
表示输入和输出
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元素
<body>
I like apples and oranges.
The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida citrus industry.
</body>
dfn元素
<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元素
<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元素
<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元素
<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元素
<body>
<p>
I would like a <mark>pair</mark> of <mark>pears</mark>
</p>
</body>
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元素
<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属性来指定文本内容的机器可读格式。
HTML5:标记文字的更多相关文章
- html5权威指南:标记文字
html5权威指南-第八章-用基本的文字元素标记内容 :http://www.cnblogs.com/yc-755909659/archive/2016/10/02/5928122.html html ...
- html5权威指南:标记文字、组织内容、文档分节
HTML5新增及删除标签:http://www.cnblogs.com/starof/archive/2015/06/23/4581850.html 第八章:标记文字 ...
- HTML5火焰文字特效DEMO演示
效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:
- HTML5火焰文字特效DEMO演示---转载
只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 【HTML5】标记文字
1.用基本的文字元素标记内容 先看显示效果: 对应HTML代码: <!DOCTYPE html> <html lang="en"> <head> ...
- [读码]HTML5像素文字爆炸重组
[边读码,边学习,技术也好,思路也罢] [一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看 ...
- [HeadFirst-HTMLCSS学习笔记][第十二章HTML5标记]
考虑HTML结构 HTML5即是把原来<div>换成一些更特定的元素.能够更明确指示包含什么内容. (页眉,导航,页脚,文章) article nav 导航 header footer t ...
- 基于HTML5自定义文字背景生成QQ签名档
分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...
- 【HTML 元素】标记文字
1.用基本的文字元素标记内容 先看显示效果: 对应HTML代码: <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- bzoj1211: [HNOI2004]树的计数(prufer序列+组合数学)
1211: [HNOI2004]树的计数 题目:传送门 题解: 今天刚学prufer序列,先打几道简单题 首先我们知道prufer序列和一颗无根树是一一对应的,那么对于任意一个节点,假设这个节点的度数 ...
- hpuoj--校赛--特殊的比赛日期(素数判断+模拟)
问题 B: 感恩节KK专场--特殊的比赛日期 时间限制: 1 Sec 内存限制: 128 MB 提交: 392 解决: 99 [提交][状态][讨论版] 题目描述 KK今天参加河南理工大学ACM程 ...
- MinGW安装和使用基础教程
MinGW全称Minimalist GNU For Windows,是个精简的Windows平台C/C++.ADA及Fortran编译器,相比Cygwin而言,体积要小很多,使用较为方便.MinGW提 ...
- Car Talk2
#! /usr/bin/python # -*- coding: utf-8 -*- # # # “Recently I had a visit with my mom and we realized ...
- 10.bitset
#include <iostream> //位运算,处理二进制非常方便,线性存储 #include <bitset> #include <string> using ...
- ios下微信浏览器如何唤醒app?app已上架应用宝
android下可以通过在应用宝微下载地址后面加参数&android_schema='应用schema'来实现,ios下如何实现? ios下微信浏览器如何唤醒app?app已上架应用宝 > ...
- windows如何批量添加路由表
我大约有2000条路由,需要批量导入,如何才能快速导入,快速删除呢.如果直接用命令添加路由表的话感觉很慢. windows如何批量添加路由表 >> csharp这个答案描述的挺清楚的:ht ...
- <Sicily>Inversion Number(线段树求逆序数)
一.题目描述 There is a permutation P with n integers from 1 to n. You have to calculate its inversion num ...
- Service和Servlet的区别
1. 整体概念 Servlet是Java对于Web开发而产生的一项技术,可以说Servlet技术是Java专有的,它是服务器端的技术,客户端通常是浏览器,Servlet提供了请求/响应模式,是JAVA ...
- Python3基础笔记--函数
一.函数 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 1)代码重用 2)保持一致性 3)可扩展性 参考博客: Py西游攻关之 ...