【HTML5】标记文字

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】标记文字相关推荐

HTML Lesson_03 标记文字
第三章标记文字该章节经常用的标签基本不会超过5个,其他的可作一般性了解 3.1 标题 h1~h6 <h1>标题</h1> <h2>标题</h2> ...
html5 canvas 显示文字居中,html5 canvas 文字居中对齐
> web前端 > HTML 5 > 正文 html5 canvas 文字居中对齐 2013-07-09 我要投稿 [color=eight:25px]html部门 [color=e ...
HTML5火焰文字特效DEMO演示---转载
只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
html与表格无关的标记,表格和HTML5标记
我遇到了一些基本的HTML和CSS问题,我认为它与我的HTML文件有关,试图找出表格.有人可以告诉我我做错了什么,以及如何使它看起来与我的例子相同.以下是我正在寻找的例子.表格和HTML5标记 CSS ...
ae制h5文字动画_7款超华丽的HTML5 Canvas文字动画特效
本文作者html5tricks,转载请注明出处文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就 ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
[AHK]为通达信标记文字窗口的按钮增加热键
本文用AutoHotkey给通达信客户端标记文字功能的[添加标记]按钮增加热键,抛砖引玉举一反三,欢迎大家挖掘AutoHotkey辅助交易的能力,欢迎来[AutoHotkey辅助交易QQ群20874 ...
php中注释符号有哪些,Html中有哪些标记文字注释的符号
这次给大家带来Html中有那些标记文字注释的符号,使用Html中的标记文字注释的符号的注意事项有哪些,下面就是实战案例,一起来看一下. HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的 ...
前端学习笔记之——标记文字
标记文字 1.生成超链接超链接是 HTML 中的关键特性,是用户赖以在内容中(在同一文档中和不同页面间)导航的基础.超链接用 a 元素生成. 元素 a 元素类型包含短语内容时被视为短语元素,包含流 ...
让字跑起来的HTML5标签,HTML5：标记文字
文本层面的元素(简称文本元素),把这些元素加入文本当中,也就引入了结构和含义. html5规范明确指出:使用元素应该完全从元素的语义出发.但这类元素中有些元素的含义非常明确,有些则比较含糊.在元素的使 ...

【HTML5】标记文字

【HTML5】标记文字相关推荐

最新文章

热门文章