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 qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
js实现拾色器插件(ColorPicker)
May 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 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
node.js超时timeout详解
2014/11/26 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python调用百度语音识别api
2018/08/30 Python
python中join()方法介绍
2018/10/11 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
django中使用POST方法获取POST数据
2019/08/20 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
学生安全承诺书
2014/05/22 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
婚宴父亲致辞
2015/07/27 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android