1.1 案例二:网站图片页面显示:1.1.1 需求:
在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理?
效果如下:
1.1.2 分析:1.1.2.1 技术分析:
【HTML的图片标签】
图片标签:<img> * 属性: * src :图片的来源. * width :图片的宽度. * height:图片的高度. * alt :图片找不到显示的内容.图片的引入的路径问题: * 路径:相对路径. * 如果引入的图片和html文件在同一级路径。 * 直接写文件名或者./文件名 <img src="cs10006.jpg" /> <img src="./cs10006.jpg" /> * 如果引入的图片在html文件的上一级路径。 * <img src="../cs10006.jpg" /> * 如果引入的图片在html文件的下一级路径。 * <img src="img/cs10006.jpg" />
1.1.2.2 步骤分析:
【步骤一】创建一个html的文档
【步骤二】引入两张图片显示到页面
1.1.3 代码实现:
<img src="logo2.png" height="50" width="200"/><img src="header.png" height="50" width="250"/>
1.2 案例三:网站列表页面的显示1.2.1 需求:
在网站的友情链接页面显示网站的所有的友情链接.
1.2.2 分析:1.2.2.1 技术分析:
【HTML的列表标签】
l 有序列表
<ol> <li></li></ol>l 无序列表<ul> <li></li></ul>【HTML的超链接标签】HTML的超链接标签:<a> * 属性: * href :链接的路径 * target :打开的方式 * _self :在自身页面打开 * _blank :新打开一个窗口
1.2.2.2 步骤分析:
【步骤一】创建一个html的文档
【步骤二】创建一个无序列表
【步骤三】在无序列表中添加超链接标签.
1.2.3 代码实现:
<ul><li><a href="../案例一:网站信息页面的显示/案例一:网站信息页面的显示.html">传智播客</a></li><li><a href="http://www.baidu.com" target="_self">百度</a></li><li><a href="http://www.163.com" target="_blank">网易</a></li><li>百合</li></ul>
1.2.4 总结:
无序列表的属性:
type属性
disc :实心点.
circle :空心圆
square :方块.
有序列表的属性:
type属性:
1 :数字类型
a :英文类型
i :罗马字符
start属性:从哪开始
超链接的target属性:
_self
_blank
_parent