前端HTML/CSS易混淆知识点总结

CSS易忽略点：

• 标准盒子模型：盒子的总宽度=左右margin+左右border+左右padding+width
• h1标签默认情况下，形成“加粗，大号文字”的效果
• html5新增的标签：article caption video header footer section nav
• H5中场用到的新特行性有：canvas:用于定义图形（图表等），只是图形容器，必须使用脚本来绘制图形         audio:用于音频播放   video：用于视频播放
• article ：规定独立的自包含内容  header ：定于文档的页眉       section：定义文档的节    footer：定义文档的页脚，通常的又文档的作者，版权信息来呢西方式等
  nav：定义导航链接   表单控件有如下：calender   date  time  email url search
• 网页html文档支持的图片格式有jpg  gif   png  bmp,前三种的图片体积小，所占内存小，但bmp格式的比较少见，因为这种格式虽然很清晰，色彩丰富，但是所占的内存很大，但html文档也是支持的。
• 栅格系统会有自动的padding样式，box-sizing默认为border-box，其字体默认为14px
• css的font-style用于设置字体的风格：分别有标准字体，斜体，倾斜字体和从父级继承字体
• CSS3新增属性用法整理：
  1、box-shadow（阴影效果）   2、border-color（为边框设置多种颜色）      3、border-image（图片边框）    4、text-shadow（文本阴影）  5、text-overflow（文本截断）  6、word-wrap（自动换行）      7、border-radius（圆角边框）     8、opacity（透明度）   9、box-sizing（控制盒模型的组成模式）10、resize（元素缩放）    11、outline（外边框）     12、background-size（指定背景图片尺寸） 13、background-origin（指定背景图片从哪里开始显示）14、background-clip（指定背景图片从什么位置开始裁剪）    15、background（为一个元素指定多个背景）    16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）17、hsla（在hsl的基础上增加透明度设置）   18、rgba（基于rgb设置颜色，a设置透明度）css中可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承
• css中的单位有：% In cm mm em ex pt pc px 颜色有：颜色名  rgb(x,x,x)RGB值  rgb(x%,x%,x%)RGB百分百  #rrggbb十六进制数
  visibility：hidden可能会发生重绘（repaint） display:none可能会导致渲染（reflow）
• 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如：浏览器会根据<img>标签的src属性的 值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入 框，还是单选按钮等。 (x)html中 的<img>、<input>、<textarea>、<select>、<object> 都是置换元素。这些元素往往没有实际的内容，即是一个空元素。置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
• 不可替换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。例如： <label>label中的内容</label> 标签<label>是一个非置换元素，文字label中的内容”将全被显示。
• content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。 border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型
• 让块元素呈递为内联对象的属性是：display:inline
  display:block就是将元素显示为块级元素，一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。
  display:inline就是将元素显示为内联元素，内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”
  display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
• bootstrap中通过向下拉菜单添加pull-right类来向右对齐下拉菜单，也可以添加dropdown-menu-right类可以让菜单右对齐；bootstrap默认情况下，下拉菜单自动沿着父亲的上沿河左侧被定为为100%宽度；
• 不属于bootstrap3的标签有：row-fluid
• 给文字加背景：主要蓝（bg-primary），成功绿（bg-success）  信息蓝(bg-info)   警告黄(bg-warning)  危险红(bg-danger)
• 当margin-top padding-top的值是百分比时，分别是相对最近父级块级元素的width,相对最近父级块级元素的width
• 行内块元素：拥有inline-block属性（拥有内在尺寸，可设置高宽，不会自动换行）
               典型的标签有：input textarea object img select

HTML易忽略点：

•   行内元素有：a b span img input select strong 
•   块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
•   常见的空元素：<br> <hr> <img> <input> <link> <meta>
•   鲜为人知的是<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
• html中，可以直接在网页上通过链接直接打开邮件客户端发送邮件：<a href="mailto:[email protected]">发送邮件</a>  mailto后为收件人地址
• 在html中避免使用<font>标签，建议使用css样式代替<font>标签来定义文本的字体，字体颜色，字体尺寸
• 对form表单中的input元素的readonly与disabled属性描述：
  disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合使用这两个属性，其实他们之间是有一定区别的：
  如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交
• 如果一个html文档中包含阿拉伯文，则应该使用utf8编码
• ul无序列表 dl定义列表  li项目列表  ol有序列表
• html5不再支持的标签有font,css3动画需要运用keyframes规则
• label标签只有两个属性：for规定label绑定到哪个表单元素上   form规定label字段所属的一个或多个表单
• 屏幕尺寸：
  col-xs:<768   col-sm>=768      col-md>=992             col-lg>=1200

