开发者社区> 狼人2007> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

介绍html CSS和JS的定义或引用

简介: 现在的网页设计,一般采用内容与表现相分离,即网页的组成包含:内容(HTML)+ 样式(CSS) + 脚本(JS) 。 浏览器解析原理 服务器接收到HTML->解析HTML结构建DOM树->解析CSS构建渲染树->为渲染树生成布局->绘制渲染树;在构建DOM树的同时,如果有JS,同时调用JS引擎解析。
+关注继续查看

现在的网页设计,一般采用内容与表现相分离,即网页的组成包含:内容(HTML)+ 样式(CSS) + 脚本(JS) 。

浏览器解析原理

服务器接收到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的引用

<script type="text/javascript" src=" http://a.tbcdn.cn/s/kissy/1.1.6/seed-min.js,p/global/1.0/global-min.js,p/shop/1.0/shop-min.js,p/shop/1.0/detail-min.js?t=2011021520110

HTML标签

标签有成对的标签和单个标签。

HTML元素是通过使用 HTML 标签进行定义的,所有的标签定义在内,HTMl标签在页面中必须是结束的,如果标签没有闭合,造成的后果就是页面样式错乱。

HTML对标签的大小写不敏感,但是XHTML规范中,标签要求必须小写。

HTML文档的body,是用户在浏览器中可见的部分。

一般的网站整体可以分为上中下结构,即:头部、中间主体、底部。那么我们在body中可以用三个div块来划分,分别给它们起名为:头部(header)、主体(maincontent)、询问(footer)。

对比表格布局,用div+css布局构建的网页以够简化代码,加快显示速度。

CSS介绍

Html页面CSS样式的定义方式有:

外部样式 ,CSS单独写到一个CSS文件内,然后在源代码中以link方式链接。

内部样式 ,它是以和结尾,写在源代码的head标签内。

行内样式 ,在标签内以style标记的为行内样式,行内样式只针对标签内的元素有效。

导入样式 ,以@import url标记所链接的外部样式表,它一般常用在另一个样式表内部。

一个元素有多重样式,即外部样式、内部样式和内联样式同时应用于同一个元素的情况,优先级如下:外部样式<内部样式<内联样式。

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)。

CSS Bug 通常表现为布局异常、属性异常、文本溢出。布局异常,主要是指样式的错位,元素显示的位置不正确;属性异常,主要是指样式属性不匹配,属性错误或丢失,可通过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的元素属性信息。

原文链接:http://qa.taobao.com/?p=11972

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
沫沫金:JavaScript拼接html片段使用反斜杠
JS使用“\”反斜杠拼接 $('#result_ok').append('\                     预约挂号医院:西安市第八医院\                     \                     \                        ...
864 0
javascript实现中国各大城市快速下拉选择
如果开发中遇到需要输入城市名的页面,那么这个特效可以帮助快速输入。这是一个纯js实现的效果,可以快速的输入城市名称,支持鼠标点击选择,输入城市的拼音或者拼音首字母,使用方便。可以在输入框中通过点击生成包含中国各个城市的下拉列表,进行快速选择,快速切换定位。体验效果:http://hovertree.
2081 0
在Javascript中实现伪哈希表
了解数据结构的人应该都听说过哈希表这种数据结构,它是一种典型的利用键值对存储并检索数据的一种非线性结构,又称散列表或杂凑法。在一般的线性表结构中,数据的相对位置是随机的,即数据和用于检索的关键字之间不存在确定的关系,检索数据时往往需要进行一系列的比较,最终找到要检索的数据,这种方法往往建立在循环比较的机制上,利用时间的代价节省了空间,实现了数据的存储和检索功能。
866 0
JavaScript实现map
//定义map function Map() { this.container = {}; } //将key-value放入map中 Map.prototype.
606 0
利用JavaScript来实现用动态检验密码强度
平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度。如下图: 我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好。所以我通过其他方式实现。
933 0
javascript中使用循环链表实现约瑟夫环问题
1.问题    传说在公元1 世纪的犹太战争中,犹太历史学家弗拉维奥·约瑟夫斯和他的40 个同胞被罗马士兵包围。犹太士兵决定宁可自杀也不做俘虏,于是商量出了一个自杀方案。他们围成一个圈,从一个人开始,数到第三个人时将第三个人杀死,然后再数,直到杀光所有人。
757 0
jQuery/javascript实现网页注册的表单验证
1 2 3 4 注册表单验证 5 6 7 table{background-color:pink;width:80%;height:300px;} 8 td{text-align:center;} 9 10 11 $("document").
776 0
jQuery/javascript实现全选全不选
1 2 3 4 Checkbox的练习 5 6 *{margin:0px;padding:0px;} 7 table{width:100%;text-align:center;} 8 9 10 11 12 ...
798 0
Javascript实现计数器,定时警告和停止
1 2 3 4 定时警告 5 6 7 8 定时警告的问题 9 10 11 function setTimeMsg(){ 12 setTimeout('alert("h...
716 0
+关注
狼人2007
个人对技术的追求:代码少而精捍;思路清晰美观;可扩展好维护;技术驱动商业; 人生格言:只要你有信念,有追求,并且坚持,那你一定比随波逐流,行得远行得正...
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础HTML入门教程》
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
JS 语言在引擎级别的执行过程
立即下载