纠正前端开发中容易出错知识点

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月16日19:00:38 评论 487

扎实的基础有时候需要纵览群书,但针对编码领域,单靠纸上谈兵远远不够。思考,实践,再思考,再实践。累积到一定代码量,思路自然豁然开朗。重复的时间沉淀,将缔造更加强健高效的代码。

部分整理自网络,个人水平有限,望见谅。

html

1)将input设为只读,使用readonly而非diabled

disbled和readonly类似,会将输入框设置为不可输入状态,但是在html中,如果一个元素被设置为disabled,它的值就不会被发送到server端。因此,将元素设为只读时,只能使用readonly。

disabled和readonly在显示效果上也是有区别的。前者不能获得焦点,后者可以获得焦点。默认的显示样式也是有区别的。

一个只读数据不能输入的话它是由什么规则生成的?如果能由其他数据根据某个规则生成,那么该数据就不是必要的,也不需要提交到服务端。因为其值通过其他数据可以直接生成出来。如果其值是由其他数据生成,并且和其他数据有严格的逻辑关联,该数据提交到服务端直接保存不经验证的话是不安全的。因为请求是可以伪造,直接保存可能会保存经过篡改的混乱数据。

当然,如果验证的话也是和其他关联数据做比较,其实也没必要过多在意disabled和readonly的区别。

 

2)滥用元素

例如,滥用ul和ol,在应该使用ol的时候使用ul;对于段落,不会用p而使用br和div;不会用h1/h2/h3等表示段落,而使用strong和div;不会用label、fieldset和legend;不会用或乱用b、i、s、u之类在html5中重新定义过的标签。

滥用ul和ol:

纠正前端开发中容易出错知识点

 

3)应该避免每个元素上不止一个class

class是一个选择器,可以理解为一个标识,用来标识特定的标签。每个页面上都一定会有重复的样式,没必要重写那部分样式,因此经常会使用class。但是并不代表每个元素都要有多个class。

 

4)定义 img元素 的 alt 属性

如果无法显示图像,浏览器将显示替代文本,同时也会方便机器朗读,提高可访问性。

5) label元素的 for 属性;

label的for属性。它为label指定了一个目标,一般是一个form表单内元素的ID,这样就可以把这个label与该ID元素关联起来,当点击label时,就可以让该ID也获得焦点!

label 标签错误的加到了性别上,而男、女选项根本没有加 label 标签,就别提正确的使用 for 属性了。这是很可悲的,甚至很多人根本认为这就不是一个问题。Web 的初衷是什么?让所有人无障碍的使用网页。这不是技术问题,不是时间问题,是认知的问题。

纠正前端开发中容易出错知识点6)注意checkbox默认打勾属性

就说一个:html checkbox
checked属性(也就是默认是否打勾的属性)的写法:<input type="checkbox" checked="checked">

表明默认打勾的,
不过:

<input type="checkbox" checked="true" />
<input type="checkbox" checked="yes" />
<input type="checkbox" checked="no" />
<input type="checkbox" checked="" />

甚至:

<input type="checkbox" checked>

都全是表示默认打勾的。

因此,当checked出现在checkbox,都表示默认打勾。

7)从来doctype都是由编辑器自己生产的,这没关系,可是你也得分清楚你需要的是那种XHTML。

Doctype声明位于文档中的最前面的位置,处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式(quirks mode)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如Microsoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。

<!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。

 

javascript

1)请为parseInt设置第二个参数。

parseInt() 函数可解析一个字符串,并返回一个整数。第一个参数表示要被解析的字符串;第二个参数表示要解析的数字的基数,如果省略该参数或其值为0,则数字将以10为基础解析,如果不设置,将会根据第一个参数的首字母或首两个字母决定基础:

省略第二个参数,如果第一个参数以 “0x” 或 “0X” 开头,将以 16 为基数;

省略第二个参数,如果第一个参数以0为开头,将以8为基数。

因此,如果不设置parseInt()的第二个参数,当第一个参数为“08”或“09”时,将会出现意想不到的结果。

 

2)过滤innerHTML将的值。

