前端html,css,笔记概要
173
HTML
超文本标记语言
css
层叠样式表
网站：有很多网页构成的，网页之间可以进行链接跳转
网站：有很多网页构成的，网页之间可以进行链接跳转
html文件基础部分
创建html文件的方式
新建文体文档——修改后缀名称
创建html主体框架
！+TAB
html标签
标签：<标签名称>
双标签：<开始标签>内容<结束标签>
单标签：<开始标签>
html标签创建方式
标签名称+TAB
注释
ctrl+？!--注释内容--!灰色
【作用：添加备注信息；废弃一段代码】
属性
规定标签的一些特点，放在开始标签中
属性名=“属性值”（每个属性之间用空格隔开）】
打开新标签target：“_blank”
路径问题
1.绝对路径--(/网址/从盘符开始的路径)
2.相对路径,
a.要引入的文件与当前文件在同一级目录下，直接写文件名+
后缀名
b.要引入的文件所在文件夹与当前文件夹在同一级目录下，
文件夹名称/文件名+后缀名（常用）
c.都不在同一级目录下时，每退出一级加一个 ../
css基础部分
创建CSS文件的方式
新建文体文档——修改后缀名称
CSS语法（选择器）
基础选择器
1.标签选择器：标签名称；
2.类名选择器：. 类名；（常用）
3.id选择器：#id名
通用选择器：*{样式}（所有类目）
后代选择器：.父级元素 .子级元素（父子级中间要有空格）
引入
在html的head部分通过link标签引入css文件
标签部分
标签分类
按照标签在浏览器中的排列顺序进行分类：
（1）块标签：在浏览器中自上而下排列，可以设置宽高。如：div
标签p标签（段落）；
（2）行内标签：在浏览器中从左往右排列，不可以设置宽高。如：
a标签span标签，i标签（斜体标签）；
（3）行内块标签：在浏览器中是从左往右排列，可以设置宽高。如
img标签。
标签之间的转换
display：block
块标签
inline
行内标签
inline-block
行内块标签
【行内标签、行内块标签转换成块标签】
图片的引入
（1）在html中通过img标签引入（只能改变图片大小）；
（2）在css中通过背景图片的方式引入Ipsum
步骤：
a.创建一个具有宽高的元素；
b.添加背景图片：background-image:url（“图片路径”）【url
表示路径】；
c.设置背景图片大小：background-size：100px 100px（具体
宽高数值）；100% 100%（百分比）；cover（覆盖）；
d.设置背景图片的位置：background-position：left top bottom
right（单词）；20px 30px（具体数值：往右往下为正
be.设置禁止背景图片重复：background-repeat：no repeat；
两种引入图片方式区别：
（1）img图片只能设置大小；背景图片除了可以设置大小，还可以改变
背景图片的位置。
（2）当图片需要经常更换的时候用img方式引入（如：轮播图）；当不需
要经常更换的时候通过背景图片的方式引入。
颜色的表示方式
单词：red/black/blue
十六进制：#000000/#ffffff
rgb（red、green、blue）rgb(255，255，255)
rgba（a表示不透明度）：rgba（0，0，0，0.1）
定位部分
什么时候用
遇到元素和元素之间的层叠现象的时候用定位
（如：①轮播图上的左右箭头和轮播点
②图片上的播放按钮、图片上的选项卡、遮罩等。）
为什么要用
因为文档流规定元素只能从左往右或
从上往下排列，不能层叠在一起。
怎么用
通过调整上下左右四个方向的值
去确定元素位置的。
有几种定位
定位层级：【z-index:整数】
绝对定位
相对于离他最近的
具有定位属性的父
级元素定位；
不占据原来的位置
position：
absolute；top：
10px；left：10px；
相对定位
相对于元素
本身定位，会占据
原来的位置（添加
在绝对定位的父级
元素身上）；
position：rela-
tive；
固定定位
相对于浏览器
的窗口定位，如：
返回顶部按钮。
position：fixed；
图片精灵技术（雪碧图）
把页面中的一些小元素图片整合在一整张大图片上面，通过引入背景图片，调整背
景图片位置，显示不同的小图片。通过这种技术可
以加快浏览
盒子模型
内容：宽高+边框+外边距+内边距
（1）宽高：width+height
（2）边框：border：1px solid #000；
（3）外边距：margin 盒子与盒子边框之间的距离；
（4）内边距：padding 盒子内容与边框之间的距离。
实际盒子尺寸
盒子的实际宽度=width+左右内边距+左右边框
盒子的实际高度=height+上下内边距+上下边框
加了内边距之后，整个盒子会被撑大。
解决办法：把宽高减小相应的值。
上 右 下 左；（四个参数）
上下 左右；（两个参数）
上下左右；（一个参数）
上 左右 下；（三个参数）
单独设置：
margin-left/right/top/botttom
padding-left/right/top/botttom
外边距可以设置负值，内边距不能设置负值
行内元素（a标签、span标签）只能设置左右外边距不能设置上下外边距
margin-top时会遇到的bug
当以下条件满足时
（1）子元素是父元素的第一个子元素；
（2）父元素没有设置内边距、没有边框、也没有浮动；
（3）子元素也没有设置浮动；
会发生问题：
给子元素设置的margin-top会作用到父级元素身上
如何解决
（1）可以给父级元素添加padding-top模
拟子元素的margin-top；（但是要修改原
先的高度，减去设置的高度）
（2）可以给父级元素添加overflow：
hidden；（常用）
（3）可以给父级元素或者子级元素添加浮动
（1）可以给父级元素添加padding-top模
拟子元素的margin-top；（但是要修改原
先的高度，减去设置的高度）
（2）可以给父级元素添加overflow：
hidden；（常用）
（3）可以给父级元素或者子级元素添加浮动