Web前端开发案例教程（HTML5+CSS3） 第2章 HTML5基础.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 2.2.4 HTML列表标记 * 2.2.4 HTML列表标记 无序列表 列表嵌套 自定义列表 有序列表 无序列表 * 2.2.4 HTML列表标记 无序列表 列表嵌套 自定义列表 有序列表 有序列表 * 2.2.4 HTML列表标记 无序列表 列表嵌套 自定义列表 有序列表 列表嵌套 HTML中可以实现列表的嵌套，也就是说，无序列表或有序列表的列表项中还可以包含有序或无序列表。 * 2.2.4 HTML列表标记 无序列表 列表嵌套 自定义列表 有序列表 自定义列表 * 2.2.4 HTML列表标记 无序列表 列表嵌套 自定义列表 有序列表 * 2.2.5HTML超链接标记 超链接 锚点链接 页面间的超链接 超链接 空链接 * 2.2.5HTML超链接标记 超链接 锚点链接 页面间的超链接 超链接 空链接 * 2.2.5HTML超链接标记 超链接 锚点链接 页面间的超链接 超链接 空链接 * 2.2.5HTML超链接标记 超链接 锚点链接 页面间的超链接 页面间的超链接 空链接 练习：创建二个页面，实现两个页面间的跳转 * 2.2.5HTML超链接标记 超链接 锚点链接 页面间的超链接 锚点链接 空链接 空链接 * 2.2.5HTML超链接标记 超链接 锚点链接 页面间的超链接 空链接 空链接 * 2.2.5HTML超链接标记 超链接 锚点链接 页面间的超链接 * 2.2.6HTML图像标记 常用WEB图像格式 给图像创建超链接 图像标记 常用WEB图像格式 网页中常用的三种图像格式： GIF格式 GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。而且GIF支持透明格式，因此很适合在互联网上使用。但GIF只能处理256种颜色，在网页制作中，GIF格式常用于LOGO、小图标及其他相对单一的图像。 * 2.2.6HTML图像标记 常用WEB图像格式 给图像创建超链接 图像标记 常用WEB图像格式 PNG格式 相对于GIF，PNG最大的优势是体积更小，支持alpha透明，并且颜色过渡更光滑，但PNG不支持动画。通常，图片保存为PNG-8会在同等质量下获得比GIF更小的体积，而半透明的图片只能使用PNG-24。 * 2.2.6HTML图像标记 常用WEB图像格式 给图像创建超链接 图像标记 常用WEB图像格式 JPG格式 JPG格式显示的颜色比GIF和PNG要多得多，可以用来保存超过256种颜色的图像，但JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG是特别为照片设计的文件格式，网页制作过程中类似于照片的图像比如横幅广告(banner)、商品图片、较大的插图等都可以保存为JPG格式。 * 2.2.6HTML图像标记 常用WEB图像格式 给图像创建超链接 图像标记 图像标记 * 2.2.6HTML图像标记 常用WEB图像格式 给图像创建超链接 图像标记 图像标记 （1）有的浏览器不能正常显示alt属性的内容。 （2）width和height属性默认的单位都是像素，也可以使用百分比。 （3）如果不给img标记设置width和height属性，则图像按原始尺寸显示；若只设置其中的一个值，则另一个会按原图等比例显示。 （4）设置width和height属性可以实现对图像的缩放，但最好使用图像处理软件将图像调整到合适大小，然后再置入网页中。 * 2.2.6HTML图像标记 常用WEB图像格式 给图像创建超链接 图像标记 给图像添加超链接 练习：为学院官网片添加超链接 * 2.2.6HTML图像标记 常用WEB图像格式 给图像创建超链接 图像标记 * 本章小结 1.HTML文档的基本结构 2.文本及段落标记：hn p hr br strong em del ins 3.特殊字符：nbsp; copy; gt; lt; 4.列表标记：ul ol dl 5.超链接标记：a 6.图像标记：img 感谢您的观看！ * * * * * * * * * * 第2章 HTML5基础 ※ 熟悉HTML的基本结构； ※ 熟悉常用的HTML标记； ※ 会熟练使用HTML常用标记创建简单网页。 2.1 案例：简单学校网站 * 第2章 HTML5基础 综合利用HTML5标记，制作简单学校网站。要求如下：