element.innerHTML = text,当text的中包含大小于好和&符号,将会打乱element里面的布局(XSS攻击)

更好的取代方法是,element.textContent,将text的内容完全以文本显示,而不解释成html代码。

 

3)拼接字符串作为为脚本解析时,考虑数字字面量被解析为字符串。

setTimeout("a="+a+";alert(a);",1000),拿变量toString当Literal,结果数值和字符串相加,最终结果显示为NaN,影响下一步的代码运行。var c = 100 + $("input.2b")[0].value; 没用parseInt或者Number,结果变成字符串相加。

 

4)alert("<?=a>"),跟后端语言配合时,要考虑字符串里的\和"等特殊字符。

 

5)new Date("2014-11-11 00:00:00"),使用不符合标准的日期字符串,结果将难以想象。

 

6)尽量少使用for in来遍历数组。

正如我们所知道:for in一般用于对象遍历,而数组遍历通常使用for,然而的数组可以使用for in循环遍历,因为array是object的子类。但是遍历对象,除了数组本身的属性被遍历出来外,但是一旦在遍历之前,数组已经被修改prototype。for in也将会把添加到原型链prototype上的属性。

 

7)加载时执行location.href = url请使用replace。

在onload里location.href = url; 做无条件跳转逻辑的时候不用replace,会导致浏览器后退退不回去。

 

8)严谨正则表达式

var param = location.href.match(/a=([^\&\?]+)/)[1]; 滥用正则,使用不严谨的正则匹配url参数,结果会把 baba xaxa sba匹配进去。

 

9)避免使用.attr()修改input的属性值。

$("input.2b").attr("value",2333333) 拿attribute当property用。但是一旦有脚本手动输入将会使得value中的值为手动设置后的值,而不是input本身的值。

 

10)进行浮点数计算之后,调用toFiexd。

a=0.1, b=0.2,element.innerText = a+b;,浮点数显示前不调toFixed,将会出现意想不到的结果。

 

11)方法或者代码块执行之后,应加分号。

(function(){    
    //do something
})()
(function(){ 
    //do something
})()

两个立即调用函数之间没有写分号,两个立即调用函数会被粘连起来,出现异常。

 

css

1)float:left/right 或者 position: absolute 后不需要写上 display:block。三者关系:
纠正前端开发中容易出错知识点

2)不分场景的使用 overflow:hidden 来闭合浮动

华丽丽的demo

3)让 Chrome 支持小于12px 的文字,在 html 设置 -webkit-text-size-adjust:none。

-webkit-text-size-adjust放在body上会导致页面缩放失效

 

用-webkit-text-size-adjust不要定义成可继承的或全局的

 

4)px 并不是一个绝对单位(px 是相对单位),line-height最好不要使用 px。
line-height设置为1.5时,会将line-height:1.5继承到子元素;

而line-height设置为150%,子元素只会继承由父元素font-size和line-height相乘计算的值。

比如parent元素设置属性:font-size:14px;line-height:1.5,child设置font-size:26px;那么parent:line-height = 14px * 1.5 = 21px,child:line-height = 26px * 1.5 = 39px。parent元素设置属性:font-size:14px;line-height:150%,child设置font-size:26px;那么parent:line-height = 14px * 150% = 21px,child:line-height = 父元素的line-height = 21px。

 

5)搞清 PNG 的分类, PNG24 支持透明, PNG8 也支持 α 透明。

便携式网络图形(Portable Network Graphics) 是一种无损位图图像文件格式。可以逐次逼近显示: 先描绘出图片轮廓,然后在逐步显示图像的细节。

透明性:①布尔透明(索引透明) 只能为不透明或全透明。  ②Alpha 透明 支持全透明和半透明。

纠正前端开发中容易出错知识点

PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同 的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位 PNG 在24位基础上增加了8位透明通道,因此可展现256级透明程度。

纠正前端开发中容易出错知识点

非IE6的浏览器都能正常显示包含透明信息的PNG图片,而IE6在滤镜 的帮助下能够正常展示PNG8+索引透明以及32位的透明PNG图像, 但是对 PNG8+alpha透明的图像支持不够好。

