黑马程序员技术交流社区

标题: 【郑州校区】javaweb阶段笔记之html篇 [打印本页]
作者: 我是楠楠    时间: 2018-3-22 14:14
标题: 【郑州校区】javaweb阶段笔记之html篇
本帖最后由 我是楠楠 于 2018-3-22 14:20 编辑

第1章 WEB01-HTML篇

今日任务
Ø 网站信息页面案例
Ø 网站图片信息页面案例
Ø 网站友情链接页面案例
Ø 网站首页案例
Ø 网站注册页面案例
Ø 网站后台页面案例
教学导航
教学目标
了解什么是标记语言
了解HTML主要特性,主要变化及发展趋势
了解HTML的结构标签
掌握HTML的主要标签(字体,图片,列表,链接,表单等标签)
教学方法
案例驱动法
1.1 案例一：网站信息页面的显示：1.1.1 需求：
在网页中显示网站的信息的页面：效果如下：
1.1.2 分析:1.1.2.1 技术分析：
【HTML的概述】
Ø 什么是HTML
HTML:Hyper Text Markup Language  --- 超文本标记语言.
* 标记语言：指的是通过一组标签的形式描述事物的一门语言.
* 超文本：比普通的文本更强大.

Ø HTML的作用
HTML是用来制作页面(静态页面).

Ø HTML在那些地方使用
在设计网站的页面的时候都要使用到HTML.

【HTML的使用】
Ø HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
* 01.html

Ø HTML的结构标签
* 跟标签:<html></html>
    * <head>  -- html的头标签
    * <body>  -- html的体标签

【HTML的字体标签】
Ø <font>标签:HTML中的字体标签.
使用：<font>文字</font>
* <font>标签的属性:
    * <标签 属性名=”属性值” 属性名=”属性值”></标签>
    * 属性:
        * color属性:字体颜色
            * 英文单词设置:black,red,green,blue...
            * 使用16进制数设置:#FFFFFF , #FFF
        * size属性:字体的大小
        * face属性:字体
* 基本使用：
                <font>我是HTML!</font> <br/>
                <font color="red">我是HTML！</font><br/>
                <font color="#FF0000" size="1">我是小红！</font><br/>
                <font color="#00FF00" size="7">我是小绿！</font><br/>
                <font color="#0000FF" size="100">我是小蓝！</font><br/>

【HTML的排版标签】
Ø 标题标签：h标签<h1>...<h6>
<!-- HTML的标题标签 -->
                <h1>一级标题</h1>
                <h2>二级标题</h2>
                <h3>三级标题</h3>

Ø 段落标签：p标签
<p>
                        一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
                        一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
                        一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
                        一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
                </p>
                <p>
                        一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
                        一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
                </p>

Ø 字体加粗标签：b标签
<b>黑马训练营</b>

Ø 字体斜体标签：i标签
<i>黑马训练营</i>

Ø 字体下划线：u标签
<u>黑马训练营</u>

Ø 居中标签：<center>标签
<center>内容</center>

