前端Day08笔记

一、嵌入标签
    1.什么是嵌入标签？
        <iframe src="" frameborder="0"></iframe>
        在当前的页面中嵌入一些第三方资源，iframe标签会向指定的服务器发起一个请求，有一些服务器是允许你来请求的数据  有一些服务器是不允许，它会在内部进行限制的（比如百度网站）
    2.iframe标签属性
        src：嵌入的资源地址，取值可以是任意格式的文件地址（如果浏览器不支持打开该格式的文件，则会进行自动下载）
        frameborder：边框，取值为0或1，0是无边框，1是有边框
        width：宽度，取值为像素单位
        height：高度，取值为像素单位

二、表单标签
    1.什么是表单？
        <form action=""></form> 表示表单的区域标签，中间可以包裹一系列的表单标签
        表单是一些用于收集用户信息的标签，form表单和超链接有一种默认行为，会发送请求
    2.表单区域标签的属性
        <form action="" method="" novalidate=""></form>
        1）action:提交表单的地址
        2）method：提交表单的方法【了解，后面详细讲】
        3）novalidate：提交是否需要校验（如果不需要校验，点击submit按钮会直接跳过校验）【了解】
    3.input标签具有的属性
        1）type 表单的类型，取值如下：
            a.type="text"        文本类型
            b.type="password"    密码类型
            c.type="radio"        单选框类型
                相同的组应加上相同的name属性值，可以实现同组内只能选中一个单选框
            d.type="checkbox"    复选框类型
            e.type="submit"        提交按钮类型
            f.type="reset"        重置按钮类型
            g.type="botton"        普通按钮类型
            h.type="file"        上传文件类型
                可以和multiple属性一起使用可以实现多个文件上传（不写该属性默认一次只能上传一个文件）
            i.type="hidden"        隐藏域类型，添加这个类型的输入标签在界面上是看不到的，但可以提交，提交一些隐藏信息的时候使用
        2）name 名称，在需要得到用户信息的时候加上这个属性，当表单提交的时候，会以name=value的形式提交
        3）value 表单的初始值，如果不写就是之后的输入信息
        4）placeholder 提示信息，一般用在输入内容的表单标签中【h5新增】
        5）checked 默认选中，用在类型为radio或checkbox的input标签中
        6）maxlength 表单内容的最大长度限制，超过最大值不能提交，一般用在输入内容的表单标签中【了解】【h5新增】
        7）minlength 表单内容的最小长度限制，低于最小值不能提交，但可以不填写，一般用在输入内容的表单标签中【了解】【h5新增】
        8）required 必填项，如果不填写无法提交，通常与minlength一起使用【了解】【h5新增】
        9）autocomplete 自动补全信息，取值为on或off，on开启此功能，off关闭此功能【h5新增】
        10）autofocus 自动获取焦点【h5新增】
        11）readonly 只读，加上这个属性之后无法选中输入，该属性值只对输入框相关的内容有效，对按钮无效【了解】
        12）disabled 禁用，完全没法用了，不会把表单的值提交给后端,对按钮这些也是有效的
    
    4.label标签
        1）关联标签
        2）格式：<label for=""></label> 也可以直接在label标签中放入需要关联的标签以及内容
        3）label标签属性的for属性，取值为需要关联的标签id（提前在需要关联的标签中设置好id属性值）
        
    5.fieldset标签【了解】
        1）分组表单标签，可以将form标签中的部分表单标签分为一组包裹在fieldset标签中
        2）格式：
            <fieldset>
                <legend>分组标题</legend>
            </fieldset>
        3）<legend></legend>是分组标题标签，中间包裹分组的标题
    
    6.select标签
        1）下拉列表标签
        2）格式：
            <select name="chioce">
                <option value="choice1">选择1</option>
                <option value="choice2">选择2</option>
                <option value="choice3" selected>选择3</option>
            </select>
        3）option的标签属性selected可以将该项作为默认项，如果不加，则下拉列表默认显示第一项

    7.textarea标签
        1）文本域标签
        2）格式：
            <textarea rows="" cols=""></textarea>
        3）标签属性rows表示文本域的行【了解】，标签属性cols表示文本域的列【了解】，这两个属性都可以省略不写
    
    8.button标签
        1）按钮标签
        2）格式：
            <button type="submit">提交按钮</button>
            <button type="reset">重置按钮</button>
            <button type="button">普通按钮</button>
        3）属性type是按钮标签的类型，取值为submit（提交）、reset（重置）、button（无效果，后期配合js使用）
    9.h5新增表单
        1）h5概念很广，他里面新增了很多的功能比如html的标签 属性...,新增了js的一些api，并且很多东西是用在移动端上的（2014年发布，当时移动端已经普及了）
        2）h5新增表单input输入标签的type属性值举例：【了解】
            email:邮箱输入框 再提交的时候会验证邮箱是否合理(这个验证是有问题)
            search:搜索输入框 会多出来一个后面xx 
            number:数字输入框 只能输入数字
                max:最大值  min:最小的值
            url:网址输入框  他会校验输入的内容是否时一个网址
            tel:号码相关输入框  pc端没有效果 手机端是有效果（弹出的键盘是数字键盘）
            color:颜色表单 可以选择一种颜色
            range：范围 可以选择一个范围  默认是再一半的地方  可以通过value属性设置它的值是多少
            date:日期表单
            month：月份表单
            week：周的表单
            time：时间表单
            datetime-local：年月日 小时分
        3）datalist标签
            datalist标签配合输入框使用,提供搜索的关建字，list属性指定了匹配列表的那一项id，option标签:搜索关建字匹配的每一项
            标签结构：
                <input type="text" name="username" autocomplete="off" list="data"/>
                <datalist id="data">
                    <option>选择1</option>
                    <option>选择2</option>
                    <option>选择3</option>
                    <option>选择4</option>
                </datalist>