孙肖宁 发布的文章

块状元素

特点：

  • 独占一行；
  • 元素的高度、宽度、行高以及顶和底边距都可设置；

  • 元素宽度在默认不设置的情况下，宽度和他的父级元素相同。
    典型代表：div、p、h1、form、ul、li

    内联元素（行内元素）

    特点：

  • 在一行显示；
  • 元素的高度、宽度及顶部和底部边距不可设置；

  • 元素的宽度是他包含内容的宽度，不可改变。
    典型代表：span、a、label、 strong、em

    内联块状元素（行内块元素）

    特点：

  • 在一行显示；

  • 元素的高度、宽度、行高以及顶和底边距都可设置。
    典型代表：img、input

    附录：转换

  • 块状元素转行内元素：display:inline;
  • 行内元素转块状元素：display:block;
  • 块状元素和行内元素转行内块元素：display:inline-block;

内嵌式

特点：样式只作用于当前网页文件，没有真正实现结构表现分离

<style type="text/css">
    样式表位置
</style>

外链式

特点：作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。（建议使用）

<link rel="stylesheet" type="text/css" href="1.css">

行内式

特点：作用范围仅限于当前标签，范围小，结构表现混在一起。（不建议使用）

<p style="width:12px;height: 30px">你好</p>

属性

  • font-size 文字大小。
  • Font-weight文字粗细，值从100-900，也可以使用：normal（400）默认值；定义标准的字符。bold（700）定义粗体字符。bolder定义更粗的字符；lighter定义更细的字符。（建议使用数字）
  • Font-family 文本的字体。值得形式：中文名称；英文名称；unicode 编码。
  • Font-style 值：normal 默认值；italic斜体。
  • line-height 行高。

注意：谷歌不支持12px以下字体。

附录一：文本属性连写

font: font-style font-weight  font-size/line-height  font-family;

注意：font:后边写的是属性的值一定按照书写顺序；文本属性连写文字大小和字体为必写项。

附录二：查看字体的unicode 编码

第一步：打开浏览器的调试模式
快捷键：F12
也可以点击鼠标右键，选择审查元素（不同的浏览器可能不同）
第二步：选择console
20180208171610.png
第三步：输入escape("字体名称")
20180208171929.png
注意：一定是在英文状态下
第四步：把%u换成/

颜色的名称

示例：p{color:gray;}

RGB颜色

  • 使用百分比 p{color:rgb(100%,100%,100%);} 注：可以有小数
  • 十六进制颜色p{color:#cc00cc;} 注：范围（0~f）
  • 数字颜色1p{color:rgb(255,125,246);} 注：范围（0~255），不可以有小数
  • 数字颜色2p{color:rgba(255,125,246,0.5);} 注：范围（0~255），不可以有小数,a代表alpha 不透明度(值 0-1,1代表不透明)

注意：opacity可以使盒子变透明。优点方便，里面的内容也会半透明。

基础选择器

标签选择器

格式：标签{属性：值;}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
示例：

p{
  font-size:20px;
  color:#AA0044;
}

类选择器

格式：.自定义类名{属性:值;}
特点：只对调用他的标签生效，定义格式是class="类名",一个标签可以调用多个类选择器(class="类名1 类名2"), 多个标签可以调用同一个类选择器。
示例:

.box{
  font-size:20px;
  color:#AA0044;
}

ID选择器

格式：#自定义名称{属性:值;}
特点： 一个ID选择器在一个页面只能调用一次（如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题）；一个标签只能调用一个ID选择器，但是一个标签可以同时调用类选择器和ID选择器。
示例:

#box{
  font-size:20px;
  color:#AA0044;
}

通配符选择器

格式：*{属性:值;}
特点：给所有的标签都使用相同的样式。
示例:

*{
  font-size:20px;
  color:#AA0044;
}

注：不推荐使用。

复合选择器

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。

交集选择器

格式：标签+类(ID)选择器{属性：值;}
特点：即要满足使用了某个标签，还要满足使用了类（或Id）选择器。
示例：

div#box{
  font-size:20px;
  color:#AA0044;
}

后代选择器

格式：选择器+空格+选择器{属性：值;}
特点：后代选择器首选要满足包含（嵌套）关系；父集元素在前边，子集元素在后边；可以无限制隔代，并且只要能代表标签，标签、类选择器、ID选择器自由组合。
示例：

.one #box{
  font-size:20px;
  color:#AA0044;
}

子代选择器