部分代码原理：

• 在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此应该设置cellpadding="0"和cellspacing="0"这两个来消除这种现象
• window.onload = function(){ //首先获得下拉框的节点对象； var obj = document.getElementById(&quot;obj&quot;); //1.如何获得当前选中的值？： var value = obj.value; //2.如何获得该下拉框所有的option的节点对象 var options = obj.options; //注意：得到的options是一个对象数组 //3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样： var value1 =options[0].value; //4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样： var text1 = options[0].text; //5.如何获得当前选中的option的索引？ var index = obj.selectedIndex; //6.如何获得当前选中的option的文本内容？ //从第2个问题，我们已经获得所有的option的对象数组options了 //又从第5个问题，我们获取到了当前选中的option的索引值 //所以我们只要同options[index]下标的方法得到当前选中的option了 var selectedText =options[index].text; }
• Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。
  一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。 伸缩容器(flex  containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex  items)。
• 在不涉及样式的情况下，页面元素是“从上往下”解析的，因此与结构排放顺序有关
• 如果一个html文件中存在两个外部引用的样式文件，则在页面加载的时候两个文件是同时开始加载的，先加载完成的优先解析，如果后者和前者有相同的选择器规则，则后者中的规则将合并前者中的规则
• Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
  Firefox 、 Chrome 以及 Safari 支持所有新的边框属性。
  注释：对于 border-image ， Safari 5 以及更老的版本需要前缀 -webkit- 。
  Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-
• Bootstrap 框架的网格系统工作原理如下：
    1 、数据行 (.row) 必须包含在容器（ .container ）中，以便为其赋予合适的对齐方式和内   距 (padding) 。
    2 、在行 (.row) 中可以添加列 (.column) ，但列数之和不能超过平分的总列数，比如 12 
    3 、具体内容应当放置在列容器（ column ）之内，而且只有列（ column ）才可以作为行容器 (.row) 的直接子元素
    4 、通过设置内距（ padding ）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（ margin ）来抵消内距(padding) 的影响
• 浏览器端的存储技术有：cookie webStorage(localStrage,sessionStorage)  userData indexedDB   而服务器端的技术有session
• web worker是后台运行的程序，运行在后台的javascrpit程序，不会影响页面的性能，比如一个计算题，后台在计算，再给页面赋值，但在计算的这段时间内，页面也可以做其他的事情。
• Ajax支持的数据类型有：xml  html script json jsonp text
• 网页的最上层的标题应该使用title，文章的最上层的标题是h1,还有一般的网页设计中，logo部分会由h1标签组成。
• 当一个元素被嵌套在多重标签内时，要判断优先级，可以采用给不用的选择器设置权重，比如标签的权重是1，类的权重是10，id的权重是100，再根据css中对目标元素的设置，比较权重
  ul#related span的权重为：1+100+1=102    #favorite.highlight的权重为：100+10=110 .highlight权重为10，所以三者最高的权重为110，目标应该是服从第二种的样式
• 关于Ajax和Flash的优缺点：
  Ajax的优势：可搜索性；开发性；费用；易用性；易于开发
  flash的优势：多媒体处理；兼容性；矢量图形；客户端资源调度
  Ajax劣势：可能搞破坏浏览器的后退功能；使用动态页面更新使得用户难于将某个特定的状态保存到收臧夹中
  flash劣势：二进制格式；格式私有；文件经常会很大，第一次使用需要较长的等待时间；性能问题
• head部分里的javaScript会在被调用的时候执行；body部分中的javascript会在页面加载的时候被执行
• 关于web表单登陆中用到的图形验证码的实现：服务器端生成验证码后一方面通过图片将验证码返回给客户端，同时在服务器端保存文本的验证码，由服务器端验证输入内容是否正确
• iframe的使用场景有：与第三方域名下的页面共享cookie；上传图片，避免当前页刷新；左边固定右边自适应的布局；资源加载
• 浏览器内核与浏览器对应关系：
  Trident:IE
  Gecko:Firefox
  Webkit:safari Google 傲游 猎豹 百度 opera
  Presto:opera
• Http协议特点：无连接，媒体独立，无状态，基于TCP/IP通信协议来传递数据，基于客户端/服务端架构模型
  Restful接口中，利用http协议的method字段来描述要资源操作的方式，比如GET白哦书获取资源， POST也是新增一个资源 PUT表示更新资源 DELETE表示删除资源等