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 相关文章推荐
JS表单验证的代码(常用)
Apr 08 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
vue实现分页的三种效果
Jun 23 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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 MessagePack介绍
2013/10/06 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
继续学习javascript闭包
2015/12/03 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
TensorFlow实现模型评估
2018/09/07 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
python 实现单例模式的5种方法
2020/09/23 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
大学生求职计划书
2014/04/30 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
责任书范本
2014/08/25 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
检讨书格式
2015/05/07 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
Python实现聚类K-means算法详解
2022/07/15 Python