B站pink老师HTML+CSS笔记
HTML部分
浏览器内核
web标准
vscode的一些插件推荐
标题标签
记住h1标题最大就行
段落和换行标签
<br />不会有垂直间距
文本格式化标签
图片标签及路径
<img src ="" alt="" title="" width="" />
如果出现多个上一级可以这样写
<img src = "../../.."/>
超链接标签
内部链接,需要注意所写的网页与你要跳转的网页的路径问题。
下载链接,<img src = "img.zip">,或者是可执行文件.exe
锚点链接,里面只能加ID,用类选择器不行的!
注释
单行注释 Ctrl+/
多行注释 Ctrl + shirt +/
特殊字符
表格
合并单元格
无序列表
去掉里面的小圆点,后面会用到
list-style:none
有序列表
自定义列表
表单
input
<input type = "file" />用来上传文件
在单选按钮<input type = "radio" name = ""/>,必须带有name,否则可以多选
label
select下拉元素
textarea标签
注册页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
</head>
<body>
<form action="xx.php" name="注册" method="post">
<h4>青春不常在,抓紧谈恋爱</h4>
<table width="600px">
<tr>
<td>性别</td>
<td><input type="radio" name="sex" id="man" checked="checked"><label for="man"><img src="../images/man.jpg"
alt="" >男</label>
<input type="radio" name="sex" id="woman"><label for="woman"><img src="../images/women.jpg"
alt="">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td><select name="year" id="">
<option value="">--请选择年--</option>
<option value="">1999</option>
<option value="">2000</option>
<option value="">2000</option>
<option value="">2001</option>
</select>
<select name="month" id="">
<option value="">--请选择月--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="day" id="">
<option value="">--请选择日--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
</td>
</tr>
<!-- 所在地区 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 婚姻状况 -->
<tr>
<td>婚姻状况 </td>
<td><input type="radio" name="merry" checked>未婚<input type="radio" name="merry">已婚<input type="radio"
name="merry">离婚</td>
</tr>
<!-- 学历 -->
<tr>
<td>学历</td>
<td><input type="text" value="小学"></td>
</tr>
<!-- 喜欢类型 -->
<tr>
<td>喜欢的类型</td>
<td><input type="checkbox">妩媚的
<input type="checkbox">可爱的<input type="checkbox">小鲜肉<input type="checkbox">老腊肉<input
type="checkbox">都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td> <textarea name="information" id="" cols="30" rows="4">自我介绍</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td>
</tr>
<tr>
<td></td>
<td><a href="#">我是会员,立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁,单身</li>
<li>抱着严谨的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
用来查阅知识(菜鸟教程也可以的)
CSS部分
css是层叠样式表(Cascading Style Sheets)的简称,有时我们称为css样式表或级联样式表。css也是一种标记语言
css语法规范
选择器的分类
标签名称 :{
标签属性 :属性值;
标签属性 :属性值;
标签属性 :属性值;
}
作用:将某一类标签全部选择出来,比如所有的<div>标签。
优点:可以快速为页面的同类型标签设置样式。
缺点:不能设计差异化样式,只能选择全部的当前标签。
类选择器
相同的属性写在一个类中,不同的属性写在不同的类中
id选择器
通配符选择器
font字体
让倾斜的文字不倾斜 font-style : normal
如果遇到 font: 12px/28px 'Microsoft YaHei';
这个说明 12px是字体大小,28px是行高
文本样式
css的引入方式
Emmet语法
例如: div{hello} 就会生成 <div>hello</div>
我个人感觉这个没啥用
自动格式化代码
复合选择器
后代选择器
子选择器(亲儿子)
(1) <style>
ul>li {
color: blue;
}
</style>
<body>
<ul>
<li>1231</li>
<li>1231</li>
<li>1231</li>
</ul>
</body>
里面所有li都会变色
(2)
<style>
ul>div {
color: blue;
}
</style>
<body>
<ul>
<li><div>123</div></li>
<li>1231</li>
<li>1231</li>
</ul>
</body>
div不会变色,因为div不是亲儿子
并集选择器
伪类选择器
不一定都是a标签,需要添加伪类选择器的标签都可以
例如,div:hover(就是当鼠标经过div时就会触发style)
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:hover {
background-color: red;
}
</style>
</head>
<body>
<div></div>
我是这样记得,买了lv包后,人HAHA大笑
元素类型 块元素
p标签里面放块级元素,会多生成一个p标签
行内元素
行内块元素
img、input、td都是行内块
元素转换
转换为块级元素:display:block
转换成行内元素: display:inline
转换成行内块: display:inline-block
元素垂直居中
如何让元素垂直居中,设置行高与高度一致
line-height等于height,就可以实现文字垂直居中
如果行高大于盒子高度,文字偏下。若行高小于盒子高度,文字偏上。
背景颜色
背景图片
背景平铺
图片位置
背景图片滚动
背景半透明
前面三个决定颜色,最后一个决定透明
取到0就是全透明,1就是不透明
CSS三大特性
CSS三大特性:层叠性,继承性,优先级
层叠性
就近原则,谁离结构近就选谁
继承性
优先级
注意:权重没有进位!!!
就算给父级指定样式加上!important,子元素权重继承的也是0
盒子模型
边框
border-style 边框的样式 solid实线边框 dashed虚线边框 dotted点线边框
边框会影响盒子大小
内边距padding
(1)在我们给盒子指定padding值之后,会撑大盒子。
解决方案:用width/height减去多出来的padding就保持盒子大小不变
(2)当我们没有给盒子指定width/height属性时,此时的padding就不会撑开盒子大小
外边距margin
通过外边距让盒子水平居中
外边距margin合并
重点记住给父元素添加 overflow:hidden
这样可以保证盒子大小不变
浮动的盒子不存在外边距合并
清除浏览器的内外边距
ps的一些基本操作
pink老师总结:
(1)布局要用不同的盒子:标签都是有语义的,合理的地方用合理的标签。比如,产品标题用h,文字段落用p
(2)给每个盒子起类名,可以更好地找到这个盒子,也便于后期维修
(3)margin和padding在大多情况下可以混用,两个各有优缺点,根据实际情况选择
CSS3新增属性
圆角边框
border-radius:长度
(通过测试发现,radius和盒子的高height有关,当长度到达高的一半就不再变化)
盒子阴影
文字阴影
浮动
网页的三种排列方式:1、标准流 2、浮动 3、 定位
浮动
浮动除了不占位置外,两个相邻元素之间没有空隙。
如果用行内块的话,两个元素存在空隙,消除不了
浮动注意事项
前面的标准流已经占了位置,后面的元素浮动,只会让后面的元素占浮动元素的位置
清除浮动
为什么要清除浮动呢?
在一些情况,比如商品栏这种,不方便给高度,但是子盒子浮动后不占有位置,最后导致父盒子高度为0,就会影响下面的标准流盒子。
额外标签法
清除浮动的方法有:
1、额外便签法,也称隔墙法,是W3C推荐的做法(!!!)
2、父级添加overflow属性
3、父级添加after伪元素
4、父级添加双伪元素
额外标签法
<style>
.clear {
clear: both;
}
</style>
<div class="box">
<div class="damao">打毛</div>
<div class="ermao">二毛</div>
<div class="clear"></div>
</div>
父级添加overflow
父级添加:after伪元素
父级添加双伪元素
常见的图片格式
ps切图方式
css样式顺序(建议)
定位
静态定位
相对定位
注意:相对定位不脱标,他原来的位置继续保留
见下图
绝对定位
子绝父相
固定定位
以浏览器为参照点
粘性定位(了解)
定位叠放
绝对定位居中
定位特性
元素的显示与隐藏
display
/* 当鼠标经过大盒子,里面的.top就显示 */
.bigbox:hover .top {
display: block;
}
visibility
overflow
css高级
精灵图
为什么需要精灵图?
为了有效的减少服务器接收和发送请求的次数,提高网页的加载速度,于是就出现了CSS精灵图
原理:将网页中很多小的图片整合到一张大的图片之中,这样向服务器请求一次就行
background:url() no-repeat x y;
或者单独拿出来 background-position: x y
ps用f8就可以查看所写区域的XY坐标
字体图标
字体图标网站
字体图标的使用
所谓的根目录就是你写的网页的目录,其实不放也行,不过在应用的时候,需要改路径,比较麻烦
将这些代码引入css里面
将你要用到的字体图标引入HTML中,然后在css中给所用到的标签引入字体样式,就完成了
CSS三角
三角的做法:
让盒子的高度和宽度都变为0,任意一个边框给大小和颜色,其他transparent透明
CSS用户界面样式
鼠标样式cursor
轮廓线outline
防止文本域拖动
img与文本的位置
溢出文字省略
margin负值运用
文字围绕图片(浮动元素)
在做文字在右,图片在左的样式,可以巧妙运用浮动,浮动本身产生的起源就是围绕文字,所以图片不会压住文字
行内块的巧妙运用
像这样的,可以给外面盒子添加text-align:center,直接就可以居中
css三角巧妙运用
和之前的三角形差不多,只不过这个需要设置两个边的长度,需要另一个来压
.box {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 30px 10px 0 0;
}
HTML5新特性(ie9+)
新增语义化标签
多媒体标签
使用<video>元素。尽量使用MP4格式;谷歌还需要添加muted=“muted”
<video src= "" controls="controls"></video>
新增input表单
必须添加form表单域
CSS3新特性(ie9+)
属性选择器
结构伪类选择器
结构伪类选择器前面的标签是你要选择的标签,不是他的父级
nth-child和nth-of-type基本用法差不多,但是执行的顺序不同
伪元素选择器
CSS3盒子模型
CSS3图片模糊
CSS3过渡
谁做过渡就给谁加!!!
如果要使用多个属性,用逗号隔开,
transition:过渡属性 花费时间 运动曲线 何时开始 ,过渡属性 花费时间 运动曲线 何时开始
网站favicon图标
制作网站图标的三个步骤:
(1)先选取你要用的图标,可以是png,jpeg,jpg,gif
(2)登录http://www.bitbug.net,将你所选取的图片转换成ico格式,然后下载下来
(3)在HTML<head></head>标签内引入<link rel="shortcut icon" href="图标的路径" type="image/x-icon">
TDK三大标签SEO优化(了解)
常见模块命名
logoSEO优化
网站上传服务器
http://free.3v.do(这个网站现在需要付费,10块)
1、去可以注册网站账号的地方注册
2、一定要记住自己的主机名,用户名。密码和域名
3、利用相关的ftp软件,将自己的网站上传到远程服务器(这个里面就要用到你的主机名用户、密码啥的)
4、可以在浏览器上通过你的域名访问你的网站了
CSS3 2D转换
translate移动
rotate旋转
旋转中心点transform-origin
缩放scale
scale不会影响下面的盒子!!
transform注意事项
动画animation
动画分为两步;先定义再调用
定义:
@keyframes 动画名 {
0%{
width:100px
}
100% {
width:200px
}
}
(里面的0%、100%可以用from和to来代替)
然后在你需要用到的地方调用
透明度opacity
3D转换
translate3d
注意:里面不能省略任意一个属性值,没有就写0
transform:translate3d(0,0,100px)
translateZ一般都是跟px
perspective透视
要想出现效果,必须给父盒子添加perspective
rotate3d
rotateX
totateY
rotateZ
和我们的2d旋转差不多,也可以用左手定则来想一下
3d呈现transform-style
注意这个和perspective一样,都是写给父级元素
如果不加transform-style:preserve-3d就不会呈现3d效果(给父级)
浏览器私有前缀
移动web开发
meta视口标签
物理像素比
我们PC端的1px不一定等于移动端的1px,这之间存在着物理像素比
以上数据来自https://material.io/devices/
多倍图
由于存在着物理像素比,当我们把PC的页面拿到移动端,图片会被放大多倍,导致模糊,所以这儿要用到多倍图
background-size
单位如果写%,而且只写一个,那么另一个等比例缩放(注意:里面的百分比是相对父盒子来说)
cover是完全把盒子覆盖住。不会留白,但是图片可能显示不全;
contain是把宽度或者高度任一一个弄到最大,可能盒子会留白
移动端初始化css
box-sizing
特殊样式
流式布局(百分比布局)
flex布局
flex-direction
justify-content
flex-wrap
flex-wrap默认不换行,如果子盒子宽度大于父盒子,他就会缩小子盒子的宽度
align-items(单行)
align-content(多行)
flex-flow
背景色渐变(带前缀)
rem适配布局
rem
媒体查询
宽度最好从小到大写
响应式布局
Less
less导入另一个less
cssrem
安装完后,打开设置搜cssrem往下滑看到root font size,就可以设置1rem等于多少px了
响应式布局
//用媒体查询
@media screen and (max-width:768px){
//css代码
}
Bootstrap
1.布局容器
2.栅各系统
3.响应式工具
vw和vh
获取他人字体图标
本地存储
云寄1111: 手机端的在评论左边
云寄1111: 电脑端有目录
NicheLi: 目录