续---初识HTML！！！（结束篇）

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

续———初识HTML

一、表单

1.表单的作用

关于表单的作用表单最大的作用就是收集用户的信息用户填写表单点击提交数据给服务器。

2.如何画出表单

在HTML中我们采用form标签来画一个表单。
先在这里不着急用代码写一个表单博主先讲解一下关于使用画一个表单的注意事项。

3.使用表单的注意事项

一个网页当中可以有多个表单
表单最终需要提交数据到服务器form标签有一个action属性这个属性用来指定服务器地址
- 如这个代码form action="http://192.168.111.3:8080/oa/save"></form>
  - action属性用来指定数据提交给哪一个服务器
  - action属性和超链接中的href属性一样都可以向服务器发送请求request
  - 如http//192.168.111.3:8080/oa/save这是请求路径表单提交数据最终交给192.168.111.3机器上的8080端口对应的软件
画一个按钮这个按钮可以提交表单画按钮可以使用input输入域type=“submit”的时候表示是一个提交按钮具有提交表单的能力
- input type="submit"/> 具有提交表单的能力、
- input type="button"/> 不具有提交表单的能力因为这是一个普通按钮
- input type="text"/> 一个文本框用于输入文字
- input type="password"/> 一个密码框用于输入密码
- input type="checkbox"/> 一个复选框
- input type="radio"/> 一个单选框
设置一个按钮上显示的文本使用value这个属性
- <input type="submit" value="注册"/>

注意以下两个代码没有什么太大的区别都可以向服务器发送请求只不过表单发送请求的同时可以携带数据

  <form action = "http://www.baidu.com">
      <input type = "submit" value = "百度"/>
  </form>

  <a href = "http://www.baidu.com">百度</a>

4.表格和表单结合写一个简单登陆界面

Demo

<html>
<!--头-->
    <head>
        <title>表单</title>
    </head>
    <!--体-->
    <body>
        <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="userpassword"/></td>
                </tr>

                <tr align="center">
                    <td colspan="2">
                        <input type="submit" value="登录"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset" value="清空"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

在这里插入图片描述

注意事项

input type=“text” 后面可以不用跟value因为用户会自己填写用户填多少value就会显示多少
表单项写了name属性的一律会提交给服务器不想提交就不要写name属性
当value没有写的时候value的默认值为空字符串会将空字符串提交
表单是以 action?name=value&ame=valueame=valueame=value····这样的格式提交给服务器的

在这里插入图片描述

在地址栏中就可以看到表单提交给服务器的格式

5.做一个用户登陆界面

做一个用户登陆界面先要构想有什么元素如

<!——

用户名

密码

确认密码

性别

兴趣爱好

学历

简介

——>

大家可以先自己想一下该怎么去写博主这里就直接开干

Demo

<html>
<!--头-->
    <head>
        <title>表单</title>
    </head>
    <!--体-->
    <body>
        <form action="http://localhost:8080/jd/register">
            用户名
            <input type="text" name="username"/>
            <br>
            密码
            <input type="password" name="userpassword"/>
            <br>
            确认密码
            <input type="password"/>
            <br>
            性别
            <input type="radio" name="gender" value="1"/>男
            <input type="radio" name="gender" value="0"/>女
            <br>
            兴趣爱好
            <input type="checkbox" name="interest" value="singing"/>唱歌
            <input type="checkbox" name="interest" value="dancing"/>跳舞
            <input type="checkbox" name="interest" value="rap"/>rap
            <input type="checkbox" name="interest" value="basketball"/>篮球
            <br>
            学历
            <select name="grade">
                <option value="high school">高中</option>
                <option value="junior college">大专</option>
                <option value="undergraduate">本科</option>
                <option value="master">硕士</option>
            </select>
            <br>
            简历
            <textarea rows="5" cols="40" name="introduce"></textarea>
            <br>
            <input type="submit" value="注册"/>
            <input type="reset" value="清空"/>
        </form>
    </body>
</html>

在这里插入图片描述

