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. font-family 定义的最后为什么要加一句sans-serif

    定义font-family时,最好在最后加一个sans-serif,这样如果所列出的字体都不能用,则默认的sans-serif字体能保证调用; W3C建议字体定义的时候,最后以一个类别的字体结束,例如 ...

  2. 洛谷noip 模拟赛 day1 T1

    T7925 剪纸 题目描述 小芳有一张nnn*mmm的长方形纸片.每次小芳将会从这个纸片里面剪去一个最大的正方形纸片,直到全部剪完(剩下一个正方形)为止. 小芳总共能得到多少片正方形纸片? 输入输出格 ...

  3. lightgbm 学习笔记

    首先是配置文件参数.参考自https://lightgbm.apachecn.org/#/docs/6 配置参数实在是太多了,大家还是去原文档查表吧orz 参数名 可选参数 作用 config= 自填 ...

  4. GHC extensions

    OverloadedStrings 这是最常见的一个扩展,很多时候都能看到   Haskell中,数字是num的多态,比如:   a :: Int a = 1   b :: Double b = 1 ...

  5. Grep查看日志的方法【转】

    转自:http://blog.csdn.net/stormkey/article/details/5905204 版权声明 :转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://go ...

  6. Altium 原理图出现元件 “Extra Pin…in Normal of part ”警告

    原理是因为元器件库中的元器件的所有模式MODE不能和pcb中的引进匹配造成的,那什么又是MODE呢, 看下买的图便很清楚了, MODE可以理解为不同的视图模式吧. 然后赶紧打开原理图库中的有问题的元器 ...

  7. 动态加载.so文件并执行类函数

    背景:不同产品组将其功能编译为.so,这些.so 可以加载到统一的基础平台上运行,如果产品组代码有改动,只需要更新对应的.so 问题:如何动态加载.so文件,并使用里边的函数/类 ? 解决方法1: 使 ...

  8. Linux内核情景分析的alloc_pages

    NUMA结构的alloc_pages ==================== mm/numa.c 43 43 ==================== 43 #ifdef CONFIG_DISCON ...

  9. do_exit——>exit_notify()【转】

    转自:http://blog.csdn.net/sunnybeike/article/details/6907322 版权声明:本文为博主原创文章,未经博主允许不得转载. /* * Send sign ...

  10. C++ bitset类的使用与简介 [转载]

    有些程序要处理二进制位的有序集,每个位可能包含的是0(关)或1(开)的值.位是用来保存一组项或条件的yes/no信息(有时也称标志)的简洁方法.标准库提供了bitset类使得处理位集合更容易一些.要使 ...