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标签
多练习才是王道!!!