第一天

• 常用的HTML标签
• 易混点

• 引入方式
• 选择器

• *元素种类
• 权重
• 边距的合并
• 定位
• fiex
• 2D、3D转换

常用的HTML标签

记个笔记,供下次复习用，需要复习的可以参考下,由于写html标签会被页面识别,只能省去括号了

h1~h6 标题
<img /> 图片
src 链接路径
相对路径 相对于当前文件的位置 ./同级 ../上一级
绝对路径 从盘符往下写即可
p 文本 会加入行间距
pre 原样输出文本,会保留换行和空格
<hr />水平线
<br /> 换行
a 超文本链接
属性 target 跳转方式 _self当前页面 _blank新窗口
此处有一个特殊用法，锚点 点击快速跳转到与a绑定位置
示例
<a href="#test"></a>
<p id="test"></p>
<base target="xxx"/>标签 可以指定整个页面的a跳转方式
* table 表格标签
* 	tr 表格行
* 	th 表格头的列 会加粗
* 	td 表格普通的列
* form 表单标签
* 	input 输入框
* 		type可选输入框种类 常用有text文本、password密码、radio单选框、
* 		checkbox复选、submit提交表单、button按钮
* 	select 下拉列表 option为他的项
* 列表标签
* 	无序 ul 和 li 布局经常用
*	 有序 ol 和 li
* 	自定义列表 dl 和 dt dd dd作为dt的解释说明来出现的
音频视频标签 audio video
常用转义字符 < &lt; > &gt; 空格 &nbsp;

易混点

这里做出区分,在以前用的时候经常搞混的和用的特别多的
1.div span 和lable
三者均无特殊含义,常常作为容器来使用,搭配css,js来完成布局
div 块级元素标签
span lable 行内元素标签,而作为容器经常使用span lable更多用在增加事件和复选框等点击的作用范围
2.表单中相关的name和value在提交后台数据时的区别
几个好像也不是太一样 不过name都是作为提交到后台的键,只是放的位置有差别
input 这个name直接写在标签即可 value 为提交到后台的值
radio和checkbox 这俩个会有好几项,name必须一致,radio与input一致，加上input他们三个的value都是提交时的值,后面写的才是向用户展示的
select name写在select上不是option，其他与他们一致,select和checkbox提交的值都是多个

css

其实我觉得css才是前端的灵魂,杂乱无规律,只能写点能想起来的知识了

引入方式

1.行内式 标签名 style=“属性：值；属性：值”
2.使用style标签
示例

<style type="text/css">
css代码
</style>

3.引入外部样式表
示例

<link rel="stylesheet" type="text/css" href="css文件路径"/>

还有有种@import方式不知道现在还用不用,想了解可以查查文档

选择器

这点是很重要的,记牢了后面学库，框架之类的就省点事,等写到js，jq
选择器之后会把选择器单独总结一下
为了后面示例方便,这里先写点标签，后面也直接写样式了,省点篇幅

<div id="id" class="class">
<span id="span"></span>
<div class="luffy1"></div>
<div class="luffy2"></div>
<div class="luffy3"></div>
<div class="luffy2"></div>
</div>

1.标签选择器
div{
属性:值;
}

2.类选择器
.class{
属性:值;
}

3.id选择器
#id{
属性:值;
}

4.通配符选择器
*{
属性:值;
}
*大部分情况下都是匹配所有的意思，一般用来定义整体布局样式,比如清除浏览器默认边距,去除a标签默认样
式、按钮默认样式等
5.子元素选择器
#id #span{  }  //选择#id标签下的所有元素
#id>#span{ }   //只选择#id标签下最近的子元素
6.交集和并集选择器
#id.class{ } //需要两者都满足 注意有无空格 也不经常用
#id,#span{ } //满足二者一个即可
7.属性选择器
div[class]{ } 选择带有某个属性的某元素
div[class=值]{ } 选择带有某个属性且属性值等于某个值的某元素
div[class^=值]{ } 选择带有某个属性且值以某写元素开头的某元素
div[class$=值]{ } 选择带有某个属性且值以某写元素结尾的某元素
div[class*=值]{ } 选择带有某个属性且值中含有某些内容的某元素
8.伪元素选择器  在元素前面或后面创建一个元素
#id::before{
content:""; //必须有 可以为空
}
我记得还有伪类选择器比较简单,也没咋用过