格式：选择器>选择器{属性:值;}
特点：选中直接下一代元素,不能隔代。
示例：

.one>#box{
  font-size:20px;
  color:#AA0044;
}

并集选择器

格式：选择器+，+选择器+，选择器{属性:值;}
特点：多个相同的类或Id具有形同的属性或部分相同的属性。

.one,#box{
  font-size:20px;
  color:#AA0044;
}

属性选择器

CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

a[href] {
  color:red;
}

注意：选择器尽量不要超过3级。

附录：命名规则

  • 不能用纯数字或者数字开头来定义类名。
  • 不能使用特殊符号(_ 除外)来定义类名。
  • 不推荐使用汉字来定义类名。
  • 不推荐使用标签名、属性、属性值来定义类名。

HttpServletRequest

请求消息行

方法：
getMethod(); 获得请求方式
getRequestURL();返回客户端发出请求时的完整URL。
getRequestURI(); 返回请求行中的资源名部分。
getContextPath(); 当前应用的虚拟目录 。
getQueryString() ; 返回请求行中的参数部分。

请求消息头

String getHeader(String name); 根据头名称得到头信息值
Enumeration getHeaderNames(); 得到所有头信息name
Enumeration getHeaders(String name); 根据头名称得到相同名称头信息值

请求正文

与获取表单数据相关的方法

getParameter(name) 根据表单中name属性的名，获取value属性的值方法
getParameterValues（String name）专业为复选框取取提供的方法
getParameterNames() 得到表单提交的所有name的方法
getParameterMap 到表单提交的所有值的方法 //做框架用，非常实用
附录：框架的使用

导入commons-beanutils-1.8.3.jar和commons-logging-1.1.1.jar包
import org.apache.commons.beanutils.BeanUtils;//导包
BeanUtils.populate(new User(), request.getParameterMap());//调用方法

getInputStream 以字节流的方式得到所有表单数据

ServletInputStream sis = request.getInputStream();
        int len = 0;
    byte[] b = new byte[1024];
    while((len=sis.read(b))!=-1){
        
        System.out.println(new String(b, 0, len, "UTF-8"));
    }
        
    sis.close();

与操作非表单数据相关的方法(request也是一个域对象)

void setAttribute(String name, Object value);
Object getAttribute(String name);
Void removeAttribute(String name);

与请求转发相关的方法

//得到请求转发或请求包含的协助对象

RequestDispatcher getRequestDispatcher(String path)
forward(ServletRequest request, ServletResponse response) //转发的方法
include(ServletRequest request, ServletResponse response) //请求包含

与请求编码相关的方法：

  • 解决post方式编码
    request.setCharacterEncoding("UTF-8"); //告诉服务器客户端什么编码,只能处理post请求方式

  • 解决get方式编码

    String name = new String(name.getBytes(“iso-8859-1”),”UTF-8”);

HttpServletResponse

响应消息行

setStatus(int sc) 设置响应状态码

响应头

sendRedirect(String location) 请求重定向
setHeader(String name, String value) 设置响应头信息

  • 告知浏览器使用什么码表

    response.setHeader("content-type", "text/html;charset=UTF-8");
    • 告知客户端不缓存
    response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
response.setDateHeader("expires", 0);
    • Referesh刷新

    响应正文（主体）

    getWrite(); 字符输出流
    getOutputStream(); 字节输出流
    setCharacterEncoding(String charset) 告知服务器使用什么编码
    setContentType(String type)

首先导入ValidateCode.jar包
jar包的下载可以关注小宁博客公众号

实现类

public class ServletDemo4 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //告诉客户端不使用缓存
        response.setHeader("pragma", "no-cache");
        response.setHeader("cache-control", "no-cache");
        response.setIntHeader("expires", 0);
        
        
        ValidateCode vc = new ValidateCode(110, 25, 4, 9);
        String code = vc.getCode();//得到生成的字符
        vc.write(response.getOutputStream());
        
    }
}

网页代码

网页代码

<script type="text/javascript">
    function changeCode(){
        //得到图片元素
        var img = document.getElementsByTagName("img")[0];
        //img.setAttribute("src","/day09_00_HttpServletResponse/servlet/demo");//XML Dom 语法
        img.src = "/day09_00_HttpServletResponse/servlet/demo?time="+new Date().getTime();
    }
</script>
<img src="/day09_00_HttpServletResponse/servlet/demo4" onclick="changeCode()"/>
<a href="javascript:changeCode()" >看不清换一张</a>

