暑期学习记录09

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>

¹It means Paul in English.

²In 1963, I believe.

H₂O

上标和下标会轻微地扰乱行间距，解决方法参考

/** * 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>&lt;ul id="thumbnails"&gt;</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包含块级内容