HTML+CSS+JavaScript+JQuery+JSP学习笔记

原创 2015年11月21日 20:43:30
HTML标签
1.段落 <p></p>


2.换行<br/>


3.标题<h1></h1>--<h6></h6>  字体由大到小


4.水平线<hr/>


5.注释<!-- -->


6.(加粗<b></b>  倾斜<i></i>  不常用)   


7.下标<sub></sub>  上标<sup></sup>


8.预格式文本 <pre></pre>  用的不多


9.地址标签 <address></address>


10.删除线 <del></del>    下划线<ins></ins>


11.链接:


   文本链接<a href="跳转网址"></a>


   图像链接    <a href="跳转网址"  target="_BLANK">   //target="_BLANK"打开新页面
  <img alt="提示信息" src="图片地址或名字">
      </a>
   跳转到同一界面的不同位置:<a href="#name"> </a>  // #代表当前页面
   
   跳出框架:<a href="另一框架" target="_top">跳出框架</a>


   创建电子邮件链接:<a href="mailto:邮箱"></a>


13.框架


   垂直框架
   <frameset cols="25%,50%,25%">   //分为三列
<frame src="index1.html">
<frame src="index2.html">
<frame src="index3.html">
   </frameset>              //不写在body中


  水平框架
   <frameset rows="25%,50%,25%">   //分为三列
<frame src="index1.html">
<frame src="index2.html">
<frame src="index3.html">
   </frameset>              //不写在body中


   <noframes></noframes> //浏览器不支持框架时,有提示信息
   noresize="noresize"  //窗体不能动


14.表格
    <table border="1">  //border边框宽度
        <caption>表名</caption>
<tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
<tr>              //行     一行两列
            <td></td>     //列
            <td></td>      
         </tr>


    </table>


    colspan="2"  //合并两列
    rowspan="2"   //合并两行
    cellpadding=""  //单元格边距(文本与边框的距离)
    cellspacing=""//单元格间距
     bgcolor=""   //背景颜色
    background=""  //背景图像
    align="left"  //对齐方式


15.列表
   无序列表
       <ul type="disc">   //disc实心点   list-style-type: none;//去掉实心点
                <li>红茶</li>
                <li>绿茶</li>
       </ul>
   有序列表
<ol type="1">  //自己给定
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
   
  自定义列表
        <dl>
<dt>序号1</dt>
<dd>内容1</dd>
<dt>序号2</dt>
<dd>内容2</dd>
</dl>


16.输入表单
   <fieldset>  //圈起来
   <legend>基本信息</legend>   //框题
        姓名:<input type="text" name="user">  //文本域
密码:<input type="password" name="psw">  //密码域
   </fieldset>
        爱好:<input type="checkbox" name="likes" value="sing">唱歌   //checkbox复选框
     <input type="checkbox" name="likes" value="sleep">睡觉
     <input type="checkbox" name="likes" value="xo">泡妞
性别:<input type="radio" name="sex" value="GG">帅哥     //单选框
     <input type="radio" name="sex" value="MM">美女
        城市:
<select name="city">                        //下拉选项
<option value="bj">北京市</option>
<option value="sh">上海市</option>
<option value="tj">天津市</option>
                <optgroup label="广东省">
<option>广州市</option>
<option>中山市</option>
</optgroup>
</select>
        自我介绍:<br/>
<textarea rows="10" cols="50">请输入信息...</textarea>


提交表单:<form action="">要提交的东西</form>
按钮:   <input type="button" value="普通按钮"/>
         <input type="submit" value="提交按钮"/>
         <input type="reset" value="重置按钮"/>


17.图像标签
   插入图片<img alt="" src="图片地址">
   背景图片<body background="图片地址">
   排列图片<img alt="" src="图片地址" align="top">
   图片缩放<img alt="" src="图片地址" width="" height="">
   为图片显示替换文本<img alt="图片加载失败" src="图片地址">
   制作图像链接 <a href="跳转网址"> 
  <img alt="提示信息" src="图片地址或名字">
      </a>
18.
             <head>
      <meta name="description" content="Java免费学习视频">  //文档描述
      <meta name="keywords" content="Java,JavaSE,JavaWeb,Android"> //设置关键字
      <meta http-equiv="Refresh" content="5;http://www.baidu.com">  //重定向  5秒后,自动跳转到百度
               <base target="_blank">  //默认属性  
             </head>








CSS部分  层叠样式表
1.添加CSS四种方式
    (1).<p style="color: blue;font-size: 12pt">
    (2).<head>
           <style type="text/css">
p{
                    color:blue;
   font-size:12pt;
}
  </style>
</head>
    (3).<head>使用最多
            <link rel="stylesheet" href="*.css" type="text/css">
        </head>
    (4).
