|
C/S与B/S C/S 用户本地有客户端程序、远程有服务端 如：QQ、迅雷 优点： 缺点：开发、安装、部署、维护、都麻烦 B/S 用户通过URL浏览器访问，访问不同的服务器端程序 优点：开发、安装、部署、维护、都简单 缺点：对硬件要求高，应用过大，用户体验会受到影响 B/S架构详情： 1、静态资源 静态网页开发 特点*用户访问，得到的结果一致，如文本、图片、音频视频、HTML、CSS、JS（静态资源） 用户请求静态资源，服务器直接将静态资源发送给浏览器，浏览器内置解析引慬，可展示静 态资源 HTML:用于搭建网页，展示内容 CSS：美化、布局页面 JavaScript:控制页面元素，让页面有动态效果 2、动态资源 使用动态网页及时发布的资源 特点：所有用户访问的结果可能不一致，如jsp/servlet,php,asp... 用户请求动态资源，服务器执行动态资源，转换为静态资源，再发送给浏览器 HTML(Hyper Text Markup Lanuage超文本标记语言) HTML 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本 是标记语言，语法吧hi严格，不会报错 标签学习 1、文件标签 *html 根标签 *head 头标签，指定html的一些属性 *title *body 体标签 * <!DOCTYPE> 文档类型 2、文本标签 *注释：<!--注释内容--> *<h1><h6>按级别缩小标题大小 *<br>换行 *<p></p>段落标签 *<hr>展示一条水平线 属性：color：颜色 width:宽度 size:高度 aligh:对齐方式（center居中；left：左对齐；right：右对齐） *<b>加粗 *<i>字体斜体 *<center>文本居中 *<font>字体标签 大小，型号，楷体 color颜色；size大小；face字体 *属性定义：color 1、red\green\blue 2、rgb(值1，值2，值3)：值范围0~255，eg:rgb(0,0,255) 3、#值1值2值3：00~FF（16进制） eg:#FF00FF width 1、数值：width="20"数值单位是像素 2、数值%：占比相对于父元素的比例 3、图片标签 img展示图片 相对路径* ./代表当前目录 ../ 上一级目录 <img src="./image/jingxuan_1.ipg" align="center" alt="落日"> 4、列表标签 有序列表 *ol *li 无序列表 *ul *li 5、链接标签 * a 定义了一个超链接 属性：href :指定URL target:指定打开资源的方式，_self:默认值，在当前页面打开 _blank:在空白页面打开 <a href="http://www.baidu.com" target="_blank"> 百度</a> 6、表格标签 *table 定义一个表格《width宽度；border边框；cellpadding定义单元格与内容的距离；cellspacing单元格间句丽，指定为0，则单元格线合二为一;bgcolour:背景色；align:对齐方式》 ； *tr定义一行； 属性bgcolour;align *td定义单元格；属性colspan合并行；rowspan合并列 *th定义表头单元格 *<caption>表格 *<thead><tbody><tfoot> 7、div与span;header;footer <span></span>起包裹作用 与css一起用，文本信息在一行展示，不会换行 <div></div>起包裹作用，与css一起用，文本信息一行展示，会自动换行。 <header></header> <footer></footer>语义化标签 8、表单标签 表单：采集用户输入数据，与服务器进行交互 * form标签 action:指定提交数据的URL method:提交方式，一共7种 get:请求参数会在地址栏中出现，封装在请求行；请求参数长度有限制；不太安全 post:请求参数不出现在地址栏，必须指定name属性；请求参数长度没有限制；较为安全 表单标签 *input:通过type属性值，改变元素展示样式 *type属性： *text:文本输入框，默认值 *placeholder:指定输入框提示信息，当输入框的内容发生变化，自动清空提示信息 *password:密码输入框 *radio:单选框 *注意：要想多个单选框实现单选效果，则多个单选框的name属性值必须一样 给每一个单选框提供value属性，指定其被选后提交的值 checked属性，指定默认值 *checkbox:复选框 *注意：一般会给每一个单选框提供value值，指定其被选后提交的值 checked属性，可以指定默认值 *file：文件选择框 *hidden:隐藏域，用于提交一些信息 *按钮：* submit:提交按钮，提交表单 *button:普通按钮 *image：图片提交按钮 src指定图片的路径 *label:指定输入项的文字描述信息 *注意： *label的for属性一般会和input的id属性值对应。对应了，则点击label区域，会让input输入框获取焦点。 <form action="#" method="get" > 用户名：<input type="text" name="usename" placeholder="请输入用户名"><br> 密码：<input type="password" name="password" placeholder="请输入密码"><br> 性别：<input type="radio" name="gender" value="male" checked>男 <input type="radio" name="gender" value="female">女<br> 爱好：<input type="checkbox" name="hobby" value="shopping">购物 <input type="checkbox" name="hobby" value="Java">JAVA <input type="checkbox" name="hobby" value="python">python<br> 图片：<input type="file" name="file" value="file"><br> 隐藏域：<input type="hidden" name="id" value="隐藏提交信息"><br> <input type="button" name="一个按钮"><br> 取色器：<input type="color" name="colour" value=""><br> 生日：<input type="data" name="birthday" value=""><br> <input type="datetime-local" name="birthday"><br> 邮箱：<input type="email" name="email地址"><br> 年龄：<input type="number" name="ege"><br> 省份：<select name="province" value=""> <option value="">请选择</option> <option value="1">北京</option> <option value="2" selected>陕西</option> </select><br> 自我描述：<textarea cols="20" rows="5"></textarea><br> <input type="submit" value="登录"><br> <font color="#7fffd4" face="楷体" size="10">马上注册</font><br> </form> *select:下拉列表 *option,指定列表项 *textarea:文本域 <textarea cols="20" rows="5" name="descrtation"></textarea><br> 注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("../images/bd.jpg") no-repeat center; } .rg_layout{ width: 900px; height: 500px; border:8px solid #EEEEEE; background-color:white; margin: auto; margin-top: 15px; } .rg_left{ /*border: 1px solid red ;*/ float: left; margin: 20px; } .rg_left > p:first-child{ color: #FFD026; font-size:20PX; } .rg_left > p:last-child{ color: #A6A6A6; font-size: 20px; } .rg_center{ /*border: 4px solid red;*/ float: left; margin: 5px; width: 200px; } .rg_right{ /*border: 1px solid red;*/ float: right; margin: 10px; } .rg_right > p:last-child{ font-size: 15px; } .rg_right p a{ color:blue; font-size: 15px; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 20px; } #usename,#password,#email,#name,#tel,#birthday,#checkcode{ width: 250px; height: 32px; border: 1px solid #A6A6A6; border-radius: 5px; padding-left: 10px; } #checkcode{ width: 100px; } #btn_sub{ width:100px; height: 40px; background-color: #FFD026; border:2px solid #FFD026; } </style> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <form action="#" method="get"> <table width="400px"> <tr> <td class="td_left"><label for="usename">用户名</label></td> <td class="td_right"><input type="text" name="usename" id="usename" placeholder="请输入用户名"></td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td> </tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入Email"></td> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="name" name="name" id="name" placeholder="请输入姓名"></td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"><input type="tel" name="tel" id="tel" placeholder="请输入Tel"></td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"> <input type="radio" name="gender" value="male" id="gender">男 <input type="radio" name="gender" value="female" id="gender">女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="datetime-local" name="birthday" id="birthday"></td> </tr> <tr> <td class="td_left"><label for="checkcode">验证码</label></td> <td class="td_right"><input type="" name="" id="checkcode" placeholder="请输入验证码"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html> 文章编辑:标梵互动(https://www./) |
|
|
