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选择器的选择使用及性能介绍
Jan 16 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
vue 中swiper的使用教程
May 22 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
vue 中的动态传参和query传参操作
Nov 09 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
python实现朴素贝叶斯算法
2018/11/19 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
小学毕业典礼演讲稿
2014/09/09 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
英语导游欢迎词
2015/09/30 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
尝试使用Python爬取城市租房信息
2022/04/12 Python
MySQL创建管理RANGE分区
2022/04/13 MySQL