前端部分 html相关

1.1　　html 表格与框架

1　　html表格

　　<table>
　　　　<tr>
　　　　　　<td></td>　　　　//colspan = "2";rowspan = "2";
　　　　</tr>
　　</table>

2　　html框架

<frameset  rows="25%,50%*" border = "5" scrolling = "no"></frameset>

1.2　　html 表单

1  表单demo(页面在submit时跳转，跳转页面为form的action)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mr Wei</title>
</head>
<body>
<form action="success.html" method="post" id ="myform" name="myform">
    <tr>
        邮箱：<input id="email" type="text" class="inputs"/>
    </tr>
    <tr>
        密码：<input id="pwd" type="password" class="inputs"/>
    </tr>
    <tr>
        登录：<input name="btn" type="submit" value="登录"/>
    </tr>
</form>

</body>
<script type="text/javascript">

//init();
//functon init(){
    //var o = doucutment.forms["myform"];
    //return o.submit();
//}

$(function(){
    $("#myform").submit();
});

</script>
</html>

另外参考：

https://www.cnblogs.com/zouyun/p/7793426.html




2  单选框

<input name = "gen" type = "radio" class = "input" value = "男" checked= "checked">男&nbsp;
<input name = "gen" type = "radio" class = "input" value = "女">女

 <div id="line9" index="9">
                 选择方式：
                  <input type="radio" name="SelectType" id="0010" value="0010" onclick="checkValue(this)">采集方式1</input>
                  <input type="radio" name="SelectType" id="0020" value="0020" onclick="checkValue(this)">采集方式2</input>
 </div>
function checkValue(chk){
    var flag=chk.value;
    if("0010"==flag){
        alert("aaa");    
    }else if("0020"==flag){
        alert("bbb");
    }
}

3  复选框

<input type = "checkbox" name = "insert" value = "sport"> 运动


4  下拉框

<select name = "bmon">
　　<option value = "1">一月</option>
　　<option value = "2">二月</option>
</select>

5  多行文件域

<textarea name ="textarea" cols = "40" rows = "6">
</textarea>

6　　文件上传按钮

<input type="file" name="File" id="ChooseFile" />

6.1　　加校验大小，加校验文件格式(支持火狐，ie)

//IE浏览器->工具->Internet选项->安全->自定义级别->设置

//->“对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本”设置为启用，确定即可。

       
     <div id="line11" index="11">
                选择文件：<input type="file" name="File" id="ChooseFile" />
                <input type="button" id="SendMessage" onclick="SendMessage(this)" value="采集"  onpaste="return false"/>
            </div>

function SendMessage(){
    var sChooseFilePath = document.all("ChooseFile").value;
    if(typeof(sChooseFilePath)=="undefined" || sChooseFilePath.length==0){
        alert("请先选择文件");
        return;
    }
    var index = sChooseFilePath.lastIndexOf(".");
    var vSuffixName = sChooseFilePath.substr(index+1);
    if("jpg"!=vSuffixName){
        alert("目前建议支持jpg后缀格式");
        return;
    }
    var o = document.all("ChooseFile");
    var sFileName = document.all("ChooseFile").value;
    var fileSize;
    if(typeof(ActiveXObject) == "function"){ // IE
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var f1 = fso.GetFile(sFileName);
        fileSize = f1.size;
    }else{
        fileSize = o.files[0].size;
    }
    if(fileSize > 1*1024){
        alert("文件大于1k,不能上传!");//文件大于2048k，不能上传！
        return;
    }
}

6.2　　文件弹框设置为不可用

document.getElementById('ChooseFile').disabled = true;　　　　//js

6.3　　清空文件内容

    var obj = document.getElementById('ChooseFile');
    obj.outerHTML=obj.outerHTML;　　　　　　　　　　　　　　//js

1.3　　html 段落

1　　行间距

#cen1-pi p{
    font-size:12px;
    line-height:75%;
}

1.4　　html 列表

1　　ul

　a　　去掉小黑点：

#head-3 li{
    list-style:none;
}

b　　去掉ul空白部分：

ul{
    margin:0;
    padding:0;
}




2　　列表常见分类
a　　无序列表
<ul type = "circle">//disc square
　　<li></li>
</ul>

b    有序列表
<ol type = "1">
　　<li></li>
</ol>

c　　　定义列表
<dl>
　　<dt></dt>
　　<dd></dd>
</dl>

1.5　　html 背景图片

#head{
    height:50px;
    background-image:url(sucai/images/menuBg.jpg);
　　 background:url(sucai/images/btn-01.gif) 0px 0px no-repeat;

}

background-image与background区别：

background是背景设置的集合,而background-image只是设置背景的图片样式.
background后可加背景颜色,背景图片及图片排列样式,和结构对齐样式,可以说控制了整个背景的属性.

1.6　　html css存放

<style type="text/css">
.game-logo{
    float:left;
}

</style>

1.7　　html 浮动

clear:both;　　清除浮动，另起一行

1.8　　html 字体

1　　字体加粗：

font-weight:bold;

font-size:12px; 字体大小
font-family:"隶书"; 字体类型



　
2　　字体下划线：

