form表单以及内嵌框架标签

时间：2021-12-02 09:53:09

今关于今天所学习的东西又复杂又简单，上午学习了form表单，也是挺简单的；搭配table表格使用也是非常熟练。

下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页；还有在内嵌框架标签中添加视频以及视频标签里的一些属性进行调整。　　

<input type="text" name="user" placeholder="邮箱账号或者手机号码">在input里写，placeholder是让在表单里默认的字，删不掉哪种

<!--表单：

<form action="所有表单值提交的地址" mthod="提交的方式（默认get提交）"></form>

      表单元素

提交方式：

    1 get

    所有表单的数据以键值对的方式 key=value的方式传递给后台

        url:请求地址?key1=value1&key2=value2&key3=value3&.....

        缺点:不安全，传递的内容大小有限制

    2 post

     不会显示表单数据

       安全性高，传递的内容大小基本没有限制

    表单元素通用格式：

    <input type="表单元素的类型" name="键" value="值">

表单元素类型：

    1 文本类型：

        text：文本框

        passwo：密码框

        hidden：隐藏域

    2 按钮类型

        button：普通按钮

        submit：提交按钮

        resey：重置按钮

    3 单选类型

        radio:单选

            必须搭配name属性使用 需要name值一样才能实现单选的效果

            label标签：可直接点击label标签里的属性直接勾选，可点击label里的文字进行选择

        checkbox:多选

             checked:默认选择，放在哪个选择就是默认选择哪个   input中可使用select标签中不可使用

             disabled： 直接锁死 不可编辑                     input中可使用select标签可使用

    4 文件

        file：文件上传(必须在form标签中加 formenctype="multipart/form-data")

    下拉框标签：

    <select>

            <optinon>选项1</optinon>

            <optinon>选项2</optinon>

            <optinon>选项3</optinon>

    </select>

        selected属性：select标签中用于默认选中状态，其他标签不可使用

-->

<!--label标签：可直接点击label标签里的属性直接勾选，可点击label里的文字进行选择-->

<!--radio:单选-->

<!--必须搭配name属性使用 需要name值一样才能实现单选的效果-->

        单选：

        <br>

        性别：

        <label>

        男<input type="radio" name="sex" value="man" checked>

        </label>

        <label>

         女<input type="radio" name="sex" value="woman">

        </label>

        <br>

<!--value值是提交给后台让自己看的-->

        多选：

        <br>

        爱好：

        <label>

        足球<input type="checkbox" name="hobbby">

        </label>

        <label>

        篮球<input type="checkbox" name="hobbby">

        </label>

        <label>

        排球<input type="checkbox" name="hobbby">

        </label>

        <br>

        文件上传：

            <input type="file">

        <br>

        地址:

        <select name="" id="address">

            <option value="zd" >张店区</option>

            <option value="zc">周村区</option>

            <option value="bs" selected>博山区</option>

        </select>

<!--文本域-->

        <textarea name="text1" id="" cols="30" rows="10"></textarea>
        
<!doctype html>

<html>

<head>

<!--在head里面<link rel="icon" href="a.ico.ico" type="image/*">给图片加小图片

               引入ico照片（必须是Ico）   照片位置      属性-->

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<!--内嵌框架标签：

<iframe name="名称">2</iframe>

target="在哪里显示地址"

href="打开地址"

要是连接起来就给iframe一个name名字，再在其他的页面添加属性target="名字跟iframe里面的name值一样即可"

视频标签：

<video></video>

-->

<body>

<span style="background-color: blue" >    这是文字与文字背景添加颜色   </span>

<a href="first.html" target="myhtml">天气</a>

<a href="second.html" target="myhtml">新闻</a>

<a href="third.html" target="myhtml">图片</a>

<br>

<!--内嵌框架-->

<iframe src="https://www.baidu.com" frameborder="0" name="myhtml" width="800" height="400"></iframe>

<!--视频标签

controls 视频手动点击播放

autoplay 视频自动播放

loop     循环播放

-->

<video src="https://f.us.sinaimg.cn/000WYpXOlx07sA7ZDFrG01041200k8U80E010.mp4?label=mp4_ld&template=640x360.28.0&Expires=1553583758&ssig=6dK5%2FvJ0hv&KID=unistore,video" controls autoplay loop></video>

</body>

</html>

相关文章