Javaweb学习之HTML(超文本标签语言)

学习目的

  1. 了解系统架构的分类
  2. 了解HTML的概念
  3. 掌握HTML的组成结构
  4. 掌握HTML的基础使用

一、系统结构

  1. 概念
    系统结构,是构成一个系统的 要素间的相互联系、相互作用的方式和秩序,或是系统联系的全体集合。联系就是系统要素之间相互作用,相互依赖的关系,它是要素构成系统的媒介。
    要素间的联系可以从三个方面体现: 联系的形式,联结链的多少,联系的强度。
  2. 常见分类
  • B/S架构:要素是B和S,主要描述B和S之间的联系
  • C/S架构:要素是C和S,主要描述C和S之间的联系。

1.1 B/S架构

  1. 概念
    B/S架构全称 Browser / Server架构,是 浏览器 / 服务器的一种交互形式。
    B是 Browser浏览器;S是 Server服务器端。浏览器端只加载由HTML、CSS、Javascript编写的超文本框架等,所有的数据和业务由服务器端获取和处理,然后通过网络将所需要的数据 从服务器端传送到浏览器端进行显示。
  2. 优点
  • 升级方便:只升级服务器端代码即可,浏览器只做展示,不做数据和业务处理;
  • 维护成本低。
  1. 缺点
  • 速度慢:数据需要通过网络从服务器端传送过来,需要时间;
  • 体验不好、界面不炫酷。
  1. 应用
    企业内部的解决方案都是采用B/S架构的系统,因为企业内部办公需要的一些系统不需要炫酷,不需要特别好的用户体验,只要能做数据的增删改查即可。并且企业内部更注重维护的成本
  2. 常见B/S架构代表
  • 京东
  • 百度
  • 天猫

1.2 C/S架构

  1. 概念
    C/S架构全称 Client / Server架构,是客户端/服务器端的一种交互形式。所需要的数据和业务处理一同包装在客户端软件中,只需要下载一个客户端(安装包),就可以使用数据,不需要耗时等待数据从服务器端传送过来。
  2. 优点
  • 速度快:所需要的(页面)数据都连同客户端一起下载到本地当中,使用时不需要从服务器端等待网络下载传送,数据在本地
  • 体验好,界面炫酷。
  1. 缺点
  • 升级麻烦:每一次升级,都需要升级客户端,因为每一次新版本的客户端页面(数据)发生了变化改动;
  • 维护成本较高。
  1. 应用
    娱乐型的系统多数是C/S架构的。
  2. 常见C/S架构代表
  • QQ
  • 微信
  • 支付宝

1.3 前后端分离

  1. 概念
    前后端分离指的是前端与后端的交互只有数据,而不会涉及到业务本身。前端的业务由前端完成,后端的业务由后端完成,前端与后端的连接关系只有数据。
  2. 本质
    前后端分离 = 前端(使用数据)+ 容器(存储数据)+后端(获取并返回数据)

1.3.1 前端(浏览器端)

  1. 相关技术
    浏览器端Browser主要支持的语言有HTML(超文本标签语言)、CSS (层叠样式表)、JavaScript(java脚本语言)。
  2. 作用
    主要使用前端相关技术,将数据用一种用户接受的表现形式展现给用户。包括各种图片、音频、视频、动态效果等。前端页面上的图片需要UI设计师完成。

1.3.2 后端(服务器端)

  1. 相关技术
    服务器端Server只要支持的语言有很多:C、C++、Java、python等。(本人主要是使用Java语言完成服务器端的开发)

1.3.3 未分离

  1. 描述
    在前后端未分离时,前端页面看到的(数据)效果,需要由后端控制。后端可以渲染页面或重定向,即后端需要控制前端的展示,导致前端与后端的耦合度很高。
  2. 特点
    前后端未分离模式比较适合纯网页应用。
    但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口。

1.3.4 分离

  1. 描述
    在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面和控制前端的效果。至于前端用户看到什么效果,则是从后端请求返回的数据,如何加载到前端中都由前端自己决定。网页有网页的处理方式,App有App的处理方式,但无论哪种前端,所需的数据基本相同,后端仅需开发一套逻辑对外提供数据即可。
  2. 特点
    在前后端分离模式中,前端与后端的耦合度相对较低。
    在前后端分离模式中,通常将后端开发的每个视图都称为一个接口(视图又称"数据表的第三角度"),或者API,前端通过访问接口来对数据进行增删改查。

