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中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
ES6实现图片切换特效代码
Jan 14 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
PHP 命令行参数详解及应用
2011/05/18 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
npm qs模块使用详解
2020/02/07 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
校长就职演讲稿
2014/01/06 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python