版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/czh500/article/details/84945523
html中的一些知识点(input的size和width的区别,HTML字符实体，复选框中的checked，等等知识点)
直接看下面的代码和截图
<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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>骚蕊,亲,你访问的页面在地球上消失了!-跳转到出错页面(错误提示页面)</title>
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="input2.css">
<style type="text/css">
font {
font-weight: bold;
font-style: inherit;
}
.myDiv {
/*
id选择器在一个网页中只能用一次,主要是为了避免给后续的javascript造成一些冲突和影响
参考网页https://zhidao.baidu.com/question/582814229647653165.html
*/
/*有些内容太大或者太多,在div中放不下,所以可以通过设置overflow:hidden属性来隐藏超出的内容,这是一种处理方式*/
/*overflow:auto;当div里面的内容超长之后就会显示滚动条*/
/*height: auto !important;该属性具有高度可以随着内容的增高而自动伸展 */
/*overflow:hidden;overflow:hidden属性来隐藏超出的内容*/
height: 50px !important;
/*
overflow设置当对象的内容超过其指定高度及宽度时如何管理内容的属性,是添加滚动条、还是隐藏剪切超出内容。
overflow:auto生效要素：要让此CSS样式生效，那么要么设置宽度、要么设置高度、要么设置宽度又同时设置高度，这样才
会让浏览器去判断超出限制宽度或高度时出现滚动条。 可参考https://www.thinkcss.com/css/1026.shtml或者参
考http://www.jianshu.com/p/2d38c4174ab5
overflow知识点可参考 http://www.jianshu.com/p/2d38c4174ab5
*/
/*
overflow:auto;
height: auto;
width: 98%;
*/
overflow:hidden;
/*
可以参考：http://www.divcss5.com/rumen/r532.shtml
内容太多，超出一定的限制范围则会溢出,需要将溢出内容显示成省略号样式的话，需要做3件事情,如下：
1：overflow:hidden;
2：text-overflow:ellipsis;
3：使用html <nobr></nobr>标签强制内容不换行
text-overflow:ellipsis; 显示省略号样式,当对象内文本溢出时显示省略号样式（...）
text-overflow:clip; 不显示省略标记（...）,而是简单的裁切
使用nobr标签，强制让内容不换行,要想实现显示不完内容将显示省略号代替，还需要html nobr标签完成（nobr禁止换行标签）
*/
text-overflow:ellipsis;
/*
宽度、高度如果不设置的话,默认就是自适应这一特性,宽度、高度不设置即宽度、高度会自动适应缩放比
例（不设置宽度、高度即宽度、高度值默认为auto自适应） 可参考http://www.divcss5.com/jiqiao/j688.shtml
*/
}
div {
/*
这里顺便说下css样式表中的样式覆盖顺序，样式的优先级,(css中类选择器、id选择器、 上下文选择器[上下文选择器也叫覆盖选择器]的优先级)具
体的请参考http://www.cnblogs.com/zhangpengshou/archive/2012/08/08/2628737.html
*/
/*有些内容太大或者太多,在div中放不下,所以可以通过设置overflow:hidden属性来隐藏超出的内容,这是一种处理方式*/
/*overflow:auto;当div里面的内容超长之后就会显示滚动条*/
/*height: auto;该属性具有高度可以随着内容的增高而自动伸展 */
/*overflow:hidden;overflow:hidden属性来隐藏超出的内容*/
/*height: auto;*/
/*height: 50px;*/
min-height: 80px; /*当div内容不超过80px高度时，div高度为80px*/
/*height: auto;*/ /*当div内容超过80px高度时，div自动增高*/
border-radius: 15px;
}
input {
border-radius: 6px; /*把边框做成圆角*/
}
.color {
/*
CSS的组成,三种样式(内联式,嵌入式,外部式),优先级 参考网页http://blog.csdn.net/chq11106004389/article/details/50515717
*/
/*
参考网页http://blog.csdn.net/u012110719/article/details/41145223
内联式 > 嵌入式 > 外部式，但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
参考网页http://www.cnblogs.com/seostyle/p/4951460.html
四种CSS引入方式的优先级
1.就近原则
2.理论上：行内>内嵌>链接>导入
3.实际上：内嵌、链接、导入在同一个文件头部，谁离被设置样式的元素近，谁的优先级高(说白了还是就近原则)
*/
/*
参考网页https://zhidao.baidu.com/question/321810211.html
css样式内容可以写在3个地方
单独css文件中 在<head></head>用<link >标签连接 链接样式
把style标签写在head标签中 内嵌样式
还可以写在标签中 <p style=""></p> 行内样式
3中样式的优先级是 行内样式 内嵌样式 链接样式
*/
color: blue;
}
</style>
</head>
<body>
<div align="center">
<div class="myDiv" style='background-color:#D2B48C;border-style:<%out.print("dashed");%>; border-width:3px; border-color:blue;visibility: visible;'>
<nobr><font size="12" color="red">骚蕊,亲,你访问的页面在地球上消失了!请允许宝宝做一个悲伤的表情！</font></nobr>
</div>
<%
String suffix = ".gif";//后缀
for(int i = 1; i <= 19; i++){
/* if((i == 7) || (i != 6)){
suffix = ".jpg";
continue;
} */
if((i == 7)){
suffix = ".jpg";
continue;
}
else{
suffix = ".gif";
}
//out.print("<img alt=\"骚蕊,你访问的页面在地球上消失了!\" src=\"img/cry" + i + suffix + "\" title=\"找不到页面时的哭泣表情图片\">");
//out.print("<img alt='骚蕊,你访问的页面在地球上消失了!' src='img/cry" + i + suffix + "' title='找不到页面时的哭泣表情图片'>");
out.print("<img" + " alt=\"骚蕊,你访问的页面在地球上消失了!\" src=\"img/cry" + i + suffix + "\" title=\"哈哈！找不到" + "页面时的哭泣表情图片\">");
}
%>
<br>
<h3>html中input的size和width的区别</h3>
<h4>size是指文本框内(空白区)的长度(单位是字符数)，width是指文本框控件的长度(以坐标值为单位)</h4>
<h4>size 是对字的大小写义 width是对imput的宽度定义 是不一样的</h4>
<h4>size是value的长度，width是样式的宽度</h4>
<h4>size是限制字符串长度用的(10代表10个字符,一个英文等于1个字符,一个中文等于2个字符)</h4>
<h4>width只是限制input框体的长度而已,不设置size,只设置width,在超过width后,输入内容会自动左移</h4>
<input type="text" size="20" value="文本框用size属性" class="color"><br><br>
<input type="text" style="width: 600px;" value="文本框用width属性" class="color"><br>
<input type="password" style="width: 600px;" class="color">
<div style='background-color:#CDBE70;border-style:<%="solid"%>; border-width:3px; border-color:red;visibility: visible;width: 800px;height: 50px;min-height: 50px;'>
骚瑞,你访问的页面在地球上消失了!请允许我做一个悲伤的表情！ <a href="http://qq.yh31.com/xq/wq/" title="(这是'伤心'"表情图片"的网址)">(伤心表情图片)</a>
</div>
<h1>HTML字符实体,参考网址http://www.w3school.com.cn/html/html_entities.asp</h1>
<h1><a href="http://www.w3school.com.cn/html/html_entities.asp" title="(HTML字符实体,参考网址)">HTML字符实体,参考网址</a></h1>
<font size="10" color="red">人民币(元)：¥</font>
<font size="10" color="blue">版权信息（copyright）©
<script type="text/javascript">
//获取客户端当前时间
var myDate = new Date();
//打印客户端当前时间的当前年份
document.write(myDate.getFullYear() + "(当前年份)");
</script>
</font>
<br>
<h1>这个属性只有不设置才表示不被选中，其他都不行。标准的值为checked='cheched',也就是当你写上checked就代表被选中,该属
性没有true和false之分,里面的值随意写,也可以不写,只要有该属性就代表被选中
</h1>
测试复选框1：<input type="checkbox"><br>
测试复选框2：<input type="checkbox" checked="checked"><br>
测试复选框3：<input type="checkbox" checked="true"><br>
测试复选框4：<input type="checkbox" checked="false"><br>
测试复选框5：<input type="checkbox" checked="abc随便写一个值"><br>
测试复选框6：<input type="checkbox" checked="helloworld"><br>
测试复选框7：<input type="checkbox" checked><br>
测试复选框8：<input type="checkbox" unchecked><br>
测试复选框9：<input type="checkbox" abcdf><br>
测试复选框10：<input type="checkbox" ""><br>
测试复选框11：<input type="checkbox" checked=""><br>
测试复选框12：<input type="checkbox" checked="unchecked"><br>
<font size="10" color="#8B1A1A">小于号：<</font>
<font size="10" color="#4B0082"> 大于号：></font>
</div>
</body>
</html>