2.CSS选择器(重要) 优先级:标签选择器<类选择器<id选择器<style属性
    标记选择器
           <style type="text/css">
p{
                    color:blue;
   font-size:12pt;
}
  </style>
     
     类别选择器    
         <style type="text/css">
.名字{
                      color:blue;
    font-size:12pt;
   }
  </style>
        还得用class=""


     ID选择器
          <style type="text/css">
#ID{
                      color:blue;
    font-size:12pt;
   }
  </style>    
 
    属性选择器
    <style type="text/css">
input[type="text"]{
   
  }
  </style> 
3.CSS背景
     background-color:blue;   
     padding:20pt   //内边距
     background-image: url("图片地址");
     背景重复:background-repeat: repeat-x;//x轴平铺
     背景定位:background-position: center;
     背景关联:


4.文本
   
   <style type="text/css">
p {
text-indent: 2em; //缩进文本
text-align: left;   // 水平对齐
                wordspacing:20px //  字间隔(只针对单词)
                letter-spacing:20px;//字母间隔
text-transform:uppercase;//字符转换
                text-decoration:underline;//文本修饰
}
   </style>


5.字体
   <style type="text/css">
       body {
        font-family: "serif";//设置字体
font-style:italic;//字体风格
font-weight:bold;//字体粗细
font-size:12px;//字体大小
       }
   </style>  


6.边框(盒子模型)
   <style type="text/css">
   p1{
border-style:solid; //边框
border-width:5px;  //边框宽度
border-top-color:green;//边框颜色




   }
</style> 


7.外边距
   <style type="text/css">
    h1{
margin: 10px;
    }
</style>  
    值复制
    单边外边距


8.内边距
  <style type="text/css">
h1{
padding: 10px;
}
   </style> 


9.列表
   <style type="text/css">
ul li{
list-style: circle;   //系统的
                list-style-image: url("./img/img_0261.jpg");//自定义图标
}
   </style>
  
10.表格
    width:100%;//设置宽度
    height:300px;//设置高度
    text-align:left;//设置表格中文本的水平对齐方式
    vertical-align:top;    //设置表格中内容的垂直对齐方式


11.轮廓
    outline


12.CSS尺寸
     
13.CSS分类
display //设置是否及如何显示元素
float  //定义元素在哪个方向浮动
a:HOVER //鼠标移动到链接上的状态
visibility//设置元素是否可见或不可见
cursor//规定当指向某元素之上时显示的指针类型
clear //设置一个元素的侧面是否允许其他的浮动元素


14.CSS定位
position
overflow  //溢出
clip  //裁剪
 
15.CSS伪类
锚伪类
a:link //未被访问的链接
a:visite //已访问的链接
a:hover //鼠标移动到链接上
a:active //选定的链接
:focus  //向拥有键盘输入焦点的元素添加样式



16.div+css布局(重要 53讲   JavaWeb 114 115)
float: left;  
width: 200px;
padding: 0.5em; //边框
margin: 100px 0px; //外边距
padding: 1em;  //内边距
text-align: center;




JavaScript
1.定义对象
var people = {name:"xiao bai",age:19};
2.for...in 循环
var str = "";
for(x in person){
str = str + person[x];
}
3.innerHTML


4.自动刷新
<meta content="2" http-equiv="refresh">


5.浏览器对象
window对象方法
alert("提示信息")//用于调试
close()//关闭当前窗口
setTimeout("函数",毫秒数)//设置定时器:经过指定毫秒值后执行某个函数
setInterval(表达式,毫秒)
setResizable(true)//允许调整窗口
clearTimeout()清除某个定时器
status()//设置状态栏


6.事件处理
文本框事件处理
onfocus="" //得到焦点
onblur=""//失去焦点
readonly="eradonly"//只读
命令按钮事件处理
onSubmit//提交表单
onClick//按钮单击事件
复选框事件处理
checked//复选框是否被选中
value //设置或获取复选框的值
单选按钮事件处理
下拉列表框事件处理
options //所有的选项组成一个数组,第一个选项为options[0]...以此类推
selectedIndex //返回被选择的索引号
鼠标事件处理
onmousemove  //鼠标移动事件
onmousedown//鼠标按下事件
onmouseout  //鼠标移出事件
onmouseover //鼠标移进事件
onmouseup   //鼠标放开事件
ondblclick  //鼠标双击事件




7.DOM操作


jquery
1.基本事件
//
<script type="text/javascript">
//文档就绪函数
$(document).ready(function(){
var str = $("p").html();//获取元素的内容
alert(str);
});
//文档就绪函数的简写
$(function(){
$(document.body).css("background","yellow");//设置背景色
});

$(function(){
var div1 = $("#div1").html();//获取id为div1的元素
alert(div1);
});
</script>


