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 相关文章推荐
解决js正则匹配换行问题实现代码
Dec 10 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
JS实现小米轮播图
Sep 21 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 HandlerSocket的使用
2011/05/02 PHP
php中error与exception的区别及应用
2014/07/28 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
Python中使用item()方法遍历字典的例子
2014/08/26 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python实现在线音乐播放器
2017/03/03 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python输出各行命令详解
2018/02/01 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
深入了解python中元类的相关知识
2019/08/29 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
静心口服夜广告词
2014/03/20 职场文书
遗产继承公证书
2014/04/09 职场文书
法人任命书范本
2014/06/04 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
奖学金感谢信
2015/01/21 职场文书
免职通知
2015/04/23 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
Python时间操作之pytz模块使用详解
2022/06/14 Python