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. JavaScript for循环 闭包 【转】

    个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-e ...

  2. MyGame--java语言编写的打飞机游戏(附源码下载)

    运行效果如下图所示: 点击这里进行下载, 还有源码已经传至我的github上,还有一些小bug,欢迎大家改正. 说明:最后打boss的效果还没做,爆炸的图片也没好,欢迎大家修改.

  3. easyui1.3.2中使用1.3.6或1.4.x的calendar

    首先在1.3.2中calendar控件不支持日历某天的颜色进行改变,和自定义回调函数 Name Type Description Default width number The width of c ...

  4. C语言堆栈入门——堆和栈的区别

    来看一个网上很流行的经典例子: main.cpp int a = 0; 全局初始化区 char *p1; 全局未初始化区 main() { int b; 栈 char s[] = "abc& ...

  5. Android自定义View滑动事件处理总结

    滑动处理需要用到的各种工具类: android.view.VelocityTracker android.view.OverScroller android.view.ViewConfiguratio ...

  6. 打印frame

    NSLog(@"%@",NSStringFromCGRect(switch.frame)); 或者 CFShow(NSStringFromCGRect(switch.frame)) ...

  7. 【代码笔记】iOS-点击任何处,显示出红色的UIView

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> //头文件 #import "MoreView. ...

  8. Android 中BaseActivty

    Base接口 IBaseActivity package liu.basedemo.base; /** * 基类接口 * Created by 刘楠 on 2016/7/28 0028.23:05 * ...

  9. GitHub Android Libraries Top 100 简介

    本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过 ...

  10. php并发编程相关扩展

    Stream:PHP内核提供的socket封装Sockets:对底层Socket API的封装Libevent:对libevent库的封装Event:基于Libevent更高级的封装,提供了面向对象接 ...