W3C 世界万维网联盟

  1. 概念
    W3C全称 World Wide Web Consortium。
  2. 贡献
    W3C为世界万维网的开发制定了很多规范,每一个参与世界万维网开发的企业、公司、开发人员都需要遵循W3C制定的相关规范。常见的有HTML规范、XML规范、http协议、https协议等。
  3. W3C制定了与HTML
    W3C制定了HTML的规范,每个浏览器生产厂家都会遵守规范,HTML程序员也会按照这个遵循规范去开发HTML页面。HTML规范目前最高的版本是HTML5.0,简称H5。

二、HTML

  1. 概念
    HTML全称 Hyper Text Markup Language ,意为超文本标记语言。所谓超文本即是指 流媒体、图片、声音、视频等类型的数据,超越文本类型的数据。
  2. HTML构成
    每一个HTML由大量的标签组成,每一个标签都有开始标签和结束标签。
  <标签>
          <标签>
                  <标签 属性名="属性值" 属性名="属性值">  </标签>
          </标签>
  </标签>
  1. 开发特点
    HTML开发只需要使用普通的文本编辑器即可,但创建的文件扩展名必须是.html或者.htm。当然HTML也有专业的开发工具,如:DreamWeaver、HBuilder等。
  2. 执行方式
    直接采用浏览器打开HTML文件就是运行。
  3. 浏览器示例


    浏览器HTML示例.png
  4. 对应代码示例
<!--加上以下第一行代码表示HTML5语法,去掉则表示HTML4.0-->
<!doctype html>

<!--根-->
<html>

    <!--头-->
    <head>
        <!--网页标题,显示在网页左上角-->
        <title>网页的标题</title>
    </head>

    <!--体-->
    <body>
        网页的主体内容,欢迎学习HTML!
    </body>

<!--
</HTML>

2.1 HTML标签

  1. 定义
    HTML 文档和 HTML 元素是通过 HTML标签进行标记的。HTML标签由开始标签和结束标签组成,开始标签是被括号包围的元素名(如<head>),结束标签是被括号包围的斜杠和元素名(如</head>)。但某些 HTML元素没有结束标签(如换行标签<br />)。
  2. 使用
    HTML的标签中,除了用以标明整个文件内容的<html></HTML>文件标签,用以标明HTML文件头部部分的<head></head>文件头标签,还有用以标明HTML文件主体内容部分的<body></body>文件体标签,此三种标签构成整个HTML文件的文件主体,缺一不可。但除此之外,还有许多的嵌套于文件头或文件主体内的标签,改些标签才是完整表达出HTML文件的实际内容。
  3. 分类
  • <meta charset="gbk">:<meta>标签是HTML中用于声明HTML文件格式的一种标签,该标签使用 charset属性可以声明浏览器可以使用哪一种字符编码方式打开该HTML文件;
<head>
        <!--告诉浏览器采用哪一种字符集打开页面-->
        <!--不是设置当前编辑器 编写页面的字符编码方式-->
        <meta charset="gbk">
    </head>
  • <hn>标题</hn>:HTML标题标签,n为数字123456,每一个数字使该标签的字体形成大小分级。<h1></h1>是最大级别标题(一级标题),<h6></h6>是最小级别标题(六级标题);
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  • <p>分段</p>:HTML段落标签,<p></p>使得HTML内的长文本内容可以分段落表示,不会自成一段(用户可读性差);
<!--以下分为四段落,不使用分段标签,则以下自成一段-->
<p>此处有八百字</p>
<p>此处有八百字</p>
<p>此处有八百字</p>
<p>此处有八百字</p>
  • <font color="颜色" size="大小">字体</font>:HTML中用于设置字体的标签,该标签内可以通过标签的属性来设置字体的大小和颜色等;
<font color="green" size="50">绿色50像素的字体</font>
  • <b>加粗</b>:HTML中用于对文字进行加粗显示的标签;
<b>此文字会粗体显示</b>
  • <i>斜体</i>:HTML中用于对文字进行斜体显示的标签;
<i>此文字会斜体显示</i>
  • <del>删除字</del>:HTML中用于对文字进行删除 / 划掉显示的标签(在文字中间划一横表示过时或删除);
<del>表示过期的字</del>
  • <ins>插入字</ins>:HTML中使用下划线表示该文字属于插入内容的标签;
