Java Web 04_1 — HTML(文件、文本、图片、列表、链接、块、语义化、表格标签 + 表单标签)

一、web概念概述

  1. JavaWeb:
    • 使用java语言开发基于互联网的项目
  2. 软件架构:
    1. C/S:Client/Server 客户端/服务器端
      • 在用户本地有一个客户端程序,在远程有一个服务器端程序
      • 如:QQ、迅雷
      • 优点:
        1. 用户体验好
      • 缺点:
        1. 开发、安装、部署、维护麻烦
    2. B/S:Browser/Server 浏览器/服务器端
      • 只需要一个浏览器,用户通过不同的网址(URL)可以访问远程不同的服务器端程序。
      • 优点:
        1. 开发、安装、部署、维护简单
      • 缺点:
        1. 如果应用过大,用户体验可能会受到影响
        2. 对硬件要求过高

1.1 B/S架构详解

  • 资源分类
    1. 静态资源
      • 使用静态网页开发技术发布的资源
      • 特点
        • 所用用户访问,得到的结果是一样的。
        • 如:文本、图片、音频、视频、HTML、CSS、Javascript
        • 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源。
    2. 动态资源
      • 使用动态网页技术发布的资源
      • 特点
        • 所用用户访问,得到的结果可能是不一样的
        • 如:jsp/servelet、php、asp…
        • 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
  • 要学习动态资源,必须先学习静态资源。

在这里插入图片描述

  • 静态资源
    • HTML:用于搭建基础网页,展示页面的内容
    • CSS:用于美化页面,布局页面
    • Javascript:控制页面的元素,让页面有一些动态的效果

二、HTML

2.1 概念

  1. 是最基础的网页开发语言
    • Hyper Text Markup Language 超文本标记语言
      • 超文本
        • 超文本使用超链接的方法,将不同空间的文字信息组织在一起的网状文本。
      • 标记语言:
        • 由标签构成的语言。<标签名称>,如html,xml
        • 标记语言不是编程语言
  2. 快速入门:
    • 语法:
      1. html文档后缀名.html或者.htm
      2. 标签分为:
        1. 围堵标签:有开始标签和结束标签。如,<html><html>
        2. 自闭和标签:开始标签和结束标签在一起。如,<br/>
      3. 标签可以嵌套:
        • 需要正确嵌套,不能你中有我,我中有你
        • 正确:<a><b></b></a>
        • 错误:<a><b></a></b>
      4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可以)引起来。
      5. html的标签不区分大小写,建议使用小写
<html>
	<head>
		<title>title</title>
	</head>
	
	<body>
		<font color='red'>helloworld</font><br/>
		
		<font color='green'>helloworld</font>
	</body>
</html>

2.2 标签

2.2.1 文件标签

  1. 构成html最基本的标签
    • html:html的根标签
    • head:头标签。用于指定html文档的一些属性,还可以引入外部的资源
    • title:标题标签。
    • body:体标签
    • <!DOCTYPE>:html5中定义该文档是html文档

2.2.2 文本标签

  1. 和文本有关的标签
    • 注释:<!-- 注释内容 -->
  • <h1> - <h6>:标题标签
    • h1~h6:字体大小逐渐递减
    • <p>:段落标签
    • <br>:换行标签
    • <hr>:展示一条水平线
    • <center>:居中标签
      • 属性:
        • color:颜色
        • width:宽度
        • size:高度
        • align:对齐方式
          • center:居中
          • left:左对齐
          • right:右对齐
    • <b>:字体加粗
    • <i>:字体斜体
    • <font>:字体标签
      • 属性
        • color:颜色
        • size:大小
        • face:字体类型
    • 属性定义
      • color
        1. 英文单词:red, green, blue
        2. rgb(值1,值2,值3);值的范围:0-255 如:rgb(0,0,255)
        3. #值1值2值3;值的范围:00~FF之间,如#FF00FF
      • width
        • 数值:width = ‘20’,数值的单位,默认是px(像素)
        • 数值%:占比,相对于父元素的比例
    • 案例:公司简介

2.2.3 图片标签

  1. <img>,展示图片的标签

    • 属性
      • src:图片路径
      • align:对齐方式
      • width:宽度
      • height:高度
      • alt:若图片不显示,代替的文字信息
        <!--展示图片-->
        <img src="image/jingxuan_2.jpg" align="right" width="500" alt="古镇" height="500">
    
        <!--
        相对路径
            以.开头的路径
                ./ 代表当前目录 ./image/1.jpg
                ../代表上一级目录
        -->
        <img src="./image/logo.jpg" > <!-- 代表当前目录下-->
    	<img src="../image/logo.jpg" > <!-- 代表上一级目录下-->
    