(http://localhost:8080/jd/register?username=zhangsan&userpassword=123456&gender=1&interest=singing&interest=dancing&interest=rap&interest=basketball&grade=undergraduate&introduce=%CE%D2%CA%C7%D2%BB%B8%F6%B3%CC%D0%F2%D4%B3)

这个就是地址栏里面的东西

注意事项

单选按钮中的value必须自己手动指定
textarea是文本域的意思文本域没有value属性用户填写的内容就是value
用method = “post” 就不会显示你提交的数据在地址栏上
- <form action="http://localhost:8080/jd/register" method="post">
- method = “get” 就会显示提交的数据在地址栏上
- method属性不指定就默认为get
超链接也可以提交数据给服务器但是提交的数据都固定不变而且超链接是get请求不是post请求

6.关于下拉列表支持多选

这部分就是我们在网页选择东西时可以选择多个采用select标签。

Demo

<html>
<!--头-->
    <head>
        <title>下拉列表</title>
    </head>
    <!--体-->
    <body>
         <select multiple="multiple">
           <option>四川</option>
           <option>重庆</option>
           <option>贵州</option>
           <option>云南</option>
         </select>
    </body>
</html>

在这里插入图片描述

如果想选择多个的话按住Ctrl键就可以

如果想在网页上设置显示自己想要的条目数量

Demo

<html>
<!--头-->
    <head>
        <title>下拉列表</title>
    </head>
    <!--体-->
    <body>
         <select multiple="multiple" size="2">
           <option>四川</option>
           <option>重庆</option>
           <option>贵州</option>
           <option>云南</option>
         </select>
    </body>
</html>

在这里插入图片描述

7.关于控件

1hidden控件

Demo

<html>
<!--头-->
    <head>
        <title>hidden控件</title>
    </head>
    <!--体-->
    <body>
        <form action="http://localhost:8080/jd/register">
            <input type="hidden" name="userid" value="111"/>
            用户代码<input type="text" name="usercode"/>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

在这里插入图片描述

在这里大家可以看到在网页上并没有出现关于hidden的部分是因为该部分被隐藏了但是该部分还是会提交给服务器,在地址栏中可以看到。

从以下图片中看出

在这里插入图片描述

在地址栏中还是会有userid=111这就是被隐藏的部分但是还是会被提交。

2file控件

关于file控件就是在网页中上传文件所用的

Demo

<html>
<!--头-->
    <head>
        <title>file控件</title>
    </head>
    <!--体-->
    <body>
        <input type="file"/>
    </body>
</html>

在这里插入图片描述

3readonly和disabled

readonly和disabled相同点都是只读的不可以修改。但是readonly可以提交数据给服务器disabled不会提交数据即使有name属性也不会提交。

Demo

<html>
<!--头-->
    <head>
        <title>readonly和disabled</title>
    </head>
    <!--体-->
    <body>
        <form action="http://localhost:8080/taobao/save">
           用户代码<input type="text" name="usercode" value="123" readonly />
           <br>
           用户姓名<input type="text" name="username" value="zhangsan" disabled />
           <br>
           <input type="submit" value="提交数据" />
        </form>
    </body>
</html>

在这里插入图片描述

在输入框中显示的数据都不可以被修改但是点击提交时123会被提交zhangsna就不会被提交在地址栏中可以看出这就是readonly和disabled的区别。

在这里插入图片描述

4input控件的maxlength属性

关于maxlength属性就设置文本框中可输入字符数量的最大值

Demo

<html>
<!--头-->
    <head>
        <title>input控件的maxlength属性</title>
    </head>
    <!--体-->
    <body>
        <input type="text" maxlength="3"/>
</html>

在这里插入图片描述

在这个文本框中只能输入三个字符不能输入三个及三个以上字符

二、浅谈HTML中元素的id属性

在HTML中id属性的作用就是当JavaScript语言对HTML文档当中的任意节点进行增删改操作时在增删改操作之前先拿到这个元素节点通常我们用id属性来拿节点对象所以id属性的存在让我们获取元素节点更方便。

注意事项

在HTML文档中任意元素节点都有id属性id属性是该节点的唯一标识所以在同一个HTML文档中id值不能重复
表单提交数据时只提交和name属性有关的数据不会提交与id属性有关的属性
HTML文档其实相当于一棵树树上有很多节点每一个节点都有唯一的idJavaScript主要就是对这棵树DOM树上的节点进行增删改的DOMdocument

三、HTML中的div和span

1.div和span是什么

div和span都可以称为“图层”
图层的作用就是为了保证页面可以灵活布局
图层也就是一个一个的盒子div嵌套就是盒子套盒子
div和span是可以定位的只要定下div左上角的x轴和y轴坐标即可

2.了解

其实最早的网页是采用table进行布局的但是table不灵活太死板了现代的网页开发采用div布局多几乎很少使用table进行布局

3.div和span的区别

div独占一行span不会独占一行

Demo1

<html>
<!--头-->
    <head>
        <title>div和span</title>
    </head>
    <!--体-->
    <body>
       <div>1+1
           <div>=
               <div>2</div>
           </div>
       </div>
    </body>
</html>

在这里插入图片描述

Demo2

<html>
<!--头-->
    <head>
        <title>div和span</title>
    </head>
    <!--体-->
    <body>
       <span>1+1
           <span>=
               <span>2</span>
           </span>
       </span>
    </body>
</html>