Web网页开发-总结笔记1

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;
解决方案:
给其中一个元素写间距即可

相关推荐

  1. Web网页开发-总结笔记1

    2024-01-07 00:46:03       33 阅读
  2. Web网页开发-总结笔记2

    2024-01-07 00:46:03       33 阅读
  3. Web网页开发-CSS高级技巧1-笔记

    2024-01-07 00:46:03       37 阅读
  4. Web网页开发-CSS层叠样式表1-笔记

    2024-01-07 00:46:03       34 阅读
  5. Web网页开发-浮动-笔记

    2024-01-07 00:46:03       38 阅读
  6. Web网页开发-初识web-笔记

    2024-01-07 00:46:03       31 阅读
  7. Web网页开发-盒模型-笔记

    2024-01-07 00:46:03       29 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-07 00:46:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-07 00:46:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-07 00:46:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-07 00:46:03       18 阅读

热门阅读

  1. 2023-应用开发中遇到的问题与解决方案

    2024-01-07 00:46:03       28 阅读
  2. 力扣(leetcode)第383题赎金信(Python)

    2024-01-07 00:46:03       38 阅读
  3. 每日一题 - 240106 - D - Loong and Takahashi

    2024-01-07 00:46:03       79 阅读
  4. RocketMQ

    RocketMQ

    2024-01-07 00:46:03      32 阅读
  5. HTTP网络相关知识

    2024-01-07 00:46:03       34 阅读
  6. Kibana

    Kibana

    2024-01-07 00:46:03      33 阅读
  7. 详解Nacos和Eureka的区别

    2024-01-07 00:46:03       27 阅读
  8. 【LeetCode】1070. 产品销售分析 III

    2024-01-07 00:46:03       36 阅读
  9. Qt3D类使用说明

    2024-01-07 00:46:03       33 阅读
  10. ros python 接收GPS RTK 串口消息再转发 ros 主题消息

    2024-01-07 00:46:03       43 阅读
  11. Ubuntu中安装和配置SSH的完全指南

    2024-01-07 00:46:03       34 阅读