2.2.4 列表标签

  1. 有序列表:

    1. <ol>:order list
      • 属性:
        • type:表示序号类型。如:A,罗马数字1等
        • start:表示序号从第几个开始
        <!--    有序列表 ol -->
        早上起床干的事情
        <ol type="A" start="2">
            <li>睁眼</li>
            <li>看手机</li>
            <li>穿衣服</li>
            <li>洗漱</li>
        </ol>
    
    1. li:listed 表示项目
  2. 无序列表:

    1. <ul>
      • 属性
        • type
          • disc:原点
          • square:方块
          • circle:圆圈
  <!--    无序列表 ul -->
    早上起床干的事情
    <ul type="disc">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>

    <!--    无序列表 ul -->
    早上起床干的事情
    <ul type="square">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>

    <!--    无序列表 ul -->
    早上起床干的事情
    <ul type="circle">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>

2.2.5 链接标签

  • <a>
    • 属性:
      • href:指定访问资源的URL(统一资源定位符)
      • target
        • _blank:新建空白页面,打开指定的访问资源
        • _self:在自己的页面中进行跳转。默认值
    <!--    超链接 a-->
    <a href="https://www.baidu.com/"> 点我 </a> <br>

    <!--    新建空白页打开目标网址-->
    <a href="https://www.baidu.com/" target="_blank"> 点我 </a><br>

    <!--    在当前页面跳转到目标网址-->
    <a href="https://www.baidu.com/" target="_self"> 点我 </a><br>

    <!--    目标网址可以是本地资源-->
    <a href="5_列表标签.html" target="_self"> 列表标签 </a><br>


    <!--    mailto协议,点击后自动打开电脑上安装的邮箱软件-->
    <a href="mailto:973157930@qq.com">联系我们</a>

    <!--    点击图片跳转连接-->
    <a href="5_列表标签.html"><img src="image/banner_1.jpg" align="center" alt="标语"></a>

2.2.6 块标签(没有样式,结合css使用)

  1. <div>:每一个div占满一整行。块级标签
  2. <span>:文本信息在一行展示,行内标签,内联标签
<!--
        div:每一个div占满一整行。块级标签
        span:文本信息在一行展示,行内标签,内联标签

    -->
    <!--    只起到包裹作用,没有样式结合css改变样式-->
    <span>文泽路小男孩</span>
    <span>HDU小菜鸡</span> <br>

    <hr>
    <div>文泽路小男孩</div>
    <div>HDU小菜鸡</div>

2.2.7 语义化标签(提高可读性)

html5为了提高程序的可读性,提供的一些标签

  1. <header>
  2. <footer>

2.2.8 表格标签(可嵌套)

  1. table:定义表格
    • width:宽度
    • border:边框
    • cellpadding:定义内容与单元格的距离
    • cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合成一条
    • bgcolor:背景色
    • align:对齐方式
  2. tr:定义行
    • bgcolor:背景色
    • align:对齐方式
  3. td:定义单元格
    • colspan:合并行
    • rowspan: 合并列
  4. th:定义表头单元格,表头单元格中内容会自动居中并加粗显示
  5. caption:定义表名
  6. thead:表示表格的头部分(类似于语义化标签,提高程序可读性)
  7. tbody:表示表格的体部分
  8. tfoot:表示表格的脚部分
    <table border = "1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
        <thead>
        <caption>学生信息表</caption>
        <tr>
            <!-- <td>编号</td>-->
            <!-- <td>姓名</td>-->
            <!-- <td>成绩</td>-->

            <!-- 表头-->
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>

        <tbody>
        <tr bgcolor="aqua" align="center">
            <td>1</td>
            <td>小龙女</td>
            <td>100</td>
        </tr>

        <tr>
            <td>2</td>
            <td>杨过</td>
            <td>50</td>
        </tr>
        </tbody>
    </table>

