web概述03

最新推荐文章于 2023-09-04 15:24:24 发布

做梦追仙

最新推荐文章于 2023-09-04 15:24:24 发布

阅读量108

点赞数

分类专栏：前端文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_44251806/article/details/127487766

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

常见的input元素

<ol>
    <li>单行输入框&lt;input type="text"&gt;允许用户输入一行内容。如果使用input标签，但是没有type则默认type=text</li>
    <li>密码输入框&lt;input type="password"&gt;允许用户输入一行数据，但是不会直接回显输入内容，不能直接看到用户输入的内容</li>
    <li>隐藏域&lt;input type="hidden"&gt;不能接收用户直接输入数据，甚至不会在浏览器窗口中显示，一般用于额外提交请求参数，其中具体提交的数据就是标签中value设置的值</li>
    <li>单选框&lt;input type="radio"&gt;用于通过选择多个选项中一个选项提交数据，不使用认为录入的数据据，选项中value值就是选中后提交的数据</li>
    <li>复选狂&lt;input type="checkbox"&gt;用于通过选择m个选项中的n个选项提交数据[m>=n]，每个选项中value值就是该选项选中后提交的数据,如果不设value则on就是提交值</li>
    
    <li>图像域&lt;input type="image"&gt;可以生成图像按钮，可以指定width和height设置宽高,使用src属性指定显示的图片地址。提交数据时会提交x和y值标识点击位置</li>
    <li>提交按钮&lt;input type="submit"&gt;点击这个按钮后会向服务器提交form表单，其中的value就是按钮上显示的文字信息</li>
    <li>重置按钮&lt;input type="reset"&gt;点击后会将form表单中的所有输入域恢复为原始值</li>
    <li>无动作按钮&lt;input type="button"&gt;默认不会有任意动作，需要使用javascript编码响应点击事件</li>
</ol>
<a href="index.html">back</a>
<hr/>
<h3>input元素的常见属性</h3>
<ul>
    <li>checked设置radio或者checkbox选项是否处于选中状态</li>
    <li>disabled设置首次加载时禁用这个标签，无法获取输入焦点，这个输入框的数据也不会提交</li>
    <li>maxlength设置允许输入的最大字符数</li>
    <li>readonly不允许用户修改，但是可以通过javascript代码进行修改</li>
    <li>size指定元素的显示宽度</li>
</ul>
<hr/>
<form action="001.html">
    <!--这里的name属性用于定义提交数据的名称，用户输入的数据就是对应的值-->
    <input type="text" name="username" value="yanjun" maxlength="20"/>
    <input type="text" name="pwd1" disabled value="123456"/>
    <input type="text" name="pwd2" value="zhangsan" readonly/>
    
    <!-- 在有些浏览器中会有一个小图标，点击后则可以查看输入内容 -->
    <input type="password" name="password"/>
    
    <input type="hidden" name="age" value="18"/>
    
    <!--多个选项是通过name属性一致达到互斥的目的-->
    <input type="radio" name="sex" value="true" checked/>男
    <input type="radio" name="sex" value="false"/>女

    <!--多个选项不互斥，允许选中多个-->
    <input type="checkbox" name="hobby" value="11">篮球
    <input type="checkbox" name="hobby" value="22">足球
    <input type="checkbox" name="hobby" value="33">排球
    <input type="checkbox" name="hobby" checked>其它

    <input type="submit" value="提交数据"/>
    <input type="reset" value="重置数据"/>
    <input type="button" value="点击按钮" onclick="ff()"/>

    <input type="image" src="images/30.jpg" width="120"/>
</form>
<script>
    function ff(){
        alert('点击按钮!');
    }
</script>

table

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 0 auto;
            width: 60%;
        }
        #header {
            background-color: aqua;
            height: 40px;
        }
        #tb1 td {
            border: 1px solid #888;
            border-spacing: 0px;
        }
        #tb1 th {
            border: 1px solid #666;
            border-spacing: 0px;
        }
        #tb1{
            border: 1px solid #666;
            border-spacing: 0px;
        }
        .right{
            text-align: right;
        }
        .center {
            text-align: right;
        }
        img {
            width: 100px;
            height: 80px;
        }
        tr.first {
            background-color: burlywood;
        }
        tr.second {
            background-color: bisque;
        }
        input[type=text] {
            width: 100px;
        }
    </style>
