HTML07:四个特性

(014)—控件:file、hidden控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file、hidden控件</title>
</head>
<body>
    <!-file控件:文件上传专用-->
    <input type="file"/>

    <form action="http://localhost:8080/oa/save">
        <!--hidden隐藏域:网页上看不到,但是表单提交的时候数据会自动提交给服务器。-->
        <input type="hidden" name="userid" value="111"/>
        用户代码<input type="text" name="usercode"/>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

结果:
在这里插入图片描述


(015)—readonly disabled maxlength

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>readonly disabled maxlength</title>
</head>
<body>
    <!--
    1.readonly和disabled相同点:都是只读不能修改,
    但是readonly可以提交给服务器,显示在地址栏,disabled数据不会提交给地址栏(即使有name属性也不会提交。)
    2.maxlength最多提交,设置文本框中字符数量,多的输不进去。
    -->
<form action="http://localhost:8080/taobao/save">
    用户代码<input type="text" name="usercode" value="110" readonly/>
    <br>
    用户姓名<input type="text" name="username" value="zhangsan" disabled/>
    <br>
    <input type="submit" value="提交数据"/>
    <br>
    最多输入<input type="text" maxlength="4"/>
</form>
</body>
</html>

结果:
在这里插入图片描述


(016)—HTML元素的id属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML元素的id属性</title>
</head>
<body id="mybody">
    <!--
        1.在HTML文档中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
        2.注意:表单提交数据的时候,只和name有关,与id无关。
        3.id有什么用?
            javascript语言,可以对HTML文档中任意节点进行增删改操作。
            javascript在增删改之前需要通过id来拿节点对象,id的存在让我们获取元素节点更方便。
        4.HTML文档是一棵树,树上有很多节点,每一个节点都有唯一的id.
    -->
    <form id="myform">
        <input type="text" id="username" name="username"/>
        <input type="text" id="userpwd" name="userpwd"/>
       <!--
       id就是节点的身份证号,不能重复。
       <input type="password" id="userpwd"/>
       -->
    </form>
</body>
</html>

(017)—div和span图层

<!DOCTYPE html>
 <!--
        1.div和span是什么?作用?
          *div和span都可以称为“图层”
          *图层的作用是为了保证页面可以灵活的布局。
          *图层是一个一个的盒子,div嵌套div就是盒子套盒子。
          *div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。
        2.其实最早的网页采用table进行布局,但是table不灵活,太死板,现代开发网页中div布局使用最多。

        3.div和span的区别?
        div独自占用一行(默认情况下)
        span不会独自占用一行。
    -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div和span</title>
</head>
<body>
    <div id="div1">我是一个div</div>
    <div id="div2">我是一个div</div>

    <span id="span1">我是一个span标签</span>
    <span id="span2">我是一个span标签</span>

    <div id="div3">
        <div id="div4">
            <div>test</div>
        </div>
    </div>
</body>
</html>

结果:在这里插入图片描述

发布了42 篇原创文章 · 获赞 8 · 访问量 2433

猜你喜欢

转载自blog.csdn.net/JH39456194/article/details/103408287