前端
1.html
#了解文件后缀.html
<!DOCTYPE html>
<html>
<head>
</head>
</html>
html:
标签：被<>包裹，以字母开头，可以结合合法字符（-，数字）能被浏览器解析的符号
指令<!>----><!doctype>注释<!---->
转义字符 ¥>
a.标签
#what:定义
<meta charset='utf-8'>
#why:标签有功能（换行，规定编码集），可以控制数据
body标签
h1~h6标题标签
块标签h1~h6 p独占一行
行内标签span i u b
功能标签<br><hr>
<a>超链接标签
<img src='' alt=''>图片标签
<table></table>表格
常用标签
#h1~h6|p|span|(h1代表页面标题)
#a(href|target)
#img(src|alt|title)
#ul>li|table
#form(重点:表单)
标签都有结束标识：
单标签：主功能（img)
双标签：主内容（要显示子标签）
css选择器的类型
基本选择器
1.标签选择器
2.属性选择器
3.id选择器
4.通用选择器
属性选择器
.c1 {
color red;
}
id选择器
#d1 {
color yellow;
}
标签选择器
span {
color： green;
}
css组合选择器
1.后代选择器
div span {
color： green;
}
2.儿子选择器
div>span{
color: green;
}
3.弟弟选择器
div~span
4.毗邻选择器
div+span
任何标签都有自己默认的属性id class
标签还支持自定义任意多的属性（可以让标签属性帮你携带数据）
属性选择器
1.
[password]{
color: red;
}
2.
[username='json']{
color: yellow;
}
3.
span[username='json']{
color: red;
}
分组选择器，组合选择器
#d1,.c1,p{
color: blue;
}
伪类选择器
标签有四种状态：
1.没有被点击过
a.link{
}
2.鼠标悬浮上面
a:hover{
}
3.被点击过不松手
a:active{
}
4.被点击过
a:visited{
}
5.聚焦
input:focus{
}
选择器优先级
1.选择器相同的情况下
选择器相同的情况下，遵循就近原则
2.选择器不同的情况
id选择器最高》类选择器》元素选择器
css样式操作
给标签设置长宽，只有块级标签才可以设置长宽，行内标签无法设置长宽。
<div>可以设置长宽
<span>不可以设置长宽
设置字体颜色
font-size
font-family
font-weight
rgba调节颜色的透明度
文字属性
p{
text-align:left;
text-align:center;
}
文字装饰
text-decoration:underline;
text-decoration:none;不加装饰，取消连接的下划线
首行缩进
font-size=24px;
text-indent:48px;
背景属性
background-color:bule;
background-image:url("1.png")#图片
background-repeat:no-repeat;#图片是否重复
background-position:center;#图片位置
background-attachment: fixed;
支持简写
background:url('1.png') red no-repeate center center;
边框
上下左右
border-top: 5px solid red;
border-left: 5px solid red;
border-bottom: 5px solid red;
border-right: 5px solid red;
边框位置：边框粗细 边框样式 边框颜色（顺序没有关系）
统一设置所有边框的形式
border: 5px solid red;
举例：画圆
border: 1px solid black;
background-color: blueviolet;
height: 400px;
width: 400px;
border-radius: 50%;
#display属性
display:inline #将块级标签变成行内标签
举例
<style>
.c1{
width: 50px;
height: 50px;
background-color: blueviolet;
display: inline;
border: 5px red solid;
}
.c2{
width: 50px;
height: 50px;
background-color: aqua;
border: 5px solid blue;
display: inline;
}
</style>
</head>
<body>
<div class="c1">你好</div>
<div class="c2">搭建</div>
</body>
将行内标签改为块级标签
.c1 {
border: 5px yellow dashed;
display: block;
}
.c2{
border:5px red dashed;
display: block;
}
标签既有块级属性又可以设置行内属性
display:inline-block;
display:none#隐藏属性，位置也不在 ，只能后台查看
visibility:none#隐藏属性，位置还在
盒子模型
margin:#调标签与标签之间的距离
margin:15px;#只写一个参数，所有的都是10
margin-top
margin-right
margin-left
margin-bottom
pedding:#调整文本内容与边框之间的距离
pedding-top
pedding-lef
pedding-right
pedding-bottom
浮动
在css中，任何元素都可以浮动，float
float:left;
float:right;
浮动的特性：浮动的元素是脱离文档流的，原来的位置会让出来。
浏览器会优先展示文本内容，字体不会被覆盖
消除浮动的特性：
clear清除浮动带来的影响
.clearfix:after{
content:'';
clear:both;
display:block;
}
