HTML
1.
html中的lang="en"属性:
a.语言是英文language=english
b.告诉搜索引擎爬虫，我们的网站是关于什么内容的
en是关于英文内容
zh是关于中文
2.
SEO--搜索引擎技术
3.标签：
p标签：
pragraph--段落
h1-h6标签：标题标签
独成一行；更改字体大小；加粗
strong标签：加粗标签；em标签：斜体字体
del标签：中划线标签，商品打折的原价
address标签：地址标签 成段展示 + 斜体（<p><em></em></p>）
div标签：分块
span标签：
空格：文本分隔符（并不是真正的一个空格）
html编码格式： (空格) <(<) >(>)
回车：<br>换行
有序列表：<ol type="1" reversed="reversed" start="2"><li></li></ol>
type: 1 a A I(大写罗马数字) i(小写罗马数字)
reversed="reversed" 逆序排序
start="2" 从第几个开始排
无序列表：<ul type="disc"><li></li></ul>
type: disc(默认实心圆) square(方块) circle(空心圆)
img标签：图片标签 单标签
src:图片地址(网上的url;本地的相对路径;本地绝对路径)
alt：图片占位符(图片加载不出来时显示的文字)
title:图片提示符(鼠标放上去时提示的文字)
a(anchor--锚)标签：超链接
a.超链接 href="www.baidu.com"
b.锚点 href="#id"
c.打电话 href="tel:15617698485"(移动端)
href="mailto:759054522@qq.com"发邮件
d.协议限定符：href="javascript:"
href：链接地址 #id(类似回到顶点)
form(表单)标签：发送数据
<form method="get/post" action="">
<input type="text" />(输入框)
<input type="password" />(密码框)
<input type="submit" />(提交按钮)
<input type="radio" />(单选框)
</form>
select标签：下拉菜单
<select name="">
<option></option>
<option></option>
<option></option>
</select>
CSS
1.主流浏览器及其内核：
浏览器：shell + 内核
IE trident
Firefox Gecko
Google Chrome Webkit/blink
Safari Webkit
Opera presto
2.注释
<!-- -->
3.html + css + javascript (结构 + 样式 + 行为相分离)
4.引入css
a.行间样式
<div style="width:100px;height:100px;"></div>
b.页面级css
写在head标签中间<style></style>
c.外部css文件：单独的css文件
在需要的html文件中用link引入：
<link rel="stylesheet" type="text/css" href="./index.css">
5.css选择器
选择器的优先级顺序：(css权重---256进制)
!import Infinity(正无穷)
行间样式 1000
id选择器 100
class选择器|属性|伪类 10
标签|伪元素 1
通配符 0
!import > 行间样式 > id > class | 属性选择器 > 标签选择器 > 通配符
a.id选择器
#id名字
<div id="demo"></div>
<style type="text/css">
#demo{
}
</style>
b.class选择器
.class名
<div class="demo demo2"></div>
<style type="text/css">
.demo{
}
</style>
c.标签选择器
标签名称(作用于所有的这个标签)
<div class="demo demo2"></div>
<style type="text/css">
div{
}
</style>
d.通配符
*(选中所有的标签)
<style type="text/css">
*{
}
</style>
f.属性选择器
<div class="demo demo2"></div>
<div class="demo demo3"></div>
<style type="text/css">
[class]{(有该class名称的标签都能选择到)
}
</style>
<div id="demo">
<em>123</em>
<strong>
<em>456</em>
</strong>
</div>
1).父子选择器/派生选择器:
div em{
//同时选择到123 456
}
div strong em{
//选择到456
}
or
.demo stong em{
//选择到456
}
2).直接子元素选择器:
div > em{
//div下的直接子元素(只能选择到123)
}
3).并列选择器:
<div class="demo">123</div>
<span class="demo">456</span>
123背景颜色变色，如何解决？
div.demo{
//class=‘demo’的div被选择
//解决上面一个问题
}
4).分组选择器：(,分开)
em,
strong{//同时作用于em元素和strong元素
background-color: red;
}
5).伪类选择器：
<a href="www.baidu.com">百度一下</a>
a:hover{
//鼠标移入时所显示的样式
}
or
[href]:hover{
//鼠标移入时所显示的样式
}
6).伪元素选择器：
<span>123</span>
span::before{
}
选择器权重计算问题：
<div id="idDiv" class="classDiv">
<p id="idP" class="classP"></p>
</div>
<style type="text/css">
#idDiv p{//权重相加 100 + 1(101)
background-color: red;
}
.classDiv .classP{//权重相加 10 + 10(20)
background-color: green;
}
</style>
问p标签的背景颜色是什么？red? green?
：对应选择器权重相加最大的应用样式，因此red
<style type="text/css">
#idDiv p#idP{//权重相加 100 + 1 + 100 (201)
background-color: red;
}
</style>
6.浏览器面对父子选择器的css查找顺序，从左往右？从右往左?：
从右往左找--快
div ul li p span{
//先找span--p--li--ul--div
}
7.颜色表示方法：
a.纯英文单词
b.颜色代码
# + 6位16进制
c.颜色函数
rgb(0-255,0-255,0-255)
8.border:
利用四条边画三角(width,height都为0)
9.属性：
text-align:left;//文本对其方式
line-height = height;垂直居中
text-indent:2em;//首行缩进
单位：绝对单位/相对单位
px：一个像素只能表示一种颜色；一英寸垂直能放的像素点数表示分辨率
em:1em = 1 * font-size;
text-decoration:none;//文本中的划线样式
cursor:;//光标所表示样式
z-index:1/2/3;//层面上越靠近你自己（谁覆盖谁；只作用于position）
10.行级元素/块级元素
inline inline-block --> 都叫文本类元素
具有文本的属性
决定元素的属性:
display:inline/block/inline-block;
行级元素 内联 inline:内容决定元素所占位置；不可以通过css改变宽高
span strong a em del
块级元素 block：独占一行；可以通过css改变宽高
div p ul li ol form
行级块元素 inline-block：内容决定大小；可以改宽高
img
凡是带有inline的元素，都有文字特性
解决图片中间有空格问题：（下面四张图片中间存在空格问题）
<img src="this.jpg">
<img src="this.jpg">
<img src="this.jpg">
<img src="this.jpg">
这样解决：
<img src="this.jpg"><img src="this.jpg"><img src="this.jpg"><img src="this.jpg">
11.（编程思想）可以先定义功能，后写html
12.标签选择器为了设置默认值（自定义标签样式/设置刚出生的样式）主要并不是为了选中该元素
13.盒子模型
14.定位：
position:absolute;//绝对定位(系统内部会将该元素改为inline-block)
配合left;top;使用
特点：
a.脱离原来位置进行定位（相当于在不同的层位置）
b.相对于最近的有定位的父级进行定位（都没有的话相对于文档进行定位）
position:relative;//相对定位
配合left;top;使用
特点：
a.保留原来位置进行定位（但是也是不通层位置）
b.相对于自己出生的位置进行定位
position:fixed;//固定定位
总结：
relative用作参照物，absolute用来真正的定位
15.margin塌陷 + margin
bfc：block format context（每个盒子都有固定的渲染方式；bfc可以改变该盒子的bfc(渲染方式)）
如何触发一个盒子的bfc：
a.postion:absolute;//绝对定位
b.display:inline-block;//行级块元素
c.float:left/right;//浮动
d.overflow:hidden;//溢出部分隐藏
父子嵌套垂直方向的margin重合（取最大的）--margin塌陷
解决方式：触发bfc；或者使父亲盒子加上border也可以（但是这种方式不一定满足需求，有些项目需求是不能加border的）
兄弟结构垂直方向的margin是合并的---margin合并
可以通过触发bfc解决，但是实际上我们不解决（没有意义）
16.浮动模型
float:left/right;(系统内部会将该元素改为inline-block)
浮动元素产生了浮动流；
所有产生浮动流的元素，块级元素看不到他，产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
clear:left/right/both;//清除浮动流(块级元素这个属性才能生效)
浮动最原始的用法：报纸排版（文字环绕图片）
17.单行文本溢出显示...
white-space: nowrap;//禁止文字超出容器换行
over-flow: hidden;//溢出隐藏
text-overflow:ellipsis;//显示...
18.多行文本溢出显示...
不依靠技术实现，手写...
19.图片替换文本
a.
text-indent:;//缩进整个容器的宽
over-flow:hidden;//溢出隐藏
whit-overflow:nowrap;//不换行
b.
padding-left:;//整个容器的宽
over-flow:hidden;//溢出隐藏
20.特殊点：
行级元素只能嵌套行级元素
块级元素可以嵌套所有元素
特殊规定：p---块级元素 div---块级元素
p下不能套div（块级元素）
a标签不能套a标签
多练习才是王道！！！
3720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
