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中的事件
Sep 23 Javascript
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
JavaScript更改class和id的方法
Oct 10 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
vue各种事件监听实例(小结)
Jun 24 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
django ORM之values和annotate使用详解
2020/05/19 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
空指针到底是什么
2012/08/07 面试题
校园活动策划方案
2014/06/13 职场文书
企业公益活动策划方案
2014/08/24 职场文书
教师工作决心书
2015/02/04 职场文书
文言文辞职信
2015/02/28 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Nginx内网单机反向代理的实现
2021/11/07 Servers