免费的网站软件体育网站模版
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">老腊肉<inputtype="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 yps用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一般都是跟pxperspective透视
要想出现效果，必须给父盒子添加perspectiverotate3d
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
获取他人字体图标
本地存储