</head>
<body>
    <table id="tb1">
        <caption>
            <h3>购物列表</h3>
        </caption>
        <thead>
            <tr id="header">
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>图片</th>
                <th>出版社</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="first">
                <td>1</td>
                <td>Java入门</td>
                <td>12.34</td>
                <td><img src="images/29.jpg"/></td>
                <td>机械工业出版社</td>
                <td><button>-</button><input type="text" name="num1" value="1"/><button>+</button></td>
                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr>
            <tr class="second">
                <td>2</td>
                <td>Java从入门到放弃</td>
                <td>99.78</td>
                <td><img src="images/30.jpg"/></td>
                <td>邮电出版社</td>
                <td><button>-</button><input type="text" name="num1" value="1"/><button>+</button></td>
                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr>
            <tr class="first">
                <td rowspan="2">3</td>
                <td rowspan="2">C语言入门</td>
                <td rowspan="2">5.67</td>
                <td><img src="images/mv02.jpg"/></td>
                <td>电子工业出版社</td>
                <td rowspan="2"><button>-</button><input type="text" name="num1" value="1"/><button>+</button></td>
                <td rowspan="2">
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr>
            <tr class="first">
                <td><img src="images/mv01.jpg"/></td>
                <td>人民教育出版社</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="background-color:cadetblue;">
                <td colspan="5">合计：</td>
                <td colspan="2">100.23</td>
            </tr>
        </tfoot>
    </table>
    <table class="center">
        <tr class="right">
            <td><a href="">前一页</a>[<a href="">1</a>][<a href="">2</a>][<a href="">3</a>][<a href="">4</a>]<a href="">后一页</a></td>
        </tr>
    </table>
    <a href="index.html">back</a>
    </body>

html扩展和CSS

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3.red{
            color: red;
        }
    </style>
</head>
<body>
    <h1>html扩展</h1>
    html文档用于传输数据和相应结构，CSS用于设置数据的显示格式，javascript控制网页行为，实现与客户的交互
    <h2>html代码构成</h2>
    h5开发本质上就是生成一个html格式的文档，最终通过浏览器对文档进行渲染显示。在线验证validator.w3.org
    <ul>
        <li>标签不区分大小写</li>
        <li>标签可以分为单标签和双标签，很多标签可以省略结束标签</li>
        <li>元素的属性可以省略属性值，例如disabled和readonly</li>
        <li>允许属性值不使用引号，html中不区分单双引号</li>
    </ul>
    <p>如何显示数据？<br/>
    1、可以采用表格的方式显示统计性的数据<br/>
    2、统计图的方式显示数据,echarts
    </p>
    <h2>CSS3入门</h2>
    CSS3层叠样式表单，用于渲染html元素标签的样式
    <h3>应用系统的发展</h3>
    <ul>
        <li>单机应用：所有的程序和数据都在同一个机器上，一般只能由一个人使用。特点：安装简单，由于在单一环境中运行所以相对稳定，没有网络通信。典型应用案例包括单机游戏、工具类型的软件</li>
        <li>c/s结构应用，经常称为胖客户端应用，采用的是两层结构，服务器主要负责数据的管理，客户机负责完整与客户的交互任务。特点：一般需要在客户机上安装特定的软件，可以充分利用客户端的资源完成一些特定的任务，允许多人同时使用。典型应用只适用于局域网</li>
        <li>b/s结构应用，经常称为瘦客户端应用，采用的是客户端的浏览器和服务器构成，具有分布性的特点，业务扩展简单方便，维护简单方便，共享性强。但是响应速度要受带宽的限制</li>
    </ul>
    <h3 class="red">c/s和b/s结构的区别</h3>
    <ol>
        <li>硬件环境不同</li>
        <li>对安全的要求不同</li>
        <li>程序的架构不同</li>
        <li>软件的重用不同</li>
        <li>系统维护不同</li>
        <li>处理问题不同</li>
        <li>用户接口不同</li>
        <li>信息流不同</li>
    </ol>
    <h3>html的工作原理</h3>
    <p>
        在浏览器和服务器之间采用http/https协议进行通信，传送的数据格式为html文档。这里的超文本是指页面中可以包含图片、超链接、音乐、程序等非文本信息。
    </p>
    <h4>创建网页的基本步骤</h4>
    <ol>
        <li>了解要什么
            <ul>
                <li>计划网页的结构，可以先绘制草图，再绘制缩略图，最后写html文档</li>
                <li>使用块元素划分网页结构，使用内联元素进行修饰</li>
            </ul>
        </li>
        <li>然后使用html基本模块将他翻译为浏览器可以识别的略图</li>
        <li>将略图翻译为最终的html文档
            <ul>
                <li>无论什么时候都应该依靠html标签告知浏览器数据和数据含义或者数据的结构，不要依赖html标签实现显示控制</li>
                <li>通常推荐使用语义标签</li>
            </ul>
        </li>
        <li>页面基本完成后，最后对页面进行一些优化</li>
    </ol>
    <h3>列表标签</h3>
    <p>列表标签用于创建列表，其中包括无序列表ul和有序列表ol，列表项目使用&lt;li&gt;。
        在&lt;ul&gt;中可以使用type属性指定列表样式
