A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 以德芙人 初级黑马   /  2018-11-8 16:30  /  618 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

C/S架构
    在用户本地有一个客户端程序,远程有一个服务器端程序
    优点:用户体验好
    缺点:
        安装,部署麻烦

B/S架构Browser/Server浏览器服务器端
    只需要一个浏览器,用户可以通过不停的网址,客户访问不同的服务器端chengxu
    优点:开发安装部署简单
    缺点:如果应用过大,用户的体验可能受到影响,对硬件要求过高
    架构详解:
    资源分类:
        静态资源:
            使用静态网页开发技术发布的资源
        特点:
            所有用户访问,得到的一样的结果
            如“文本,图片,音频,视频HTML,CSS,JS
            如果用户请求的是静态资源,那么服务器会将静态资源发送给浏览器,浏览器中内置了静态资源的解析引擎,可以展示静态资源
        动态资源:
            使用动态网页开发技术发布的资源
            特点:
                所用用户访问,得到的结果可能不一样
                如:jsp/servlet,php,asp...
                如果用户请求的是动态资源,服务器或执行动态资源,转换为静态资源,再发送给浏览器
        
        
        举例:买车,可以吧车当做静态资源,如果无人购车超市,直接买车走人,
            动态资源是:相当于买车的销售,会根据不同的用户推荐不同的车
    要学习动态资源,必须先学习静态资源
    静态资源:
        HTML:用于搭建基础网页,展示页面的内容
        CSS:用于美化页面,布局页面
        JavaScript:控制页面的元素,让页面有一些动态的效果
        
        Html可以看做车架底盘
        CSS可以看做车漆等装饰
        JS可以看做是发动机变速箱,控制汽车的一些组件
        
HTML
    概念::最基础的网页开发语言
        超文本标记语言
            超文本:超文本是用个超链接的方法,将各种不同空间的文字信息祖师在一起的网状文本
            标记语言:
                有标签构成的语言
                标记语言不是编程语言
    语法:
        1.html文档的后缀名.html
            HTML编写的内容可以被浏览器解析
        2.标签分类:
            围堵标签:又开始开始和结束标签
            自闭和标签:开始标签和结束标签在一起<br/>
        3.标签可以嵌套:
            需要正确嵌套,不能你中有我,我中有你
            错误:
        4.在开始标签中可以定义属性,属性是由键值对构成,值需用引号引起来
        5.html不区分大小写,建议小写
<html>
    <head>
        <title>
            title
        </title>
    </head>
    <body>
        <font color='red'>Hello world</font><br/>
        <font color='green'>Hello world</font>
    </body>


</html>
        标签的学习:
            文件标签:构成html最基本的标签
                html: 文档的跟标签
                head:头标签,用于指定HTML文档的属性,引入外部的资源
                title:定义标题标签
                body:体标签
                <!DOCTYPE>?定义文档类型
                <meta charser="utf-8">
            文本标签:和文本有关的标签
                注释:<!--注释内容 -->
                <h1>to<h6>:标题标签,大小逐渐变小
                <p>:段落标签
                <br>:换行标签
                <hr>:显示一条水平线
                    属性:color:颜色
                        width: 宽度
                        size 高度
                        align:对齐方式
                            left:左对齐
                <b>:字体加粗
                <i>:字体斜体
                <font>:字体标签
               
                *    face字体,color,size大小
                *    属性的定义:   
                        color:
                            1.英文单词:red,green,blue
                            2.rgb(值1,值2,值3):范围0-255
                            3.#值1值2值3:值得范围00~FF之间
                        width:宽度
                            1.数值:width='20'数值的单位,默认是px(像素)
                            2.数值%:占比相当于父元素的比例   
                <center>居中            
            图片标签:
                img:宽度:width  高度:height
                    ./代表当前目录
                    ../代表上一级目录
            列表标签:
                有序列表
                <ol type="A"></ol>
                    <li>内容</li>
                无序列表
                <ul></ul>
            链接标签:
                把一段文字或者图片包裹起来,然后点击文字图片后实现跳转
                属性:
            *  href:指定访问资源的
                <a href="超链接地址">点</a>
            *    target: 指定的打开资源的方式
            <a href="超链接地址" target="_blank">点</a>在空白页面打开
                _self当前页面打开
                <a href="mailto:邮件地址">联系我们
                <a href="">
            语义化标签:html5中为了提高程序的可读性               
            * table:定义表格
                width:宽度
                * border:边框
                * cellpadding:定义内容和单元格之间的距离
                * cellspacing:定义单元格之间的距离,如果指定为0,那么就是合为一条
                * bjcolor:背景颜色
                * align:对齐方式
            * tr:定义行
            * td:定义单元格
                * colspan合并列
                * rowspan合并行
            * th:定义表头单元格
            * <caption>表格标题
            * <thead>表示表格的头部分
            * <tbody>体部分
            * <tfoot>脚部分

