htmlcss前台学习技巧总结.docx
《htmlcss前台学习技巧总结.docx》由会员分享，可在线阅读，更多相关《htmlcss前台学习技巧总结.docx（10页珍藏版）》请在冰豆网上搜索。
htmlcss前台学习技巧总结
htmlcss前台学习技巧总结
篇一：
前端面试题总结HTMLCSS部分
前端面试题总结HTMLCSS部分
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭。
标签名必须用小写字母。
XHTML文档必须拥有根元素。
3.Doctype?
严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5拥有IE5.5的bug
4.行内元素有哪些?
块级元素有哪些?
CSS的盒模型?
块级元素：
divph1h2h3h4formul
行内元素:
abbrispaninputselect
Css盒模型:
内容，border,margin，padding
5.CSS引入的方式有哪些?
link和@import的区别是?
内联内嵌外链导入
区别：
同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link支持使用javascript改变样式，后者不可
6.CSS选择符有哪些?
哪些属性可以继承?
优先级算法如何计算?
内联和
important哪个优先级高?
标签选择符类选择符id选择符
继承不如指定Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?
作用是什么?
结构层Html表示层CSS行为层js
8.css的基本语句构成是?
选择器{属性1:
值1;属性2:
值2;……}
9.你做的页面在哪些流览器测试过?
这些浏览器的内核分别是什么?
Ie（Ie内核）火狐（Gecko）谷歌（webkit）opear（Presto）
10.写出几种IE6BUG的解决方法
1.双边距BUGfloat引起的使用display
2.3像素问题使用float引起的使用dislpay:
inline-3px
3.超链接hover点击后失效使用正确的书写顺序linkvisitedhoveractive
4.Iez-index问题给父级添加position:
relative
5.Png透明使用js代码改
6.Min-height最小高度!
Important解决’
7.select在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:
hidden,zoom:
0.08line-height:
1px）
9.ie6不支持!
important
11.img标签上title与alt属性的区别是什么?
Alt当图片不显示是用文字代表。
Title为该属性提供信息
12.描述cssreset的作用和用途。
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一
13.解释csssprites，如何使用。
Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型渲染模式的不同
使用可显示为什么模式
15.你如何对网站的文件和资源进行优化?
期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16.什么是语义化的HTML?
直观的认识标签对于搜索引擎的抓取有好处
17.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动clear:
both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:
auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:
1用于兼容IE）
3.是用afert伪元素清除浮动（用于非IE浏览器）
18.csshack
_marging\\IE6
+margin\\IE7
Marging:
0auto\9所有Ie
Margin\0\\IE8
篇二：
html+CSS+js学习笔记
第一章..............................................................................................................................................2
一、关于html的大致了解.....................................................................................................2
二、Html常用的标签.............................................................................................................3
三、使用vs创建网页.............................................................................................................6
第二章..............................................................................................................................................6
DiV（层）、span......................................................................................................................6
二、样式表、css（层叠样式表）..........................................................................................6
文档流.......................................................................................................................................9
Javascript（JS）简介...............................................................................................................9
第三章............................................................................................................................................11
一．类型转换.........................................................................................................................12
二、断点调试、异常处理.....................................................................................................12
三、函数声明.........................................................................................................................12
四、字符串.............................................................................................................................13
五、数组.................................................................................................................................14
六、javaScriptDom编程......................................................................................................15
第四章............................................................................................................................................15
一、Body、document对象的事件：
...................................................................................16
二、Window对象的属性：
..................................................................................................16
三、事件冒泡.........................................................................................................................17
四、动态创建、删除元素.....................................................................................................18
五、InnerText和innerHTML的区别...................................................................................18
第五章............................................................................................................................................18
1、动态创建表格的另外一种方式...............................................................................19
2、删除元素，两种方式...............................................................................................19
3、什么时候需要将代码放到window.onload中？
....................................................19
4、通过js动态操作页面样式......................................................................................19
5、关于字符串为空值的判断.......................................................................................19
6、关于一些事件...........................................................................................................20
7、层的显示与隐藏.......................................................................................................20
8．问题解答与拓展.......................................................................................................20
9、form对象..................................................................................................................21
10.说说不同浏览器的不同点以及是怎么解决这些差异的？
....................................21
11、Js中的正则表达式.................................................................................................22
第六章............................................................................................................................................23
1、HTML、JS的压缩...................................................................................................23
2、怎样去写高效的js代码..........................................................................................24
3、一些浏览器的兼容问题（了解）...........................................................................24
第一章
一、关于html的大致了解
参考书：
张孝祥《JavaScript网页开发——体验式学习教程》
浏览器（5大主流浏览器）：
IE【IE6及以下版本（IE7及以上）】、FF（FireFox）、Chrome（谷歌）、Opera、Safari（Apple）
两大引擎：
Trident引擎（就是IE的WebBrowser控件）、webkit引擎
HTML（HyperTextMarkupLanguage）超文本标记语言，就是描述网页长什么样子，内容的文本。
不同浏览器品牌对HTML的支持是有差异的，要考虑浏览器的兼容问题。
通过设置body标签的bgcolor属性可以设定网页的背景颜色，颜色的取值可以是英文，也可以是十六进制（#00FF69,每两个为一组，分别代表R、G、B的值）CSS、JavaScript都存在浏览器兼容问题，CSS尤甚，我们只考虑JS的兼容。
静态页面和动态页面
后缀名为html或htm都是静态页面；asp、aspx、jsp、php等都是动态页面网页的基本结构：
?
?
?
我的第一个网页
?
Helloworld
?
?
HTML注释：
?
body标签的bgcolor属性可以设定网页的背景颜色。
Html和xml的区别：
Xml严格区分大小写，html不区分大小写。
建议html全部用小写。
Xml有开始必须要有结束。
Html可以有开始没有结束，建议有开始有结束。
。
Xml属性值一定要用“”引起来，html可以用引号、单引号或是不跟引号，建议用“”引起来。
都可以通过css改变外观。
使用上有什么本质的区别：
xml主要用来存储数据，html更侧重于展示数据。
*（了解）xhtml：
可扩展超文本置标语言（eXtensibleHyperTextMarkupLanguage，XHTML），更符合xml语法规范的html。
xhtml的出现主要是为了向xml过度，通过xml+css也能实现很好的页面。
【xhtml要求：
全部小写、有开始结束标签、属性用双引号】?
?
二、Html常用的标签
1）H1-h6:
设置标题的等级，h1字号最大，
2）
换行
3）段落
，有一定间距的换行。
4）居中
5）加粗、、带下划线、斜体、强调加斜体
【注】建议使用、,因为他们除了有加粗、斜体，还有强调。
6）作为下标、上标
7）设置字体size的取值是1-7,7最大。
8）设置水平线
9）预格式化标签包含在这个标签中的内容会按照原定的格式显示出来
10）html编码,只能用地址符
空格 代表一个空格
大于号，可以用来转义标签
11）url、超链接
url:
表示资源在网络中的地址
名字
【注】target的取值范围：
_blank、_self、_parent、_top
设置锚,文字
然后在文章的底部跳转到文字处
12）的一些属性
../表示父目录，.表示当前目录建议写的时候用相对路径
的几个属性不想显示图片边框，就board=0
设置缩略图：
不建议将一张大图通过设置宽和高来改变图片的显示，建议使用工具将大图片改变显示比例之后保存，从新加载小图片。
Px单位名称称为像素，像素是相对于屏幕
分辨率来说的;Em相对于文字大小的倍数。
12）列表
①一般用在名词解释上
一个标签下可以包含多个
②无序列表
可以包含多个
③有序列表
【注】type的取值可以是：
1、a、A、i、I、disc（实心圆）、circle（空心圆）、square（小方块）
13）表格
两行两列
【注】cellspaceing是指单元格之间的间距，valign=/qitagongzuozongjie_0228/‖bottom/qitagongzuozongjie_0228/‖垂直对齐
Cellpadding是值单元格和内容之间的间距
行
列
列
合并行和列
//代表这个单元格跨3列
//代表这个单元格跨3行
表的标题
表的页眉
写在这里的文字，可以自动居中加粗
表的页脚
14）表单（一系列的信息）
凡是要输入提交的都是表单
【注】type可以取的值有text（文本框）、password（密码框）、radio（单选框）、checkbox（复选框）、Button（普通按钮）、submit（提交按钮）、reset（重置按钮）、image（图片提交按钮）、file（文件选择框）
还可以设置intput的其他属性，size=/qitagongzuozongjie_0228/‖15（框的大小）/qitagongzuozongjie_0228/‖、maxlength=/qitagongzuozongjie_0228/‖3（可以输入的最大长度）/qitagongzuozongjie_0228/‖、readonly=/qitagongzuozongjie_0228/‖readonly（设置只读）/qitagongzuozongjie_0228/‖、value=/qitagongzuozongjie_0228/‖默认值/qitagongzuozongjie_0228/‖
对于单选框,radio，可以设置name=/qitagongzuozongjie_0228/‖名字/qitagongzuozongjie_0228/‖,同一组的radio设置相同的名字，这样就可以实现单选了。
设置id=/qitagongzuozongjie_0228/‖名/qitagongzuozongjie_0228/‖，文字点中文字，就选择了对应的单选和复选。
Checked=/qitagongzuozongjie_0228/‖checked/qitagongzuozongjie_0228/‖某一项默认被选中
下拉框：
multiple是同时选中多个
下拉框中的内容
下拉框中的内容
【注】如果想为某一个下拉框设置label,可以如下：
下拉框中的内容
【注】如果想为某一个些选框分组，可以：
组框显示的内容
?
?
?
?
?
?
若干选框
【注】显示多行文本信息
15）滚动文字
这是滚动文字
【注】direction:
left、right、up、down向左、右、上、下
behavior:
scroll、slide、alternate
scrolldelay:
滚动的速度。
单位为毫秒数，默认为85。
16）插入mp3
插入falsh
type="application/x-shockwave-flash"width="760"height="700">
17）
升级会员 