【济南中心】JavaEE就业班同步笔记第一阶段：JavaWeb之HTML - 黑马程序员技术交流社区

【济南中心】JavaEE就业班同步笔记第一阶段：

JavaWeb之前端技术--HTML

在网页中显示网站的信息的页面：效果如下：

HTML:Hyper Text Markup Language --- 超文本标记语言.

* 标记语言：指的是通过一组标签的形式描述事物的一门语言.

* 超文本：比普通的文本更强大.

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

HTML在那些地方使用

在设计网站的页面的时候都要使用到HTML.

HTML的文件的创建

一个HTML文件,扩展名是.html或者.htm结尾

* 根标签:<html></html>

*<head> -- html的头标签

*<body> -- html的体标签

【HTML的字体标签】

<font>标签:HTML中的字体标签.

使用：<font>文字</font>

* <font>标签的属性:

* <标签属性名=”属性值” 属性名=”属性值”></标签>

*color属性:字体颜色

*英文单词设置:black,red,green,blue...

*使用16进制数设置:#FFFFFF , #FFF

*size属性:字体的大小

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

<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] 纯文本查看 复制代码

<!-- HTML的标题标签 -->

段落标签：p标签

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

<p>

         一段内容内容
      </p>
      <p>
         又一段内容内容
      </p>

字体加粗标签：b标签

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

<b>黑马训练营</b>

字体斜体标签：i标签

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

<i>黑马训练营</i>

字体下划线：u标签

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

<u>黑马训练营</u>

居中标签：<center>标签

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

<center>内容</center>

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

【步骤二】设置标题

【步骤三】设置四个段落

【步骤四】使用字体标签将第一个段落中的某个部分的内容变为红色.

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

<!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>

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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

* HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...

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

<!DOCTYPE html>

<pre>标签：原生标签.

<hr/>标签：横线.

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

【HTML的图片标签】

* src :图片的来源.

* width :图片的宽度.

* height:图片的高度.

* alt :图片找不到显示的内容.

图片的引入的路径问题:

* 路径：相对路径.

* 如果引入的图片和html文件在同一级路径。

* 直接写文件名或者./文件名

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

<img src="cs10006.jpg" />

* 如果引入的图片在html文件的上一级路径。

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

<img src="../cs10006.jpg" />

* 如果引入的图片在html文件的下一级路径。

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

<img src="img/cs10006.jpg" />

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

【步骤二】引入两张图片显示到页面

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

<img src="logo2.png" height="50" width="200"/>

在网站的友情链接页面显示网站的所有的友情链接.

【HTML的列表标签】

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

<ol>

    <li></li>

</ol>

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

<ul>

    <li></li>

</ul>

【HTML的超链接标签】

HTML的超链接标签：<a>

*href :链接的路径

*target :打开的方式

*_self :在自身页面打开

* _blank :新打开一个窗口

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

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

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

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

<ul>

无序列表的属性:

*circle ：空心圆

有序列表的属性:

* start属性:从哪开始

超链接的target属性:

案例四：网站的首页的显示：

网站的首页的设计：

【HTML的表格标签】

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

<table>

<tr>

    <td></td>

    <td></td>

</tr>

</table>

height :表格高度

align :表格水平位置:

*colspan=”列数”

*rowspan=”行数”

【步骤一】创建一个html的页面

【步骤二】创建一个8行1列的表格

【步骤三】为每行内容填充数据.

使用HTML完成注册页面的设计：

【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> :文本域.

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

【步骤二】使用表格布局页面

【步骤三】在页面中使用表单标签完成注册页面

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

<!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>

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

<input type=”email”>

<input type=”date”>

<input type=”number”>

<input type=”color”>

一个网站需要有后台页面,后台页面设计：

【HTML的框架标签】

框架标签:<frameset>,标签与body标签是冲突,有frameset就可以没有body.

使用<frame>标签，frame代表切分的每个部分.

【步骤一】创建一个html的页面

【步骤二】将整个页面分成上下两个部分.

【步骤三】将页面的下半部分分成左右两个部分.

【步骤四】在左侧页面中添加一些链接.

【步骤五】点击左侧链接,将页面的内容显示到右侧.

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

<frameset rows="15%,*">