1.1.2.2 步骤分析:
【步骤一】创建一个HTML的文档
【步骤二】设置标题
【步骤三】设置四个段落
【步骤四】使用字体标签将第一个段落中的某个部分的内容变为红色.
1.1.3 代码实现:
[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>网站信息页面</title>

</head>

<body>

<h1>公司简介</h1>

<hr />

<p>

<font color="red">“中关村黑马程序员训练营”</font>是由<b>传智播客</b>联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。

</p>

<p>

黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。

</p>

<p>

中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。

</p>

<p>

一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。

</p>

</body>

</html>
1.1.4 总结:
HTML有标准:
* HTML4
    * <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
* HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...
    * <!DOCTYPE html>

<pre>标签：原生标签.
<hr/>标签：横线.

1.2 案例二：网站图片页面显示：
1.2.1 需求：
在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理?
效果如下:
1.2.2 分析:
1.2.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.2.2.2 步骤分析:
【步骤一】创建一个html的文档
【步骤二】引入两张图片显示到页面
1.2.3 代码实现：
[AppleScript] 纯文本查看 复制代码
<img src="logo2.png" height="50" width="200"/>

<img src="header.png" height="50" width="250"/>
1.3 案例三：网站列表页面的显示
1.3.1 需求：
在网站的友情链接页面显示网站的所有的友情链接.
1.3.2 分析：
1.3.2.1 技术分析：
【HTML的列表标签】
l 有序列表
<ol>
    <li></li>
</ol>

l 无序列表
<ul>
    <li></li>
</ul>

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

1.3.2.2 步骤分析：
【步骤一】创建一个html的文档
【步骤二】创建一个无序列表
【步骤三】在无序列表中添加超链接标签.
1.3.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.3.4 总结：
无序列表的属性:
    * type属性
        * disc        ：实心点.
        * circle        ：空心圆
        * square ：方块.
有序列表的属性:
    * type属性:
        * 1                ：数字类型
        * a                ：英文类型
        * i                ：罗马字符
    * start属性:从哪开始
超链接的target属性:
    * _self
    * _blank
    * _parent

1.4 案例四：网站的首页的显示：
1.4.1 需求：
网站的首页的设计：
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps5794.tmp.jpg
1.4.2 分析：
1.4.2.1 技术分析：
【HTML的表格标签】
<table>
<tr>
    <td></td>
    <td></td>
</tr>
</table>

属性:
    width        :表格宽度
    height        :表格高度
    border        :边框
    align        :表格水平位置:
        * left
        * center
        * right

<td>的属性:
    * colspan=”列数”
    * rowspan=”行数”

1.4.2.2 步骤分析：
【步骤一】创建一个html的页面
【步骤二】创建一个8行1列的表格
【步骤三】为每行内容填充数据.
1.4.3 代码实现:
1.5 案例五：网站的注册页面的显示：
1.5.1 需求：
使用HTML完成注册页面的设计：
1.5.2 分析：
1.5.2.1 技术分析
【HTML的表单标签（*****）】
HTML的表单标签：<form>
     * 常用属性:
          * action属性:提交的路径.默认提交到当前页面
          * method属性:请求的方式.GET和POST.默认是GET.
             ***** GET方式和POST方式的区别?
                   * GET        :数据会显示到地址栏中.GET方式提交是有大小的限制.
                   * POST        :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
HTML中表单元素：
* <input type=”text”>                :文本框.
    * 常用属性:
        * name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.
        * value        :文本框的默认值.
        * size        :文本框的长度.
        * maxlength:文本框输入的最大长度.
        * readonly:只读文本框.
* <input type=”password”>        :密码框.
    * 常用属性:
        * name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.
        * value        :密码框的默认值.
        * size        :密码框的长度.
        * maxlength:密码框输入的最大长度.


* <input type=”radio”>                :单选按钮.
    * 常用的属性:
        * name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.
        * value        :单选按钮的默认值.
        * checked:单选按钮默认被选中.

* <input type=”checkbox”>        :复选按钮.
* 常用的属性:
        * name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.
        * value        :单选按钮的默认值.
        * checked:单选按钮默认被选中.

* <input type=”button”>                :普通按钮.没有任何功能的按钮.
* <input type=”submit”>                :提交按钮.
* <input type=”reset”>                :重置按钮.
* <input type=”file”>                :文件上传的表单项.
* <input type=”hidden”>                :隐藏字段.
* <input type=”image”>                :图片按钮

* <select>                                        :下拉列表.
* <textarea>                                :文本域.



1.5.2.2 步骤分析：
【步骤一】创建一个html的文档
【步骤二】使用表格布局页面
【步骤三】在页面中使用表单标签完成注册页面
1.5.3 代码实现
[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>

<html>

        <head>

                <meta charset="UTF-8">

                <title></title>

        </head>

        <body>

                <table border="1" width="90%" align="center">

                        <tr>

                                <td>

                                <!--Logo部分-->

                                        <table width="100%" border="1">

                                                <tr>

                                                        <td>

                                                                <img src="img/logo2.png" />

                                                        </td>

                                                        <td>

                                                                <img src="img/header.png" />

                                                        </td>

                                                        <td>

                                                                <a href="#">登录</a>

                                                                <a href="#">注册</a>

                                                                <a href="#">购物车</a>

                                                        </td>

                                                </tr>

                                        </table>       

                                </td>

                        </tr>

                        <tr>

                                <td>

                                        <table width="100%" border="1" bgcolor="black" height="100%">

                                                <tr>

                                                        <td>

                                                                <a href="">首页</a>  

                                                                <a href="">手机数码</a>   

                                                                <a href="">电脑办公</a>   

                                                                <a href="">烟酒糖茶</a>   

                                                                <a href="">鞋靴箱包</a>   

                                                        </td>

                                                </tr>

                                        </table>

                                </td>

                        </tr>

                        <tr height="400" background="img/regist_bg.jpg">

                                <td>

                                <form action="../案例四：网站的首页的显示/案例四：网站首页.html" method="post">

                                        <table border="5" width="60%" align="center" bgcolor="white">

                                                <tr>

                                                        <td>

                                                                用户名

                                                        </td>

                                                        <td>

                                                                <input type="text" name="username" value="" size="20" maxlength="6" >

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                密码

                                                        </td>

                                                        <td>

                                                                <input type="password" name="password"/>

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                确认密码

                                                        </td>

                                                        <td>

                                                                <input type="password" name="repassword"/>

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                邮箱

                                                        </td>

                                                        <td>

                                                                <input type="text" name="email"/>

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                姓名

                                                        </td>

                                                        <td>

                                                                <input type="text" name="name"/>

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                性别

                                                        </td>

                                                        <td>

                                                                <input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                爱好

                                                        </td>

                                                        <td>

                                                                <input type="checkbox" name="hobby" value="篮球" checked>篮球

                                                                <input type="checkbox" name="hobby" value="足球">足球

                                                                <input type="checkbox" name="hobby" value="排球">排球

                                                                <input type="checkbox" name="hobby" value="羽毛球">羽毛球

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                籍贯

                                                        </td>

                                                        <td>

                                                                <select name="province">

                                                                        <option>--请选择--</option>

                                                                        <option value="北京" selected>北京</option>

                                                                        <option value="上海">上海</option>

                                                                        <option value="广州">广州</option>

                                                                </select>

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                头像

                                                        </td>

                                                        <td>

                                                                <input type="file" name="upload">

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                简介

                                                        </td>

                                                        <td>

                                                                <textarea cols="20" rows="4" name="info">我是：</textarea>

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                生日

                                                        </td>

                                                        <td>

                                                                <input type="text" name="birthday"/>

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td colspan="2">

                                                                 <input type="submit" value="注册"/><input type="reset" value="重置"/><input type="button" value="我是按钮">

                                                        </td>

                                                </tr>

                                        </table>

                                        </form>

                                </td>

                        </tr>

                        <tr>

                                <td height="70">

                                        <img src="img/footer.jpg" width="100%" height="100%">

                                </td>

                        </tr>

                        <tr>

                                <td align="center">

                                        <a href="../案例一：网站信息页面的显示/案例一：网站信息页面的显示.html">关于我们</a> 联系我们 招贤纳士 法律声明 <a href="../案例三：网站列表页面的显示/案例三：网站列表页面的显示.html">友情链接</a> 支付方式 配送方式 服务声明 广告声明 <br/>

                       

                                          Copyright © 2005-2016 传智商城 版权所有

                                </td>

                        </tr>

                </table>

        </body>

</html>
1.5.4 总结：
1.5.4.1 HTML5扩展的表单标签.(*****h5不是所有浏览器都支持)
<input type=”email”>
<input type=”date”>
<input type=”number”>
<input type=”color”>

1.6 案例六：网站的后台页面的显示：
1.6.1 需求：
一个网站需要有后台页面,后台页面设计：
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps57A6.tmp.jpg
1.6.2 分析：
1.6.2.1 技术分析：
【HTML的框架标签】
框架标签:<frameset >,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
    * rows
    * cols
使用<frame>标签，frame代表切分的每个部分.

1.6.2.2 步骤分析:
【步骤一】创建一个html的页面
【步骤二】将整个页面分成上下两个部分.
【步骤三】将页面的下半部分分成左右两个部分.
【步骤四】在左侧页面中添加一些链接.
【步骤五】点击左侧链接,将页面的内容显示到右侧.
1.6.3 代码实现：
      
[AppleScript] 纯文本查看 复制代码
 <frameset rows="15%,*">
                <frame  src="top.html" name="top"/>
                <frameset cols="15%,*">
                        <frame  src="left.html" name="left"/>
                        <frame  src="right.html" name="right"/>
                </frameset>
        </frameset>

1.6.4 总结：
1.6.4.1 特殊字符的标签：
空格        :                 
<        :<
>        :>
传智播客·黑马程序员郑州校区地址
河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层
联系电话 0371-56061160/61/62
来校路线  地铁一号线梧桐街站A口出






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