自己用servlet实现0-9验证码，并且点击刷新，但是不建议还用，可以直接使用jar包自动生成
详情请见：servlet实现验证码

实现类

public class Demo extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
  
        code();
    }

    
    private void code HttpServletResponse response) throws IOException {
        int width = 110;
        int height = 25;
        //在内存中创建一个图像对象
        BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        
        //创建一个画笔
        Graphics g = img.getGraphics();
        
        //给图片添加背景色
        g.setColor(Color.PINK);//设置一个颜色
        g.fillRect(1, 1, width-2, height-2);//填充颜色
        
        //给边框一个色
        g.setColor(Color.RED);
        g.drawRect(0, 0, width-1, height-1);//设置边框的显示坐标
        
        //设置文本样式
        g.setColor(Color.BLUE);
        g.setFont(new Font("宋体", Font.BOLD|Font.ITALIC, 15));
        
        //给图片添加文本
        Random rand = new Random();
        int position = 20;
        for (int i = 0; i < 4; i++) {
            g.drawString(rand.nextInt(10)+"", position, 20);//给图片填充文本
            position+=20;
        }
        
        //添加9条干扰线
        for (int i = 0; i < 9; i++) {
            g.drawLine(rand.nextInt(width), rand.nextInt(height), rand.nextInt(width), rand.nextInt(height));
        }
        //将图片对象以流的方式输出的客户端
        ImageIO.write(img, "jpg", response.getOutputStream());
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

网页代码

<script type="text/javascript">
    function changeCode(){
        //得到图片元素
        var img = document.getElementsByTagName("img")[0];
        //img.setAttribute("src","/day09_00_HttpServletResponse/servlet/demo");//XML Dom 语法
        img.src = "/day09_00_HttpServletResponse/servlet/demo?time="+new Date().getTime();
    }
</script>
<img src="/day09_00_HttpServletResponse/servlet/demo4" onclick="changeCode()"/>
<a href="javascript:changeCode()" >看不清换一张</a>

通过servlet实现文件的下载，实例代码为下载一张jpg的图片

public class Demo extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //通过路径得到一个输入流
        String path = this.getServletContext().getRealPath("/WEB-INF/classes/img.jpg");
        FileInputStream fis = new FileInputStream(path);
        //创建字节输出流
        ServletOutputStream sos = response.getOutputStream();
        
        //得到要下载的文件名
        String filename = path.substring(path.lastIndexOf("\\")+1);
        
        //设置文件名的编码
        filename = URLEncoder.encode(filename, "UTF-8");//将不安全的文件名改为UTF-8格式
        
        //告知客户端要下载文件
        response.setHeader("content-disposition", "attachment;filename="+filename);
        response.setHeader("content-type", "image/jpeg");
        
        //执行输出操作
        int len = 1;
        byte[] b = new byte[1024];
        while((len=fis.read(b))!=-1){
            sos.write(b,0,len);
        }

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

ServletConfig

1.可以获取servlet配置信息

public class ServletConfigDemo1 extends HttpServlet {
    /*private ServletConfig config;
    public void init(ServletConfig config) throws ServletException {
        this.config = config;
    }*/
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
    /*String encoding = config.getInitParameter("encoding");//获得配置文件中的信息的
    System.out.println(encoding);*/
    //第二种方式
    String encoding = this.getServletConfig().getInitParameter("encoding");
    System.out.println(encoding);
    //第三种方式
    /*String encoding = super.getInitParameter("encoding");
    System.out.println(encoding);*/
}

       public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        doGet(request, response);
    }

}

2.可以获得ServletContext对象

ServletContext

ServletContext: 代表的是整个应用。一个应用只有一个ServletContext对象。单实例。
作用：
域对象：在一定范围内（当前应用），使多个Servlet共享数据。
常用方法：
void setAttribute(String name,object value);//向ServletContext对象的map中添加数据
Object getAttribute(String name);//从ServletContext对象的map中取数据
void rmoveAttribute(String name);//根据name去移除数据
作用

  • 获取全局配置信息

String getInitParameter(String name); //根据配置文件中的key得到value

  • 获取资源路径

String getRealPath(String path);//根据资源名称得到资源的绝对路径。可以得到当前应用任何位置的任何资源。

  • 实现Servlet的转发。
    RequestDispatcher getRequestDispatcher(String path);//参数表示要跳转到位置
  1. 1
  2. ...
  3. 42
  4. 43
  5. 44
  6. 45
  7. 46
  8. 47
  9. 48
  10. ...
  11. 54