常用的样式

css样式太多,也没啥规律,这里只列出我平时用的多的或者经常混的,具体可以查文档，还是很好理解的
一般的属性顺序写法
布局定位属性
自身属性
文本属性
其他属性

字体综合写法,位置不可换 必须保留后两个
选择器{
font:font-style,font-weight,font-size/line-height,font-family;
}
font-style, //字体风格 normal 正常值(默认) 常用于把em和i标签的字体修正 italic倾斜
字体图标也属于这个属性内
text-decoration 文本修饰 经常用于去除a标签的下划线 none
line-height 行高 经常用于设置单行文本的上下居中 行高等于容器高度
背景综合写法
background:背景颜色 背景图片 是否平铺 是否滚动 背景位置;
background-repeat:是否平铺 默认repeat平铺 常用的 no-repeat
background-attachment:是否滚动
background-position:位置 可以放top center等或具体值 X轴，Y轴
background：rgba() 透明度 前三个值是rgb颜色格式 最后为透明度
border-collapse：collapse 合并单元格 在表格中经常遇到
margin:0 auto 块级元素水平居中 必须有宽度
border-radius：百分比或单位数值 盒子的角
border-shadow:盒子阴影 水平阴影 垂直阴影 模糊距离 阴影尺寸 颜色
display:none/block 元素隐藏和显示  不保留原来的位置
visibility:visible/hidden 元素显示和隐藏 保留原来的位置
overflow:一般与滚动条有关、清除浮动、解决外边距问题
cursor:鼠标样式
outline:元素外围的线 一般用于去除按钮等默认样式
resize:node 防止用户拖动文本域
vertical-align：垂直对齐的方式 行内和行内块有效 常用于去除图片在盒子里默认对不齐的情况

这里会一直来更新

*元素种类

很重要 经常放错元素种类整个布局就完全乱了
块级元素 block 一行只能放一个,多的会挤下去,可以设置宽高，默认宽度为容器全部、
可以嵌套任意种类元素
常见 div hr p h ul ol dl form table
行内元素 inline 一行可以放多个 无法设置宽高(不绝对，可以专门处理) 默认为自己本身宽度、
只可以放行内元素
常见 span i em
行内块元素 inline-block 一行可以放多个 可以设置宽高，默认为自己本身宽度
可以通过display属性相互转换
常见 a

权重

继承和* 0
标签选择器 伪元素选择器 1
类，伪类选择器 、属性选择器 10
id选择器 100
行内样式 1000
!importtant 无穷大

边距的合并

相邻块级元素上下放 外边距会取较大者 一般只给一个盒子边距即可
嵌套块级元素会发生外边距合并 去较大者 一般定义父元素边框，上内边距、添加overflow:hidden或者浮动定位都可解决

定位

静态定位 加不加一个样,不多解释
相对定位 position:relative
特点 相对于它自己来移动，原来占有的位置还有 一般用于限制绝对定位,单独用不多
绝对定位 position:absolute
特点 相对于有定位的父级元素,静态定位不算，没有父级元素就以浏览器为基础 、原来的位置不再占有
固定定位 position:fiexd
特点 原来的位置不再占有，只与浏览器窗口有关

fiex

flex-direction 主轴的方向 行或者列 是否反转
justify-content 主轴上子元素排列
flex-start 从左或者从上开始排
flex-end 从右或者下开始排
center 居中对齐
spance-around 平分剩余空间
spance-between 俩边贴边 平分剩余空间
flex-wrap 子元素换行
align-content 侧轴子元素多行排列
align-items 侧轴子元素单行排列

2D、3D转换

非常有意思的一个东西，基础不多，数学得好，还有兼容性，忒麻烦
2d
transform:translate(距离)rotate(度数)scale(倍数)
transform-origin:旋转中心点
依次是平移变化 旋转变化 和缩放变化 顺序影响效果
在定位时进行元素上下左右居中平移还是很方便的