<ins>表示插入的字</ins>
  • 底数幂数
<!--10的平方-->
10<sup>2</sup>
<!--e的四次幂-->
e<sup>4</sup>
  • 底数基底数
<!--10n-->
10<sub>n</sub>
<!--表示对数lne-->
ln<sub>e</sub>
  • <a href="链接地址">链接点</a>:HTML引入超链接的标签,在起始标签<a>的内部使用 href=属性引入超链接,而起始标签和结束标签之间仅是一个文本转向点;
<a href="https://www.baidu.com/">百度一下</a>
  • <img src="图片地址" width="宽度" height="高度" />:HTML引入图片的标签,<img>标签是起始和结束都在一个标签内(称为独目标签);
<img src="图片.jpg" width="120px" height="60px" />
  • <br>:HTML中用于对文本内容进行换行的标签,也是独目标签,使用该标签可以让长字段文本换行显示(不能使用回车键换行);
此处未换行<br>
该行已换行
  • <hr color="颜色" width="宽度">:HTML中用于显示一条横线(分割线)的标签,也是独目标签,使用该标签可以让指定位置出现一个横线,且可以通过color和width属性设置横线的宽度和颜色;
<hr color="red" width="60%">
  • <pre>预留格式内容</pre>:<pre></pre>是HTML中的预留格式标签,即在该预留格式内的文本内容,其编写的格式是怎样就会怎样,而不是会自成一行,在该标签内的内容若已有换行则不需要<br>换行符换行;
<!--不使用预留格式标签,显示是自成一行-->
public class A{ public static void main(String[] args){ System.out.println(); } }

<!--以下内容保留原有的编写格式-->
<pre>
public class A{
      public static void main(String[] args){
            System.out.println();
      }
}
</pre>

2.2 HTML实体符

  1. 概念
    HTML中用于表示数量关系的符号,因为HTML的所有标签都以<>符号括起来表示,因此不能使用< >符号来表示日常的数量关系。必须提供HTML可以辨识的用于表示大于、小于、等于的关系符,也成为实体符。
  2. 特点
    所有的实体符都使用 &符号开始,以;分结束
  3. 分类
  • 小于&lt; 以&号开始 ;号结束
<!--错误表示a小于c,直接使用<号:a<c -->
a&lt;c
  • 大于&gt; 以&号开始 ;号结束
<!--错误表示a大于b,直接使用>号:b<a -->
a&gt;b
  • 空格&nbsp; 以&号开始 ;号结束
<!--错误表示                          空格 -->
a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b

2.3 HTML表格

  1. 定义
    HTML的表格类似于数据库中的表格,由于所有的前端页面 是根据后端从数据库中请求的数据 传送过来进行渲染的,因此可以理解为数据库中的表数据也要在HTML中使用表格显示,才满足"规格"。
  2. 表格标签
  • <table align="" border = "npx" width="" height=""></table>:HTML中引入的表格标签,该标签确定了HTML中的表格大体结构是,是一个最大的外部表格框架;在表格标签内部还可以使用标签的属性来描述不同的表格框架风格;
    <body>
        <!--定义表格,边框为1像素,宽度为60%,高度为40像素-->
        <table border = "1px" width="60%"  height="40px">
        </table>
    </body>
  • <tr align=""></tr>:HTML表格中的行标签,HTML表格大体框架下的次级标签,可以使用align属性声明该行的内容显示的位置(left居左,center居中,right居右);
<!--定义一张拥有三行的表格,指定行的内容采用"居左显示"-->
        <table>
               <tr  align="left"></tr>
               <tr></tr>
               <tr></tr>
        </table>
  • <td align=""></td>:HTML表格中的行的列标签,又称单元格,每一行可以拥有n个单元格,HTML的表格不支持列(因为列的可使用性不好),可以使用align属性声明该单元格的内容显示的位置(left居左,center居中,right居右)。
<!--定义一张拥有 三行三列的表格,指定列的内容采用"居中显示"-->
        <table>
                <tr>
                     <td  align="center"></td>
                     <td></td>
                      <td></td>
                </tr>
                <tr>
                     <td></td>
                     <td></td>
                     <td></td>
                </tr>
                <tr>
                     <td></td>
                     <td></td>
                     <td></td>
                </tr>
        </table>
  • <th></th>:HTML另外一种单元格标签,和<td>一样都是属于单元格,区别就是<th>会默认对单元格的内容加粗和居中显示,一般用于表格的首行单元格;
