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. clips apache配置虚拟主机

    >>单个虚拟主机 一个一个的配置 1.httpd.conf文件里 Include conf/extra/httpd-vhosts.conf //取消#注释 2.httpd-vhosts.c ...

  2. Balanced Photo(USACO)

    题目大意: 我们有一个数列,数列中有n个数,对于一个数ai,在它左边的比他大的数的个数为li,右边比他大的数的个数为ri,若li,ri中的较大者比较小者的两倍还大,那么他就是一个不平衡数,求不平衡数的 ...

  3. C++的Json解析库：jsoncpp和boost（转）

    原文转自 http://blog.csdn.net/hzyong_c/article/details/7163589 JSON(JavaScript Object Notation)跟xml一样也是一 ...

  4. BS4爬取豆瓣电影

    爬取豆瓣top250部电影 ####创建表: #connect.py from sqlalchemy import create_engine # HOSTNAME='localhost' # POR ...

  5. 【dlib代码解读】人脸检测器的训练【转】

    转自:http://blog.csdn.net/elaine_bao/article/details/53046542 版权声明:本文为博主原创文章,转载请注明.   目录(?)[-] 综述 代码解读 ...

  6. ObjectInputStream&ObjectOutputStream工具类

    序列化:将数据保存到文件:ObjectOutputStream; 反序列化:将文件中的数据显示出来:ObjectInputStream;   在反序列化程序中运行后能够正常输出Person的相关信息, ...

  7. Spring集成JavaMail并利用线程池发送邮件

    我们系统存在大量发送邮件的需求,项目使用的是Spring框架而JavaMail也能很好的跟Spring进行集成,由于发送邮件最好还是使用异步进行发送,所以这里就采用线程池+JavaMail进行邮件发送 ...

  8. Python_Tips[3] -> sort/sorted 排序函数

    排序函数 / Sort Function list自带的sort函数可以实现对列表的排列功能,具有同样功能的还有sorted函数. 基本形式 列表有自己的sort方法,其对列表进行原址排序,既然是原址 ...

  9. Python的并发并行[3] -> 进程[1] -> 多进程的基本使用

    多进程的基本使用 1 subprocess 常用函数示例 首先定义一个子进程调用的程序,用于打印一个输出语句,并获取命令行参数 import sys print('Called_Function.py ...

  10. MyBatis笔记：invalid bound statement (not found)

    maven项目在本地运行的时候没有问题,一旦把war包部署到测试机上就不能运行.查看了一下tomcat日志发现抛出这样的错误:invalid bound statement (not found),后 ...