关闭

html的文本元素总结

标签: html5网页设计前端
397人阅读 评论(0) 收藏 举报
分类:

html5规范明确指出:使用元素应该完全从元素的语义出发。建议做到以下两点:

1.如果存在符合需求的专用元素就用这种元素。

2.避开那些补了点语义脂粉的呈线性元素(如b元素),把呈现工作交给css打理。

a——生成到其他文档的超链接(href属性值设置为绝对或相对url);

 ——生成到同一文档中的元素的超链接(href属性值设置为目标元素的id值或其他值);

b或u——不附带任何重要性含义地表示一段文本;

em——表示强调;

i——表示科学术语或外文词语;

s——表示不精确或不准确的内容;

strong——表示重要;

small——表示小号字体部分;

sup——表示上标;

sub——表示下标;

br——表示换行;

wbr——在适合处换行(html5);

code——表示计算机代码;

pre——保留文本格式的内容;

var——表示变量

samp——表示程序输出

kbd——表示用户输入;

abbr——表示缩写;

dfn——表示术语定义;

q——表示引用内容;

cite——引用其他作品的标题;

ruby、rt及rp——表示东亚语言中的注音符号(html5);

bdo——表示一段内容的文本方向;

bdi——出于文本方向的考虑将文本与其他内容隔离开来(html5)

span——对一段内容应用全局属性;

mark——表示与另一段上下文相关的内容(html5)

ins——表示插入的文本;

del——表示删除的文本;

time——表示时间或日期(html5)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <base href="http://www.shydzc.com/" target="_blank"/>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>
    <!--另一种声明html页面所用字符编码的方法
    <meta http-equiv="content-type" content="text/html charset=utf-8"/>
    -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <script src="simple.js"></script>
    <noscript>
        <h1>需要javascript脚本!</h1>
        <!--或者导到另一网站
        <meta http-equiv="refresh" content="0;http://www.shydzc.com"/>
        -->
    </noscript>
</head>
<body>
<a href="http://www.shydzc.com">上海远地资产</a>
<a href="home">访问上海远地资产主页</a>
<a href="#fruits">水果</a>
<em>我</em>喜欢<b>苹果</b>和<b>橘子</b> <br/>
我喜欢的橘子里面有一种特殊,叫<i>citrus reticulata.</i> <br/>
橘子的价格值<s>$1/kg</s>$2<small>(不含税)</small>;<br/>
<strong>警告:</strong>吃<u>太多</u>橘子会伤害身体。<br/>
The point x<sub>10</sub> is the 10<sup>th</sup> point.
This is a very long word:Super<wbr>califragilistic<wbr>expialidocious.
<p>
    <code>
        var fruits=["苹果","橘子"];<br/>
        document.writeln("我喜欢"+fruits.length+"fruits");
    </code>
</p>
<p>这个例子中的变量名是<var>fruits</var></p>
<p>输出的文字是<samp>我喜欢2种水果。</samp></p>
<p>可以增加最喜欢的水果:<kbd>橙子</kbd></p>
<abbr title="上海远地资产管理有限公司">远地</abbr>
<dtn title="苹果">apple</dtn>
<q cite="http://en.wikipedia.org/wiki/Apple">The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree. </q> <br/>
<cite>Fruit:Edible,Inedible,Incredible</cite> by Stuppy & Kesseler. <br/>
<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>

<p> 从左到右:<bdo dir="ltr">我爱你的容颜</bdo></p>
<p> 从右到左:<bdo dir="rtl">我爱你的容颜</bdo></p>
<p><bdi>Adam</bdi>:3 apples and 2 oranges</p>
<p>我喜欢听<mark>郑钧</mark>的私奔</p>
<del>I can sea the see.</del>
<ins>I can see the sea.</ins>
<br/>
I bought it at <time datetime="15:00">3 o'clock</time> on <time datetime="1984-12-7">December 7th</time>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p id="fruits">我喜欢很多水果:香蕉,芒果,橘子。</p>

</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:403927次
    • 积分:5748
    • 等级:
    • 排名:第4500名
    • 原创:209篇
    • 转载:80篇
    • 译文:0篇
    • 评论:45条
    文章分类
    最新评论