<!--定义一张拥有 三行三列的表格,指定列的内容采用"居中显示"-->
        <table>
                <tr>
                     <th>自动居中</th>
                     <th>自动加粗</th>
                      <th>用于表格的头部</th>
                </tr>
                <tr>
                     <td></td>
                     <td></td>
                     <td></td>
                </tr>
        </table>
  • 行单元格合并:行单元格合并指的是在同一个<tr></tr>行内,对该行的两个或多个<td></td>单元格进行合并。合并步骤是先找到该行内需要合并的单元格,在其中一个单元格内使用属性colspan="合并的单元格个数",其他需要被合并的单元格则删除;
<!--合并同一行内的单元格-->
        <table align="center">
                <tr align="center">
                     <td>a</td>
                     <td>b</td>
                     <td>c</td>
                </tr>
                <tr>
                     <td rowspan ="3">我</td>
              <!--   将需要合并的单元格删除
                     <td>爱</td>
                     <td>你</td>  
               -->
                </tr>
        </table>
  • 列单元格合并:列单元格合并指的是在 多个或跨行的<tr></tr>内,对跨行的两个或多个<td></td>单元格进行合并。合并步骤是先找到需要跨越的行,再找到需要合并的单元格,然后在跨行的第一行的单元格内使用属性colspan="单元格个数",其他行需要被合并的单元格则删除;
<!--合并跨行的单元格-->
        <table>
                <tr>
                     <td>a</td>
                     <td>b</td>
                     <td>c</td>
                </tr>
                <tr>
                     <td colspan = "2">5</td>
                     <td>2</td>
                     <td>0</td>
                </tr>
                <tr>
              <!--   将需要合并的单元格删除,一般删除与第一行平行的下面行的单元格
                     <td>我</td>
               -->
                     <td>爱</td>
                     <td>你</td>
                </tr>
        </table>
  • <thead></thead>:HTML表格的表头标签,使用该标签对表格无实际影响,只是便于JS的位置标识;
  • <tbody></tbody>:HTML表格的表体标签,使用该标签对表格无实际影响,只是便于JS的位置标识;
  • <tfoot></tfoot>:HTML表格的表尾标签,使用该标签对表格无实际影响,只是便于JS的位置标识。
  1. 特点
    先有表格标签<table>,再有行标签<tr>,最后才是行标签中嵌套的单元格标签<td>。

2.4 HTML背景/图片

  1. 定义
    HTML提供在<body>标签中设置不同的属性 来设置HTML文件的背景颜色或背景图片,从而完成对该HTML文件背景的显示。
    但背景图片和引入图片不相同,背景图片是铺在整个HTML文件背景的图,而引入图片是浮动在HTML文件上的图。
  2. 分类
  • <body bgcolor="颜色">:在<body>标签中使用bgcolor属性来设置HTML文件的背景颜色,颜色的属性值可以是十六进制数、RGB值 或颜色名;
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
  • <body background="图片路径">:在<body>标签中使用background属性来设置HTML文件的背景图片,背景图片的路径可以是图片的相对路径 、绝对路径或服务器路径等。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
  • <img src="URL" width="宽度" alt="文本" />:HTML中提供了<img>标签,表示在HTML文件中可引入外部图片,但该图片并不是HTML文件一直"粘贴"分不开的,当网络延迟或无网络时,该图片就不会在HTML文件中显示,而是显示出<img>标签的alt属性的值;
    设置图片大小只设置width属性,设置height属性则会让图片失真
    此外还提供title属性,当鼠标指向该图片悬停时,显示出title的值;alt属性设置图片加载失败时的文本内容。
<img src="boat.gif" alt="当图片无法加载时,显示此处的内容">

2.5 HTML超链接

  1. 定义
    HTML提供了<a>标签用于在HTML文件中引入超链接指向其他文件内容 或其他URL资源。其中,在<a></a>标签之间还可以嵌套<img />图片标签,用于表达该图片也是一个超链接。
    更重要一点,<a>标签拥有一个target属性,可以指定该超链接即将跳转后的显示位置。
  2. 分类
  • <a href="资源路径">链接文本标识 </a>:用于引入普通文本的超链接;
<a href="https://www.baidu.com/"> 百度</a>
<a href="https://www.bilibili.com/"> 哔哩哔哩</a>
<a href="https://www.jianshu.com"> 简书</a>
<a href="https://www.w3school.com.cn/"> w3school</a>
  • <a href="资源路径"><imp src="图片地址" /> </a>:用于引入图片的超链接;
