html & xhtml & html5
xhtml:
标签必须闭合` <p></p>`
标签以及属性必须小写 `<input type="text">`
标签中的属性必须要引号引起来 `<input type="text">`
用id代替name
<div id="wrapper"></div>
<div name="wrapper"></div> error
html5
canvas SVG websocket 本地存储
标签不区分大小写
允许属性值不加引号
允许部分属性的属性值省略
<input type="text" readonly>
<input type="text" readonly="readonly">
html -->xhtml(过渡版)—>html5（升级版）
语义化
语义化的好处：
- 利于开发调试和后期维护
- 利于seo
语义化分类：
-
标题语义化
- 一个页面只能有一个h1标签
- h1 -h6 之间不要出现断层
- 不要用h1-h6来定义样式（样式css的事）
- 不要用div代替h1-h6
-
图片语义化
alt 和title
figure和figcaption
alt 用于图片描述，给搜素引擎看，在图片无法显式的时候，页面会显示alt中的文字（必须属性）
title：图片描述，在鼠标移动到图片上时，会显示title内容（可选属性）
<img src="图片描述（搜索引擎看）" title="图片描述（用户看）" alt="">
图片+图注
figure
figcaption
- 表格语义化：
- 表单语义化：
label
fieldset legend
fieldset 表单元素分组
legend 用于定义某一组表单标签
使用fieldset元素的disabled可以禁用整个组的表单元素
换行符 只能用于段落换行
有序列表前的数字样式是固定的，一般使用无序列表
<ul>
<li><span>1</span>dcdc</li>
<li><span>2</span>www</li>
<li><span>3</span>www</li>
</ul>
- 其他语义化
样式只是改变标签的外观，但不会改变标签的语义
strong em
del ins
img标签：
如果图片想要被seo识别到 使用img标签
如果只是装饰作用 使用背景图片
css单位
px,%,rem,em
- px
- %
width height font-size 的百分比是相对于父元素“相同属性”的值
line-height 相对于父元素的font-size来计算的
vertical-algin 相对于当前元素的line-height值计算
- em
1em当前元素字体的大小 相对于当前元素的值，
em相对于当前元素的字体宽度
对于em，一般需要计算两次，第一次当前的font-size属性px值
当前元素其他属性（width，height，）px值
- rem
1rem等于**根元素**(html)字体的大小
body{ font-size: 62.5%}
/*1em=10px;*/
当前元素没有font-size会找父元素，如果没有，找祖先元素，祖先元素没有，那么就是浏览器默认的值16px
CSS特性：
继承性和层叠性：
继承性
继承属性的三大类：
- 文本相关属性 ：
font-size
font-weight
font-style
font
font-family
line-height
text-indent
word-spacing
- 列表相关属性
list-style-image
list-style-position
list-style-type
list-style
- 颜色相关属性
color
div{
color: red;
font-weight: bold;
}
<div>马多多
<a href="#">wuwuwu呜呜呜</a>
</div>
a标签的样式不是红色，a标签有默认样式，优先级比继承高，如果想要改变a标签的颜色，必须选中a标签进行操作才行
层叠性
`
样式覆盖
对于同一元素，如果重复定义了多个相同的属性，以最后一个为准 后来者居上
后来者居上：元素，属性，权重相同
`
CSS优先级
1 引用方式冲突
2 继承方式冲突
3 指定样式冲突
4 继承样式与指定样式冲突
5 !important
引用方式冲突
外部样式，内部样式 行内样式
行内样式>(内部样式==外部样式)
(内部样式==外部样式)--后来者居上
**继承方式冲突**
最近的祖先元素获胜
指定样式冲突
行内样式>id选择器> 属性选择器= 伪类= class选择器> 元素选择器= 伪元素> 通配符
1000 100 10 10 10 1 1 0
伪元素： ::after ::before
伪类： :hover
当前元素的样式发生冲突
选择器权重的计算只针对于指定样式（当前元素）。并不能用与继承
当继承样式和指定样式发生冲突的时候，**指定样式获胜**
继承样式与指定样式冲突
当继承样式和指定样式发生冲突，**指定样式获胜**
！important
优先级最高
p{color:red !important}
*/
CSS的引入方式：
- 行内式
- 内联式
- 外链式 需要被应用于多个页面 link导入
- @import
@import 先加载html再加载css，用户体验不好
而link是先加载css再加载html
CSS选择器：
元素选择器
id选择器
class选择器
群组选择器
M N M后代元素N 后代选择器
M>N M后代一级子元素N 子代选择器
M~N M同级N元素 （选中元素后面不包含前面的某一类兄弟元素） 兄弟选择器
M+N M元素相邻的下一个元素N（M,N）同级 （选中元素后面不包含前面）的某一个相邻兄弟元素 相邻选择器
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 200px;
height: 800px;
}
li+li{
border-top: 2px solid red;
}
<ul>
<li>这是第1个元素</li>
<li>这是第2个元素</li>
<li>这是第3个元素</li>
<li>这是第4个元素</li>
<li>这是第5个元素</li>
<li>这是第6个元素</li>
<li>这是第7个元素</li>
</ul>
使用li+li 给li加border-top
浏览器之所以要存在默认样式，目的在于保证没有样式表的页面也能正常显式，
html元素的默认样式和他的语义挂钩，我们知道，一个页面在css裸奔下有很好的可读性，元素默认样式起的作用，有利于seo
盒子模型：
border:0 与border:none:
border:0 浏览器会解析渲染，边框隐藏掉
border:none 浏览器不会解析，不需要占用存储空间
外边距叠加
同级元素，父子元素 空元素
水平外边距不会叠加，margin-left margin-right
垂直外边距只有三种情况会叠加：
同级元素，
父子元素
空元素
叠加后的外边距高度：等于叠加前两个最大值
只针对block和inline-block 不包含inline 因为inline元素margin-top环绕margin-bottom无效
负margin技巧：
margin-right ， margin-bottom 被指定为负数，后续元素会被拉向指定方向
margin-left ， margin-top 被指定为负数，当前元素会被拉向指定方向
负margin技巧
图片与文字对齐
vertical-align: text-bottom;
// margin: 0 3px -3px 0;
自适应两列布局
#main,#slider{
float: left;
color: white;
}
#main{
width: 100%;
margin-left: -200px;
background-color: green;
}
#slider{
width: 200px;
background-color: red;
}
<div id="main"><p>主体部分，,k,kk上网环境说我水水水水谁谁谁化学</p></div>
<div id="slider">侧边栏</div>
元素垂直居中
.outer{
position:relative;
}
.in1{
position:absolute;
top:50%;
left:50%;
width:100px;
height:100px;
margin-top: -50px;
margin-left:-50px;
}
<div class="outer">
<div class="in1"></div>
</div>
tab选项卡
overflow visible hidden scroll auto
overflow :hidden 清除浮动
overflow默认属性 visible
.outer{
width: 300px;
border: 1px solid #000;
overflow: hidden;
}
.in1{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
.in2{
width: 100px;
height: 100px;
border: 1px solid green;
float: right;
}
<div class="outer">
<div class="in1"></div>
<div class="in2"></div>
</div>
使用clear属性来清除浮动的缺点，增加了一个多于标签
overflow：hidden 是一个小炸弹，超出父元素的部分会被隐藏
display属性
块元素：
1 独占一行
2 内部可以容纳其他块元素/行元素
3 定义width height
4 定义四个方向的margin
行内元素：
可以和其他行内元素位于同一行
行内内部可以容纳其他行内元素 ，不可以容纳块元素
margin-left margin-right有效，margin-top margin-bottom无效
无法定义宽高
行内块元素：
可以定义宽高
可以和其他行内元素位于同一行，
具备行内元素的特点，也具备块元素的特点
img和input是行内块元素
ie6,7 不识别inline-block
*{
display: inline-block;
}
*{
zoom:1;
}
display：table-cell
让元素以表格单元格的形式呈现
图片垂直居中于元素
div{
display: table-cell;
width: 150px;
height: 150px;
border: 1px solid #000;
vertical-align: middle;
text-align: center;
}
img{
width: 100px;
height: 100px;
/*vertical-align: middle;*/
}
div+div{
border-left: none;
}
<div><img src="../img/sky.png" alt=""></div>
<div><img src="../img/pkq.jpg" alt=""></div>
<div><img src="../img/youyouyou.jpg" alt=""></div>
等高布局
#wrapper{
display: table-row;
}
#box-img{
display: table-cell;
text-align: center;
width: 150px;
vertical-align: middle;
border: 1px solid #000;
}
#box-img img{
vertical-align: middle;
width: 100%;
height: 120px;
}
#content{
display: table-cell;
width: 200px;
text-align: center;
padding: 10px;
border: 1px solid #000;
border-left: none;
}
<div id="wrapper">
<div id="box-img">
<img src="../img/sky.png" alt="">
</div>
<div id="content">
<span>能做一份笔试面试题集锦分享给大家，我和方方也一直想把这个事情做好。
但两个人的力量太微弱，于是想到在 github 上建立公共项目，
汇集更多前端爱好者的力和大家肯定成绩说说星空萨菲就流口水财经网；乐彩网陈会计课程量一起收集前端常见笔试面试题，
作为送给前端入门的小伙伴、需要找工作的小伙伴一份新年礼物?</span>
</div>
</div>
自动平均划分元素，并且在一行显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul,.outer{
list-style-type: none;
display: table;
width: 300px;
}
li,.in{
display: table-cell;
height: 60px;
line-height: 60px;
color: white;
text-align: center;
}
.outer .in:nth-child(1){
background-color: orange;
}
.outer .in:nth-child(2){
background-color: gray;
}
.outer .in:nth-child(3){
background-color: darkred;
}
.outer .in:nth-child(4){
background-color: darkcyan;
}
ul li:nth-child(1){
background-color: red;
}
ul li:nth-child(2){
background-color: green;
}
ul li:nth-child(3){
background-color: yellow;
}
ul li:nth-child(4){
background-color: blue;
}
ul li:nth-child(5){
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="in">1</div>
<div class="in">2</div>
<div class="in">3</div>
<div class="in">4</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
/*
父元素display：table
子元素 display：table-cell
平均划分父元素
*/
</script>
去除inline-block元素间距
当行内块元素换行时，会产生间隙，img，input本身就是行内块元素
给父元素添加font-size：0 清除间隙
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
