html的文本元素总结

原创 2015年07月08日 13:33:40

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>


html的文本元素

html中的常见文本元素

html5 - 基础格式认识和标签用法(文本元素常用方法)

实例01 第一个实例的html5

【使用JSOUP实现网络爬虫】从元素抽取属性,文本和HTML

问题在解析获得一个Document实例对象,并查找到一些元素之后,你希望取得在这些元素中的数据。方法要取得一个属性的值,可以使用Node.attr(String key) 方法 对于一个元素中的文...
  • huxiweng
  • huxiweng
  • 2013年11月07日 13:43
  • 11740

js,html(包括其中图片等非文本元素)加载顺序

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload...

HTML元素文本溢出显示省略号(...)

http://www.cnblogs.com/CheeseZH/p/4904970.html

【HTML5学习笔记】2:文本元素的使用

几个前置知识: 用Ctrl+?可以将选中的区域变成注释/取消注释。 全局属性style用来设置这一段内容的风格,"font-size: 100px;"即是设置其字号为100。 在体中直接输入文本就可以...

HTML5复习01-文本元素

1. 表示关键字和产品名称 HTML5 解释:元素实际作用就是加粗。从语义上来看,就是标记一段文字,但并不是特别 强调或重要性。比如:一段文本中的某些关键字或者产品的名称。 2. 表示重要的文...

html文本元素

注释: ctrl+? b和strong的效果是一样的 加粗 i和em的效果是一样的 倾斜 br 换行 wbr 安全换行 s和del的效果是一样的 删除线 u和ins的...

HTML5文本元素(20160802-0002)

HTML5 文本元素与示例

千呼万唤 HTML 5 (4) - 文本语义元素

原文地址:http://www.cnblogs.com/webabcd/archive/2011/09/26/2190778.html 作者:webabcd 介绍 H...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html的文本元素总结
举报原因:
原因补充:

(最多只允许输入30个字)