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 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
jquery 插件开发备注
Aug 27 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
如何编写高质量JS代码
Dec 28 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
vue.js学习之递归组件
Dec 13 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
微信小程序 图片上传实例详解
May 05 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 文件类型判断代码
2009/03/13 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
javascript中对对层的控制
2006/12/29 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python中Class类用法实例分析
2015/11/12 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
五年级学生评语
2014/04/22 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
亮剑观后感500字
2015/06/05 职场文书
入党培养人考察意见
2015/06/08 职场文书
公司欠款证明
2015/06/24 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技