编程 Javascript

Javascript基础_标记文字的实现方法

Posted in Javascript onJune 14, 2016

Javascript基础_标记文字的实现方法

1.用基本的文字元素标记内容

先看显示效果：

对应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基础_标记文字的实现方法

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery中dom操作和事件的实例学习下拉框应用

Dec 01 Javascript

Javascript 函数parseInt()转换时出现bug问题

May 20 Javascript

超级简单实现JavaScript MVC 样式框架

Mar 24 Javascript

JavaScript仿支付宝密码输入框

Dec 29 Javascript

基于jquery实现图片上传本地预览功能

Jan 08 Javascript

Bootstrap每天必学之导航组件

Apr 25 Javascript

禁用backspace网页回退功能的实现代码

Nov 15 Javascript

详解jQuery中基本的动画方法

Dec 14 Javascript

AngularJS中$http使用的简单介绍

Mar 17 Javascript

node.js中debug模块的简单介绍与使用

Apr 25 Javascript

js和jquery中获取非行间样式

May 05 jQuery

原生js实现随机点餐效果

Dec 10 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