ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端HTML2

2019-07-05 14:55:01  阅读:198  来源: 互联网

标签:form 标签 前端 HTML2 提交 块儿 input 属性


内容回顾:
    json序列化非默认数据结构
        第一种 手动转字符串
        第二种  继承JsonEncoder重写它的default方法
    
    什么是前端
        任何跟用户直接交互的界面都可以称之为前端
    
    为什么学前端
        因为我们是python全栈开发,技多不压身!
    
    web本质
        浏览器输入网址 朝服务器发送请求
        服务器接收请求
        服务器返回相应的响应
        浏览器接收响应解析渲染展示到屏幕上
    
    http协议
        超文本传输协议,规定了信息基于网络传输的发送及接收格式
    
    http状态码
        10X        服务器已经接收了你的请求,正在处理,你可以继续提交数据
        20X        请求成功
        30X        内部重定向
        40X     请求错误
        50X     服务器错误
    
    html
        超文本标记语言,规定了前端页面的书写标准
    
    html注释
        单行注释<!--这里写注释-->
        多行注释<!--
        这就是多行注释
        -->
    
    html文档结构
    <!DOCTYPE html>
    <html>
        <head></head>
        <body></body>
    </html>
    
    
    head内常用标签
        title    定义网页标题
        link    引入外部css文件
        script    在该标签内部直接写js代码,也可以引入外部js文件
        style    内部写css样式语句
        meta
            name='keywords' content='.....................'
    


    
今日内容
    body常用标签
        
        基本标签
            h1~h6
            p
            a
            img
            b,u,i,s
            br
            hr
        
        特殊符号
            &nbsp;
            &gt;
            &lt;
            &reg;
            &amp;
            &copy;
            &yen;
        
        常用标签(******)
        div用于页面布局
        span普通小文本
        a标签:链接标签,锚点,可以通过target控制是否是当前页跳转
        img标签:
            src:图片地址
            alt:图片未加载完成显示信息
            title:鼠标悬浮上去显示文本
            
            width:只需要调整一个,另一个自动按比例缩放
            height
            
        列表标签
            无序列表
                ul>li
                    type disc,none,square,circle
            有序列表
                <ol type="i">
                    <li>aaa</li>
                    <li>bbb</li>
                    <li>ccc</li>
                </ol>
            标题列表
                <dl>
                    <dt>标题1</dt>
                    <dd>内容1</dd>
                    <dd>内容2</dd>
                    <dd>内容3</dd>
                    <dt>标题2</dt>
                    <dd>内容1</dd>
                    <dd>内容1</dd>
                    <dd>内容1</dd>
                    <dt>标题3</dt>
                    <dd>内容1</dd>
                    <dd>内容1</dd>
                    <dd>内容1</dd>
                </dl>
        
        表格标签
            <table>
                <thead></thead>
                <tbody></tbody>
            </table>
            
            table内 tr标签表示一行,tr里面可以放td,thead
            
            
            
            
            
        form表单(*******)
            功能:前后数据交互,帮你提交任意的数据
        
        input通过控制type属性来展示不同的获取用户输入的页面效果
            type属性总结:
                text:纯文本
                password:用户输入不可见
                date:日期    比如:获取用户生日
                radio:单选 比如:获取用户性别
                checkbox:多选 比如:获取用户爱好
                file:文件  获取用户上传文件
                
                submit:提交     注意:form表单中只有input的type属性是submit才能支持提交
                reset:重置
                button:按钮
        
        select:下拉框 默认是单选,可以通过multiple属性指定为多选
        
        textarea:大段文本
        
        
        
        label标签
            本身没有任何实际意义,主要是配合input标签
            <label for="">username:
                <input type="text">
            </label>
            
            <label for="i1">username:
                <input type="text" id="i1">
            </label>
        
    flask框架初窥
        flask安装命令
            pip install Flask
            
        flask三行式
            
        请求方式
            获取数据 get请求
            提交数据 post请求
        
        
标签分类(******)
        块儿级标签(独占一行) h1~h6,p,hr,br
            1.块儿级标签,可以嵌套其他块儿级标签和行内标签
            2.p标签虽然也是块儿级标签,但是它不能嵌套任何块儿级标签,只能嵌套行内标签
            
        行内标签(自身文本多大就占多大) span,b,u,i,s,a,img
            1.行内标签肯定不能嵌套块儿级标签,只能嵌套行内标签
            2.行内标签 无法设置长宽
            
标签分类2:
    双标签<h1></h1>
    自闭和标签<img />
        
        
URL:网址(uniform resource locator)
    专业一点:统一资源定位符
    url的组成:
        https://www.baidu.com/
        
        
form表单中
    action属性. 控制数据往哪提交,不写默认往当前url地址提交
    method属性  控制数据提交的方式,默认是get请求,可以通过method该属性指定其他提交
    提交数据的input必须要有name参数
    input框中value属性就是对应的值

    如果要提交文件数据
        1.修改提交数据编码格式enctype
        2.提交方式必须是post

        
form表单注意事项:
    action
    method默认是get
    enctype数据编码格式
    form表单获取用户输入的标签都必须有name属性
    form提交数据必须借助于input标签type类型等于submit按钮才能触发提交效果

    
    
        


        
        
        
        
        
        
        
        
       

标签:form,标签,前端,HTML2,提交,块儿,input,属性
来源: https://www.cnblogs.com/1832921tongjieducn/p/11138224.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有