<a href="https://www.baidu.com"><imp src="百度的logo图片" /> </a>
<a href="https://www.tmall.com"><imp src="天猫的logo图片" /> </a>
  1. target属性
  • <a href="资源路径" target="_blank">新窗口打开 </a>
  • <a href="资源路径" target="_self">本窗口打开 </a>
  • <a href="资源路径" target="_top">顶级窗口打开 </a>
  • <a href="资源路径" target="_parent">父窗口打开 </a>
  1. 图解


    <a>标签属性图解.png

2.6 HTML列表

  1. 定义
    HTML文件中提供的关于列表选项的标签,又分为有序列表<ol> 和无序列表<ul>,其中每个列表项之下又有多个子选项<li>。
  2. 分类
  • <ol> </ol>:HTML中的有序列表框架,<ol>限定了整个列表框架是有序的,其下面可以由多个列表选项<li>;
    其中<ol>标签还可以使用 type属性指定有序列表框架下的列表选项的序列符,使用 start属性指定有序列表选项的起始位;
<!--有序列表,选项的序列符为a,b,c,d,起始位从20开始-->
  <ol type = "a" start="20">
        <li>中国</li>            //20
        <li>美国</li>            //21
        <li>英国</li>            //22
        <li>德国</li>            //23
  </ol>
  • <ul> </ul>:HTML中的无序列表框架,<ul>没有对整个列表框架进行顺序限定,其下面可以由多个列表选项<li>;其中<ol>标签还可以使用 type属性指定该列表框架下的列表选项的图标;
<!--无序列表,选项的图标为circle圆圈-->
  <ul type = "circle">
        <li>中国</li>
        <li>美国</li>
        <li>英国</li>
        <li>德国</li>
  </ul>
  • <li> </li>:<li>是HTML文件的列表框架中用于描述列表选项的标签,每一个列表之下可以有多个子选项,但子选项<li>之下还可以嵌套列表框架<ol>或<ul>
<!--列表选项,可嵌套列表-->
  <ul type = "circle">
        <li>中国
              <ul type = "square">
                    <li>北京</li>
                    <li>上海</li>
                    <li>深圳
                          <ul type = "circle">
                            <li>罗湖区</li>
                            <li>南山区</li>
                            <li>福田区</li>
                            <li>宝安区</li>
                          </ul>
                    </li>
                    <li>广州</li>
             </ul>
        </li>
        <li>美国</li>
        <li>英国</li>
        <li>德国</li>
  </ul>

2.7 HTML表单(最重点)

  1. 定义
    HTML表单指的是一个页面中用于某块区域信息的表格,在日常的HTML开发中,基本上所有的数据都是以表单的形式提交,(单个提交的数据太乱又复杂)。
  2. 作用
    表单用于在浏览器中接收用户输入的信息,收集用户信息,然后将收集的数据提交给服务器。
  3. 原理
    表单最终是需要将数据提交给服务器的,在form标签里提供一个action属性--用来指定服务器地址。action属性用来指定数据提交给哪个服务器,该属性和超链接<a>标签的href属性一样,都可以向服务器发送请求(request)。
  4. 标签
  • <form action="服务器地址"> </form>:HTML提供的用于显示一个表单框架的标签,使用<form>标签时即形成一个表单框架,可以在表单里面进行编辑各种子标签,以用于获取用户输入的数据;
    使用表单的最终目的是获取用户的输入数据提交给服务器,从而可以完成将数据保存到数据库中;
  <!--定义一个表单:form就是整个表单框架-->
      <form>
          <!--type="submit"是提交表单数据的按钮-->
          <input type="submit" value="登录"/>
          <!--type="button"是普通按钮,不具备提交表单数据-->
          <input type="button" value="按钮上显示的文本"/>
      </form>
  <!--一个HTML文件可以又多个form表单-->
      <form>
        
      </form>
      <form>
        
      </form>
  • <input type= "" name="" value="显示的文本信息"/>:HTML提供的用于在表单框架中获取用户数据的子标签(输入域),重点是提交表单数据必须使用该标签的type属性值 = submit;
        <a href="http://www.baidu.com">百度</a>
        <!--超链接和表单的提交按钮 都可以向服务器发送请求,但表单发送请求的同时可以携带数据 -->
        <form action="http://www.baidu.com">
              <input type="submit" value="百度" />
        </form>
  • <select name=""><select />:HTML提供的用于实现下拉列表标签,<select />是整个下拉列表的框架,其下面通过编写多个<option>下拉选项标签 实现一个多选的下拉列表;