2.3 案例——旅游网首页(html简易实现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游网站</title>
</head>
<body>
    <table width="100%" align="center">
<!--        第一行 - top_banner-->
        <tr>
            <td>
                <img src="./image/top_banner.jpg" align="center" width="100%" alt = "top_banner">
            </td>
        </tr>

<!--        第二行 - 搜索框-->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr align="center">
                        <td>
                            <img src="image/logo.jpg" align="center">
                        </td>
                        <td>
                            <img src="image/search.png" align="center">
                        </td>
                        <td>
                            <img src="image/hotel_tel.png" align="center">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

<!--        第三行 -选项-->
        <tr>
            <td>
                <table bgcolor="#ffd700" align="center" width="100%" cellspacing="10">
                    <tr align="center">
                        <td>
                            <a href="https://blog.csdn.net/weixin_43508544" target="_blank">首页</a>
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            酒店
                        </td>
                        <td>
                            香港车票
                        </td>
                        <td>
                            出境游
                        </td>
                        <td>
                            国内游
                        </td>
                        <td>
                            港澳游
                        </td>
                        <td>
                            报团定制
                        </td>
                        <td>
                            全球自由行
                        </td>
                        <td>
                            收藏排行榜
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

<!--        第四行 -轮播图-->
        <tr>
            <td>
                <img src="image/banner_3.jpg" width="100%" align="center">
            </td>
        </tr>

<!--        第五行 -精选-->
        <tr>
            <td height="50">
                <img src="image/icon_5.jpg">
                <font size="5" face="微软雅黑" >
                    小男孩精选
                </font>
                <hr color="gold">
            </td>
        </tr>

<!--        第六行 -精选-->
        <tr>
            <td>
                <table width="100%" align="center" >
                    <tr >
                        <td align="center" >
                            <img src="image/jiangxuan_1.jpg" >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 899</font>
                        </td>
                        <td align="center">
                            <img src="image/jiangxuan_1.jpg">
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 899</font>
                        </td>
                        <td align="center">
                            <img src="image/jiangxuan_1.jpg">
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 899</font>
                        </td >
                        <td align="center">
                            <img src="image/jiangxuan_1.jpg">
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

<!--        第七行 -国内游-->
        <tr>
            <td height="50">
                <img src="image/icon_5.jpg">
                <font size="5" face="微软雅黑" >
                    国内游
                </font>
                <hr color="gold">
            </td>
        </tr>

<!--        第八行 -国内游-->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr>
                        <td rowspan="2">
                            <img src="image/guonei_1.jpg" >
                        </td>

                        <td align="center"  >
                            <img src="image/jiangxuan_2.jpg" >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                        <td align="center"  >
                            <img src="image/jiangxuan_2.jpg"  >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                        <td align="center"  >
                            <img src="image/jiangxuan_2.jpg"  >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                    </tr>

                    <tr >
                        <td align="center"  >
                            <img src="image/jiangxuan_2.jpg" >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                        <td align="center"  >
                            <img src="image/jiangxuan_2.jpg"  >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                        <td align="center"  >
                            <img src="image/jiangxuan_2.jpg"  >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

<!--        第9行 -境外游-->
        <tr>
            <td height="50">
                <img src="image/icon_5.jpg">
                <font size="5" face="微软雅黑" >
                    境外游
                </font>
                <hr color="gold">
            </td>
        </tr>

<!--        第10行 -境外游-->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr>
                        <td rowspan="2">
                            <img src="image/jiangwai_1.jpg" >
                        </td>

                        <td align="center"  >
                            <img src="image/jiangxuan_3.jpg" >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                        <td align="center"  >
                            <img src="image/jiangxuan_3.jpg"  >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                        <td align="center"  >
                            <img src="image/jiangxuan_3.jpg"  >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                    </tr>

                    <tr >
                        <td align="center"  >
                            <img src="image/jiangxuan_3.jpg" >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                        <td align="center"  >
                            <img src="image/jiangxuan_3.jpg"  >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                        <td align="center"  >
                            <img src="image/jiangxuan_3.jpg"  >
                            <p>
                                上海直飞三亚5天4页自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                            </p>
                            <font color="red" size="5">&yen; 699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

<!--        第11行 -产品齐全-->
        <tr>
            <td>
                <img src="image/footer_service.png" width="100%" align="center">
            </td>
        </tr>
        
    </table>
</body>
</html>

在这里插入图片描述

三、表单标签

3.1 表单

  • 概念:用于采集用户输入的数据。用于和服务器进行交互。
  • <form>:用于定义表单。可以定义一个范围,范围代表采集用户数据的范围
    • 属性:
      • action:指定提交数据的URL
      • method:指定提交方式
        • 分类:一共7中,2种比较常用(面试题:getpost的区别)
          • get
            1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)
            2. 请求参数的长度是由限制的
            3. 不太安全
          • post
            1. 请求参数不会在地址栏中显示。会封装在请求体中(HTTP协议后讲解)
            2. 请求参数的长度没有限制
            3. 较为安全
    • 表单项中的数据想要被提交:必须指定其name属性