###Html标签:表单标签
    * 表单
        *概念: 用于采集用户输入的数据,用于和服务器进行交互
    form:用于定义表单,可以定义一个范围,方位代表用户的数据范围
    * 属性:
        * action:用于提交数据的url
        * method:指定提交方式
                分类:
                    一共7中,两种常用
                    get:
                        1.请求的参数会在地址栏中显示
                        2.请求擦书大小是有限制的,不安全
                    post:
                        1.请求的参数大小没限制,较为安全
                        2.不会在地址栏中显示,会封装在请求体重
    * 表单项中的数据要被提交,必须制定其name属性
        
    * 表单项标签:
        *input:可以通过type属性改变元素展示的形式
            placeholder:指定输入狂的提示信息,当输入框信息改变,会覆盖这个提示信息
            type属性
             * text:文本输入框
             * password:密码输入框
             * radio:单选框
                 要想让多个单选框实现单选,多个name属性必须一致
                value要指定好
             * chexkbox复选框
             *         checked默认选中
             * label:指定输入项的文字描述信息:
             * file 文件<input type="file" name="file">
             * 隐藏域:hidden用于提交一些信息
             * 按钮:
                 * submit:用于提交
                 * button一个按钮
                 * <input type="image" src="" >图片提交按钮,可以用src指定图片的属性
                 * 取色器<input type="color" name=color>
     <label for="u">姓名:</label><input name="username" placeholder="请输入用户名" id="u"><br>
            
        *select:下拉列表
            option指定列表项
                province 省份
        *textarea:文本域
            <textarea cols="20" rows="5" name="des">
            cols指定列数,
            rows指定行数


## CSS页面美化和布局控制
    1. 概念:Cascading Style Sheets 层叠样式表

    3. css的使用:css与html结合
        1.内连样式
        2.内部样式
        * 在head标签内,定义style标签
        *         <style>
        *             div{
        *                 color:blue
        *             }
        *         </style>
        3.外部样式
            * 定义css资源文件
            * 在head标签内,定义link标签
            ** 如:
                <link rel="stylesheet" href="路径">
                <div>hello css
>123中方式,作用范围越来越大

4.css语法
    * 格式:
    *     选择器{
    *     属性名1,属性值1;
    *     。。。
    *     }
    *     选择器:筛选具有相似特征的元素
    *     注意每一对属性需要用分号隔开
5.css选择器
    * 分类
        1.基础选择器  id选择器》类选择器》元素选择器
            * id选择器:选择具体id属性值的元素:建议在一个html页面中id值唯一
                 语法:#id属性值{}
            * 元素选择器:选择具有相同标签名称的元素
                语法:标签名称
                    注意:id选择器的优先级要高于元素选择器
            * 类选择器:选择具有相同的class属性值的元素
                语法:.class属性值{}
                    类选择器优先级高于元素选择器

             <style>
                    p{
                        color:orange;
                    }
                    #p1{
                        color:red;
                    }
                    .cls1{
                        color:blue;
                    }
            
                </style>
        2.扩展选择器
            * 选择所有元素
                语法  *{}
            * 并集选择器:
                 语法:选择器1,选择器2{}
            * 后代选择器:筛选选择器1下面的所有的选择器2元素
                 语法:选择器1 选择器2{}     
            * 子选择器:筛选选择器1的下一级选择器2:只筛选子选择器,
                 语法:选择器1》选择器2{}
            * 属性选择器:选择元素名称,属性名=属性值得元素
            *     语法:元素名称[属性名称=“属性值”]{}
            * 伪类选择器:选择一些元素具有的状态
            *     语法:元素:状态{}


6.属性
    1.字体、文本
        * font-size:字体大小
        * color
        * text-aligh:对齐方式
        * line-height行高
    2.背景
    3.边框
        * border:设置边框,复合属性
    4.尺寸
        * width宽度
        * height高度
    5.盒子模型
        * margin外边距
        * padding内边距
             注意:默认情况下内边距会影响盒子的大小
             box-sizing:border-box设置盒子属性不动
        * float:浮动
             left
             right

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马