Web网页开发-总结笔记1

本文介绍: Web网页开发

1. 主流浏览器都有哪些（最少五个）？
火狐浏览器、谷歌浏览器、IE浏览器、Edge浏览器、Opera浏览器、Safari浏览器
2. 常见的浏览器内核都有哪些？
IE ：Trident
火狐：Gecko
苹果：Webkit
谷歌、欧朋、Edge：blink
3. img标签中的alt和title有什么异同?
alt：图片加载失败时的提示文字
title：图片正常显示时，鼠标悬浮图片上出现的提示文字
4. 简述src与href的区别
src和href都是用来引用外部的资源。
1. href 是跳转到指定页面
2. src 是将指向的内容插入到标签所在的位置。
5. 什么是标签语义化？标签语义化有什么好处?
标签语义化：通过标签能判断内容语义。
1. 方便代码的阅读和维护
2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3. 使用语义化标签会具有更好地搜索引擎优化
6. Doctype作用? 标准模式与兼容模式(混杂模式)如何区分?
<!DOCTYPE>用于文档声明；
标准模式和混杂模式的区别：
标准模式：以浏览器支持的最高标准渲染
混杂模式：主要用于兼容低版本的浏览器
7. 页面导入样式中使用link和@import有什么区别?
1）从属关系 link是html标签，@import是css提供的
2）加载差异 link同时加载，@import页面加载完成后加载
3）兼容性 link没有兼容问题，@import IE6以下不兼容
4）可操作性 link支持js操作，@import不能
8. 4个基础选择器及用法
①.全局选择器 *{}
②.标签选择器 span{}
③.id选择器 #id名{}
④.类选择器 .类名{} 多类名
9. 5个复合选择器及用法
①.后代选择器空格隔开 div ul li{}
②.子元素选择器 >隔开 div>ul{} ul>li{}
③.并集选择器 ,隔开 img,span{}
④.交集选择器 p.one{} 选择的是：类名为 .one 的段落标签。
⑤.伪类选择器链接伪类选择器 a:hover{} cleanfix:after
10.css的四种引入方式
1）行内式 style=””
2）内嵌式 <style></style>
3）外链式 <link rel=”stylesheet” href=”XXXXX.css”>
4）导入式 <style>@import url(“”)</style>
11.关于字体的css语句

1）字体大小20像素 font-size:20px;
2）字体颜色为粉色 color:pink;
3）字体类型为幼圆 font-family:幼圆;
4）字体加粗的css语句 font-weight:100-900;
5）字体倾斜的css语句 font-style:italic;

12.css三大特征
（1）继承性
（2）层叠性
（3）优先级
13.关于背景的css语句

1）插入背景图片的css语句
background-image:url();
2）背景图片的大小为：宽200px 高300px
background-size：200px 300px;
3）背景位置的css语句
background-position:
①.像素值写法 background-position: 200px（宽） 200px（高）;
②.方位值写法 background-position: left bottom;
左left、中center、右right、top上、middle中、下bottom
4）背景透明度的css语句
background:rgba(0,0,0,0.3);
14.优先级顺序
！important>行内式>id选择器>类和伪类选择器>标签选择器>全局选择器和继承
15.复合选择器的优先级是什么决定的？
权重
16.css注释及快捷键
（1）单行注释
（2）多行注释
快捷键：
ctrl+/
17.对于table页面布局有什么样的缺点
1）嵌套太深
2）灵活性差
3）代码不够简洁
4）不够语义化
5）横向合并（colspan）与纵向合并(rowspan)时页面较混乱
18.怪异盒模型与标准盒模型的区别
标准盒模型，边框和内边距会影响盒模型的大小
怪异盒模型，边框和内边距不会影响盒模型的大小
19.将盒模型设置为怪异盒模型的css语句
box-sizing: border-box;
20.边框的综合写法
border:宽度、样式、颜色;
border（top/left/right/bottom）：1px red solid(dotted/dashed/double);
21.内边距指的是什么？内边距10像素怎么写？
内边距指内容到边框的距离
padding/margin-方向值（top/bottom/left/right）
padding:10px;
22.内边距为两个值、三个值、四个值时分别代表什么方向？
padding:上下左右；
padding:上左右下；
padding:上右下左；
23.请分别写出margin1个值、2个值、3个值、4个值分别代表什么意思？
一个值：上下左右
两个值：上下左右
三个值：上左右下
四个值：上右下左顺时针方向
24.块级元素的水平居中
margin:0 auto; 或者 margin:auto;
25.嵌套型盒子的外边距合并问题的解决方案
（1）给父盒子添加overflow：hidden属性
（2）给父盒子边框border、内边距padding
（3）让子盒子浮动
（4）设置定位
26.清除标签自带的内外边距，使页面初始化的css语句是?
*{ padding:0; margin:0; }
27.上下型盒子的外边距合并问题解决方案
两个元素垂直布局：
第一个margin-bottom：30px;
第二个margin-top：50px;
上下margin重合取最大值，这两个元素垂直之间的间距是50px；
解决方案：
给其中一个元素写间距即可