Html
1.突出显示文本
mark是html5新元素,默认对文字添加黄色背景
<mark>
输入希望引起注意的字词
</mark>
注意:
由于mark是新元素,部分旧的浏览器不会默认添加黄色背景色,可以在样式表中加入mark{background-color:yellow;}
不要仅仅因为要给文字添加背景颜色选用mark,如果要给一块文字添加样式,选用span,并用CSS添加样式
2.解释缩写词
输入<abbr
作为可选的一步,输入title=“expansion”,其中expansion为缩写词全称
输入>
然后输入缩写词本身
输入</abbr>
作为可选的一步,输入一个空格和(expansion)
<p>The <abbr title="National Football League">NFL</abbr> promised a <abbr title="light amplification by stimulated emission of radiation">laser</abbr> show at 9 p.m. after every night game.</p>
<p>But, that's nothing compared to what <abbr>MLB</abbr> (Major League Baseball) did. They gave out free <abbr title="self-contained underwater breathing apparatus">scuba</abbr> gear during rain delays.</p>
效果如下:(firefox浏览器会添加虚线下划线效果,鼠标移到会显示全称
The NFL promised a laser show at 9 p.m. after every night game.
But, that’s nothing compared to what MLB (Major League Baseball) did. They gave out free scuba gear during rain delays.
如果要在所有的浏览器复制这种样式,在样式表中添加
abbr[title]{ borderbottom: 1px dotted #000;}
3.标记术语
输入<dfn>
输入要定义的术语
输入</dfn>
<p>The contestant was asked to spell "pleonasm." She requested the definition and was told that <dfn>pleonasm</dfn> means "a redundant word or expression" (Ref: <cite>
firefox默认斜体显示pleonasm
The contestant was asked to spell “pleonasm.” She requested the definition and was told that pleonasm means “a redundant word or expression”
4.创建上标和下标
输入<sub>/<sup>
下标,上标
输入要出现的字符
与第一步对应</sub>/<sup>
<p><sup>1</sup>It means Paul in English.</p>
<p><sup>2</sup>In 1963, I believe.</p>
<p>H<sub>2</sub>O</p>
1It means Paul in English.
2In 1963, I believe.
H2O
上标和下标会轻微地扰乱行间距,解决方法参考
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
5.标记编辑和不在准确的文本
标记新插入文本
输入<ins>
输入新内容
输入</ins>
标记已经删除的文本
删除内容之前输入<del>
之后输入</del>
标记不在准确或不在相关的文本
在希望标记的内容前输入<s>
后面输入</s>
<li><del>2 desks</del></li>
<li>1 chalkboard</li>
<li><del>4 <abbr>OLPC</abbr> (One Laptop Per Child) XO laptops</del></li>
<li><ins>1 bicycle</ins></li>
2 desks- 1 chalkboard
4 OLPC (One Laptop Per Child) XO laptops- 1 bicycle
-
浏览器通常对已删除,不再准确文本添加删除线,对插入文本添加下划线。
6.标记代码
输入<code>
输入代码或文件名
输入</code>
默认情况下,它以等宽字体显示。如果代码需要显示<.>分别使用
<和>
7.使用预格式化文本
预格式化文本可以保留固有的换行和空格
输入<pre>
输入文本,包括所需换行空格,除了代码以外,不要使用任何html元素标记文本
输入</pre>
如果要显示包含html元素的内容,应将包含元素名称的<,>改为对应的字符
<code><ul id="thumbnails"></code>
<ul id="thumbnails">
8.指定细则
输入<small>
输入表示免责声明,注解,署名等类似文本
输入</small>
small只适用于短语9.创建换行
在需要换行的地方输入<br/>(或<br>)
要确保使用br是最后的选择,因为该元素将表现形式带入了html,而不是让所有的呈现样式都交由CSS控制。
9.创建span
输入<span
如果愿意,输入id=“name”,其中name用于唯一地标识span标识的内容
如果愿意,输入class=“name”,其中name是span所属类的名称
如果愿意,输入其他的属性(如dir,lang,title)
输入>结束开始标记
创建希望包含在span里的内容
输入</span>
同div一样,span没有任何语义,不同的是,span只适合包围字词短语,而div包含块级内容