《HTML5与CSS3基础教程》第4-5章

第四章 文本

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元素只用于参考源,引述文本则用blockquoteq元素。

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提供缩写词的全称,也可以把全称放在缩写词后面的括号里。FirefoxOpera等浏览器会对带titleabbr文字使用虚线下划线,这可以在样式表中设置abbr[title]{border-bottom:1px dotted #000;}

9、<dfn></dfn>定义术语(英文通常为斜体,汉语通常为黑体或者楷体),属性cite提供引述文本的位置。如果一个段落、描述列表或区块是某dfn元素距离最近的祖先,那么该段落、描述列表或区块必须包含该术语的定义。

10、<sup></sup>上标包括商标符号、指数和脚注编号等;<sub></sub>下标包括化学符号。修复使用subsup时的行间距问题,设置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~h6articleaddressasidefooterheaderhgroupnavsection

12、<ins></ins>标记添加的内容,对插入的文本加上下划线;<del></del>标记已删除的内容,对已删除的文本加上删除线;<s></s>标记不再准确或不再相关的内容,对s元素加上删除线。insdel既可以包含短语内容,也可以包含块级内容,支持citedatetime属性,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/>可换行,ChromeFirefox有效;<br/>强制换行。

20、<ruby><rp>(</rp><rt><rt><rp>)</rp></ruby>旁注标记。

21、<bdo></bdo>为双向文本设置逻辑顺序,属性dir设置为rtlltr<bdi></bdi>,无需设置属性dir,默认已设为自动判断。

22、<meter></meter>表示分数的值和已知范围的测量结果,属性value显示值必须包含,属性minmax分别默认为01.0,属性title指定单位,IE9Safari不支持该元素。

23、<progress></progress>表示任务的完成进度,属性max指定任务的总工作量必须大于0,属性value指定任务已完成的量,IE9不支持该元素。

第五章 图像

1、图像的格式

1)JPEG:有损的格式,采用这种格式保存的文件相对较小,下载速度就会较快;

2)PNGGIF:无损的格式,对于PNGGIF,应该优先选择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-8PNG-32

3、<img src=”img.url” />属性src指示图像文件在服务器上的位置。属性alt为图像的替代性描述,IE10替代文本出现在一个带叉的小方块旁边,且两者有一个方框包围;在FirefoxOpera等其他浏览器中,替代文本是单独出现的;ChromeSafari不会显示alt文本,而是现实缺失图像的图标。属性widthheight设置图像尺寸,以像素为单位。

图标:favicon大小至少应该为16*16(单位为像素),iPhoneiPod touchfavicon大小为57*57114*114iPadfavicon大小为72*72144*144

原文地址:https://www.cnblogs.com/wuping/p/5008915.html