text-decoration:underline;//有下划线
　　 text-decoration:none;//无下划线
text-align:right;//文本右对齐

3　　文字居中：
text-align:center;



4　　斜体
<em>1910</em>


5　　加粗
<strong>aaa</strong>


6　　字体高亮显示
<span></span>

1.9　　html hover

1　　hover
.gamenav dt a:hover{
color:#fff;
}

2　　hover不同标签
#top1 li:hover a{
color:#FFF;
}

1.A　　html 颜色

#000000 为黑色

#FFFFFF 为白色

1.B　　html 盒子

1　　三个盒子并列：

float:left;

2 margin,padding

margin:外边距；
padding:内边距；
padding:15px 30px 10px 10px;
上右下左

1.C　　html 乱码问题

1 添加如下代码即可：

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

1.D　　html 转化为jsp两种方式

（转自：http://www.jb51.net/article/40538.htm)

将html页改成jsp有两种方法，第一种是直接修改html文件，另一种是新建jsp文件。下面为大家详细介绍下具体实现，感兴趣的朋友可以参考下

一般情况，将html页改成jsp有两种方法，第一种是直接修改html文件，另一种是新建jsp文件。下面具体说一下这两种方式。
假设我们要将testPage.html文件修改为testPage.jsp文件。原testPage.html文件内容为：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>

第一种：直接修改html文件
1、直接在原testPage.html页面最顶端添加如下代码：

复制代码代码如下:

<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>

2、修改文件后缀名
点击原testPage.html文件，按F2，修改后缀名为jsp，Ok即可。
运气好的话，到此为止应该是大功告成了，可是我有点点背，出现了如下错误界面：

可是再次将文件后缀改成html后，又可以正常显示。上网查了半天也没找到解决方案。后来无意间重启了Myeclipse，jsp页面居然神奇般的能正常显示了，真是让人无语，浪费那么多时间解决一个不是问题的问题。

第二种：新建jsp文件
1、新建文件名为testPage.jsp文件
2、将原testPage.html文件的内容拷贝到jsp文件中。千万别傻乎乎的连jsp文件头的内容也覆盖了，只覆盖jsp文件中html标签的内容就OK了。
3、删除原testPage.html文件即可。
拓展知识

复制代码代码如下:

<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>

解释一下上面的代码，page language="java" 这个大家都懂，不解释。charset=GB18030和pageEncoding="GB18030"都是设置编码的，他们有什么区别呢？charset=GB18030指的是此jsp处理完后输出到浏览器的内容的编码方式为GB18030。pageEncoding="GB18030"设置的是jsp文件本身的编码，大家都知道，jsp文件会被编译成java文件（每个jsp页面在tomcat下的work目录中，都会有与之对应的java文件和class文件），然后再继续进行下一步工作。这里的pageEncoding属性，就是设置从jsp文件到java文件的编码方式。
下面再简单了解一下常见的几种编码。

ISO-8859-1，这个是西欧语言的编码，用这种编码来编码中文是会出问题的。而像tomcat等程序的默认编码都是iso，想让它解释中文，还得设置编码方式。这也是在告诉咱们中华儿女们，咱得好好努努力，加加油，将来开发一款牛逼的软件，默认的编码就是中文的编码方式。外国人你想用吗？想用就自己转码去呗。
GB2312 、 GBK 、GB18030都是咱中文的编码（其实也能编码日文、韩文等），GB2312-80 仅收汉字 6763 个，GBK是GB2312-80的扩展，是向下兼容的。GBK 共收入21886个汉字和图形符号。GB18030 目前已编码的字符约2.6万。可以很明显的看出编码范围GB2312 < GBK < GB18030，不过，我感觉，就咱们平时用的那些汉字，用GBK编码足矣，你想啊，就算出现了这21886以外的汉字，估计咱这普通小老百姓也不认识啊，这跟乱码的效果不是一样嘛，哈哈，开玩笑啦。
UTF是国际通用编码，也就是说不管你是中文还是欧文，用这种编码都木有问题。也许有人会问了，既然如此，咱所有的编码都设置成UTF的不就行了嘛。对，没有错，这样是可以，不过给大家举个例子你就明白了。咱平常出门，拿的东西比较少，咱衣服上有个兜就可以了。偶尔办个事需要带点文件什么的，于是咱们拿了个文件包。再后来，咱们要去旅游，你拿了个行李箱。于是你就想了，东西少了，用行李箱可以，拿个文件什么的用行李箱也没问题，旅游也没问题，这行李箱的通用性真不错，于是你每天出门就带个行李箱。合适吗？
就写这么多吧。

前端部分 html相关

1.1 html 表格与框架

1.2 html 表单

1.3 html 段落

1.4 html 列表

1.5 html 背景图片

1.6 html css存放

1.7 html 浮动

1.8 html 字体

1.9 html hover

1.A html 颜色

1.B html 盒子

1.C html 乱码问题

1.1　　html 表格与框架

1.2　　html 表单

1.3　　html 段落

1.4　　html 列表

1.5　　html 背景图片

1.6　　html css存放

1.7　　html 浮动

1.8　　html 字体

1.9　　html hover

1.A　　html 颜色

1.B　　html 盒子

1.C　　html 乱码问题