JavaWeb01-HTML篇笔记

1.1 案例二：网站图片页面显示：1.1.1 需求：
在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理?
效果如下:

1.1.2 分析:1.1.2.1 技术分析:
【HTML的图片标签】

图片标签:<img>    * 属性:         * src  :图片的来源.         * width    :图片的宽度.         * height:图片的高度.         * alt  :图片找不到显示的内容.图片的引入的路径问题:    * 路径：相对路径.        * 如果引入的图片和html文件在同一级路径。            * 直接写文件名或者./文件名              <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="cs10006.jpg" />              <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./cs10006.jpg" />        * 如果引入的图片在html文件的上一级路径。            * <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../cs10006.jpg" />        * 如果引入的图片在html文件的下一级路径。            * <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/cs10006.jpg" />

1.1.2.2 步骤分析:
【步骤一】创建一个html的文档
【步骤二】引入两张图片显示到页面
1.1.3 代码实现：

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="logo2.png" height="50" width="200"/><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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