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 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
js中如何完美的解析数据
Mar 18 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 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 高手之路(二)
2006/10/09 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
二招解决php乱码问题
2012/03/25 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
原生js写的放大镜效果
2012/08/22 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python操作xml文件示例
2014/04/07 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python的继承知识点总结
2018/12/10 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
告诉你怎样写创业计划书
2014/01/27 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
基石观后感
2015/06/12 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