前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
文章目录
- HTML结构
-
-
- 一、标签（标记、元素）
- 二、列表，表格，表单
-
-
- 1、列表
- 2、图片
- 3、超链接--实现不同页面的跳转
- 4、table表格
- 5、表单1 --收集用户信息给后端input
-
-
- CSS表现
-
-
- 一、CSS语法
-
-
- 1.外部样式表
- 2.行内样式表
- 3.选择器
-
- （1）标签选择器
- （2）类选择器
- （3）id选择器
- （4）通配符选择器
- （5）群组和后代(包含)选择器
- （6）伪类选择器--也可用于盒子.box:hover{}
- （7）选择器的权重
-
- 二、CSS核心属性
-
-
- 1.css文本属性
- 2.css列表属性
- 3.css背景属性
- 4.css边框属性--盒子模型
- 5.css浮动属性--盒子水平排列
-
- 三、盒子模型
-
-
- 1、内边距（内容与边框之间的距离）
- 2、边框（包裹在内容的外部）
- 3、外边距（两个边框之间的距离）
- 4、PS基本操作（--P62、63盒子--66溢出）
-
- 四、其他
-
-
- 1、溢出
- 2、元素类型
- 3、定位
- 4、锚点--点击后跳到该页面对应位置 a链接
- 5、精灵图
- 6、宽高自适应、窗口自适应
- 7、表单进阶2
- 8、备注
-
-
- HTML5+CSS3新增
-
-
- 一、HTML5新增
-
-
- 1、新增语义化标签
- 2、音频标签、视频标签
- 3、表单3
- 4、数据/选项列表datalist
- 5、属性
-
- 二、CSS3新增
-
-
- 1、解决功能属性不支持浏览器的方法
- 2、新增选择器--页面布局
-
- （1）层级选择器
- （2）属性选择器
- （3）结构伪类选择器
- （4）目标伪类选择器--锚点反应
- （5）UI状态伪类选择器
- （6）否定和动态伪类选择器
- 3、其他
-
- （1）文本、盒子阴影
- （2）圆角边框
- （3）字体引入
- （4）透明度
- 4、其他CSS新布局
-
- （1）怪异盒模型-CSS3新布局
- （2）弹性盒flex--适用于移动端布局
- （3）WebApp移动端布局
- （4）多列布局
- （5）响应式布局
- （6）等比例缩放布局rem
- （7）Grid网格布局
- 5、渐变、动画、变形的状态
-
- （1）渐变gradient
- （2）动画transition
- （3）2d变形transform
- （4）关键帧动画、轮播效果
- （5）3d变形
- 6、Less语言
- 7、移动端布局总结
-
-
HTML结构
作用：–有哪些内容组成
一、标签（标记、元素）
-
基本标签
- //HTML5标准,文档声明标签 "en"> //语言为英文的; zh-CN中文,ja-jp日文;可以给搜索引擎译中 "UTF-8"> //字符集,用UTF-8万国码密码本编码解码为0101 - 文本标签一级标题
...自带加粗，独占一行，默认间距 - 段落标签段落文本内容
段落之间有间距 - 换行
- 水平线
- 文本加粗 加粗内容; 强调内容 - 倾斜 ; - 删除线;; - 扩展 下划线 下标 上标 -
htmltagwrap插件- alt+w --> < p>< p>
-
Auto Rename Tag插件- < XX>前后对应自动修改
-
Live Sever插件- 实时修改页面
-
open in browser插件- 在浏览器中显示
-
<标记 属性= “属性值”>
<标记 属性= “属性值” />
属性 属性值 备注 width “600” 宽度 align “left\right” 居中/左/右 color “green\blue” 颜色 -
-
< div> 无具体意义，但能划分区域(< div>*3)
-
< span style=“color=XX”> 没有实际意义，当文本独立修饰的时候，内容有多宽就占用多宽的空间距离，不改变格式
-
注释：ctrl+/ 即
-
回车：ctrl+enter
二、列表，表格，表单
1、列表
- 无序列表
（li里面可以随便放标签，但ul里面只能放li；默认生成黑色实心圆；还有空心圆、正方形、无）
"disc/circle/square/none">
- 无序列表
- 无序列表
–快捷键ul>li{aaa}*3 回车
- 有序列表
（li里面可以随便放标签，但ol里面只能放li；数字自动生成）
"1/a/A/i/I",start="4"> 开始标记从第四个开始
- 有序列表
- 有序列表
- 自定义列表
- 图片1
- 文字1
- 图片2
- 文字2
–快捷：dl>dt{111}+dd{444}
2、图片
先将所需图片放入总文件的图片文件夹下
| 11 | 22 |
| 333 | 444 |
–快捷：table>(tr>td)*2---------可直接设置第一行每个单元格的宽度
| 属性 | 备注 |
|---|---|
| width、height | (总表格、单元格)宽度、高度(px或百分比) |
| border | (表)外边框线的宽度 |
| bordercolor | (表)边框的颜色 |
| bgcolor | 背景颜色 |
| cellspacing | (表)单元格与单元格之间的间距 |
| cellpadding | (表)单元格与内容之间的间隙 |
| align=“left\right\center” | (文字、表格)水平对齐 |
| valign=“top\middle\bottom” | (文字)垂直对齐 |
| Colspan=“2” | 合并的单元格的列数，必须给td 横着来占 |
| Rowspan=“4” | 合并的单元格的行数，必须给td 竖着来占 |
5、表单1 --收集用户信息给后端input
----type=“text文本框”、“password密码框”、“submit提交框”、“button按钮框”、"reset重置框"
CSS表现
作用：决定页面是怎么样子的，横向纵向？怎么布局？–布局 配色 定位 做动画等
一、CSS语法
1.外部样式表
-
CSS样式–选择符h3和声明{}，声明–属性和属性值
-
声明内容放在{}中，属性和属性值用：连接，属性有多属性值时，不分先后空格隔开
-
每条声明用；结束
① ② h3{color: blue;} h2{color: brown; } "stylesheet" type="text/css" href="css/index.css> 或者
2.行内样式表
③类似与span，
----样式属性的优先级：就近原则
②外部样式link <①外部样式直接 <③行内样式
改变最高优先级：XX:XXX !important;
3.选择器
（1）标签选择器
div、h1、p、strong、tr、ol{}
（2）类选择器
"aaa bbb"
>xnfjdfsdk
（3）id选择器
"box1"
>xnfjdfsdk 唯一id
（4）通配符选择器
作用：清除所有元素的默认边距值和填充值
*{
margin:0; 外边距
padding:0; 内边距
}
（5）群组和后代(包含)选择器
①群组选择器
div,.box1,h1{ ---中间逗号
background-color:yelliw;
}
dhjka
"box1">xnfjdfsdk
dsf
②后代选择器
div h1{ ---中间空格
background-color:yelliw;
}
dhjka
（6）伪类选择器–也可用于盒子.box:hover{}
"box1">
"box2">
"clear:both;">
"box2">
</p>
<p>元素选择器 <Class选择器 <id选择器 <包含选择器(权重之和比较) <行内样式</p>
<p></p>
<h3>二、CSS核心属性</h3>
<h5>1.css文本属性</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>font-size</td>
<td>字体大小</td>
<td>分辨率：像素px(浏览器默认16px，设计图常用12px)</td>
</tr>
<tr>
<td>font-family</td>
<td>字体</td>
<td>宋体，仿宋，楷体， 微软雅黑……（连续时用逗号隔开）</td>
</tr>
<tr>
<td>color</td>
<td>颜色</td>
<td>color:red; color:#ff0; color:rab(255,0,0); 0-255</td>
</tr>
<tr>
<td>font-weight</td>
<td>加粗</td>
<td>font-weight:bolder(更粗的)/bold(加粗) /normal(常规)</td>
</tr>
<tr>
<td></td>
<td></td>
<td>font-weight:100-900; 400正常 600-900加粗</td>
</tr>
<tr>
<td>font-style</td>
<td>倾斜</td>
<td>italic(斜体字) /oblique(倾斜的文字) /normal(常规显示)</td>
</tr>
<tr>
<td><strong>text-align</strong></td>
<td>文本水平对齐</td>
<td>left; right; center; （justify;水平2端对齐，但是只对多行起作用）</td>
</tr>
<tr>
<td>line-height</td>
<td>文字行高</td>
<td>100px; (line-height)=(height)时可实现单行文本垂直居中</td>
</tr>
<tr>
<td>text-indent</td>
<td>首行缩进</td>
<td>可以取负值；该属性只对第一行起作用(<strong>XX:2em</strong>==&emsp$emsp)</td>
</tr>
<tr>
<td>letter-spacing</td>
<td>字符间距</td>
<td>文字或字符之间的间距</td>
</tr>
<tr>
<td>word-spacing</td>
<td>单词间距</td>
<td>英文单词之间的间距</td>
</tr>
<tr>
<td>text-decoration</td>
<td>文本修饰</td>
<td>none 没有、under下划线、overline上划线、over-through删除线</td>
</tr>
<tr>
<td><strong>font</strong></td>
<td>文字简写****</td>
<td><strong><strong>font是style weight font-size/line-height family的简写</strong></strong></td>
</tr>
<tr>
<td></td>
<td></td>
<td>font:italic 800 30px/80px “宋体”；<strong>顺序不能改变</strong></td>
</tr>
</tbody>
</table>
<h5>2.css列表属性</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>list-style-type</td>
<td>列表符合样式</td>
<td>disc(实心圆)、circle(空心圆)、square(实心方块)、none(去符号)</td>
</tr>
<tr>
<td>XX-<strong>image</strong></td>
<td>将<strong>图片</strong>设置为列表符合样式</td>
<td>list-style-image:url(img/1.jpg)；</td>
</tr>
<tr>
<td>XX-position</td>
<td>列表项标记(type、image)的放置位置</td>
<td>outside；默认值列表的外面 inside；列表的里面</td>
</tr>
<tr>
<td><strong>list-style</strong></td>
<td>简写</td>
<td>XX：none;去除列表符号；顺序可变</td>
</tr>
</tbody>
</table>
<p>简写/复合写：list-style: none inside url(img/VS.png);</p>
<h5>3.css背景属性</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>background-color</td>
<td>背景颜色</td>
<td>XX：red；rgb(0,0,0);</td>
</tr>
<tr>
<td>XX-image</td>
<td>背景图片</td>
<td>XX-image:url(img/1.jpg)；</td>
</tr>
<tr>
<td>XX-size</td>
<td>图片大小</td>
<td>px px、XX% XX%、 <strong>cover</strong>(扩展到足够大，会被裁掉一些)、contain(最大尺寸，盒子有留白)</td>
</tr>
<tr>
<td>XX-repeat</td>
<td>图片的平铺</td>
<td>no-repeat/repeat/repeat-x/repeat-y;</td>
</tr>
<tr>
<td><strong>XX-position</strong></td>
<td>图片的定位</td>
<td>XX: 水平位置(right/<strong>center</strong>/left) 垂直位置(top/center/bottom)；可为负值</td>
</tr>
<tr>
<td>XX-attachment</td>
<td>图片的固定、滚动</td>
<td>scroll(默认滚动)/ <strong>fixed</strong>(固定，固定在浏览器窗口的位置里，固定之后就相当于浏览器窗口了，与盒子无关–不在盒子范围时不显示); --视觉差demo</td>
</tr>
<tr>
<td><strong>background</strong></td>
<td>简写</td>
<td>可以只取一个值，其他的默认值显示(会覆盖)；size只能单独使用；空格隔开；顺序可以换</td>
</tr>
</tbody>
</table>
<h5>4.css边框属性–盒子模型</h5>
<h5>5.css浮动属性–盒子水平排列</h5>
<ul>
<li> <p>作用：定义网页中其他文本如何环绕该元素显示；<strong>让竖着的东西横着来</strong>(该样式浮动，后面的顶替原先位置，会依次排序)</p> <p>float:left;元素靠左浮动</p> <p> right;元素靠右浮动</p> <p> none;不浮动</p> </li>
<li> <p>清浮动</p> <p><strong>若前多者浮动完将后者挡住，要将其挡住内容重新显现出来，位置下移–计算高度差线：</strong></p> <p>①写固定高度(即已知前面的高度来固定<strong>前多者整体</strong>的高度)</p> <p>②清浮动 --只是改变元素的排列方式，该元素还是漂浮着的，不占据文档位置</p> <p>clear: none; 允许<strong>前面</strong>有浮动对象 <strong>–即放在后者样式中</strong></p> <p> :right; 不允许右边有浮动对象</p> <p> :left; 不允许左边……</p> <p> :both; 不允许有浮动对象</p> <p>③在两者中间(即后者前面加一个空盒子，不设宽高，clear:both;)</p> <pre><code class=){kind=link}
④bfc，让浮动元素计算整体高度
.cc{overflow:hidden;}
"cc">
aa bb
三、盒子模型
1、内边距（内容与边框之间的距离）
–背景色会蔓延到内边距–不支持负值
padding：20px、30px；
1个值,4个方向一样；2个值,上下 左右；
3个值,上 左右 下；4个值,上 右 下 左（顺时针方向）
padding-方向：XX；（top、bottom、left、right）
2、边框（包裹在内容的外部）
–背景色会蔓延到边框
- border：10px solid red;
style样式：solid 实线、double双实线、dashed方点状线、dotted圆点状线
- border-方向：XX；（top、bottom、left、right）
- --width、style、color三者可以分开定义四个方向
-
倒三角▼的实现：
{ width:0px；height:0px；(border里面的内容大小为0-0) border-top:20px solid black;（上面的三角形为黑色，其他三个为透明） border-top:20px solid transparent; border-top:20px solid rgba(0,0,0,0); border-top:20px solid transparent; top:-10px; （使▼放到中间） }
3、外边距（两个边框之间的距离）
–背景色不会蔓延到外边距–支持负值
- margin：20px、30px; （和padding一样）
--用XX：0，auto可水平居中，但不可以与 float: left;放在同一个div中
- margin-方向：XX；（top、bottom、left、right）
- *{padding：0；margin：0；}
-
特性：1、兄弟关系，两个盒子外边距合并问题：
①垂直方向，外边距去两者max；
②水平方向，外边距会合并+；
2、父子关系，给子盒子加外边距，但作用于父身上–解决（即要实现父盒子位置不动，子盒子动）：
①从子盒子–>给父盒子加内边距pading-top，+父盒子的height减掉相应大小（X）
②子盒子加外边框，+给父盒子设置边框 border: 1px solid green(transparent透明的)；
③子盒子加外边框，+给子盒子/父盒子加浮动 float:left;（是两者不在同一个层面）
④子盒子加外边框，+给父盒子加 BFC overflow:hidden.
4、PS基本操作（–P62、63盒子–66溢出）
用ps可以量取出每个盒子的对应边框、边距、大小等，还能吸取颜色
- 图片放大缩小：ctrl+"+_" alt+鼠标滑动
- 图片移动：空格，鼠标变小手，拖动图片
- 调整出标尺：ctrl+r
- 截图：
①快捷键：选中区域----ctrl+c(复制)-----ctrl+n(新建图层)-------回车-------ctrl+v(粘贴)-----ctrl+s(保存)
②切片工具：选中区域---点击文件--存储为web所用格式（格式:仅限图像，切片:所有用户切片）
- 吸取颜色：吸吸笔--点击颜色/右击--获取十六进制
四、其他
1、溢出
overflow:visible; //溢出也会显示内容(默认) ------overflow-x: X轴溢出；------overflow-y: Y轴溢出；
| 其他属性 | 说明 |
|---|---|
| hidden | 隐藏（多余内容剪切） |
| scroll | 滚动（溢出内容以滚动方式显示，不管是否溢出都会有滚动条） |
| auto | 有溢出-滚动条；无溢出-正常 |
| inherit | 应遵从父元素继承overflow属性的值 |
-
修改滚动条样式----- : :webkit_scrollbar{ display:none; } //隐藏滚动条
-
溢后如何处理元素内的空白
white-space： normal默认值，空白被浏览器忽略
属性 说明 nowrap 文本不换行，同一行上继续，直到遇到换行符 pre 显示空格、回车、换行– 预格式化文本，保留编辑格式
pre-wrap 显示空格，回车，换行 pre-line 只显示回车，不显示回车、换行 inherit 隐藏 -----溢出省略号的实现：
white-space：nowrap； //不换行 overflow：hidden； //溢出部分隐藏 text-overflow：ellipsis； //显示… （clip裁断）
2、元素类型
-
块元素：会默认含有**{display:block、list-item;}**（矩形区域）—属性默认一行，自上而下排；宽度高度；可包裹其他元素
div、p(不可嵌套div)、ul、li、ol、dl、dt、dd、h1-h6等
-
行内元素：会默认含有**{display:inline;}**（行形式）—无宽高；可以横着排列
a、b、em、i、span、strong等
-span只能设置左右边距，不能设置上下边距
-
行内块元素：{inline-block;}—宽度；一行一行显示
img{}、input{}等
-
元素的相互转换（抽奖小功能.hide）
将属性display的值改掉：block–占据整行，显示整块内容；
inline–对应文字长度；none–隐藏
—二级菜单（嵌套< ul>，二级菜单.html）
注意控制的对象不一样–hover的位置不一样
3、定位
position：static;（默认值）------------top:50px;-----left:50px;
| 属性值 | 说明 | 文档流 | 偏移位置 |
|---|---|---|---|
| static; | 静态定位 | 默认 | 默认（50px–无效） |
| relative; | 相对定位 | 不脱离 | 相对于自己的初始位置移动（右下移动50-50） |
| absolute; | 绝对定位 | 脱离 | 直接定义距离左上角的距离：①当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏；②有父元素且父元素有定位，参照物是父元素 |
| fixed; | 固定定位 | 脱离 | 浏览器的当前窗口(很多右下角固定广告) |
| sticky; | 粘性定位 | 可以做吸顶效果，粘性定位是css3新增的，兼容性不好 |
4、锚点–点击后跳到该页面对应位置 a链接
"#锚点名字"> /*跳转的对应位置*/
"锚点名字"> /*点击位置*/
5、精灵图
CSS Sprites的原理（图片整合技术）（CSS精灵/雪碧图）
①将图片整合成一张背景图 ----{background:yellow url(./dabeijing.png);}–显示左上角的小区域
②显示对应位置的小区域，用.box1{background-position：-205px;-111px;}来实现背景图片的定位技术
优势：可以减少对服务器的请求次数，从而提高面的加载速度；可减小图片的体积。
6、宽高自适应、窗口自适应
导航栏、通栏布局、平均宽高度(根据内容来撑大小)
-
不写或者auto就是自适应----宽度自适应—{width:auto;}
-
高度自适应—{height:auto;}--------设置最小/大 高度/宽度{min-height：500px；}
-
浮动元素之父元素高度自适应----父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷
①给父元素加声明overflow:hidden;（缺点：会隐藏溢出的元素）
②在浮动元素下方添加空块元素，并给该该空元素添加声明< div style=“clear:both;” >
③万能清除浮动法
div:after{content:" "； //插入空的伪元素--默认为行内的
clear:both； //清除浮动
display:block； //改成块内元素的
width:0；height:0；
visibility:hidden；/overflow:hidden；} //占位 但不显示出来
伪元素：—不是标签也能显示增加的内容
选择符::after{content属性一起使用，定义在该对象后的内容}
div：：before{content属性一起使用，定义在该对象前的内容}
div：：first-letter：定义对象内第一个字符的样式
div：：first-line：定义对象内第一行文本的样式
窗口自适应–盒子根据窗口的大小进行改变：
:root/html, body{ height:100%;}
二/三栏布局： -----可以应用于各种宽度的浏览器
定左定右，中间定位：(注意顺序)
①先左右盒子浮动+定中间盒子距离窗口左右两边距离 {margin-left:200px; margin-right:200px;}
②三者都浮动+中间盒子的宽度要先定义 {width：calc(100% - 200px);} //- 左右有空格--宽度会改变
注：calc()函数：用于动态计算长度值 -----支持+ - * /运算
7、表单进阶2
-
"radio单选框" —一般用于注册页面、反馈页面中
你的性别"radio" name="sex" id="man" checked="checked"> /*一样的name表示是同一个框框内容，会相互制约，一起给后端；checked表示默认选中-可省略一样的英文*/ /*表示点击”男“字也是同样效果*/"radio" name="sex" id="woman"> -
"checkbox复选框" --其他都一样
-
"file上传文件/图片等" 和 "hidden隐藏字段"
"hidden" name\id="" value="带给后端的个人信息"> -
"image图片按钮"-代替提交按钮submit----点击按钮提交给后端
-
禁用— disabled、只读— readonly
"disabled">注册 "radio disabled">不满意 "text" readonly value="111111"> -
"select下拉菜单"
你的收获地址 -
"textarea多行文本输入框-文本域" —会有竖直方向的滚动条
textarea{width:300px; height:200px; resize:vertical; /*垂直方向重新设置大小，horizontal水平方向，默认both两个方向，none都不可随意拖动*/ } -
"fieldset字段集"–有分割线的小分组
fieldset{XXX；}
8、备注
-
默认后来者居上(层) ------{z-index:200;} 属性值谁大谁在上层显示
-
将行元素转化为块元素：①display：block；②绝对定位 absolute；③浮动 float：left；
-
元素水平垂直居中：
①margin：0 auto；--水平方向居中 ②{width:200px;height:200px; position:absolute; top:50%；left:50%; /*先移到窗口/窗口50%-50%的位置,再往回移盒子一半宽一半高*/ margin-left:-100px； margin-top:-100px； } --水平垂直居中 ③{text-align:center; --文本、图标水平居中 line-height:50px;(=height)} --垂直居中 ④父盒子{display:flex;} .center{margin:auto;} --水平垂直居中
-
浮动和绝对定位的区别：float：半脱离，文字环绕效果
absolute：全脱离，不会出现文字环绕效果
-
一般都加 :
-
大背景显示qq空间动态图：大盒子.box{background-image: url(./a.png)；}
-
行内块图标和文字对齐，让后面文字垂直居中：
span{vertical-align:middle;}
-
HTML5+CSS3新增
一、HTML5新增
1、新增语义化标签
—容易给其他开发者或爬虫看的
header{XXX} section{YYY} ---需要自己加样式
header
| 元素 | 说明 |
|---|---|
| header | 页面(某页面的块^)的整个头部 |
| footer | 页面(某页面的块^)的整个底部脚注 |
| section | 整个页面的身体内容块 |
| nav | 页面中导航链接部分 |
| aside | 页面侧边栏 |
| article | 页面中一个个区和块 |
| figure | 独立的内容标签，配合figcaption来为其添加标题(第一个或者最后一个子元素的位置) |
| main | 页面中的主要内容(ie不兼容) |
2、音频标签、视频标签
–可替代flash(很多都不支持)
也可以使用CSS样式：video{XXX}