前端工程师-设计开发HTMLCSS和JS的定义或引用

现在的网页设计，一般采用内容与表现相分离，即网页的组成包含：内容（HTML）+样式(CSS)+脚本(JS)。AD：浏览器解析原理服务器接收到HTML-解析HTML结构建DOM树-解析CSS构建渲染树-为渲染树生成布局-绘制渲染树；在构建DOM树的同时，如果有JS，同时调用JS引擎解析。HTML文件，在html文件的开头处一般会包含文档类型。常用过渡类型，支持html4.0的标签。其他文档类型有严格类型（Strict）和框架（Frameset）。一个HTML文件，包含head和body两部分。外部文件(css和js)的引用、定义，以及网页的title，都是在head里定义的。Body部分，则是网页展示的内容。HTML文件的Head部分，包含文档编码、CSS和JS的定义或引用：文档编码，html引用文件（如CSS）的编码必须和本文档编码一致，否则可能出现乱码。CSS和JS的定义或引用可以直接在head中定义CSS和JS代码块，也可以通过引用的方式引用外部的CSS和JS文件，引用多个文件用“，”分隔。引用外部文件是现在通用的方式，可以保证整个网站风格的一致性和重用，利于样式和脚本的维护；可以减少网页的代码量，增加网页的浏览速度。CSS的引用JS的引用scripttype=text/javascriptsrc==2011021520110HTML标签标签有成对的标签和单个标签。HTML元素是通过使用HTML标签进行定义的，所有的标签定义在内，HTMl标签在页面中必须是结束的，如果标签没有闭合，造成的后果就是页面样式错乱。HTML对标签的大小写不敏感，但是XHTML规范中，标签要求必须小写。HTML文档的body，是用户在浏览器中可见的部分。一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们在body中可以用三个div块来划分，分别给它们起名为：头部（header）、主体（maincontent）、询问（footer）。对比表格布局，用div＋css布局构建的网页以够简化代码，加快显示速度。CSS介绍Html页面CSS样式的定义方式有：外部样式，CSS单独写到一个CSS文件内，然后在源代码中以link方式链接。内部样式，它是以和结尾，写在源代码的head标签内。行内样式，在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效。导入样式，以@importurl标记所链接的外部样式表，它一般常用在另一个样式表内部。一个元素有多重样式，即外部样式、内部样式和内联样式同时应用于同一个元素的情况，优先级如下：外部样式内部样式内联样式。CSS语法，由三部分构成，选择器、属性、属性值。Selector{property:value}选择器，可以是ID、CLASS或标签；属性和属性值是用来定义这个物件的某一个特性选择器包含id、class、标签。id只能在页面中对应一个元素，就像我们的身份证号一样，每个人的都不一样；class为类，可以对应多个元素。选择器有优先级1.内联样式表的权值最高1000；2.ID选择器的权值为100；3.Class类选择器的权值为10；4.HTML标签选择器的权值为1；id优先级高于class，class优先级高于标签，后面的样式覆盖前面的，指定的高于继承，行内样式高于内部或外部样式。CSS盒模型CSS盒子模式都具备的属性：内容(content)、填充(padding)、边框(border)、边界(margin)。CSSBug通常表现为布局异常、属性异常、文本溢出。布局异常，主要是指样式的错位，元素显示的位置不正确；属性异常，主要是指样式属性不匹配，属性错误或丢失，可通过firebug查看属性验证；文本溢出，是指文字或图片，在超出预定的像素范围显示，可通过更多的文本内容或者大像素图片来校验。前端bug的定位兼容性bug，在不同的浏览器下，表现为不同的现象，对于此类型的bug，测试人员可以先排除是否只有ie6下才有样式错位现象，如果不是ie6下才有的，则浏览器的说明，尽量避免ie6，减少对ued同学的引导。如果一个bug在两个不同的浏览器下都表现为同一个现象，则该bug就是非兼容性引发的bug，在提交bug的时候，最好注明是所有浏览器，利于ued定位。源码查看判断，如宝贝详情页面的sku信息显示丢失，通过firebug查看html，可以看到sku对应的控件里没有数据源，查看源代码，找到sku对应的地方，也没有sku的信息，则表明是服务器端没有向前端输出数据，这个bug是属于开发的bug。HTML标签不闭合导致的页面样式错乱，可通过firebug查看html的标签闭合情况。页面元素样式丢失，可通过firebug查看html的元素属性信息。