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 元素，先看效果：

对应代码：

<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 元素可以改变浏览器处理内容的方式，阻止合并空白字符，让源文档中的格式得以保留。

<pre>

    <code>

        var fruits = ["apples","oranges","mangoes","cherries"];

        for(var i= 0; i < fruits.length; i++){

            document.writeln("I like " + fruits[i]);

        }

    </code>

</pre>

【HTML5】标记文字的更多相关文章

  1. html5权威指南：标记文字

    html5权威指南-第八章-用基本的文字元素标记内容 :http://www.cnblogs.com/yc-755909659/archive/2016/10/02/5928122.html html ...

  2. html5权威指南：标记文字、组织内容、文档分节

    HTML5新增及删除标签:http://www.cnblogs.com/starof/archive/2015/06/23/4581850.html 第八章:标记文字                 ...

  3. HTML5火焰文字特效DEMO演示

    效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:

  4. HTML5火焰文字特效DEMO演示---转载

    只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  5. HTML5：标记文字

    文本层面的元素(简称文本元素).把这些元素加入文本其中,也就引入了结构和含义. HTML5规范明白指出:使用元素应该全然从元素的语义出发.但这类元素中有些元素的含义很明白,有些则比較含糊. 在元素的使 ...

  6. [读码]HTML5像素文字爆炸重组

    [边读码,边学习,技术也好,思路也罢] [一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看 ...

  7. [HeadFirst-HTMLCSS学习笔记][第十二章HTML5标记]

    考虑HTML结构 HTML5即是把原来<div>换成一些更特定的元素.能够更明确指示包含什么内容. (页眉,导航,页脚,文章) article nav 导航 header footer t ...

  8. 基于HTML5自定义文字背景生成QQ签名档

    分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...

  9. 【HTML 元素】标记文字

    1.用基本的文字元素标记内容 先看显示效果: 对应HTML代码: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. jQuery的deferred对象使用详解——实现ajax线性请求数据

    最近遇到一个ajax请求数据的问题 ,就是想要请求3个不同的接口,然后请求完毕后对数据进行操作,主要问题就是不知道这3个请求誰先返回来,或者是在进行操作的时候不能保证数据都已经回来,首先想到能完成的就 ...

  2. Ajax原生写法

    用太久JQuery了,别忘了Ajax原生是怎么写的 var Ajax = { get : function (url, callback) { var req = Ajax.getRequest(ca ...

  3. python3版本安装

    Python环境准备 一.下载: 1.官网下载python3.0系列(https://www.python.org/) 2.下载后图标为: 二.安装:    Window下: 1.安装路径: 默认安装 ...

  4. 用JS描述的数据结构及算法表示——栈和队列（基础版）

    前言:找了上课时数据结构的教程来看,但是用的语言是c++,所以具体实现在网上搜大神的博客来看,我看到的大神们的博客都写得特别好,不止讲了最基本的思想和算法实现,更多的是侧重于实例运用,一边看一边在心里 ...

  5. 记STM32F030多通道ADC DMA读取乱序问题

    问题描述通过 uint16_t ConvData[8]保存DMA搬运的ADC转换数值,但是这个数组数值的顺序总是和ADC不是顺序对应的.比如用7个通道的ADC,当设置ADC_InitStructure ...

  6. sharepoint2010问卷调查（1）-实现问卷的图片调查（采用JS实现）

      1. 首先建立个图片库上传图片 2. 采用:评估范围(一系列选项或 Likert 范围)制作,如下图: http://win-i07fillcfom:8003/DocLib2/1.jpg http ...

  7. Oracle11gR2用EXP导出时报EXP-00011错误的解决

    C:\>exp businessdata/businessdata file=dropcol.dmp tables=ACSTRULE,ARREARSCFG,ARREARS_REPORT_ACCT ...

  8. Android 短视频拍摄、拍照滤镜 第三方库SDK

    视频 1.趣拍云服务 http://vcs.qupai.me/ 拍照 1.camera360 SDk 拍照滤镜 http://www.camera360.com/ 2 .凃图 http://tusdk ...

  9. IOS 杂笔－1（为什么不继承类簇？）

    答:首先,类簇是可以继承的,并不是不可以.例如,我们可以选择继承NSSting,但是此时你用你自己设定的类去调用NSSting的一些方法时,会存在无法实现的问题,这是为什么呢. 1.类簇里有很多私有的 ...

  10. UIScrollView之轮转图片

    在iOS开发中,经常会在APP首页看到多张图片进行轮换.刚开始做的时候,感觉很麻烦,不是很好做,查阅资料后,我总结了一下,自己封装了一个简单的轮转图片库: UIScrollView无限滑动 ,只需要三 ...