<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
声明位于html标签最前面,定义文档规范
现在都用H5规范标准:<!DOCTYPE html>
<head>标签里面用来存放 title,meta,base,style,script,link,head标签中必须设置的标签是title
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
----------------------------
SEO:搜索引擎优化
----------------------------
title:作用:让网页拥有一个自己的标题,在seo中占很大权重
----------------------------
GB2312与UTF-8区别:GBK(国标扩),
UTF-收录了全世界所有语言的文字,范围:UTF-8>GBK,性能GBK>UTF-8,
UTF-8一个字符占3个字节,GBK一个字符占两个字节
----------------------------
没有语义的标签:div span
span特点:
1.一行里面可以放多个span标签
2.span的宽高由内容决定
div标签:
1、单独占一行
2、默认占一行
----------------------------
w3c三层分离标准:
html:结构
css:样式
js:行为
----------------------------
id选择器和类选择器的区别:
id名:相当于身份证号码(可以重复)
- 一个类名可以设置多个标签
- 一个标签可以设置多个类名
类名:相当于人的姓名(必须唯一)
- id名必须唯一
- 一个标签只能有一个id
css选择器命名规则:不能以数字开头,由数字和字母组成
通配符:* 匹配所有的标签
并集选择器:
- p,div,span{属性:属性值}
- p,.class{属性:属性值}
p.class{属性:属性值}
后代选择器:
div .son{属性:属性值}
子代选择器:
查找直接元素p:
.father>p{属性:属性值}
css三种样式:
行内样式(标签内),嵌套样式(head内),外联样式
<link rel="stylesheet" href="外联样式.css">,新建一个文件后缀叫.css,在里面直接写样式
三种样式的使用范围:
text三个属性:
text-indent:设置首行缩进,ex:text-indent:2em;
text-align:设置文本的位置, 取值:center,left,right
text-decoration:设置文本装饰,没有下划线。取值:none,line-through(删除线),underline(下划线)
magin:0 auto;设置容器水平居中
css三大特性:
1、继承性
子元素可以继承父元素的特性,body可以继承给div,div可以继承给p例:p标签样式继承body标签的样式
什么样的属性才可以继承,以text,font,line开头的属性都是可以继承的
写页面之前会通过给body设置一个字体,来将页面上所有标签都能继承这个属性
继承的特殊性:
a标签的颜色不能继承,如果一定要修改a标签的颜色直接作用在a标签上面
h标签的大小不能继承,如果一定要修改h标签的颜色直接作用在h标签上面
div的高度不设置由内容决定(没有内容那么高度为0), 宽度默认由父元素继承过来2、层叠型
是浏览器处理冲突的一个特性。
作用:如果一个属性通过两个选择器设置到同一个元素上面,那么这个时候一个属性就会将另一个属性层叠到。
如果多个属性通过两个选择器设置到同一元素,那么不会发生层叠
3、优先级
!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
变数:!important:优先级大于所有
计算组合选择器的优先级(权重):
后代,子代,并集,交集选择器,多个选择器组合以后的优先级
总结:权重是优先级的算法
优先级是层叠表现
background:
背景的连写形式:
background:background-color background-image background-repeat background-position
元素的显示方式:
块级元素:属性 display:block;
div,p,h1-h6,ul,ol,li,dl,dt,dd
- 单独占一行
- 默认宽度等于屏幕的宽度
- 可以设置宽高
行内元素:属性display:inline;
span,a,b,u,i,s,strong
- 一行里面可以显示多个
- 无法设置宽高
- 大小由内容决定
display:line-block
- 一行可以显示多个
- 默认大小由内容决定
- 可以设置宽高
使用块级元素完成导航:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
.bbg{
background: mediumpurple no-repeat center top;
height: 1500px;
}
.sbg{
width: 1000px;
height: 465px;
background-color: #5F9EA0;
margin: auto;
}
a{
width: 100px;
height: 50px;
background-color: #5F9EA0;
display: inline-block;
text-align:center;
text-decoration: none;
color: #C71585;
line-height: 50px;
font-size: 24px;
}
body{
text-align: center;
}
</style>
</head>
<body>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</body>
</html>