使用滤镜解决IE6透明问题:IE6 PNG 半透明: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img. png”, sizingMethod=”scale”);

 

6)混淆图像格式

纠正前端开发中容易出错知识点

 

  • 图像颜色数量较少,且基本为纯色或者平滑渐 变色时使用PNG更优(矢量)
  • PNG 就是为了取代GIF而生的,除了动画 图片等特殊场景使用,一般推荐使用PNG
  • 对于图像颜色丰富或者层次较深的图片采用 JPG更优,例如:人物,风景等写实类拍摄照片
  •  对于网页中的 背景, 按钮等尽量采用PNG存储, 以保证更好的视觉品质;广告,商品等则可以使 用JPG来存储(此时文件更小,更快的加载)

 

7) 给block-level元素应用vertical-align,结果发现根本不生效。

默认的block-level元素有<address><blockquote><div><dl><fieldset><form><h1><h3><ol><p><table><ul>

而这些元素,因为包含在block-level,因此可以认作block-level<dd><dt><li><th><tfoot><tr><td>

所有浏览器都支持vertical-align 属性设置元素的垂直对齐方式。但是对于一个没有设定高度,高度由元素内部决定的元素来说,设置verical-align无效。

实现非固定高度元素的垂直居中,可以参考http://www.cnblogs.com/0603ljx/p/4440449.html第三条

8)避免给行内非替代元素设置高度。

CSS标准决定,无法给行内非替代元素设定高度宽度,和margin,padding。

这也同时说明引入reset.css是否有必要,设置所有元素*{margin:0;padding:0},会为行内非替换元素设置一些无效的属性,加重浏览器首次加载的负担。

9)避免给input/button元素设定百分比line-height。

line-height 属性设置行间的距离(行高)。

给input/button定义line-height,试图实现垂直居中,但是会改变button本身元素高度加上button默认自带的overflow:hidden,导致button的高度无法完全支撑内部文本的显示,也就是一旦百分比设置小于100%,button的文本无法完全显示。

10) 非定位元素无法设定z-index堆叠级别。
对于position为static(默认值)的元素,是无法设置z-index。

11) 避免给自闭合标签加了成对闭合,给成对闭合标签加了自闭合。

自闭合元素:

  <br/> <hr/>

  <area/>带有可点击区域的图像映射

  <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

  <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>

  <base/>标签为页面上的所有链接默认地址或默认目标

外联js脚本文件:<script type="text/javascript" src="example.js"></script>

如果是在XHTML中可以使用<script type="text/javascript" src="example.js"/>,不能在HTML文档中使用这种语法,不符合HTML规范,尤其得不到IE的正确解析

12)注意@import规则集的顺序。

不是技术问题,而是时间问题,编写代码时要细心,避免后设置的元素属性覆盖前面设置的属性。

13) 不能完全把main, section, article, aside等当成div使用

看似相似,并不是真的相似,main, section, article, aside这些标签是为了布局而生的,自然有它们更精确的语义定位,或者说他们更将强调HTML的语义。

DIV 这个标签一直是我们见得最多、用得最多的标签。它本身无任何语义,用作布局以及样式化标签。

section与div相似,但它有更进一步的语义。section用作一段有专题性的内容,一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

article是一个特殊的section标签,它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。 div、section、article,语义是从无到有,逐渐增强的。div无任何语义,仅仅用作样式化或者脚本化的标签,对于一段主题性的内容,则就适用section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。 原则上来说,能使用article的时候,也是可以使用section的,但是实际上,假如使用article更合适,那么就不要使用section。

这么做过的童鞋共勉,没做过的童鞋赞美一下。总之实际工作中误用乱用的例子实在太多,就不一一列举,希望引起大家关注并改善类似情况。

出处:https://www.cnblogs.com/0603ljx/p/4354656.html

im, 无色
  • 本文由 发表于 2019年7月16日19:00:38
HTTP/2及HTTP/3特性 前端开发

HTTP/2及HTTP/3特性

HTTP/2及HTTP/3特性 摘要: 学习 HTTP/2 与 HTTP/3。 前言 HTTP/2 相比于 HTTP/1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: