HTML文本级元素
2015-12-30 16:42
561 查看
目录
[1]强调重要 [2]文字间隔 [3]不精确文字 [4]高亮显示 [5]次要评论 [6]术语处理 [7]引用 [8]换行 [9]上标下标 [10]文本删改 [11]特定时间 [12]注音标识[13]文字方向[14]计算机代码 例子演示
<em> 表示强调
<strong> 表示重要
<i>
[1]表示不同情绪或声音的文本,如内心对白
[2]表示外来语、分类学名和技术术语等
<b>
[1]用于分隔文字
[2]用于文章或故事的引言
<abbr> 缩写词,可以配合<dfn>定义术语
<q> 表示短引用,常用于引用别人说的话,用引号可以表达等价语义
[注意]<br>标签是文本级语义元素,可以设置行高和字体大小,但设置宽高无效
<wbr> 需要时指定单词可以换行的位置
<sup> 表示上标
<sub> 表示下标
<ins> 文档中插入的内容
<del> 文档中删除的内容
[注意]<ins>和<del>可以嵌套任何元素
<属性>
[1]datetime:用于标明编辑的日期和可选的时间
[2]cite:用于指定说明编辑的文档网址
<属性>
[1]datatime表示确切的时间,遵循格式YYYY-MM-DDThh:mm:ssTZD,表示年-月-天-分割符T-时-分-秒-时区
[2]pubdate表示<time>元素中的日期或时间是文档的发布日期
<ruby> 表示ruby标记
<rt> 表示ruby标记文字
<rp> 表示ruby标记括号
<bdo> 覆盖两种方向的设置,允许显式设置方向,并覆盖所有其他当前方向
<kbd> 定义键盘码
<samp> 定义计算机例子代码
<tt> 定义打字机代码
<var> 定义变量
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+1])
}
}else{
change(oCon.children[select.length])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
[1]强调重要 [2]文字间隔 [3]不精确文字 [4]高亮显示 [5]次要评论 [6]术语处理 [7]引用 [8]换行 [9]上标下标 [10]文本删改 [11]特定时间 [12]注音标识[13]文字方向[14]计算机代码 例子演示
前面的话
用于标记段落里的文本和其他内容组的元素种类很多,将这些文本级元素进行简单分类,便于整理和记忆文本元素
强调重要
虽然浏览器通常用斜体和粗体来显示em和strong,但这些元素不应用作加粗和斜体。这两个元素分别用来提升包含内容的强调程度和重要性<em> 表示强调
<strong> 表示重要
<p>I am <em>very</em> worried!</p> <strong>warning</strong>
文字间隔
i和b元素历来是用来展示粗体和斜体字体的,但在HTML5中,它们有了新的语义<i>
[1]表示不同情绪或声音的文本,如内心对白
<p>Simon smirked,"Yes,I'm happy to take the garbage out." <i>Ugh,I <em>really</em> don't want to !</i> he thought as he picked up the garbage bag.</p>
[2]表示外来语、分类学名和技术术语等
<i lang="fr">Oh la la!</i>
<b>
[1]用于分隔文字
<p>After bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b></p>
[2]用于文章或故事的引言
<p><b class="lede">Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.</b></p>
不精确文字
<s> 在HTML5中重新定义为有错的、过时的、不被建议使用的文本,常用于表示价格变动等<p>价格<s>¥1298</s>¥998!</p> <p><s>37度</s> <strong>41度</strong></p>
高亮显示
<mark> 表示高亮或用于引用而标记的文字<p><mark>We're all hoping it rains soon</mark>, some farmers have installed irrigation systems, at <em>considerable</em> expense</p>
次要评论
<small> 表示旁注,可用于免责声明、使用条款和版权信息等需要小字体的场景<small>图片仅供参考,请以实物为准</small> <small>Chris Elhorn | The city Press</small>
术语处理
<dfn> 用来定义术语<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>
<abbr> 缩写词,可以配合<dfn>定义术语
<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.</p>
引用
<cite> 表示作品标题的引用,可以是书影音画等<p>我最喜欢的电影是<cite>千与千寻</cite></p>
<q> 表示短引用,常用于引用别人说的话,用引号可以表达等价语义
<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>
换行
<br> 换行[注意]<br>标签是文本级语义元素,可以设置行高和字体大小,但设置宽高无效
<p> <b>The City Press</b><br /> 123 General Street <br /> Springfield, OH 45501 </p>
<wbr> 需要时指定单词可以换行的位置
<i>Irrigation<wbr /> Direct</i>
上标下标
这两个标签在数学等式、科学符号和化学公式中非常有用<sup> 表示上标
<p> a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> </p>
<sub> 表示下标
<p> H<sub>2</sub> SO<sub>4</sub> </p>
文本删改
如果要表示文档的增删改记录,则应该使用ins和del标签<ins> 文档中插入的内容
<del> 文档中删除的内容
[注意]<ins>和<del>可以嵌套任何元素
<属性>
[1]datetime:用于标明编辑的日期和可选的时间
[2]cite:用于指定说明编辑的文档网址
<p>一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。</p>
特定时间
<time> 表示日期或时间<属性>
[1]datatime表示确切的时间,遵循格式YYYY-MM-DDThh:mm:ssTZD,表示年-月-天-分割符T-时-分-秒-时区
[2]pubdate表示<time>元素中的日期或时间是文档的发布日期
<p>我们在每天早上 <time>9:00</time> 开始营业。</p> <p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p> <small>Posted <time datetime="2015-12-30T00:00:00UTC+08:00"></time></small>
注音标识
ruby标签定义注音标识,多用于CJK文字,CJK是指中日韩统一表意文字(Chinese、Japanese、Korean)<ruby> 表示ruby标记
<rt> 表示ruby标记文字
<rp> 表示ruby标记括号
<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby>
<ruby> 汉 <rp>(</rp> <rt>hàn</rt> <rp>)</rp> 语 <rp>(</rp> <rt>yǔ</rt> <rp>)</rp> </ruby>
文字方向
<bdi> 忽略周围文字方向的文字<bdo> 覆盖两种方向的设置,允许显式设置方向,并覆盖所有其他当前方向
<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>
计算机代码
<code> 表示计算机代码<kbd> 定义键盘码
<samp> 定义计算机例子代码
<tt> 定义打字机代码
<var> 定义变量
<p> <code>Computer code</code> <br /> <kbd>Keyboard input</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br /> </p>
例子演示
<演示框>点击下列相应标签名可进行演示// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+1])
}
}else{
change(oCon.children[select.length])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
相关文章推荐
- 动态获取html页面的内容,并且取其中的某块元素的方法
- 动态获取html页面的内容,并且取其中的某块元素的方法
- Html学习总结(1)——理解Html的head
- Html学习总结(1)——理解Html的head
- HTML中让表单input等文本框为只读不可编辑的方法
- 最近做个东西 写了一个HTML解析程序
- HTML表单
- 关于.html()、.val()、.text()区别,IE6中会出现问题
- Html学习之html的文件基本标记(1)
- Html学习之html的基本结构
- HTML 限制文本框只能输入数字
- 通过HTML方式设置文字颜色和字体
- 加载本地HTML文件
- ZABBIX封装HTML说明
- HTML 音频/视频 DOM 参考手册
- HTML 颜色名
- HTML 字符集
- HTML ASCII 参考手册
- HTML的form表单自动提交
- HTML DOM方法