20191028-20191101 前端学习笔记
20191028-20191101 前端学习笔记
20191028学习总结
（一）Markdown的运用
1.标题
# 一级标题
## 二级标题
### 三级标题
2.有序列表和无序列表
文字前加上“-”或者“+”变为无序列表，文字前加上“1”、“2”、“3”变为有序列表。
3.引用
“>”表示引用
4.超链接
超链接用[]()表示 图片用！[]()表示
（二）HTML
HTML超文本标示语言，通过一段内容定义为标题、段落或者图像等，从而让该内容具有结构定义。
HTML为主干 CSS为装饰外观
CSS：层叠样式表/级联样式表
API:应用程序接口
W3C：万维网联盟
1.HTML术语
<!–……..–> 注释
<元素名称> 元素
<…> 开始标记
</…> 结束标记
<a 属性=”属性值”>……….</a> 属性可以为元素添加额外信息
<header> 用于表示页面或某个区域头部
<nav> 导航栏
<aside> 用于表示跟周围主题相关的附加信息
<article> 用于表示文章或者其他可独立页面存在的内容
<section> 用于表示一个整体的一部分主题
<footer> 用于表示页面或某个区域的脚注
h1~h6 表示一级标题~六级标题
span 跨越多个字符，可使字符变得与众不同
a 超链接
p 段落，文章段落
2.元素书写格式： <a href=”目标”target=”页面打开位置”>内容</a>
3.列表种类
无序列表：用圆点标记
无序列表用<ul>标签，每个列表始于<li>标签
有序列表：用数字标记
始于<ol>标签，每个列表始于<li>标签
自定义列表：项目与其注释的组合
以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项以<dd>开始。
4.乱数假文
lorem加tab键
20191029学习总结
CSS
CSS的最新版本：CSS3
（一）CSS的样式表
1.外部样式表
CSS在<head>中用<link>引用外部样式表
<link rel=”stylesheet” href=”main.css”>
../ 返回上一级
2.内部样式表
CSS在<head>中用<style>引用外部样式表
3.行内样式表/内嵌样式表（基本不用）
在开始标签之中直接写样式
（二）CSS注释
书写格式：/*注释内容*/
vscode用注释：ctrl+？
(三)CSS规则
h1{
color：red
text-align：center；
}
整个属于规则集，h1为选择器，：左边是属性，：右边是属性值，花括号里面是声明。
（四）CSS选择器
1.元素选择器
标签去掉尖括号，作用到整个文档中的该元素。
2.类选择器
.类名{声明块}
3.id选择器
#id名{声明块}
id属性值在每个文档中只能用一次，具有唯一性。
命名用驼峰原则
小驼峰原则：第二个单词开始首字母大写（一般用）
大驼峰原则：所有单词的首字母大写
颜色单位
·关键字 h1{color：red;}
·HEX十六进制 通过#表示 h1{color：#foo;}
·RGB（red green blue） 由rgb函数表示 h1{color:rgb(255,0,0)；}
·HSL值（UI设计用）
长度单位
·绝对长度 px像素的具体大小会根据设备的分辨率有所不同
·相对长度 %
* 通配符 作用于所有元素
4.后代选择器
父集 子集
5.子集选择器
父集＞子集
6.伪类选择器（不要求掌握）
7.并集选择器/组合选择器
例: h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
悬停/移入
h1:hover{
color:red;
}
(五)选择器的权重
嵌入 id class 元素
a b c d
style 1 0 0 0
id 0 1 0 0
类 0 0 1 0
元素 0 0 0 1
通配符 0
！important 最高
!important要写在属性值后面
（六）源次序
当权重值相同时，后面的会把前面的覆盖掉。
（七）继承
祖先级有的样式，后代级也会继承。文本类的样式才会有继承性。
（八）调试器
如果用火狐浏览器 右键查看元素。
（九）元素如何显示
display：block（块级元素）
inline（行内元素）
inline-block（行内块）
none（隐藏元素并且不保留物理空间）
（十）盒模型
content：盒子内容
padding：内边距 内容周围的区域
border：边框 内边距和内容外的边框
margin：外边距 清楚边框外的区域
padding：内边距取值为一个值，则四周均为这个值。
内边距取值为两个值，如10px、20px 顺序 上下 左右
内边距取值为三个值，如10px、20px、30px 顺序 上 左右 下
内边距取值为四个值，如10px、20px、30px、40px 顺序 上 右 下 左
border：书写规范 例： 10px solid 颜色
（十一） 常规流
在没有CSS的干预下，块级元素独占一行，宽高可设，行内元素并排显示，宽高自动。
（十二） 浮动
当元素的float属性值为left和right 为浮动元素
float：none 不浮动
left 向上向左排列
right 向上向右排列
20191030学习总结
（一）新的声明：
1.文字居中：text-align：center
2.去掉下划线： text-decoration：none
3.水平居中：margin：auto
4.子集浮动导致父级塌陷，可以找高：overflow：hidden
5.去掉列表项（.或数字）life-style：none
（二）布局
设计常用布局
1..container
container{
width：XX px;
margin:0 auto;
}
<body>
<div class=”container”>
…
</div>
</body>
2.header+container
header{
width:100%;
}
.container{
width:XXpx;
margin:0 auto;
}
<body>
<header></header>
<div class=”container”>
…
</div>
</body>
3. header+container+footer
header,footer{
width:100%;
}
.container{
width:XXpx;
margin:0 auto;
}
<body>
<header></header>
<div class=”container”>
…
</div>
<footer></footer>
</body>
(三)网页制作要注意的规则
1.主页 index
2.用外部样式表 global.css
3.避免代码的冗余
4.图像或视频单独的文件夹 img/images
（二）单行文字垂直居中 行高=高 近似垂直居中 line height=XXpx;
（三）消除图片间隔
fond-size:0;
（四）弹性布局
特点是不会产生高的塌陷。 Flex=Flexible Box display： flex justify-content: center 横向居中。 align-items: center 垂直居中。 justify-content： space-between 两端对齐，项目之间的间隔都相等。 justify-content： space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 flex-grow: 1/2/3….. 剩余的空间的分配比例。
（五）CSS中给元素插入背景图 div{ height:500px; } /background:背景颜色 url 平铺方式 位置/ background: url(“路径”) no-repeat; 不平铺 background: url(“路径”) no-repeat center center; 局中间 background: url(“路径”) no-repeat right top; 右上 background: url(“路径”) no-repeat 100px 50px; 横向 纵向 background-size:30px 宽 30px 高 图片缩放 （六）图片结合：sprite 雪碧图 CSS坐标系：右向为宽的正方向 下向为高的正方向 .sprite{ /定视口/ width:XXpx; height:XXpx; background: url (“路径”) XXpx XXpx; 改位置 }