2.动画效果




JSP
声明(declaration)
1.声明变量和方法(不建议)
<%!     %>
2.表达式
<%=     %>
3.脚本
<%      %>


指令
1.page指令
<%@page     %>


2.include指令
<%@include file="title.jsp" %>
3.taglib指令

动作元素
1.包含动作
<jsp:include page="title.jsp"></jsp:include>
2.传参动作
<jsp:param value="小白" name="name"/>不能单独使用
3.转发用户请求(URL不变)
<jsp:forward page=""></jsp:forward>
4.创建一个Bean实例并指定它的名字和作用范围(其实就是一个Java类)
<jsp:useBean id="person" class="com.ysu.bean.Person"></jsp:useBean>//创建了一个person对象,只能调用默认构造方法
5.设置Bean的属性值
设置
<jsp:setProperty property="name" name="person" value="小白"/>
<jsp:setProperty property="age" name="person" value="18"/>
获取
<jsp:getProperty property="name" name="person"/>
<jsp:getProperty property="age" name="person"/>


内置对象
1.out  //作用域:page;向客户端页面输出数据 重要方法:print()/println()/write()
2.request //作用域:request  方法:getParameter(key)获取提交表单的数据
/getParameterValues(key)获取提交表单的一组数据
/getRequestDispather("list.jsp")
/.forward(request,response)转发
/setAttribute(key,object)设置请求对象的属性
/getAttribute(key)获取请求对象的属性
/setCharacterEncoding("UTF-8")对请求数据重新编码
3.response //作用域:page  方法:sendRedirect("页面"); 页面跳转
/setCharacterEncoding("UTF-8") 设置响应编码
4.session   //作用域:session  表示一个会话,用来保存用户信息,以便跟踪每个用户的状态
方法:getId()获取session的id号
/isnew()判断session是不是新创建的
/setAttribute(key,object)在当前会话中设置一个属性
/getAttribute(key)获取当前会话中的一个属性
/removeAttribute(key)删除当前会话中的属性
/setMaxInactiveInterval(1000*60*30)设置当前会话失效时间ms
/invalidate()设置session失效,初始化当前会话对象,在系统退出时使用

5.pageContext //作用域:page 本JSP的页面上下文 
6.application //作用域:application 周期最长
7.config //作用域:page  配置
8.page  //作用域:page
9.exception //作用域:page


表单参数的传递
1.get/post 显式/隐式请求  

2.乱码解决:
post乱码:request.setCharacterEncoding("UTF-8");
get乱码:设置tomcat的server里加入:URIEncoding="UTF-8"不推荐
或name = new String(name.getBytes("iso-8859-1"),"UTF-8");推荐
或<script type="text/javascript">


function login(){
var loginForm = document.forms["loginForm"];
loginForm.name.value = encodeURI(loginForm.name.value);
loginForm.submit();
}
name = URLDecoder.decode(name,"utf-8");
3.URL传值
4.提交表单
5.隐藏域

<input type="hidden" name="id" value="111">

打赏:


版权声明:本文为博主原创文章,未经博主允许不得转载。

html+javascript+css学习笔记

  • 2014年07月03日 22:16
  • 36KB
  • 下载

菜鸟学习笔记——jQuery中.css(),.each(),.append(),.html()方法总结

1、$(selector).css() 1)$(selector).css(name),返回css的属性值。如:$("p").css("color"),返回p的color值; 2)$(select...

jQuery学习笔记:DOM操作(二)——属性、类、HTML、CSS

属性操作获取属性和设置属性attr() 如果要获取属性,那么给attr()方法传递一个参数,即属性名称。 $("img").attr("src"); 如果要设置属性,那么就传递两个参数,即属性名和对应...

jQuery学习笔记(三)-HTML+CSS

转自W3School:http://www.w3school.com.cn/jquery/index.asp jQuery 包含很多供改变和操作 HTML 的强大函数。 改变 HT...

JavaScript学习笔记8-jQuery入门介绍、css选择器复习

New Document click me if(document.getElementById("hello")) { document.ge...

韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js基本语法——三大流程控制 循环控制 听其名而知其意,就是让你的代码可以循环的执行。 案例: 编写一个程序...

韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js基本语法——基本数据类型 javascript基本数据类型三大类型 ①基本数据类型 分为: (1)数...

#学习笔记#(5)表格奇偶行颜色样式JavaScript+CSS+HTML

表格奇偶行样式 .odd { background:#ffffee; } .even { background:#fff38f; } .first { background:red;...

韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 因为js是由浏览器来解释执行的,因此这里有一个问题,不同类型的浏览器可能对js的支持不一样。 js运行原理 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML+CSS+JavaScript+JQuery+JSP学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)