正文

HTML和CSS使用注意事项

IP云
IP云V管理员/4 阅读
09/24
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

HTML

1、button标签

在IE中，button标签默认的type是button，而在其他浏览器和W3C标准中button默认的属性都是submit。

所以，在一个form表单中，如果button按钮绑定了一个click事件，用js触发的时候可能会默认把你的表单进行提交，而不是触发click事件绑定的函数。

2、XML文档中的空格和换行

（1）连续的普通空格会被合并成一个空格；

（2）空格，回车，制表符都会被当做空格；

（3）解析器对<tag>...</tag>中间的字符串做了trim(去空格处理)；

（4）  可以实现空格，多个空格就用多个实现。注意&nbsp;是HTML中的空格实现，在xml中不起作用。

（5） 可以实现换行，多次换行就用多个实现。

3、<%@ include file="" %>和<jsp:include page="" />的区别

<%@ include file="" %>属于JSP指令

静态包含文件，即在编译时插入包含的文件。file不能为一变量URL，也不可以在file所指定的文件后接任何参数，file 所指的路径必须是相对于此JSP网页的路径。例如：如果在includebydirectives.jsp中使用<%@ include file="common.jsp"%>，则会在生成的includebydirectives_jsp.java中将common.jsp的文件包含进来。

注：在common.jsp、includebydirectives.jsp可相互引用定义的变量、方法。在common.jsp中定义的指令会合并到includebydirectives.jsp中。

<jsp:include page="" />属于JSP行为

动态包含文件，即在运行时加入包含文件的运行结果。语法：

<jsp:include page="{urlSpec | <%= expression %>}" flush="true | false " />

或者：

<jsp:include page="{urlSpec | <%= expression %>}" flush="true | false" >
<jsp:param name="PN" value="{PV | <%= expression %>}" /></jsp:include>

例子：如果在includebyaction.jsp中使用<jsp:include flush="true" page="common.jsp"></jsp:include>，则在生成的includebyaction_jsp.java中在include的地方会加入一条：org.apache.jasper.runtime.JspRuntimeLibrary.include(request, response, "common.jsp", out, true);

注：includebyaction.jsp和common.jsp是相互独立的，includebyaction.jsp只是把common.jsp执行的结果加入。

4、a标签

<a href="javascript:history.go(-1);">点击</a>

点击返回上一页。

<a href="javascript:history.back(-1);">点击</a>

点击返回上一步。

<a href="#">点击</a>

点击页面会回到网页顶部。

<a href="javascript:void(0);">点击</a>

点击页面不会返回顶部，页面不会乱跳。

<a href="javascript:;">点击</a>

点击页面不会乱跳。这里的href="javascript:;"，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数。而采用这个方式 javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好。

5、label标签

label 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label 标签的 for 属性应当与相关元素的 id 属性相同。

<li>
<input type="checkbox" checked="checked" id="remember1">
<label for="remember1">记住密码</label> //表示点击“记住密码”这几个字时也能选中id为remember1的选择框。
<input type="checkbox" checked="checked" id="autoLogin1">
<label for="autoLogin1">自动登录</label>
</li>

6、script代码块位置

通常会将 script 块放置在 body 块的末尾，目的是提高性能，但更重要的是允许访问以前呈现的 DOM 元素。

7、input标签

input文件域在谷歌浏览器里接收类型写*会使文件选择框打开过慢。

这样写会使文件选择框打开过慢。

<input type="file" accept="image/*"/>

改成这样就没问题了。

<input type="file" accept="image/gif,image/jpg,image/png"/>

8、JSP页面在Tomcat中的编译

xxx.jsp会被转换为xxx_jsp.java文件，接着会被编译成xxx_jsp.class文件，这是个servlet。

继承和实现了下面的类型：

extends org.apache.jasper.runtime.HttpJspBase
implementsorg.apache.jasper.runtime.JspSourceDependent

CSS

1、visibility和display的区别

<div style="visibility:visible;">

表示显示该div。

<div style="visibility:hidden;">

表示隐藏该div，但是保留该div所占的空间。

<div style="display:block;">

表示显示该div。

<div style="display:none;">

表示隐藏该div，不保留该div所占的空间。

2、margin和padding的区别

盒模型参考链接：https://www.cnblogs.com/HDK2016/p/6127856.html

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
padding是指从自身边框到另一个容器边框之间的距离，就是容器内距离。

（1）margin-left:10px; 左外边距
（2）margin-right:10px; 右外边距
（3）margin-top:10px; 上外边距
（4）margin-bottom:10px; 下外边距
（5）margin:10px; 四边统一外边距
（6）margin:10px 20px; 上下、左右外边距
（7）margin:10px 20px 30px; 上、左右、下外边距
（8）margin:10px 20px 30px 40px; 上、右、下、左外边距

（1）padding-left:10px; 左内边距
（2）padding-right:10px; 右内边距
（3）padding-top:10px; 上内边距
（4）padding-bottom:10px; 下内边距
（5）padding:10px; 四边统一内边距
（6）padding:10px 20px; 上下、左右内边距
（7）padding:10px 20px 30px; 上、左右、下内边距
（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

3、border边框属性

border 用于把针对四个边的属性设置在一个声明。

border-width 用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。可以直接设置长度px，也可以设置这些值：

thin：定义细的边框；

medium：定义中等的边框（默认）；

thick：定义粗的边框；

inherit：规定应该从父元素继承边框宽度。

border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

none：定义无边框。

hidden：与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted：定义点状边框。在大多数浏览器中呈现为实线。

dashed：定义虚线。在大多数浏览器中呈现为实线。

solid：定义实线。

double：定义双线。双线的宽度等于 border-width 的值。

groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。

inset：定义 3D inset 边框。其效果取决于 border-color 的值。

outset：定义 3D outset 边框。其效果取决于 border-color 的值。

inherit：规定应该从父元素继承边框样式。

border-color 设置元素的所有边框中可见部分的颜色，或者单独地为各边设置颜色。可以直接设置颜色名，rgb代码，十六进制色值，还可以设置下面的值：

transparent 默认值。边框颜色为透明；

inherit规定应该从父元素继承边框颜色。

新的边框属性：

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。用于创建圆角。

box-shadow 用于向方框添加阴影

border-image 使用图片来创建边框：

下面四个和border使用方法相同：

border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。

border-left简写属性，用于把左边框的所有属性设置到一个声明中。

border-right简写属性，用于把右边框的所有属性设置到一个声明中。

border-top简写属性，用于把上边框的所有属性设置到一个声明中。

例如：

边框各属性独立的样式进行CSS压缩合并
border-width:1px; border-style:solid; border-color:#000;
可以简写为：border:1px solid #000上、下、左相同边框样式，右边无边框
border-left:1px solid #000; border-top:1px solid #000;border-bottom:1px solid #000;
简写为：border:1px solid #000;border-right:0

4、控制图片变色

下面代码的效果是鼠标滑过图片就变亮了，控制的是图片的透明度

img {
opacity:0.1;/*取值范围是0-1*/
filter(alpha=10);/*取值范围是0-100*/
}
img:hover {
opacity:;
filter(alpha=100);
}

以下代码可以使图片变成灰白的，使用的是滤镜

img{ /*图片置灰的滤镜*/
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}

5、居中的实现

最外层的body设置text-align:center|left|right;里面的div设置margin:0 auto;可以实现水平居中，靠左，靠右

外层div设置text-align:center|left|right;里面的图片需设置margin:0 auto;可以实现水平居中，靠左，靠右

max-width:100%;max-height:100%;一起使用代表图片的宽高尺寸最大不能超过它所在的空间的宽高，即等比例压缩图片。

<body>
<div style="width:100px;height:100px;text-align:center;">
<a href="">
<img src="" style="margin:0 auto;max-width:100%; max-height:100%"/>
</a>
</div>
</body>

使div里面的文字居中：

div设置text-align:center; 可以实现里面的文字左右居中

div设置 一个height，再设置一个line-height, 这两个值设置的一样就能实现里面的文字上下居中

.ban{
width:1000px;
height:30px; /*值要一样，实现上下居中*/
line-height:30px; /*值要一样，实现上下居中*/
text-align:center; /*文字左右居中*/
background:rgb(214, 209, 8); /*设置div的背景色*/
color:rgb(94,94,94); /*设置字体颜色*/
font-size:14px; /*设置字号大小*/
font-weight: bold; /*设置字体加粗*/
margin:auto; /*div居中*/
}

<div class="ban"><span>累计180天充值100万以上以下设备任选其一！</span></div>

注：完全居中可以参考这篇文章：http://developer.51cto.com/art/201310/412634_all.htm

6、背景图片的设置

background-color 规定要使用的背景颜色。
background-position规定背景图像的位置。
background-size规定背景图片的尺寸。
background-repeat规定如何重复背景图像。
background-origin规定背景图片的定位区域。
background-clip规定背景的绘制区域。
background-attachment规定背景图像是否固定或者随着页面的其余部分滚动。
background-image规定要使用的背景图像。
inherit规定应该从父元素继承 background 属性的设置。

（1）对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。
background-size有3个属性：
auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片被隐藏的部分最少，这种属性在大图背景中应用比较广泛。这点比较难理解，需要结合实践理解。
contain：当使用该属性时，图片被缩放至最大且能被完全展示出来，但是由于图片的的尺寸比例与div的尺寸比例会有不同，所以当图片不能盖住div时，图片会自动平铺。

（2）background: url(./images/logo.png) no-repeat;     no-repeat为不平铺。

（3）js给DOM对象设置 background 属性，在一个声明中设置所有的背景属性

Object.style.background=background-color background-image background-repeat background-attachment background-position

background-color 设置元素的背景色。
color-name
color-rgb
color-hex
transparent
background-image设置背景图像。
url(URL)
none
background-repeat设置背景图像是否及如何重复。
repeat
repeat-x
repeat-y
no-repeat
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
scroll
fixed
background-position设置背景图像的起始位置。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos

7、人民币价格的显示

<div font-family="Arial;">
<span>¥20.0</span><!--这种方式在不同浏览器可能显示的不一样-->
<span>&yen;20.0</span><!--推荐这种使用实体符号的写法-->
</div>
<div style="text-decoration:line-through">10000元</div><!--划掉价格，一般用于显示原价-->

效果图：

8、光标形状的控制

style="cursor:pointer;"

cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。该属性的值如下：

default 默认光标（通常是一个箭头）
auto默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer光标呈现为指示链接的指针（一只手）
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右（东）移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize此光标指示矩形框的边缘可被向上（北）移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize此光标指示矩形框的边缘可被向下移动（南）。
w-resize此光标指示矩形框的边缘可被向左移动（西）。
text此光标指示文本。
wait此光标指示程序正忙（通常是一只表或沙漏）。
help此光标指示可用的帮助（通常是一个问号或一个气球）。

9、标题两侧的横线效果代码

<!DOCTYPE HTML>
<html>
<head>
<title>标题两侧的横线</title>
<meta charset="UTF-8">
<style type="text/css">
*{ margin: 0; padding: 0;}
body{ font-size:70%; font-family: verdana, hevetica, arial, sans-serif;}
.line{ margin-top: 50px; border-top: solid 1px #ccc; text-align: center; width: 320px; height: 36px;}
.wz{ float: left; display: block; padding: 0 5px; background: #fff; margin-top: -10px; margin-left: 120px; border: solid 0px red; }
</style>
</head>
<body>
<div class="line">
<span class="wz">other</span>
</div>
</body>
</html>

10、z-index属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
auto默认。堆叠顺序与父元素相等。
number设置元素的堆叠顺序。
inherit规定应该从父元素继承 z-index 属性的值。
调整层叠顺序，使用z-index属性。
z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。
同一个层叠上下文中，层叠级别（即z-index属性值）大的显示在上面，反之显示在下面。
同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
当z-index未定义或者值为auto时，在IE6,7下会创建新的局部层叠上下文，而在高级浏览器中，按照规范不产生新的局部层叠上下文。

11、字体问题

谷歌浏览器字体大小与IE和火狐不同的问题。

在Google Chrome下小于12px的字体都是显示都与12px字体的大小一样，可以得出一个结论：Google Chrome不支持小于12px的字体，可能是因为怕字体太小了，看不到。有时候需要用到小于12px以下的字体是，可以加入一CSS：-webkit-text-size-adjust:none;

IE和Firefox就没有这种限制，可以设置为1px。