<!-- multiple="multiple" 支持多选,size设置显示条目数量-->
        <select multiple="multiple" size="2">
            <option>河北省</option>
            <option>河南省</option>
            <option>山东省</option>
            <option>山西省</option>
        </select>
  • <option value="">文本选项名</option>:HTML提供的用于在<select>下拉列表中实现多项选择的子选项标签,其value属性和<radio>的value属性一样,都是属于"选择按钮"必须手动设置value属性为提交给服务器的数据。
<!-- multiple属性="multiple" 支持多选-->
        <select multiple="multiple">
            <!-- value属性设置option被选后提交给服务器的数据-->
            <option value="hebei">河北省</option>
            <option value="henan">河南省</option>
            <option value="shandong">山东省</option>
            <option value="shanxi">山西省</option>
        </select>
  1. input输入域的属性
  • type属性:限定了不同功能的输入域;
  • value属性:若是按钮,则显示"按钮的文本信息",若程序员不手动设置按钮的显示文本,默认设置为"提交";
  • name属性:用于指定 表单中需要提交数据的输入域,若该输入域没有使用name属性,则提交表单时,该输入域的数据不会提交给服务器。
  1. input输入域-type属性值
  • type= checkbox复选框:将type属性设置为checkbox说明该<input>输入域是一个复选框;
  • type= button按钮:将type属性设置为button说明该<input>输入域是一个按钮,button只是一个普通按钮,不具备提交表单数据的能力;
  • type= submit提交表单数据:将type属性设置为submit说明该<input>输入域是一个复选框;
  • type= text文本框:将type属性设置为 text说明该<input>输入域只是一个普通的文本框;
  • type= radio单选按钮:将type属性设置为radio说明该<input>输入域是一个单选按钮;
  • type= password密码:将type属性设置为password说明该<input>输入域是一个单选按钮;
  • type= reset重置:将表单内所有的数据都重置清空;
  • type= file:当type属性的值为file时,该输入域可以选择一个外部的文件作为数据进行提交,该属性值专门用于选择文件上传。
      <form>
          <!--type="submit"是提交表单数据的按钮-->
          <input type="submit" value="登录"/>

          <!--type="button"是普通按钮,不具备提交表单数据-->
          <input type="button" value="按钮上显示的文本"/>

          <!--type="checkbox"是复选框-->
          <input type="checkbox" />

          <!--type="text"是文本框-->
          <input type="text" />

          <!--type="radio"是单选框-->
          <input type="radio" />

          <!--type="password"是密码框-->
          <input type="password" value="密码"/>

          <!--type="reset"是重置清空表单数据-->
          <input type="reset" value="清空" />

          <!--type=file控件:文件上传专用-->
          <input type="file" />
      </form>

2.7.1 表单提交数据原理

  1. 提交的数据
    表单提交的,永远是<input>输入域里使用name属性的那个输入域数据,只要使用了name属性的输入域,该输入域的数据才会提交给服务器;没有使用name属性的输入域,该输入域的数据就不会提交。
  2. 标签的属性value和用户输入的value数据
    value属性和value值不是相同,value值是指name属性的那个输入域由用户输入的数据,value值是用户输入数据。
  3. 单元按钮提交
  • 单选按钮输入域<radio>提交给服务器的数据由于没有用户输入,只能用户通过按钮选择,因此radio按钮的提交数据必须程序员使用value属性指定;
  • 且为了让多个单选radio不被同时选上,多个单元按钮应该使用通过一个name属性;
  • 且为了多个单选按钮拥有默认选值,则在某个单选按钮中使用checked属性表示默认选择。
  1. 表单数据提交图解


    表单提交数据.png
  2. 无法访问
    当<form>表单中 submit提交数据 的action服务器地址不存在时,则会提示该action服务器地址无法访问,因此表单的数据也无法提交。
    该情况常见于日常想要打开访问某个网站,输入网址(<input type="text">)按回车(<input type="submit">)后,请求无响应

    无法访问.png