<ul type="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
<ul type="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
在有序列表&lt;ol&gt;中可以通过type属性指定样式，可以选值1数字、A或者a英文字符、I或者i拉丁文;可以通过start属性指定从那个数字开始进行计算
<ol start="50" type="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>
    </p>
    <h3>图像img</h3>
    当浏览器遇到一个img元素时，会自动先接受图片数据，然后在页面上进行显示。注意&lt;img&gt;是内联元素。
    <ul>网页中常见的图像有3种格式：
        <li>GIF一般是动画存储格式，常见的是256色，画质较差</li>
        <li>JPG采用的是有损像素压缩格式，文件比较小，有利于数据传输</li>
        <li>PNG可以保存透明背景的图片，会有画质损失</li>
    </ul>
    常用属性 :  src用于指定图片的存储位置，可以使用相对路径也可以使用绝对路径；alt用于指定图片无法打开时自动显示的提示信息；width和height用于指定图片的宽和高，可以实现图片大小的调整
    <h3>超链接a标签</h3>
    当需要从一个页面跳转到另外一个页面时则需要使用超链接&lt;a&gt;元素。
    <ul>
        <li>href属性用于说明需要点击热点文字后自动跳转的新页面地址
            <ul>
                <li>可以使用相对路径，例如aaa.html或者./aaa.html表示相同目录的另外一个页面，../表示上一级目录</li>
                <li>还可以使用绝对路径，跳转到其它网站。例如http://www.baidu.com</li>
            </ul>
        </li>
        <li>&lt;a&gt;和&lt;/a&gt;之间卡住的文字就是热点文字，也可以是图片</li>
        
    </ul>
    <h2>Table表格</h2>
    表格由行和列组成，单元格是最基本的单元，每个表包含多个行，行标签使用&lt;tr&gt;定义，每行可以分为若干个列，列使用&lt;td&gt;定义；如果表格的第一行是表格的表头定义部分，可以使用&lt;th&gt;代替&lt;td&gt;标签，&lt;th&gt;会自动加粗显示，并居中
    <ul>
        <li>单元格、行、列，使用的标签有&lt;table&gt;表格、&lt;tr&gt;行、&lt;td&gt;列、&lt;th&gt;表格的第一行头</li>
        <li>html5中已经不建议使用border属性控制表格的线宽，改用css控制边框的宽度</li>
        <li>跨列（横跨）&lt;td colspan="跨的列数"&gt;显示内容&lt;/td&gt;</li>
        <li>跨行（竖跨）&lt;td rowspan="跨的行数"&gt;显示内容&lt;/td&gt;</li>
        <li>表格的特点：同行的单元格高度一致，并且水平对齐，同列单元格的宽度一致，并且垂直对齐</li>
        <li>另外还有语义标签&lt;thead&gt;表格的头部、&lt;tbody&gt;表格内容部分、&lt;tfoot&gt;表格的末尾部分</li>
        <li>&lt;colgroup&gt;用于配合&lt;col&gt;对表格中的列进行分组，并针对不同的组设置不同的显示样式</li>
    </ul>
    <hr/>
    <ul>
        <li><a href="table01.html">基本表格</a></li>
        <li><a href="table02.html">表格的结构化</a></li>
        <li><a href="table03.html">表格的分组</a></li>
        <li><a href="table04.html">表格的推荐用法</a></li>
        <li><a href="table05.html">面试题</a></li>
    </ul>
    <hr/>
    <h2>html5表单控件</h2>
    <p>表单控件form用于实现客户端向服务器端提交数据，根据提供的数据不同可以选择使用不同的子控件，例如&lt;input&gt;、&lt;select&gt;、&lt;radio&gt;等。<br/><strong>注意：form和from拼写的差异</strong></p>
    <h3>form标签的使用</h3>
    <p>form标签不能渲染显示出任何效果，用于生成输入提交的表单，其中包括一组属性</p>
    <ul>
        <li>action用于设置表单提交的地址。如果使用了disable属性则标识该表单控件不再生成请求</li>
        <li>method用于设置发送到服务器端数据的提交请求方法
            <ol>
                <li>GET是最常见的提交数据的方法，是默认值，通常用于请求服务器发送某个资源。表单中用户填充的数据会以请求头的方式提交</li>
                <li>POST是比较常见的提交数据的方法，通常用于创建某个资源。表单中用户填充的数据会以协议数据体的方式发送给服务器</li>
                <li>PUT通常用于修改某个资源，表单中用户填充的数据会以协议数据体的方式发送给服务器</li>
                <li>DELETE通常用于请求服务器删除某个资源</li>
                <br/><br/>
                <li>HEAD请求和GET类似，但是服务器生成的响应信息只有头部，不返回实体的主体部分</li>
                <li>TRACE在目标服务器发起一个环回诊断，主要用于验证请求是否能够穿过请求、响应链</li>
                <li>OPTIONS用于请求服务器响应告知允许访问资源的方法</li>
            </ol>
        </li>
        <li>enctype用于指定表单内容所使用的编码方式
            <ol>
                <li>application/x-www-form-urlencoded是form的默认值，将表单控件中用户输入的数据处理成URL编码方式。服务器接收到的是一组键值对</li>
                <li>multipart/form-data主要用于上传文件，将使用二进制流的方式处理提交数据。服务器端接收到的是一个输入流</li>
                <li>text/plain适用于直接通过表单发送邮件的方式</li>
            </ol>
        </li>
        <li>target用于设置打开新地址的方式，和&lt;a&gt;属性一致
            <ol>
                <li>_blank在新开浏览器窗口中打开</li>
                <li>_self是默认值，在当前位置上打开</li>
                <li>_parent是在父框架集中打开</li>
                <li>_top在整个顶级窗口中打开</li>
                <li>值为窗口framename名称，用于实现在指定对应名称的frame窗口中打开</li>
            </ol>
        </li>
    </ul>
    </ol>
    <h3>基本使用</h3>
    <ul>
        <li><a href="form01.html">常见input元素</a></li>
        <li><a href="form02.html">其它表单控件</a></li>
    </ul>
</body>

get和post的区别

get和post之间的区别

要求至少回答以下三点

get请求会将请求参数名称和提交的值转换为字符串，并附加再原始URL之后，可以在浏览器的地址栏中看到请求参数，get请求传送的数据量要受到协议的限制，比较小，一般不能大于2kB
例如地址格式为【请求地址?参数1=值1&参数2=值2】

post请求采用协议体传递数据，传送的数据量比较大，通常认为请求参数没有大小限制，但实际上往往却决于浏览器的限制

语义的差别