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>

【HTML 元素】标记文字的更多相关文章

  1. 【HTML5】标记文字

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

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

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

  3. HTML5元素标记释义

    HTML5元素标记释义 标记 类型 意义 介绍 文件标记 <html> ● 根文件标记 让浏览器知道这是HTML 文件 META标记 <head> ● 开头 提供文件整体信息 ...

  4. ObsoleteAttribute 可适用于除程序集、模块、参数或返回值以外的所有程序元素。 将元素标记为过时可以通知用户：该元素在产品的未来版本中将被移除。

    官方文档:https://msdn.microsoft.com/zh-cn/library/system.obsoleteattribute(v=vs.110).aspx 备注 ObsoleteAtt ...

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

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

  6. line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  7. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  8. HTML5：标记文字

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

  9. XAML 属性元素,标记扩展和注释

    这节来讲一下XAML中的属性元素,标记扩展,和注释. 属性元素 一般的,我们想要对一个标签的属性赋值,可以直接在标签内部键入属性名给其赋值,如我们给button的Content属性赋值: <Bu ...

随机推荐

  1. OwnCloud 搭建

    owncloud 的安装方式可以在 [ 官网 ] 找到. 本文会说明 owncloud 在 CentOS 7.x 上基于 LAMP 安装, 以及简单的用 docker 镜像启动的例子. 基于 LAMP ...

  2. [LA_3938]最大连续动态和

    Sample Input 3 1 1 2 3 1 1 Sample Output Case 1: 1 1 线段树 L,R表示该区间的左右端点,sum表示该区间值的总和 l,r表示该区间连续的最大和的左 ...

  3. win7 无法启动此程序,因为计算机中丢失glut32.dll

    http://zhidao.baidu.com/link?url=9NZxqCvR7hvmKuVR1dUSdQB-TTv_re-g7lp-xZj5FKII04FnMvIKjFhKv299t6wv5Ht ...

  4. Scala学习随笔——控制语句

    Scala只内置了为数不多的几种程序控制语句:if.while.for.try catch以及函数调用,这是因为从Scala诞生开始就包含了函数字面量,Scala内核没有定义过多的控制结构,而是可以通 ...

  5. 初学springMVC的拦截器

    springMvc拦截器的执行顺序! 拦截器的各个方法的作用: /** * 登录验证拦截器 */      public class Intercepter implements HandlerInt ...

  6. python爬虫beautifulsoup4系列1【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/beautifulsoup4/ 前言 以博客园为例,爬取我的博客上首页的发布时间.标题. ...

  7. java的unity单元测试

    import org.junit.After; import org.junit.Before; import org.junit.Test; public class TestUnit { publ ...

  8. 如何在 GitHub 建立个人主页和项目演示页面

    Git.GitHub.TortoiseGit ?http://www.cnblogs.com/guyoung/archive/2012/02/18/8030-.html GitHub Github官网 ...

  9. Python的并发并行[1] -> 线程[2] -> 锁与信号量

    锁与信号量 目录 添加线程锁 锁的本质 互斥锁与可重入锁 死锁的产生 锁的上下文管理 信号量与有界信号量 1 添加线程锁 由于多线程对资源的抢占顺序不同,可能会产生冲突,通过添加线程锁来对共有资源进行 ...

  10. Mediocre String Problem （2018南京M,回文+LCP 3×3=9种做法 %%%千年好题 感谢"Grunt"大佬的细心讲解）

    layout: post title: Mediocre String Problem (2018南京M,回文+LCP 3×3=9种做法 %%%千年好题 感谢"Grunt"大佬的细 ...