美文网首页前端基础学习
html基础标签——textarea,iframe,label,

html基础标签——textarea,iframe,label,

作者: LeslieFind | 来源:发表于2020-05-07 21:41 被阅读0次

    效果:

    textarea标签
    iframe
    label
    fieldset

    代码:

    1、textarea:大的文本框,鼠标点击右下角可拉大
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        <h3>textarea标签</h3>
        <p>
            补充说明:<textarea name="note"></textarea>
        </p>
    
    </body>
    </html>
    
    2、iframe:可引用别人的样式过来
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <h1>iframe test</h1>
            <iframe style="width: 100%;height: 2000px;" src="http://www.baidu.com"></iframe>
    
        </div>
    
    </body>
    </html>
    
    3、label:点击其他地方可达到点击input标签的效果
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- 可让元素与input的框关联,点击元素达到点击框的效果   -->
        <label for="name">
            姓名:
            <input id="name" type="text"/>
        </label>
        <label>
            婚否:
            <input id="marry" type="checkbox"/>
        </label>
    </body>
    </html>
    
    4、fieldset:框住,并在框上写标题
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <fieldset>
            <legend>ldtest</legend>
            <p>用户名:</p>
            <p>密码:</p>
        </fieldset>
    </body>
    </html>
    

    总结:

    1、textarea:提交表单是,需要定义属性name
    2、iframe:src是来源,写的谁就把谁引入到该页面
    3、label:引入那个input,就需要这个input有属性id,并且在label中使用属性for,值是input的id的值
    4、fieldset:需要使用legend(英文是说明)标签表示框框上的标题

    相关文章

      网友评论

        本文标题:html基础标签——textarea,iframe,label,

        本文链接:https://www.haomeiwen.com/subject/vpgzghtx.html