2.7.2 表单与注册

  1. 需求
    在HTML开发中,表单通常是用于获取浏览器中用户输入的数据,而最常见的使用场景便是 用户注册(获取表单数据、向服务器提交数据、往数据库中存入数据)、用户评论等。
  2. 代码示例
    <!--表单中的action属性:写明表单数据需要提交到的 服务器地址-->
      <form action="http://localhost:8080/jd/login">
          <!--输入域中的name属性:写明需要提交数据到服务器的输入域-->
          用户名<input type="text" name="username" /><br>
          密码<input type="password" name="userpwd" /><br>
          <input type="submit" value="登录" />
      </form>
  1. 表单与注册
    <!--action写明表单数据需要提交到的 服务器地址-->
    <!--表单提交数据给服务器的格式:W3C的HTTP协议规定的格式
        action的地址?name属性=value属性值&name属性=value属性值&name属性=value属性值&name属性=value属性值...
        如:http://localhost:8080/jd/login?username=abc&userpwd=111
     -->
    <!--表单项<ipnut >中写了name属性的,一律会提交给服务器;当name没有写时,该项不会提交给服务器
     -->
    <!--当value没有写时,value默认值是空字符串"",会将空字符串提交给服务器
        java代码得到的则是:String username = ""
     -->    
      <form action="http://localhost:8080/jd/login">
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username" /></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="userpwd" /></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <!--submit必须放到form标签内部,放在form外部则提交无效-->
                        <input type="submit" value="登录" />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset" value="清空" />
                    </td>
                </tr>
            </table>
        </form>

2.7.3 表单提交方式 get和post(最重点)

  1. 示例
<!--注册的表单:action为提交的服务器地址,method为提交数据的方式-->
        <form action="http://localhost:8080/jd/register" method="">
            用户名
            <input type="text" name="username"/>
            <br>
            密码
            <input type="password" name="userpwd" />
            <br>
            确认密码
            <input type="password"/>
            <br>
            性别
            <input type="radio" name="gender" value="1" />男
            <input type="radio" name="gender" value="0" checked/>女 <!--单选按钮的value必须手动指定-->
            <br>
            兴趣爱好
            <input type="checkbox" name="interest" value="smoke"/>抽烟
            <input type="checkbox" name="interest" value="drink" checked/>喝酒
            <input type="checkbox" name="interest" value="fireHair" checked/>烫头
            <br>
            学历
            <select name="grade">
                <option value="gz">高中</option>
                <option value="dz">大专</option>
                <option value="bk" selected>本科</option> <!--默认选中-->
                <option value="ss">硕士</option>
            </select>
            <br>
            <!--textarea文本域没有value属性,用户填写的内容就是value-->
            <textarea rows="10" cols="60" name="introduce"></textarea>
            <br>
            <input type="submit" value="注册" />
            <input type="reset" value="清空" />
        </form>
        <!--get方式提交form表单数据:
            http://localhost:8080/jd/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
        -->
        <!--post方式提交form表单数据:看不到拥有name属性的输入域 提交的数据信息,但实际还是提交了
            http://localhost:8080/jd/register
        -->

        <!--超链接提交的是get请求,不是post请求-->
        <!--且超链接提交给服务器的数据固定不变的,只能在链接中写死提交的数据-->
        <a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
  1. 概念
    get和post是HTML中对于<form>表单提交数据到服务器的一种方式,虽然最终目的都是提交数据给服务器,但是不同的提交方式在执行过程中数据的可见性不一致。
  2. 分类
  • get方式提交表单数据:采用get方式提交时,用户提交的表单数据信息会显示在浏览器的地址栏上,method属性默认为get;
  • post方式提交表单数据:采用post方式提交时,用户提交的表单数据信息不会显示在浏览器地址栏上。当用户提交的信息中含有敏感信息时(如:密码),建议采用post方式提交。
  1. 格式
<!--注册的表单:action为提交的服务器地址,method为提交数据的方式-->
        <form action="http://localhost:8080/jd/register" >
        <!--默认不写method属性,提交方式为get-->
        </form>

        <form action="http://localhost:8080/jd/register" method="get">
        <!--指定提交方式为get-->
        </form>

        <form action="http://localhost:8080/jd/register" method="post">
        <!--指定提交方式为post-->
        </form>

