var num = 1; var str = '1'; var test = 1; test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 test !== num //false test与num类型相同，其值也相同, 非运算肯定是false num == str //true 把str转换为数字，检查其是否相等。 num != str //false == 的 非运算 num === str //false 类型不同，直接返回false num !== str //true num 与 str类型不同 意味着其两者不等 非运算自然是true== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 。而 === 和 !== 只有在相同类型下,才会比较其值。原文：https://blog.csdn.net/xiaodenanhai/article/details/44413667 复制代码
数组对象排序：
var arr = [{name: "zlw", age: "24"}, {name: "wlz", age: "5"}];复制代码 var compare = function (prop) { return function (obj1, obj2) { var val1 = obj1[prop]; var val2 = obj2[prop]; if (!isNaN(Number(val1)) && !isNaN(Number(val2))) { val1 = Number(val1); val2 = Number(val2); } if (val1 < val2) { return -1; } else if (val1 > val2) { return 1; } else { return 0; } } }arr.sort(compare("age")) //[Object { name="wlz", age="5"}, Object { name="zlw", age="24"}]复制代码 button按钮：
<button>按钮</button>自动刷新页面，解决办法就是添加一条属性：<button type="button">按钮</button>就行了。
火狐浏览器Hack：（单独对火狐浏览器定义样式）
.sidebar-item{ /*正常写法*/ text-align: right; padding: 10px 25px 0 0; font-size: 20px;}@-moz-document url-prefix(){ /*只有Firefox识别*/ .sidebar-item{ padding: 10px 15px 0 0!important; }}复制代码 tabindex 属性：
tabindex 的一大作用就是让元素可以获得焦点，从而触发 focus 状态。
tabindex 的另一个作用，就是设定 Tab 键切换的顺序。tabindex 有如下几个值:
- 1 ~ 32767: 通过
Tab键切换时，切换顺序将遵循数字的大小(从小到大)，数字相同则按出现的先后次序进行切换 - 0: 默认值，当
tabindex > 0的元素都切换之后，才会切换到tabindex = 0的元素，并且按出现的先后次序进行切换 - 负数(通常为 -1): 通过
Tab键无法切换到该元素，但鼠标点击可以获取焦点
去除下拉框的默认三角符号：
select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; /*为下拉小箭头留出一点位置，避免被文字覆盖*/ padding-right: 14px;}/*清除ie的默认选择框样式清除，隐藏下拉箭头*/select::-ms-expand { display: none; }复制代码 超出隐藏的CSS样式：
width:175px; overflow:hidden; /*超出部分隐藏*/white-space:nowrap;/*文本溢出用"..."表示*/text-overflow:ellipsis; /*适用IE*/-o-text-overflow:ellipsis; /*适用opera*/-moz-binding: url('ellipsis.xml#ellipsis');/*适用火狐(firefox通过XUL实现效果)*/复制代码 未读消息的小红点样式：（ps：通常习惯使用伪元素来添加样式）
.red-point{ /* 需要添加样式的元素，即小红点在这个元素的某一个位置添加*/ position: relative;}.red-point::before{ /*伪元素*/ content: " "; border: 3px solid red;/*设置红色*/ border-radius:3px;/*设置圆角*/ position: absolute; z-index: 1000; right: 0%; margin-right: -5px; margin-top: -5px;}复制代码 **** 如ajax回调中跳转没用，一般加计时器延时下执行就好了 ****
保留小数：Math.floor(1.475869 *100) /100 //1.47 不会四舍五入
html 三点 省略号：…
bootstrap 图片水平居中属性：<img class="img-responsive center-block" src="xxx.png" />
jQuery 鼠标移入移出事件切换
Hello World !!!
复制代码
注：hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。
jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。
Hello World !!!
复制代码
动态添加元素的绑定事件问题：
利用on事件绑定 ($(ParentEle).on("click",".thisEle",function{})
//这里的ParentEle是 thisEle的父辈元素或者祖先元素，ParentEle可以是document，也可以是body等。
$("body").on("click", ".newBtn", function { alert('这里是动态元素添加的事件');});复制代码 <!> 跑马灯
普通卷动 滑动 预设卷动 来回卷动 向下卷动 向上卷动 向右卷动 向左卷动 卷动次数 设定宽度 设定高度 设定背景颜色 设定滚动速度 设定卷动时间 鼠标经过上面时停止滚动 鼠标离开时开始滚动 字体效果...
标题字(最大)...
标题字(最小)...粗体字...粗体字(强调) （同上效果略同）...斜体字...斜体字(强调)...斜体字(表示定义)...底线...底线(表示插入文字)...横线...删除线...删除线(表示删除)...键盘文字... 打字体<div></div> ...<div></div> 固定宽度字体(在文件中空白、换行、定位功能有效)<div></div> ...</plaintext>固定宽度字体(不执行标记符号)<listing>...</listing> 固定宽度小字体<font color=00ff00>...</font>字体颜色<font size=1>...</font>最小字体<font style =’font-size:100 px’>...</font>无限增大复制代码<div></div> </plaintext></b></pre> <div></div> <p>区断标记<div></div></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <pre class="hljs bash"><div></div> <hr>水平线<div></div> <hr size="’9’">水平线(设定大小)<div></div> <hr width="’80%’">水平线(设定宽度)<div></div> <hr color="’ff0000’">水平线(设定颜色)<div></div>(换行)<div></div> <nobr><div></div> ...<div></div> </nobr>水域(不换行)复制代码</pre> <div></div> <p>水域(段落)<div></div></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <pre class="hljs bash"><div></div> <center><div></div> ...<div></div> </center>置中<div></div> <!---->连结格式<base href="位址">(预设好连结路径)<a href="位址"></a>外部连结<a href="位址" target="’_blank’"></a>外部连结(另开新视窗)<a href="位址" target="’_top’"></a>外部连结(全视窗连结)<a href="位址" target="’页框名’"></a>外部连结(在指定页框连结)<div></div> <!---->贴图/音乐<img src="图片位址">贴图<img src="图片位址" width="’180’">设定图片宽度<img src="图片位址" height="’30’">设定图片高度<img src="图片位址" alt="’提示文字’">设定图片提示文字<img src="图片位址’" border="’1’">设定图片边框<bgsound src="MID音乐档位址">背景音乐设定复制代码</pre> <div></div> <p><!>表格语法<div></div></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <pre class="hljs bash"><div></div> <table aling="left"><div></div> ...<div></div> </table>表格位置,置左<div></div> <table aling="center"><div></div> ...<div></div> </table>表格位置,置中<div></div> <table background="图片路径"><div></div> ...<div></div> </table>背景图片的URL=就是路径网址<div></div> <table border="边框大小"><div></div> ...<div></div> </table>设定表格边框大小(使用数字)<div></div> <table bgcolor="颜色码"><div></div> ...<div></div> </table>设定表格的背景颜色<div></div> <table borderclor="颜色码"><div></div> ...<div></div> </table>设定表格边框的颜色<div></div> <table borderclordark="颜色码"><div></div> ...<div></div> </table>设定表格暗边框的颜色<div></div> <table borderclorlight="颜色码"><div></div> ...<div></div> </table>设定表格亮边框的颜色<div></div> <table cellpadding="参数"><div></div> ...<div></div> </table>指定内容与格线之间的间距(使用数字)<div></div> <table cellspacing="参数"><div></div> ...<div></div> </table>指定格线与格线之间的距离(使用数字)<div></div> <table cols="参数"><div></div> ...<div></div> </table>指定表格的栏数<div></div> <table frame="参数"><div></div> ...<div></div> </table>设定表格外框线的显示方式<div></div> <table width="宽度"><div></div> ...<div></div> </table>指定表格的宽度大小(使用数字)<div></div> <table height="高度"><div></div> ...<div></div> </table>指定表格的高度大小(使用数字)...指定储存格合并栏的栏数(使用数字)...指定储存格合并列的列数(使用数字)复制代码</pre> <div></div> <p>分割视窗<div></div></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <pre class="hljs bash">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整分割左右两个框架分割左中右三个框架<div></div> <分割上下两个框架><div></div> 分割上中下三个框架复制代码<div></div> </分割上下两个框架></pre> <div></div> <p>属性：<div></div>cols 垂直切割窗口（如左右分割两个窗口）接受整数值，百分数，*（*代表占用余下空间）数值的个数代表分成的部分数目，要以逗号分隔。例：cols="30,*,50%"可以 切成三个视窗，第一部分是30像素（pixels）为绝对分割，第二部分是当分配完第一和第三视图后剩下的空间，第三部分则占整个窗口的50%宽度，为相对分割。<div></div><div></div>rows 就是横向切割，将窗口上下分开，数值设置同上。<div></div><div></div>以上两属性尽量不要在同一个<frameset>标记中，因为王井（netscape）不支持，尽量采用多重分割。<div></div><div></div>frameborder 设置框架的边框，其值有0不要边框，1要边框。<div></div><div></div>border 设置框架边框厚度<div></div><div></div>framespacing 表示框架与框架间保留空白的距离<div></div><div></div>frame 元素（单标签）<div></div><div></div>语法格式：<div></div><div></div><frame name="" src="url" scrolling="yes/no" noresize><div></div><div></div>属性：<div></div><div></div>name 框架名称，指定框架来做连接的目标窗口。<div></div><div></div>src 框架中要显示的网页文当url地址，每个个框架要对应一个html文挡。<div></div><div></div>scrolling 是否显示滚动条，yes/no,auto是自动。<div></div><div></div>noresize 设置不让使用者改变这个框架的大小，<div></div><div></div>noframe元素<div></div><div></div>指定当使用了框架的页面在不支持框架的浏览器中打开时显示的信息<div></div><div></div>语法格式：<div></div><div></div><noframe><div></div><div></div>......<div></div><div></div></noframe><div></div><div></div>表单<form></form><div></div><div></div>语法格式：<div></div><div></div><form action="url" method="get/post"><div></div><div></div>....<div></div><div></div><input type=submit><input type=reset><div></div><div></div></form><div></div><div></div>method有两种提交方式get,post<div></div><div></div>action 是指明处理该表单的程序位置，这样表单所填的资料才能传给cgi做处里，可设定此参数为action="mailto:lwr8494@163.com" 这样此表单所填的资料将会发送到这个邮箱地址。<div></div><div></div>method 是指传送信息给cgi等网络程序的方式。可选post方法， get方法，post方法容许传送大量信息。get方法只接受低于1k的信息。<div></div><div></div>申请表单用的是post搜索引擎用的是get<div></div><div></div><div></div><div></div><! - - ... - -> 注解<div></div><div></div></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <pre class="hljs bash"><a href target> 指定超连结的分割视窗</a><a href="#锚的名称"> 指定锚名称的超连结</a><a href> 指定超连结</a><a name="锚的名称"> 被连结点的名称<address>....</address> 用来显示电子邮箱地址<b> 粗体字<base TARGET> 指定超连结的分割视窗<basefont SIZE> 更改预设字形大小<bgsound SRC> 加入背景音乐<big> 显示大字体<div></div> <blink><div></div> 闪烁的文字 设定文字颜色 显示本文<div></div> <div></div> 换行 设定表格标题位置... 为表格加上标题<div></div> <center><div></div> 向中对齐<div></div> <cite>...<cite> 用於引经据典的文字<code>...</code> 用於列出一段程式码<div></div> <comment><div></div> ...<div></div> </comment> 加上注解<div></div> <dd><div></div> 设定定义列表的项目解说<div></div> <dfn>...</dfn> 显示"定义"文字<div></div> <dir><div></div> ...<div></div> </dir> 列表文字标签<div></div> <dl><div></div> ...<div></div> </dl> 设定定义列表的标签<div></div> </dd><div></div> <dt><div></div> 设定定义列表的项目<div></div> <em> 强调之用<font face> 任意指定所用的字形<font size> 设定字体大小<div></div> <form ACTION><div></div> 设定户动式表单的处理方式 设定户动式表单之资料传送方式 设定视窗的上下边界 设定视窗的左右边界 为分割视窗命名 锁住分割视窗的大小 设定分割视窗的卷轴 将HTML档加入视窗 将视窗分割成左右的子视窗 将视窗分割成上下的子视窗... 划分分割视窗<div></div> <h1>~</h1><div></div> <h6> 设定文字大小 标示文件资讯<div></div> <hr> 加上分格线 文件的开始与结束<i> 斜体字<img ALIGN> 调整图形影像的位置<img ALT> 为你的图形影像加注<img DYNSRC LOOP> 加入影片<img HEIGHT WIDTH> 插入图片并预设图形大小<img HSPACE> 插入图片并预设图形的左右边界<img LOWSRC> 预载图片功能<img SRC BORDER> 设定图片边界<img SRC> 插入图片<img VSPACE> 插入图片并预设图形的上下边界<input TYPE NAME value> 在表单中加入输入栏位 定义查询用表单<kbd>...</kbd> 表示使用者输入文字<li type>...</li> 列表的项目 ( 可指定符号 )<div></div> <marquee><div></div> 跑马灯效果<div></div> <menu><div></div> ...<div></div> </menu> 条列文字标签<div></div> <meta NAME="REFRESH" CONTENT URL> 自动更新文件内容<div></div> <multiple><div></div> 可同时选择多项的列表栏<div></div> <noframe><div></div> 定义不出现分割视窗的文字<div></div> <ol><div></div> ...<div></div> </ol> 有序号的列表<div></div> <option> 定义表单中列表栏的项目<p align> 设定对齐方向</p><p> 分段<div></div> <person><div></div> ...<div></div> </person> 显示人名</p><pre> 使用原有排列<samp>...</samp> 用於引用字<select>...</select> 在表单中定义列表栏<small> 显示小字体<div></div> <strike><div></div> 文字加横线<div></div> <strong> 用於加强语气<sub> 下标字<sup> 上标字<div></div> <table border="n"><div></div> 调整表格的宽线高度<div></div> </table><div></div> <table cellpadding><div></div> 调整资料栏位之边界<div></div> </table><div></div> <table cellspacing><div></div> 调整表格线的宽度<div></div> </table><div></div> <table height><div></div> 调整表格的高度<div></div> </table><div></div> <table width><div></div> 调整表格的宽度<div></div> </table><div></div> <table><div></div> ...<div></div> </table> 产生表格的标签 调整表格栏位之左右对齐 设定表格栏位之背景颜色 表格栏位的合并 设定表格栏位不换行 调整表格栏位之上下对齐 调整表格栏位宽度... 定义表格的资料栏位<textarea name rows cols> 表单中加入多少列的文字输入栏</textarea><textarea wrap> 决定文字输入栏是自动否换行</textarea>... 定义表格的标头栏位<title> 文件标题</title>... 定义表格美一行<tt> 打字机字体<u> 文字加底线<div></div> <ul type><div></div> ...<div></div> </ul> 无序号的列表 ( 可指定符号 )<var>...</var> 用於显示变数BlockQuotc文本缩进复制代码</u></tt></sup></sub></strong><div></div> </strike></small></pre></option><div></div> </noframe><div></div> </multiple><div></div> </marquee></i></h6><div></div> </form></font></font></em><div></div> </dt></cite></cite><div></div> </center><div></div> </blink></big></b></a></pre> <div></div> <p><div></div>表示颜色的有三种方式；<div></div><div></div></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <pre class="hljs bash">1，16进制颜色代码语法：#RRGGBB例：<font color="#ff0000">红色</font>2，10进制RGB码语法：RGB（RRR，GGG，BBB）例：<font color="rgb(255,000,000)">红色</font>3,直接用颜色的英文名称例：<font color="red">红色</font>.....属性可分为三种：复制代码</pre> <div></div> <p><div></div></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <p></p> <div></div> <pre class="hljs bash">1，背景属性包括：bgcolor,background2,文字属性：包括：text,link,alink,vlink,3,留白属性：其中分为：leftmargin,topmargin.bgcolor背景色语法格式：.background背景图案。语法格式：.text文本颜色（非连接文字颜色）.link连接文字颜色（可连接文字颜色）.alink活动连接文字颜色（正被点击的可连接文字的颜色）.vlink已访问连接文字颜色）（已经点击访问过的可连接文字的颜色）语法格式：.leftmargin 页面左侧的留白距离.topmargin 页面顶部的留白距离语法格式：注：value为长度值为数字align 属性语法：<h2 align="?">文字</h2>其属性有三种：left靠左,center居中,right靠右〈p〉为段落标记，可利用以上属性对整个段落进行设置〈br>为换行标记<div></div> <nobr></nobr>为不换行标记 放在文字两边即可例：<h3>江南逢李龟年</h3>歧王宅里寻常见<div></div>催九堂前几度闻<div></div>正是江南好风景<div></div>落花时节又逢君预格式化：<pre>......</pre> 浏览是效果和编写是效果格式一样复制代码</pre> <div></div> <p>列表<div></div><div></div>1无序列表又称符号列表<div></div><div></div>语法格式：<div></div><div></div><ul type="">type的属性可选直disc实心圆点,clrcle空心圆点,square实心方框<div></div><div></div><li>文字</li><div></div><div></div><li>文字</li><div></div><div></div></ul><div></div><div></div>2有序列表<div></div><div></div>语法格式：<div></div><div></div><ol type="?" start"?"><div></div><div></div><li>文字</li><div></div><div></div><li>文字</li><div></div><div></div></ol><div></div><div></div>type的值是编号字符可选的有1...,a...,A...,i... ,I...<div></div><div></div>start为起始值例：如果start为3是那么将从3开始，而且必须是数字。<div></div><div></div>3定义列表<div></div><div></div><dl>定义列表标记<div></div><div></div><dt>标示定义条目<div></div><div></div><dd>标示定义内容<div></div><div></div>语法格式：<div></div><div></div><dl><div></div><div></div><dt>文字</dt><div></div><div></div><dd>文字内容</dd><div></div><div></div></dl><div></div><div></div>连接和图像<div></div><div></div>语法格式：<div></div><div></div><a href="url" name="?" target="?" title="?">....</a><div></div><div></div>属性：href 连接目标 值可以是url地址也可以是连接锚点<div></div><div></div><a href="url">...</a>或者<div></div><div></div><a href="锚点">...</a><div></div><div></div>name 连接名称<div></div><div></div>语法格式：<a name="锚点名称">...</a><div></div><div></div>例：<a name="abcdcf">...</a><div></div><div></div>连接到该锚点的连接则应是：<div></div><div></div><a name="#abcdef">....</a><div></div><div></div>target目标窗口语法格式：<div></div><div></div><a href="url"target="_blank|_self|_farent|_top|windowname">....</a><div></div><div></div>-blank打开新窗口<div></div><div></div>_self当前窗口打开<div></div><div></div>一下两个仅在框架叶面中应用<div></div><div></div>_parent当前窗口的父级窗口（上一级）打开<div></div><div></div>_top在最高一级的窗口打开<div></div><div></div>windowname已命名的窗口或框架中打开连接<div></div><div></div>title连接提示<div></div><div></div><a href="http://www.jcwcn.com" title="打开中国教程网的首页">中国教程网</a><div></div><div></div>图像<img> 语法格式：<div></div><div></div><img src="url" alt="?" width="?" height="?" border="?" align="?"><div></div><div></div>border属性定义图片边框的宽度，默认值为0<div></div><div></div>align属性设置图片旁边文字的位置<div></div><div></div>语法格式：<img src="" align""><div></div><div></div>可选值有：<div></div><div></div>top图片和文字顶部对齐<div></div><div></div>middle图片和文字居中对齐<div></div><div></div>bottom图片和文字底边对齐（默认）<div></div><div></div>left图片居左对齐，文字沿图片绕排<div></div><div></div>right图片居右对齐，文字沿图片绕排<div></div><div></div>absmiddle图片对齐到目前文字行绝对中央<div></div><div></div>absbottom图片对齐到目前文字行绝对底部<div></div><div></div>文字的排版<div></div><div></div>不换行空白标记<div></div><div></div>font元素<div></div><div></div>语法格式：<div></div><div></div><font face="字体名称" size="字体大小" color="字体颜色"><div></div><div></div>字体大小可选值为1——7，默认为3<div></div><div></div>例：〈font face="黑体" size="4" color="#ff00ff">....</font><div></div><div></div>水平线<hr><div></div><div></div>语法格式：<hr width="宽度" align="对齐方式默认居中center" size="水平线厚度默认为2" color="颜色" noshade><div></div><div></div>noshade无阴影，既实线<div></div><div></div>层〈div><span>两种元素<div></div><div></div><div>是块级元素，和段落元素<div></div><div></div>相似，不同的是两个<div>元素之间不会产生两个<div></div><div></div>元素之间的空行，<div></div><div></div><span>是行内元素，可以定义段落中部分文字的属性<div></div><div></div>语法格式：<div></div><div></div><div align="" style="">...</div><div></div><div></div>align设置层中元素的水平对齐方式<div></div><div></div>stule设置元素应用css规范的属性<div></div><div></div><div>兼容性比<span>要好一点，最好使用<div><div></div><div></div>表格语法格式：<div></div><div></div><table width="" bgcolor="" background="" border="" cellspacing="" cellpadding=""><div></div><div></div><tr>...<td>....</td>....</tr><div></div><div></div></table><div></div><div></div>border边框宽度默认值为0，既没有边框<div></div><div></div>cellspacing表格中单元格的边距大小，默认值为两个像素<div></div><div></div>cellpadding表格中单元格之间的间距大小，默认值为两个像素<div></div><div></div>tr元素<div></div><div></div>语法格式：<div></div><div></div><tr align="" bgcolor="">....</tr><div></div><div></div>align属性对齐方式可选值如下：left,center,tight,默认为left<div></div><div></div>bgcolor指定该行的背景颜色<div></div><div></div>td元素<div></div><div></div>语法格式：<div></div><div></div><td width="宽度" height="高度" align="水平对齐方式" valign="垂直对齐方式" bgcolor="" background="" rowspan="单元格的行跨度" colapan="单元格的列跨度">.....</td><div></div><div></div>align属性的可选值有：left,center,right<div></div><div></div>valign属性的可选值有：top,middle,bottom<div></div><div></div>rowspan和colapan跨行和跨列的数量，默认为1<div></div><div></div>input元素 语法格式：<div></div><div></div><input type=""><div></div><div></div>type属性的可选值有：<div></div><div></div>text 单行文本框<div></div><div></div>属性：name 文本框名称<div></div><div></div>value 文本框的初始值<div></div><div></div>size 文本框的长度<div></div><div></div>maxlength 可输入字符串最大的长度<div></div><div></div>radio 单选框<div></div><div></div>属性：name 单选框名称<div></div><div></div>value 内部值<div></div><div></div>checked 默认选定<div></div><div></div>checkbox 复选框<div></div><div></div>属性：name 复选框名称<div></div><div></div>value 内部值<div></div><div></div>checked 默认选定<div></div><div></div>reset 重置按钮<div></div><div></div>submit 确定按钮<div></div><div></div>属性：name 按钮名称<div></div><div></div>value 显示在按钮上的文字<div></div><div></div>password 密码框<div></div><div></div>属性与文本框的属性完全相同<div></div><div></div>file 文件域<div></div><div></div>属性：name文件域名称<div></div><div></div>size 文件域的长度<div></div><div></div>maxlength 文件域可接受的字符数量的上限<div></div><div></div>hidden 隐藏域<div></div><div></div>属性：name 隐藏域名称<div></div><div></div>value 内定值<div></div><div></div>image 图片域<div></div><div></div>属性：name 所要代表的按钮，可以是submit,reset,或其他.<div></div><div></div>src 按钮图片的url 地址<div></div><div></div>列表框<select><div></div><div></div>语法格式：<div></div><div></div><select><div></div><div></div>.....<div></div><div></div><option>....</option><div></div><div></div>.....<div></div><div></div></select><div></div><div></div>select元素<div></div><div></div>语法格式：<select name="" size=""multiple></select><div></div><div></div>name 指定列表框的名字<div></div><div></div>size 指定列表框显示列表项的条数，如果指定了该参数，select元素是个列表，否则是一个下拉列表框<div></div><div></div>multiple 指定了这个参数，则表示该列表框可选择多项，否则只可选择一项<div></div><div></div>option属性<div></div><div></div>语法格式：<option value="" selected></option><div></div><div></div>value 该列表项的值<div></div><div></div>selected 如果设定了这个参数，默认为选定这一项<div></div><div></div>多行文本框<textarea><div></div><div></div><textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea><div></div><div></div>属性：<div></div><div></div>name文本框的名称<div></div><div></div>cols文本框的宽度<div></div><div></div>rows文本框的高度<div></div><div></div>wrap文本框的折行方式可选值有：<div></div><div></div>off不保存换行信息<div></div><div></div>physical强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出，<div></div><div></div>virtual送出连续成串的字除非使用者按回车。<div></div><div></div>css 层叠样式表<div></div><div></div>引入层叠样式表的方法包括：<div></div><div></div>外联式样式表<div></div><div></div>例：<head><div></div><div></div><link rel="stylesheet" href="/css/default.css"><div></div><div></div></head><div></div><div></div><body><div></div><div></div>....<div></div><div></div></body><div></div><div></div></html><div></div><div></div>属性：rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址<div></div><div></div>内嵌式样式表：<div></div><div></div>例：<html><div></div><div></div><head><div></div><div></div><style type="text/css"><div></div><div></div><!--<div></div><div></div>td{font:9pt;color:red}<div></div><div></div>.font105{font:10.5pt;color:blue}<div></div><div></div>--><div></div><div></div></head><div></div><div></div><body>....</body><div></div><div></div></html><div></div><div></div>元素内定<div></div><div></div>格式：<p style="font-size:10.5pt"><div></div><div></div>导入式样式表<div></div><div></div>〈html><div></div><div></div><head><div></div><div></div><style type="text/css"><div></div><div></div><!--<div></div><div></div>@import url(css/home.css);<div></div><div></div>--><div></div><div></div><body><div></div><div></div>....<div></div><div></div></body><div></div><div></div></html><div></div><div></div>css的优先级<div></div><div></div>越接近目标的样式定义优先级越高，高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义<div></div><div></div>如果4种样式表对同一元素定义了不同的样式，那么他们的优先级顺序从高到低是，元素内定，内嵌样式表，导入样式表，外联样式表。<div></div><div></div>css结构<div></div><div></div>例：td{font-size:10.5pt;color:#666666}<div></div><div></div>css样式包含两个基础部分，<div></div><div></div>选择符<td>和声明{font-size:10.5pt;color:#666666}<div></div><div></div>声明也有两部分组成：<div></div><div></div>属性font-size,color和值10.5pt,#666666<div></div><div></div>选择符分为6种<div></div><div></div>1元素选择符<div></div><div></div>当页面上多个元素的样式相同时，可以将多个元素放在一起定义，中间以逗号分开 例：td,p,li,input,select{font-size:12px;}<div></div><div></div>2class(类)选择符<div></div><div></div>例：〈head><div></div><div></div><title>.....</title><div></div><div></div><style type="text/css"><div></div><div></div><!--<div></div><div></div>.red{font-size:10.5pt;color:#ff0000}<div></div><div></div>--><div></div><div></div></head><div></div><div></div><body bgcolor="#ffffff"><div></div><div></div><p class="red">士大夫井冈山地方官<div></div><div></div>九连环离开计划<div></div><div></div></body><div></div><div></div>还有一种方法就是限定可以应用它的页面元素<div></div><div></div>例：〈head><div></div><div></div><title>.....</title><div></div><div></div><style type="text/css"><div></div><div></div><!--<div></div><div></div>h1.red{color:#ff0000}<div></div><div></div>--><div></div><div></div></head><div></div><div></div><body bgcolor="#ffffff"><div></div><div></div><p class="red">士大夫井冈山地方官<div></div><div></div><h1 class="red">九连环离开计划</h1><div></div><div></div></body><div></div><div></div>3 id选择符<div></div><div></div>与class选择附类似，只是把'.'换成'#'<div></div><div></div>例：<body><div></div><div></div><head><div></div><div></div><style type="text/css"><div></div><div></div><!--<div></div><div></div>#select{font-size:18px;color:#0000ff}<div></div><div></div>--><div></div><div></div></head><div></div><div></div><body><div></div><div></div><table width="250" border="1" height="50"><div></div><div></div><tr><div></div><div></div><td align="center" id="select">id选择符</td><div></div><div></div></tr><div></div><div></div></table><div></div><div></div></body><div></div><div></div></html><div></div><div></div>我们看到在调用ID选择附时与CLASS选择附类似，只是将class=""换成了id=""，方便页面脚本语言的调用<div></div><div></div>关联选择符<div></div><div></div><body><div></div><div></div><head><div></div><div></div><style type="text/css"><div></div><div></div><!--<div></div><div></div>td p{font-size:18px;color:#0000ff}<div></div><div></div>--><div></div><div></div></head><div></div><div></div><body><div></div><div></div><table width="250" border="1" height="50"><div></div><div></div><tr><div></div><div></div><td align="center"><div></div><div></div>关联选择符<div></div><div></div></td><div></div><div></div></tr><div></div><div></div></table><div></div><div></div>关联选择符<div></div><div></div></body><div></div><div></div></html><div></div><div></div>我们设定了在元素中<td>的元素<div></div><div></div>所包含文字的样式，只有在两个条件都满足是，样式在会起作用，<div></div><div></div>伪类选择符<div></div><div></div>是只能用在css选择符里，而不能用在html代码中的选择符<div></div><div></div>例：<div></div><div></div>〈html><div></div><div></div><head><div></div><div></div><style type="text/css"><div></div><div></div><!--<div></div><div></div>a:link{color:#000000}<div></div><div></div>a:visited{color:#cccccc}<div></div><div></div>a:hover{color:#ff0000}<div></div><div></div>a:active{color:#ooooff}<div></div><div></div>--><div></div><div></div></head><div></div><div></div><body><div></div><div></div><a href="#"><div></div><div></div>关联选择符</a><div></div><div></div><a href="#"><div></div><div></div>关联选择符</a><div></div><div></div><a href="#"><div></div><div></div>关联选择符</a><div></div><div></div><a href="#"><div></div><div></div>关联选择符</a><div></div><div></div>〈/body><div></div><div></div></html><div></div><div></div>正确的顺序是a:link\a:visited\a:hover否则会引起页面上连接颜色混乱<div></div><div></div>伪元素选择符<div></div><div></div>与伪类选择符定义类似，目前被大多数浏览器支持的有两个：首行伪元素（first-line）和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的<div></div><div></div>例：首行<div></div><div></div><html><div></div><div></div><head><div></div><div></div><!--<div></div><div></div>p:first-line{color:red;font-size:20pt}<div></div><div></div>--><div></div><div></div></hesd><div></div><div></div><body><div></div><div></div>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...<div></div><div></div></body><div></div><div></div></html><div></div><div></div>长度随浏览器窗口大小而改变<div></div><div></div>首字<div></div><div></div><html><div></div><div></div><head><div></div><div></div><!--<div></div><div></div>p:first-letter{color:red;font-size:50pt;float:left;}<div></div><div></div>--><div></div><div></div></hesd><div></div><div></div><body><div></div><div></div>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...<div></div><div></div></body><div></div><div></div></html><div></div><div></div>以上两种都只能应用于块状元素上<div></div><div></div>css规则<div></div><div></div>1.继承<div></div><div></div>例：<html><div></div><div></div><head><div></div><div></div><style type="text/css"><div></div><div></div><!--<div></div><div></div>td{font-size:12pt}<div></div><div></div>p{color:red}<div></div><div></div>--><div></div><div></div></hesd><div></div><div></div><body><div></div><div></div><table width="300" border="1" height="150"><div></div><div></div><tr><div></div><div></div><td align="center"><div></div><div></div>css<div></div><div></div>规则<div></div><div></div></td><div></div><div></div></table><div></div><div></div></body><div></div><div></div></html><div></div><div></div>为最高级<td>次一级两种css用在一个属性元素上，相同的覆盖，不同的继承，<div></div><div></div>2.组合<div></div><div></div>例:td{font-size:12pt}<div></div><div></div>p1{font-size:12pt}<div></div><div></div>组合后<div></div><div></div>td,.p1{font-size:12pt}<div></div><div></div>3.层叠<div></div><div></div>在样式里定义过后，在表格属性中又定义一次<div></div><div></div><html><div></div><div></div><head><div></div><div></div><style type="text/css"><div></div><div></div><!--<div></div><div></div>red{color:#ff0000 limportant}<div></div><div></div>--><div></div><div></div></hesd><div></div><div></div><body><div></div><div></div><table width="300" border="1" height="150"><div></div><div></div><tr><div></div><div></div><td align="center" style="color:#0000ff" class="red">决撒地方官</td><div></div><div></div></tr><div></div><div></div></table><div></div><div></div></body><div></div><div></div></html><div></div><div></div>css单位<div></div><div></div>分四大类：<div></div><div></div>1 长度单位<div></div><div></div>数值可以是整数，小数，正数，负数，0，后加单位（负值不要轻易使用）<div></div><div></div>换算关系：<div></div><div></div>1in(英寸)=6pc(派)<div></div><div></div>1in(英寸)=72pt(磅)<div></div><div></div>1in(英寸)=2.54(厘米)<div></div><div></div>1cm(厘米)=10mm(毫米)<div></div><div></div>1cm(厘米)=0.3937(英寸)<div></div><div></div>1pt(磅)=1/72in(英寸)=0.2478mm(毫米)<div></div><div></div>1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸<div></div><div></div>2 百分比单位<div></div><div></div>3 颜色单位<div></div><div></div>4 url单位<div></div><div></div>div属性<div></div><div></div>color : #999999 文字颜色<div></div><div></div>font-family : 宋体 文字字型<div></div><div></div>font-size : 10pt 文字大小<div></div><div></div>font-style:itelic 文字斜体育<div></div><div></div>font-variant:small-caps 小字体<div></div><div></div>letter-spacing : 1pt 文字间距<div></div><div></div>line-height : 200% 设定行高<div></div><div></div>font-weight:bold 文字粗体<div></div><div></div>vertical-align:sub 下标字<div></div><div></div>vertical-align:super 上标字<div></div><div></div>text-decoration:line-through 加?h除线<div></div><div></div>text-decoration:overline 加顶线<div></div><div></div>text-decoration:underline 加底线<div></div><div></div>text-decoration:none ?h除连接底线<div></div><div></div>text-transform : capitalize 首字大写<div></div><div></div>text-transform : uppercase 英文大写<div></div><div></div>text-transform : lowercase 英文写<div></div><div></div>text-align:right 文字*右对齐<div></div><div></div>text-align:left 文字*左对齐<div></div><div></div>text-align:center 文字置中对齐<div></div><div></div>这些是一些简单的文字效果，可以应用到css的页面中。 <div></div><div></div>背景<div></div><div></div>background-color:black 背景颜色<div></div><div></div>background-image : url(image/bg.gif) 背景图片<div></div><div></div>background-attachment : fixed 固定背景<div></div><div></div>background-repeat : repeat 重复排列-网页预设<div></div><div></div>background-repeat : no-repeat 不重复排列<div></div><div></div>background-repeat : repeat-x 在x轴重复排列<div></div><div></div>background-repeat : repeat-y 在y轴重复排列<div></div><div></div>background-position : 90% 90% 背景图片x与y轴的位置 <div></div><div></div>链接<div></div><div></div>A 所有超连接<div></div><div></div>A:link 超连接文字格式<div></div><div></div>A:visited 浏览过的连接文字格式<div></div><div></div>A:active 按下连接的格式<div></div><div></div>A:hover 鼠标移至连接<div></div><div></div>边框<div></div><div></div>border-top : 1px solid black 上框<div></div><div></div>border-bottom : 1px solid #6699cc 下框<div></div><div></div>border-left : 1px solid #6699cc 左框<div></div><div></div>border-right : 1px solid #6699cc 右框<div></div><div></div>border: 1px solid #6699cc 四边框<div></div><div></div>虚线<div></div><div></div><TEXTAREA STYLE="border:1px dashed pink"><div></div><div></div>实线<div></div><div></div><TEXTAREA STYLE="border:1px solid pink"><div></div></p> <div></div> <p><div></div></p> <div></div> <p><div></div></p> <div></div> <p><div></div></p> <div></div> <p><div></div></p> <div></div> <p><div></div></p> <div></div> <p><div></div></p> <div></div> <p>持续更新~~~</p> <div></div> <p><div></div></p> <div></div> </div> <div></div> <p>转载于:https://juejin.im/post/5a3b29af6fb9a04523420d5c</p><div></div> </body><div></div></html></div> </div> <div class="more-title"> 你可能感兴趣的文章 </div> </div> </div> <div class="footer"> <div> <div class="footer-main"> <div class="blog-name">喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！</div> <div class="copyright"> 当前时间: <span>2025-01-27 04:48:05</span> 当前IP: <span>3.145.37.211</span> 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com <a style="color: #FFFFFF;" href="https://beian.miit.gov.cn" target="_blank">京ICP备2021015314号-2</a> </div> </div> <a href="http://gpt.css8.cn" target="_blank"> <div class="gpt-main-left"> 强烈建议你试试无所不能的CHAT-GPT，快点击我 </div> </a> <a href="http://gpt.css8.cn" target="_blank"> <div class="gpt-main-right"> 强烈建议你试试无所不能的CHAT-GPT，快点击我 </div> </a> </div> </div> <div> <script src="/baihongyu/js/jquery-1.8.2.js"></script> <script src="/baihongyu/js/scrollReveal.js"></script> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "JeQUgUJ4FtcgrGgk",ck: "JeQUgUJ4FtcgrGgk"})</script> <script> window.scrollReveal = new scrollReveal({ enter: 'left', move: '80px', over: '0.1s', reset: true, init: false }); scrollReveal.init(); </script> </div> </body> </html>