1.1 案例二：网站图片页面显示：1.1.1 需求：

在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理?

效果如下:

1.1.2 分析:1.1.2.1 技术分析:

【HTML的图片标签】

[AppleScript] 纯文本查看 复制代码

图片标签:<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 代码实现：

[AppleScript] 纯文本查看 复制代码

<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 有序列表

[AppleScript] 纯文本查看 复制代码

<ol>
    <li></li>
</ol>
l 无序列表
<ul>
    <li></li>
</ul>
【HTML的超链接标签】
HTML的超链接标签：<a>
    * 属性:
        * href	:链接的路径
        * target	:打开的方式
            * _self	:在自身页面打开
            * _blank	:新打开一个窗口

1.2.2.2 步骤分析：

【步骤一】创建一个html的文档

【步骤二】创建一个无序列表

【步骤三】在无序列表中添加超链接标签.

1.2.3 代码实现：

[AppleScript] 纯文本查看 复制代码

<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 总结：

[AppleScript] 纯文本查看 复制代码

无序列表的属性:
    * type属性
        * disc	：实心点.
        * circle	：空心圆
        * square ：方块.
 
有序列表的属性:
    * type属性:
        * 1	：数字类型
        * a	：英文类型
        * i	：罗马字符
    * start属性:从哪开始
 
超链接的target属性:
    * _self
    * _blank
    * _parent

JavaWeb01-HTML篇笔记（一）

1.1 案例二：网站图片页面显示：1.1.1 需求：

在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理?

效果如下:

1.1.2 分析:1.1.2.1 技术分析:

【HTML的图片标签】

[AppleScript] 纯文本查看 复制代码

图片标签:<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 代码实现：

[AppleScript] 纯文本查看 复制代码

<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 有序列表

[AppleScript] 纯文本查看 复制代码

<ol>
    <li></li>
</ol>
l 无序列表
<ul>
    <li></li>
</ul>
【HTML的超链接标签】
HTML的超链接标签：<a>
    * 属性:
        * href	:链接的路径
        * target	:打开的方式
            * _self	:在自身页面打开
            * _blank	:新打开一个窗口

1.2.2.2 步骤分析：

【步骤一】创建一个html的文档

【步骤二】创建一个无序列表

【步骤三】在无序列表中添加超链接标签.

1.2.3 代码实现：

[AppleScript] 纯文本查看 复制代码

<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 总结：

[AppleScript] 纯文本查看 复制代码

无序列表的属性:
    * type属性
        * disc	：实心点.
        * circle	：空心圆
        * square ：方块.
 
有序列表的属性:
    * type属性:
        * 1	：数字类型
        * a	：英文类型
        * i	：罗马字符
    * start属性:从哪开始
 
超链接的target属性:
    * _self
    * _blank
    * _parent

JavaWeb01-HTML篇笔记（一）