Javascript基础_标记文字的实现方法


Posted in Javascript onJune 14, 2016

Javascript基础_标记文字的实现方法

 1.用基本的文字元素标记内容

先看显示效果:

Javascript基础_标记文字的实现方法

对应HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4Font</title>
</head>
<body>
<p> 元素 b —— <b> I am the example.</b></p>
<p> 元素 em —— <em> I am the example.</em></p>
<p> 元素 i —— <i> I am the example.</i></p>
<p> 元素 s —— <s> I am the example.</s></p>
<p> 元素 strong —— <strong> I am the example.</strong></p>
<p> 元素 u —— <u> I am the example.</u></p>
<p> 元素 small —— <small> I am the example.</small></p>
<p> 元素 sub —— <sub> I am the example.</sub></p>
<p> 元素 sup —— <sup> I am the example.</sup></p>
</body>
</html>

对应元素习惯样式:

*一般表示关键词和产品名称*
b{font-weight: bolder;}

*一般表示加以强调*
em {font-style: italic;}

*一般表示外文词语或科技术语*
i {font-style: italic;}

*一般表示不准确或校正*
s {text-decoration: line-through;}

*一般表示重要文字*
strong {font-weight: bolder;}

*一般表示为文字添加下划线*
u {text-decoration: underline;}

*一般表示为添加小号字体内容*
small {font-size: small;}

*一般表示添加上标和下标*
sup {vertical-align: sub; font-size: smaller;}
sub {vertical-align: super; font-size:smaller;}

2.使用语言元素

ruby、rt 和 rp 元素,先看效果:

Javascript基础_标记文字的实现方法

对应代码:

<p style=" font-size: 3em;">
  <ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby>
  <ruby>魅<rp>(</rp><rt>mèi</rt><rp>)</rp></ruby>
  <ruby>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby>
  <ruby>魉<rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby>
</p>

3.使用预先编排好格式的内容

pre 元素可以改变浏览器处理内容的方式,阻止合并空白字符,让源文档中的格式得以保留。

 

Javascript基础_标记文字的实现方法

<pre>
  <code>
    var fruits = ["apples","oranges","mangoes","cherries"];
    for(var i= 0; i < fruits.length; i++){
      document.writeln("I like " + fruits[i]);
    }
  </code>
</pre>

以上这篇Javascript基础_标记文字的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
js事件触发操作实例分析
Jun 21 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
深入浅析JavaScript的API设计原则
Jun 14 #Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 #Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 #Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 #Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 #Javascript
三种带箭头提示框总结实例
Jun 14 #Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 #Javascript
You might like
php学习之 认清变量的作用范围
2010/01/26 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
PHP重载基础知识回顾
2020/09/10 PHP
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
便捷提取python导入包的属性方法
2018/10/15 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
详解numpy的argmax的具体使用
2019/05/27 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
总经理助理岗位职责
2013/11/08 职场文书
办理护照介绍信
2014/01/16 职场文书
文明学生标兵事迹
2014/01/21 职场文书
合伙经营协议书
2014/04/18 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
六五普法学习心得体会
2016/01/21 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL