Web——感觉自己会用到又容易忘记的技巧

盒子模型(Box Model)

设置页面内容是html 编码格式是utf-8:

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
    <title>Document</title>
</head>
<body>
</body>
</html>

超链接各种状态设置：

在源代码的<head>和<head>之间加上如下的CSS语法控制：
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-->
</style>
其中：
a:link 指正常的未被访问过的链接；
a:active 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线

页面跳转方法：

常用短语元素样式：

abbr：缩略语

br：换行

em：标志着重强调一段文字

i：表示与周边内容兼容不同的一段文字，比如来自另一种语言

span：一个没有自己语意的通用元素，可以用在希望引入一些全局属性却又不想引入额外语义的情况

strong：表示重要内容

wbr：表示可安全换行的地方

blockquote：表示引自他处的大段内容

nav：表示有意集中一起的导航元素

canvas：生成一个动态的图形画布

progress：嵌入目标进展或任

Web安全字体组合：

Serif 字体（有衬线字体）

字体	文本示例
Georgia, serif	This is a heading
"Palatino Linotype", "Book Antiqua", Palatino, serif	This is a heading
"Times New Roman", Times, serif	This is a heading

sans - serif字体（没有衬线的字体）

字体	文本示例
Arial, Helvetica, sans-serif	This is a heading
Arial Black, Gadget, sans-serif	This is a heading
"Comic Sans MS", cursive, sans-serif	This is a heading
Impact, Charcoal, sans-serif	This is a heading
"Lucida Sans Unicode", "Lucida Grande", sans-serif	This is a heading
Tahoma, Geneva, sans-serif	This is a heading
"Trebuchet MS", Helvetica, sans-serif	This is a heading
Verdana, Geneva, sans-serif	This is a heading

Monospace 字体（等宽字体）

字体	文本示例
"Courier New", Courier, monospace	This is a heading
"Lucida Console", Monaco, monospace	This is a heading

WEB安全色：

WEB SAFE COLORS

颜色的三种表示方式：

十六进制色 color:#0000ff; //若能简化可简化为#00f
RGB 颜色 color:rgb(255,0,0);
RGBA 颜色 color:rgba(255,0,0,0.5);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）
HSL 颜色 color:hsl(120,65%,75%);//HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度）
HSLA 颜色 color:hsla(120,65%,75%,0.3);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）
预定义/跨浏览器颜色名

检查网页背景是否和文本/链接颜色有较好的对比度

WebAIM Color Contrast Checker

CSS的三种引入方式

一、行内样式：使用style属性引入CSS样式。
示例：

<h1 style="color:red;">style属性的应用</h1>

二、内部样式表：在style标签中书写CSS代码。style标签写在head标签中。

示例：

<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

三、外部样式表：CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：

1、链接式
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
2、导入式
<style type="text/css">
  @import url("css文件路径");
</style>

用图片代替列符号

向列表<ul>,<ol>添加list-style-image属性：

ul {list-style-image:url(xx.jpg)}

收藏图标(favorites icon)设置

用于网页标题栏前小图标，例如：

<link rel="icon" href="haitun.jpg" type="image/x-icon">

背景设置

body{
    /*加载背景图*/
    background-image：url（./images/background.jpg）;
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;  //此条属性必须设置否则可能无效/
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-color: #CCCCCC;
}
或简写为如下CSS样式：
body{
   background:url(./images/background.jpg)  no-repeat center center;
   background-size:cover;
   background-attachment:fixed;
   background-color:#CCCCCC;
}

相对链接方式

1、直接使用当前目录或当前子文件夹下的文件：

href="index.html"

href="img/c.jpg"

href="../index.html"

或先返回上级目录，在向下选用文件

href="../img/c.jpg"

做一个对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .chat-msg{
            width: 300px;
            height: 80px;
            border:1px solid #ccc;
            position: relative;
            filter: drop-shadow(0 0 2px #999);
            background-color: #FFFFFF;
        }
        .chat-msg:before{
            content: "";
            position: absolute;
            left: -10px;
            top:34px;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 10px solid #ccc;
        }
        .chat-msg:after{
            content: "";
            position: absolute;
            left: -8px;
            top: 34px;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 10px solid #fff;
        }
    </style>
</head>
<body>
    <div class="chat-msg">hi,Q!</div>
</body>
</html>

减少代码耦合

一个参数在多个文件中使用，修改一个地方会影响全局。防止耦合可使用传参的方式。

减少重复代码

将重复代码封装成一个函数（模块、插件、类等）。

页面元素推拽

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
	#div1, #div2
	{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
	function allowDrop(ev)
	{
		ev.preventDefault();    /*调用 preventDefault() 来避免浏览器对数据的默认处理*/
	}
	function drag(ev)  /*drag(event)，它规定了被拖动的数据。*/
	{
		ev.dataTransfer.setData("Text",ev.target.id);  /*dataTransfer.setData() 方法设置被拖数据的数据类型和值*/
	}
	function drop(ev)
	{
		ev.preventDefault();
		var data=ev.dataTransfer.getData("Text");  /*通过 dataTransfer.getData("Text") 方法获得被拖的数据。*/
		ev.target.appendChild(document.getElementById(data));  /*把被拖元素追加到放置元素（目标元素）中*/
	}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">  /*ondragover 事件规定在何处放置被拖动的数据。*/
	/*为了使元素可拖动，把 draggable 属性设置为 true*/
  <img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  /*ondrop 属性调用了一个函数，drop(event)：*/
</body>
</html>

样式规则的权重计算方式

样式规则	权重
!important	最高
内联	1000
id	100
.class	10
name	1

可继承的CSS属性

字体：font（style、weight、size、family）、color、line-height、letter-spacing、word-spacing
文本：text-indent、text-align、white-space、word-wrap
列表：list-style（type、position、img）
表格：border-collapse

绝对定位层下margin:auto会失效

定位就不能用margin了, 要用left/top/right/bottom等。如设置left:50%，然后margin-left的值为层的宽度的一半，就可在达到margin:auto的效果。

元素居中设置

在父元素中设置align="center"属性。在文字类元素中可设置style="text-align: center"。

内容不能被选中

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

transform同时设置多个样式

transform元素可以按照设定的值变形、旋转、缩放、倾斜，当设置多个样式式，直接用空格隔开即可。

边框阴影效果

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

段落首行文字缩进

让每个段落首行开头文字缩进，如缩进2个文字距离样式，我将用到text-indent属性样式。

cssText的用法以及特点

cssText 的本质就是设置 HTML 元素的 style 属性值。

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

但是，这样会有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
为了解决这个问题，可以采用cssText累加的方法：

Element.style.cssText += ‘width:100px;height:100px;top:100px;left:100px;’

因此，上面cssText累加的方法在IE中是无效的。

Element.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’

最后，可以在前面添加一个分号来解决这个问题：

获取鼠标坐标

   var eve = e || window.event;
　　var x = eve.clientX, // 鼠标指针相对客户端（即浏览器文档区域）的水平坐标。
　　y = eve.clientY, // 鼠标指针相对客户端（即浏览器文档区域）的垂直坐标。
　　x1 = eve.screenX, // 鼠标指针相对计算机屏幕的水平坐标。
　　y1 = eve.screenY; // 鼠标指针相对计算机屏幕的垂直坐标。

CSS中内联元素是什么

内联元素一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用，常见内联元素有“a、b、br、img、label”等。

判断输入内容是否为数字

function checkRate(input) { 
　　var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/ 
　　if (!re.test(input)) { 
　　　　alert(“请输入数字”); 
　　} 
}

去除字符串中空格

 result.innerHTML = sa.value.replace(/(^\s*)|(\s*$)/g, "");