3.2 表单项标签

  • input:可以通过type属性值,改变元素展示的样式

    • type属性:

      1. text:文本输入框(默认值

      2. placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息。效果比直接使用value设置默认值好。

      3. password:密码输入框

      4. radio:单选框

        • 注意:
          1. 想要让多个单选框实现单选的效果,则多个单选框的name属性值必须一样
          2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值。
          3. checked属性,可以指定默认值
      5. checkbox:复选框

        • 注意:

          1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值。

          2. checked属性,可以指定默认值

      6. file:文件选择框。

      7. hidden:隐藏域,用于提交某些信息。

      8. 按钮

        1. submit:提交按钮。可以提交表单
        2. button:普通按钮
        3. image:图片提交按钮
          • src属性指定图片的路径
        <form action="#" method="get">
            <!-- 用户名:<input type="text" name = "username" value="请输入用户名"><br>-->
    
            <!--  这个label是用来描述用户名的,for之后的属性内容与id属性内容需要一致-->
            <label for="username">用户名</label>:<input type="text" name = "username" placeholder="请输入用户名" id = "username"><br>
            密码:<input type="password" name = "password" placeholder="请输入密码"><br>
            性别:<input type="radio" name = "gender" value="male" checked = "checked"> 男
                    <input type="radio" name = "gender" value="female"> 女
                <br>
            爱好:<input type = "checkbox" name = "hobby" value="shopping"> 逛街
                    <input type = "checkbox" name = "hobby" value="java" checked = "checked"> java
                    <input type = "checkbox" name = "hobby" value="game"> 游戏
                <br>
            图片:<input type="file" name = "file"><br>
            
            隐藏域:<input type="hidden" name = "id" value = "aaa"><br>
            取色器:<input type="color" name="color"><br>
            生日:<input type="date" name = "birthday"><br>
            生日:<input type="datetime-local" name = "birthday"><br>
            邮箱:<input type="email" name = "email"> <br>
            年龄:<input type="number" name = "age"> <br>
            
            <input type="submit" value="登陆">
            <input type="button" value = "一个按钮"><br>
            <input type="image" src="img/regbtn.jpg">
        </form>
    
    • label:指定输入项的文字描述信息
      • 注意:
        • labelfor属性一般会和inputid属性值对应。如果对应了,则点击label区域,会让input输入框获取焦点。
    <!-- 用户名:<input type="text" name = "username" value="请输入用户名"><br>-->
    
    <!--  这个label是用来描述用户名的,for之后的属性内容与id属性内容需要一致-->
    <label for="username">用户名</label>:<input type="text" name = "username" placeholder="请输入用户名" id = "username"><br>
    
  • select:下拉列表

    • 子元素:option
省份:<select name = "province">
                <option>--请选择--</option>
                <option value="1" selected>北京</option>
                <option value="2">上海</option>
                <option value="3">杭州</option>
        </select><br>
  • textarea:文本域
    1. cols:指定列数,每一行有多少个字符
    2. rows:默认多少行。
自我描述:
            <textarea rows="5" cols = "20"></textarea><br>

3.3 案例——验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面——表单</title>
</head>
<body>
    <form action = "#" method="post">
        <table border="2" align="center" width="30%">
<!--            用户名-->
            <tr>
                <td>
                    <label for = "username">用户名</label>
                </td>
                <td>
                    <input type="text" name = "username" placeholder="请输入账号" id="username">
                </td>
            </tr>

<!--            密码-->
            <tr>
                <td>
                    <label for = "password">密码</label>
                </td>
                <td>
                    <input type="text" name = "password" placeholder="请输入密码" id="password">
                </td>
            </tr>

<!--            email-->
            <tr>
                <td>
                    <label for = "email">Email</label>
                </td>
                <td>
                    <input type="email" name="emal" placeholder="请输入Email" id="email">
                </td>
            </tr>

<!--            姓名-->
            <tr>
                <td>
                    <label for = "name">姓名</label>
                </td>
                <td>
                    <input type="text" name = "name" placeholder="请输入真实姓名" id="name">
                </td>
            </tr>

<!--            手机号-->
            <tr>
                <td>
                    <label for="tel">手机号</label>
                </td>
                <td>
                    <input type="text" name = tel placeholder="请输入您的手机号" id="tel">
                </td>
            </tr>

<!--            性别-->
            <tr>
                <td>
                    <label >性别</label>
                </td>
                <td>
                    <input type="radio" name = "male"  checked>男
                    <input type="radio" name = "female"  >女
                </td>
            </tr>

<!--            出生日期-->
            <tr>
                <td>
                    出生日期
                </td>
                <td>
                    <input type="date" name = "birthday">
                </td>
            </tr>

<!--            验证码-->
            <tr>
                <td>
                    验证码
                </td>
                <td>
                    <input type="text" name="checkcode">
                    <img src="img/verify_code.jpg">
                </td>
            </tr>

<!--            注册按钮-->
            <tr>
                <td colspan="2" align="center">
                    <input type="button" name="submit" value="注册">
                </td>
            </tr>


        </table>
    </form>
</body>
</html>

在这里插入图片描述

练习资源均来自网络,侵权必删。

  • 2
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

文泽路小男孩

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值