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

    续———初识HTML！！！

    一、表单

    1.表单的作用

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

    2.如何画出表单？

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

    3.使用表单的注意事项

    • 一个网页当中可以有多个表单

    • 表单最终需要提交数据到服务器，form标签有一个action属性，这个属性用来指定服务器地址

      • 如这个代码：form action="http://192.168.111.3:8080/oa/save">
        • 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这个属性

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

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

        • 1
        • 2
        • 3
      •   <a href = "http://www.baidu.com">百度a>

        • 1

    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="登录"/>
                             
                        <input type="reset" value="清空"/>
                    td>
                tr>
            table>
        form>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    注意事项：

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    在这里插入图片描述

    (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” 就不会显示你提交的数据（在地址栏上）
      • 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

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

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

    Demo：

    <html>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    7.关于控件

    （1）hidden控件

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

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

    从以下图片中看出：

    在这里插入图片描述

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

    （2）file控件

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

    Demo：

    <html>

    <head>
        <title>file控件title>
    head>
    
    <body>
        <input type="file"/>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

    （3）readonly和disabled

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

    Demo：

    <html>

    <head>
        <title>readonly和disabledtitle>
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

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

    在这里插入图片描述

    （4）input控件的maxlength属性

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

    Demo：

    <html>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述

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

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

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

    注意事项：

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

    三、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和spantitle>
    head>
    
    <body>
       <div>1+1
           <div>=
               <div>2div>
           div>
       div>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    Demo2：

    <html>

    <head>
        <title>div和spantitle>
    head>
    
    <body>
       <span>1+1
           <span>=
               <span>2span>
           span>
       span>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述
    好啦本期博客就到此为止了，关于初识HTML部分也在今天告一段落咯，接下来，博主会给大家更新JavaScript方面的基础知识点！！！

    人生就是这样，要耐的住寂寞，才守得住繁华。

  • 相关阅读:
    Nginx重写功能
    Java面试题——继承，多态
    CSS 字体
    Django实现音乐网站 ⒅
    Sentinel实现服务降级并与api解耦
    【MyBatis源码分析】一.JDBC回顾
    Android开发基础——Kotlin：标准函数和静态方法
    嵌入式数据库sqlite3子句和函数的使用基础（06）
    9-AJAX-下-axios
    nuxt作为主应用接入qiankun的实践（附代码）
  • 原文地址：https://blog.csdn.net/m0_74968164/article/details/130904023