2.8 HTML控件

  1. 定义
    控件在HTML中指的是可以控制的组件,也是用于<input>输入域中的属性,控件通常是控制输入域的一些属性;常见的控件有文件控件、隐藏控件。
  2. 分类
  • <input type="file" />:文件控件,用于<input>标签中,指定该输入域引入外部文件,提交表单的数据也是文件;
  • <input type="hidden" />:隐藏控件,用于<input>标签中,当<input>输入域使用hidden后,该输入对浏览器用户不可见,但是实际提交表单数据时也会提交该输入域的数据;不过隐藏控件的输入域通常用来提交id等自增类型的数据;
    <form action="http://localhost:8080/oa/save">
        <!--隐藏域:网页上看不到,但表单数据依然会提交给服务器-->
        <input type="hidden" name="userid" value="111" />
        用户代码<input type="text" name="usercode" />
        <input type="submit" value="提交" />
    </form>
  • <input type="text" value="" readonly />:仅读控件,使用该控件的输入域,浏览器用户在使用HTML时,仅能查看该输入域上默认的value值,不可修改(但依然可以提交表单数据到服务器);
  • <input type="text" disabled />:默认不可用控件,使用该控件的输入域,也只读不能修改(但该输入域的默认数据不会提交表单到服务器)。
        <form action="http://localhost:8080/taobao/save">
            <!--仅能读取数据,用户不可修改,但依然会提交数据 -->
            用户代码<input type="text" name="usercode" value="110" readonly />
            <!--仅能读取数据,用户不可修改,也不能提交数据 -->
            用户姓名<input type="text" name="username" value="zhangsan" disabled />
            <input type="submit" value="提交数据" />
        </form>
  • <input type="text" maxlength="" />:输入域长度限定控件,使用maxlength属性的控件会限制用户输入的数据长度,不能超越限定长度的数据。
      <!-- 该文本框中可输入的字符数量为 3-->
      <input type="text" maxlength="3" />

2.9 元素id属性(最重点)

  1. 概念
    在HTML文件中,任何标签元素(节点)都有id属性,id属性是该节点的唯一标识,因此在同一个HTML文档当中id值不能重复。
  2. 特点
    id属性仅是标识作用,最大的用处是方便CSS样式和JS文件可以根据id找到标签的位置,从而对应上CSS样式渲染 或 JS动态处理。
    表单提交的数据 只和name属性有关系,和id无关。
  3. 作用
    javascript(简称JS)可以对HTML文档当中的任意(标签)节点进行增删改,在进行增删改之前需要先通过id拿到这个节点对象,id的存在让获取元素(节点)更方便。
  4. 实质
    HTML文档本质是一棵树(称为DOM--Document文档树),树上有很多节点,每一个节点都有唯一的id。javascript主要就是对这棵DOM树上的节点进行增删改。
  5. 示例
<!--通过form表单的id 对该form进行CSS样式渲染 或JS动态加持-->
    <form id="myform">
        <!--通过"username" id 对该输入域进行增删改-->
        <input type="text" id="username" name="username"/>
        <!--通过"userpwd" id 对该输入域进行增删改-->
        <input type="password" id="userpwd" name="userpwd"/>
    </form>

2.10 div与span

  1. 描述
    在HTML文件中,除了使用<table>标签可以让整个页面以表格形式整齐之外,HTML还提供了<div>和<span>标签让整个页面呈盒子形式,并且<table>的不易改动将会由<div>取代。<div>是HTML的一种盒子模型,也称为"图层",通过将HTML页面划分为一个大小可变的盒子,不仅可以使用坐标来确定<div>的位置,还能在<div>中嵌套<div>,从而达到更加灵活的格式。
  2. 作用
  • <div>和<span>都是为了保证页面可以灵活的布局, 图层是一个一个的盒子,div嵌套div就是盒子套盒子;
  • <div>和<span>都可以定位,只要定下div的左上角的x轴和y轴坐标即可;
  • 现代网页开发中div布局使用最多,很少使用table进行布局。
  1. 特点
  • div独自占用一行(默认情况下);
  • span不会独自占用一行,而会在后面进行拼接。
  1. 示例
                <!--一个HTML页面内可以有多个div,且每个div独占一行-->
                <div id="div1">我是一个DIV</div>
        <div id="div2">我是一个DIV</div>
        <!--多个span不会各自占一行-->
        <span id="span1">我是一个SPAN标签</span>
        <span id="span2">我是一个SPAN标签</span>
        <!--div中嵌套div,称为盒子模型里套盒子-->
        <div id="div3">
            <div>
                <div>test</div>
            </div>
        </div>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容