黑马程序员技术交流社区

标题: 【郑州校区】JavaWeb01-HTML篇笔记（二） [打印本页]
作者: 谷粒姐姐    时间: 2018-4-24 10:16
标题: 【郑州校区】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篇笔记（一）





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2