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. ef unitofwork 主从表更新

    readonly UnitOfWork _u = new UnitOfWork(); public M Get(int id) { return _u.T_MtnContractRepository( ...

  2. 设置小于12px的字体

    .small-font{   font-size:12px;             -webkit-transform-origin-x: 0;            -webkit-transfo ...

  3. MFC下CSocket编程详解（转）

    原文转自 http://blog.csdn.net/yejiansnake/article/details/2175778 MFC下CSocket编程详解: 1. 常用的函数和注意事项(详细的函数接口 ...

  4. OpenGL入门学习 课程 (三) 绘制几何图形的一些细节问题

    http://oulehui.blog.163.com/blog/static/79614698201191832753312/ 先回顾一下我们都学习了些什么: 第一课,编写第一个OpenGL程序第二 ...

  5. android hook 框架 xposed 如何实现挂钩

    Android so注入-libinject2 简介.编译.运行 Android so注入-libinject2  如何实现so注入 Android so注入-Libinject 如何实现so注入 A ...

  6. js生成一周内的日期+周几

    (如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果有两种: 两者区别是 1.第一天(今天)显示今日 2.第一天(今天)显示周几 (第一个图是在手机上显示的效果,第二个是PC网页上显示的效果) ...

  7. Linux使用命令记录

    1.对一个文件夹中所有的文件进行修改权限: • chmod –R 777 aa (- R 递归式改变指定目录及其所目录文件拥者) • 目录/his及其所文件目录,chown - R www.www / ...

  8. 【原创】SQL SERVER 2008 R2安装(多图详解)

    配置系统环境说明 操作系统:Windows 7 操作系统版本:旗舰版 SP1 操作系统位数:x64 注:其它系统配置也基本相似,只是可能菜单的名字或者所处位置不一样,具体的配置如有不同,请自行搜索 安 ...

  9. Visual Studio 2013下我常用的两个插件

    随手记一下,我比较常用的两个插件,抛砖引玉. 代码高亮显示:SelectionHighlight.vsix 虚线插件:Indent Guides.vsix

  10. Redis设置记录

    首先大前提是,这个redis使用的外网端口,需要在防火墙或者安全组中打开 正常在redis配置文件里有个bind,这个默认是127.0.0.1,如果不修改,就是内网可以访问. 这里有个点需要提一下,就 ...