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 Konami Code 实现代码
Jul 29 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 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生成短网址的3种方法代码实例
2014/07/08 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
js获取变量
2006/08/24 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
DOM 事件流详解
2015/01/20 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python变量和字符串详解
2017/04/29 Python
python Django的web开发实例(入门)
2019/07/31 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
pymysql模块使用简介与示例
2020/11/17 Python
详解python中的异常捕获
2020/12/15 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
自荐信结尾
2013/10/27 职场文书
外贸实习生自荐信范文
2013/11/24 职场文书
作文评语集锦大全
2014/04/23 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS