第四章 文本
1、<p></p>
2、<small></small>表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。
3、<strong></strong>表示内容的重要性,以粗体显示,一个strong可以嵌套在另一个strong中;<em></em>表示内容的着重点,以斜体显示,一个em可以嵌套在另一个em中。<b></b>用于如文档摘要里的关键词、评论里的产品名、基于文本的交互式软件中指示操作的文字、文章导语等;<i></i>用于如分类名称、技术术语、外语里的惯用词、翻译的散文、西方文字中的船舶名称等。
4、<figure><figcaption></figcaption></figure>图可以是图表、照片、图形、插图、代码片段,以及其他类似的独立内容。元素figcaption并不是必需的,但如果包含它,它就必需是figure元素内嵌的第一个或最后一个元素,且仅包含一次。
5、<cite></cite>用于戏剧、脚本或图书的标题,歌曲、电影、照片或雕塑的名称,演唱会或音乐会,规范、报纸或法律文件等,属性lang表明文本的语言。默认以斜体显示。cite元素只用于参考源,引述文本则用blockquote或q元素。
6、<blockquote></blockquote>用于引述块级文本,可长可短;<q></q>用于引述行内文本,自动加上特定语言的引号,属性lang表明文本的语言。属性cite提供引述文本的位置,属性lang表明文本的语言。
7、<time></time>标记时间、日期或时间段,属性datetime格式为YYYY-MM-DDThh:mm:ss表示文本内容的机器可读格式。不能在一个time元素里嵌套另一个time元素,也不能在没有datetime属性的time元素中包含其他元素(只能包含文本)。
8、<abbr></abbr>标记缩写词,属性title提供缩写词的全称,也可以把全称放在缩写词后面的括号里。Firefox和Opera等浏览器会对带title的abbr文字使用虚线下划线,这可以在样式表中设置abbr[title]{border-bottom:1px dotted #000;}。
9、<dfn></dfn>定义术语(英文通常为斜体,汉语通常为黑体或者楷体),属性cite提供引述文本的位置。如果一个段落、描述列表或区块是某dfn元素距离最近的祖先,那么该段落、描述列表或区块必须包含该术语的定义。
10、<sup></sup>上标包括商标符号、指数和脚注编号等;<sub></sub>下标包括化学符号。修复使用sub和sup时的行间距问题,设置sub,sup{font-size:75%; line-height:0; position:relative; vertical-align:baseline;} sup{top:-0.5em;} sub{bottom:-0.25em}。
11、<address></address>提供作者联系信息,可能有作者的电子邮件地址、指向联系信息页的链接或作者的通讯地址。显示为斜体。Address里不能包含h1~h6、article、address、aside、footer、header、hgroup、nav和section。
12、<ins></ins>标记添加的内容,对插入的文本加上下划线;<del></del>标记已删除的内容,对已删除的文本加上删除线;<s></s>标记不再准确或不再相关的内容,对s元素加上删除线。ins和del既可以包含短语内容,也可以包含块级内容,支持cite和datetime属性,cite属性指向说明编辑原因的页面,datetime属性提供编辑的时间。
13、<code></code>标记代码示例或文件名,代码需要显示<或>,应分别使用<和>,默认以等宽字体显示;<kbd></kbd>标记用户输入指示,默认以等宽字体显示;<samp></samp>标记程序或系统的示例输出,默认以等宽字体显示;<var></var>表示变量或占位符的值,默认以斜体显示。
14、<pre></pre>预格式化的文本可以保持文本固有的缩进、换行和空格,默认以等宽字体显示。对pre设置自动换行pre{white-space:pre-wrap;}。
15、<mark></mark>突出显示文本,默认加上黄色背景。
16、<br/>用于诗歌、街道地址等应该紧挨着出现的短行。
17、<span></span>用于包围字词或短语内容。
18、<u></u>用于为文本添加下划线。
19、<wbr/>可换行,Chrome和Firefox有效;<br/>强制换行。
20、<ruby><rp>(</rp><rt><rt><rp>)</rp></ruby>旁注标记。
21、<bdo></bdo>为双向文本设置逻辑顺序,属性dir设置为rtl或ltr;<bdi></bdi>,无需设置属性dir,默认已设为自动判断。
22、<meter></meter>表示分数的值和已知范围的测量结果,属性value显示值必须包含,属性min和max分别默认为0和1.0,属性title指定单位,IE9和Safari不支持该元素。
23、<progress></progress>表示任务的完成进度,属性max指定任务的总工作量必须大于0,属性value指定任务已完成的量,IE9不支持该元素。
第五章 图像
1、图像的格式
1)JPEG:有损的格式,采用这种格式保存的文件相对较小,下载速度就会较快;
2)PNG和GIF:无损的格式,对于PNG和GIF,应该优先选择PNG。
格式 |
用法 |
颜色 |
索引色透明 |
alpha透明 |
JPEG |
适合于大多数照片,以及其他颜色较多且可接受一些质量损失的图像 |
>1600万 |
— |
— |
PNG-8 |
适合于标识、重复的图案以及其他颜色较少的图像或具有连续颜色的图像 |
256 |
支持 |
支持 |
PNG-24 |
与PNG-8相似,不过支持颜色更多的图像。适用于颜色丰富且质量要求高的图像 |
>1600万 |
支持 |
— |
PNG-32 |
与PNG-24相似,不过支持具有alpha透明的图像 |
>1600万 |
— |
支持 |
GIF |
用法与PNG-8相似,在大多数情况下应使用PNG-8 |
256 |
支持 |
— |
2、透明度
1)索引色透明:一个像素要么是透明的,要么是不透明的;
2)alpha透明:可以控制一个像素透明的程度,Photoshop不支持alpha透明的PNG-8,但支持alpha透明的PNG-32。
对于透明图像,应使用PNG-8或PNG-32
3、<img src=”img.url” />属性src指示图像文件在服务器上的位置。属性alt为图像的替代性描述,IE10替代文本出现在一个带叉的小方块旁边,且两者有一个方框包围;在Firefox和Opera等其他浏览器中,替代文本是单独出现的;Chrome和Safari不会显示alt文本,而是现实缺失图像的图标。属性width和height设置图像尺寸,以像素为单位。
图标:favicon大小至少应该为16*16(单位为像素),iPhone和iPod touch的favicon大小为57*57或114*114,iPad的favicon大小为72*72或144*144。