目录 HTML 语法 HTML5 doctype 语言属性（Language attribute） 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔（boolean）型属性 减少标签的数量 JavaScript 生成的标签 CSS 语法 声明顺序 不要使用 @import 媒体查询（Media query）的位置 带前缀的属性 单行规则声明 简写形式的属性声明 Less 和 Sass 中的嵌套 Less 和 Sass 中的操作符 注释 class 命名 选择器 代码组织 黄金定律 永远遵循同一套编码规范 — 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。通过 open an issue on GitHub 为本规范添加内容或贡献力量。 不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 HTML 语法 用两个空格来代替制表符（tab） — 这是唯一能保证在所有环境下获得一致展现的方法。 嵌套元素应当缩进一次（即两个空格）。 对于属性的定义，确保全部使用双引号，绝不要使用单引号。 不要在自闭合（self-closing）元素的尾部添加斜线 — HTML5 规范中明确说明这是可选的。 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
|
1 2 3 4 5 6 7 8 9 10 |
<span class="cp"><!DOCTYPE html></span> <span class="nt"><html></span> <span class="nt"><head></span> <span class="nt"><title></span>Page title<span class="nt"></title></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/company-logo.png"</span> <span class="na">alt=</span><span class="s">"Company"</span><span class="nt">></span> <span class="nt"><h1</span> <span class="na">class=</span><span class="s">"hello-world"</span><span class="nt">></span>Hello, world!<span class="nt"></h1></span> <span class="nt"></body></span> <span class="nt"></html></span> |
HTML5 doctype 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
|
1 2 3 4 5 |
<span class="cp"><!DOCTYPE html></span> <span class="nt"><html></span> <span class="nt"><head></span> <span class="nt"></head></span> <span class="nt"></html></span> |
语言属性 根据 HTML5 规范： 强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。 更多关于 lang 属性的知识可以从 此规范 中了解。 这里列出了语言代码表。
|
1 2 3 |
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en-us"</span><span class="nt">></span> <span class="c"><!-- ... --></span> <span class="nt"></html></span> |
IE 兼容模式 IE […]
View DetailsThe codes below, which are sorted alphabetically by language (not language code) are to be used with the core lang attribute to identify the language contained inside the element that the lang attribute is applied to. Table 1. Language Codes Language Code Abkhazian AB Afar AA Afrikaans AF Albanian SQ Amharic AM Arabic AR Armenian HY Assamese AS Aymara AY Azerbaijani AZ Bashkir BA Basque EU Bengali, Bangla BN Bhutani DZ Bihari BH Bislama BI Breton BR Bulgarian BG Burmese MY Byelorussian BE Cambodian KM Catalan CA Chinese ZH Corsican CO Croatian […]
View Details阅读目录 onbeforeunload定义和用法 onunload定义和用法 在最近的项目中，需要做到一个时间，就是用户离开页面的时候，我需要缓存页面其中一部分的内容，但是我不需要用户刷新的时候也缓存，我只希望在我用户离开的时候 执行这个函数。百度之，有onbeforeunload与onunload这两个事件，但是onbeforeunload在用户刷新的时候也会执行。搞得我弄的挺久的，所以想在这里做一个小小的总结 onbeforeunload与onunload事件 onbeforeunload定义和用法 onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。 对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。 但你可以自定义一些消息提示与标准信息一起显示在对话框。 注意： 如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。 注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。 使用方法： 1、 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body onbeforeunload="return test()"> </body> <script type="text/javascript"> function test(){ return "你确定要离开吗"; } </script> </html> 或者： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> […]
View Details网页布局（layout）是 CSS 的一个重点应用。
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
第一种：使用CSS属性 代码如下: var display =$('#id').css('display'); if(display == 'none'){ alert("被你发现了，我是隐藏的啦！"); } 第二种：使用jquery内置选择器 假设我们页面有这么个标签, 代码如下: <div id="test"> <p>仅仅是测试所用</p> </div> 那么,我们可以用以下语句来判断id为"test"的标签是否隐藏: 代码如下: if($("#test").is(":hidden")){…} //前提是已经将jQuery的库导进来了 这样,我们就能够很简单地判断一个元素是否隐藏,并根据其状态来设置动画,比如: 复制代码代码如下: if($("#test").is(":hidden")){ $("#test").show(); //如果元素为隐藏,则将它显现 }else{ $("#test").hide(); //如果元素为显现,则将其隐藏 } jQuery判断元素是否显示 是否隐藏 代码如下: var node=$('#id'); 第一种写法 代码如下: if(node.is(':hidden')){ //如果node是隐藏的则显示node元素，否则隐藏 node.show(); }else{ node.hide(); } 第二种写法 代码如下: if(!node.is(':visible')){ //如果node是隐藏的则显示node元素，否则隐藏 node.show(); }else{ node.hide(); } if(node.is(':visible')){ //如果node是显示的则隐藏node元素，否则显示 node.hide(); }else{ node.show(); } jQuery判断对象是否显示或隐藏 Js代码 复制代码代码如下: // jQuery("#tanchuBg").css("display") // jQuery("#tanchuBg").is(":visible") // jQuery("#tanchuBg").is(":hidden") Js代码 代码如下: $(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false] Js代码 代码如下: $('element:hidden') $('element:visible') Js代码 代码如下: $(".item").each(function() { if ($(this).css("visibility") == "hidden") { // handle non visible state […]
View DetailsDescription: Matches all elements that are checked or selected. version added: 1.0jQuery( ":checked" ) The :checked selector works for checkboxes, radio buttons, and options of select elements. To retrieve only the selected options of select elements, use the :selected selector. Examples: Determine how many input elements are checked. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>checked demo</title> <style> div […]
View Details1、获取单个checkbox选中项(三种写法) $("input:checkbox:checked").val() 或者 $("input:[type=’checkbox']:checked").val(); 或者 $("input:[name=’ck']:checked").val(); 2、 获取多个checkbox选中项 $('input:checkbox').each(function() { if ($(this).attr('checked') ==true) { alert($(this).val()); } }); 3、设置第一个checkbox 为选中值 $('input:checkbox:first').attr("checked",’checked'); 或者 $('input:checkbox').eq(0).attr("checked",’true'); 4、设置最后一个checkbox为选中值 $('input:radio:last').attr('checked', 'checked'); 或者 $('input:radio:last').attr('checked', 'true'); 5、根据索引值设置任意一个checkbox为选中值 $('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2…. 或者 $('input:radio').slice(1,2).attr('checked', 'true'); 6、选中多个checkbox同时选中第1个和第2个的checkbox $('input:radio').slice(0,2).attr('checked',’true'); 7、根据Value值设置checkbox为选中值 $("input:checkbox[value=’1′]").attr('checked',’true'); 8、删除Value=1的checkbox $("input:checkbox[value=’1′]").remove(); 9、删除第几个checkbox $("input:checkbox").eq(索引值).remove();索引值=0,1,2…. 如删除第3个checkbox: $("input:checkbox").eq(2).remove(); 10、遍历checkbox $('input:checkbox').each(function (index, domEle) { //写入代码 }); 11、全部选中 $('input:checkbox').each(function() { $(this).attr('checked', true); }); 12、全部取消选择 $('input:checkbox').each(function () { $(this).attr('checked',false); }); from:http://www.jb51.net/article/46469.htm
View Details|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
方法一： if ($("#checkbox-id").get(0).checked) { // do something } 方法二： if($('#checkbox-id').is(':checked')) { // do something } 方法三： if ($('#checkbox-id').attr('checked')) { // do something } 在jQuery1.6版本之后，取复选框有没有被选中，要用prop if($('#checkbox-id').prop('checked')) { //do something } function checkInfo(){ $("input[name='org3.otherValues']").each( function(){ if($(this).get(0).checked){ return true; } }); var org3_ids=$("#org3_ids").val(); if(org3_ids!=''){ return true; } alertMsg.warn("请选择接收人！"); return false; } |
from:https://www.cnblogs.com/youmingkuang/p/5864190.html
View Details