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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python中with及contextlib的用法详解
2017/06/08 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Python socket实现简单聊天室
2018/04/01 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
python和php学习哪个更有发展
2020/06/17 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
super关键字的用法
2012/04/10 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
传播学专业毕业生自荐信
2013/11/04 职场文书
网络维护中文求职信
2014/01/03 职场文书
初中班级口号
2014/06/09 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
企业愿景口号
2015/12/25 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python