HTML （Hyper Text Markup Language 超文本标记语言）
标签大小写不区分，默认是小写
国家标准编码：GB2312
<!DOCTYPE html> <!-- 网页声明-->
<html lang="en"> <!--根元素 -->
<head> <!--头部-->
<meta charset="UTF-8"> <!-- 原标签 编码格式 让写的变为中文 -->
<title>Title</title> <!--标题 -->
</head>
<body>
</body>
</html>
标签
标签分为两大类：块级元素 、行级元素 （网页展示的样子和你书写的格式没有关系）
一、块级元素
特点：独占一行
1、h 元素
<h1>ABCD</h1>
<h2>ABCD</h2>
<h3>ABCD</h3>
<h4>ABCD</h4>
<h5>ABCD</h5>
<h6>ABCD</h6>
image.png
2、p 元素
<p>这是 p 元素，是块级元素</p>
image.png
3、div 元素
<div> 这是 div 元素</div>
4、ul 元素 (ul 、li 都是块级元素）列表元素
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
image.png
注释：
<!-- 注释-->
二、行级元素
1、span 标签
(回车和空格无论按多少下，都代表一个空格)
<span>abcd</span>
<span>1234</span>
image.png
2、纯文本是行级元素
3、a 标签（可以跳到其他网站上去）
<a href="http://www.baidu.com" target="_blank" >百度</a>
<!-- href 属性名 = “属性值” 是 a 标签独有的
target="_blank" 重新打开一个网页，没有就在原有网页上覆盖打开-->
image.png
4、i 元素
<i>斜体字</i>
image.png
5、label 元素
<label> </label>
6、img 元素
<img src="1.jpg" height="300px" width="300px">
<!-- height="300px" width="300px" 是 img 专有属性-->
7、strong
加粗字体
<strong>我亲爱的王子大人</strong>
块级元素可以嵌套块级元素或行级元素，行级元素不能嵌套块级元素
转义字符
1、空格： 
CSS
1、选择器
- id 选择器
#d{
width: 200px;
height: 200px;
background: rebeccapurple;
}
- 元素选择器
h1{
font-size: 28px;
color: aqua;
}
- 类选择器
.c{
height: 100px;
background: yellowgreen;
}
优先级：
id 选择器 > 类选择器 > 元素选择器
如果ID选择器和类选择器与元素选择器对应同一个元素设置样式，她会先根据优先级进行，然后才使用元素选择器中ID选择器和类选择器没有的样式。
HTML 文件引入样式
<link href="first.css (css 文件名）" rel="stylesheet">
一个 HTML 可以引入无数个 css 样式
一个元素可以使用多个类，类与类之间用空格间隔，
<p class="c d"></p> //起作用的是 d
组合选择器
- 带空格
div p{ //空格后面代表子元素
background: green;
height: 100px;
}
- 不带空格
p.c{ //类为 c 的 p 元素 （两个同时作用）
height: 100px;
background: cornflowerblue;
}
2、属性
1.宽高
width: 60%; 或者
width: 100px;
height: 100px;
- 块级元素：
如果没有设置属性宽高，则默认宽为整个页面的宽，高度以内容物的高度为主。
width：% 用只能给宽度用，高度不能用。且以父元素的百分比为主 - 行级元素：
宽和高属性对行级元素不起作用，宽和高以内容物大小决定.
2.背景
- 背景颜色
background-color: #FFFFFF;
background-color: rgb(255,0,0); //红，绿，篮 取值（0~255）
background-color: rgba(255,0,0,0.1); //设置透明颜色，取值 (0~1)
- 背景图片
background-image: url("1.jpg"); //宽高平铺整个元素
background-repeat: no-repeat /repeat /repeat-x /repeat-y; //使图片不重复/重复/横向重复/纵向重复
background-position: center bottom; //第一个定左右，第二个定上下
background-position: 10px 10px; //第一距离左面的位置，第二个距离上面的位置
background-position: -200px -400px; //可以截图
background-position: 40% 10%; //第一个距离左边的距离，第二个距离图片本身的距离
以上可以合在一起写为：
background:red url("1.jpg") no-repeat 0 0; //背景颜色 图片路径 是否重复 具体位置
3.边框
border: cornflowerblue 1px solid / dashed; //边框颜色 粗细 线形（实线/虚线）
border-bottom: greenyellow 2px dashed; //底部线的线形，还可以是上线，左线，右线
border-radius: 500px; //设置矩形角的弧度
4.字体
color: black; //字体颜色
font-size: 18px; //字体大小
font-family: 楷体; //字体样式
font-weight: bold; //字体粗细
text-align:center; //文字居中
text-decoration: underline; //文字加下划线
text-decoration: line-through; //文字加穿透线
text-indent: 20px; //文字缩进
5.盒子模型
-
margin（元素与元素的距离或者是元素与他父元素的距离）
margin:10px ; //上下左右都是10
margin:10px 20px 30px 40px; // 上 右 下 左
margin:10px 20px ; // 上下 左右
margin-left:-10px ; //负值向反方向移动
margin:auto; //子元素的位置在父元素居中
注意：内部元素要居中必须要有宽度
-
padding元素的内容与边框的距离 （会引起元素的撑大）且没有负值。
padding-left: 30px; //距离左边框的距离为30
有的元素自带边框距，消除边框距用以下：
*{
margin: 0;
padding: 0;
}
6.定位
块级元素和行级元素都可以使用绝对定位
- 静态定位
position: static; //默认值。没有定位，元素出现在正常的流中
- 绝对定位
position:absolute; //绝对定位，使元素摆脱文档流的控制（飘起来了，飘到了右下角）
right: 0; //具体定位
bottom: 0;
z-index: 500; //索引值取值范围（-999~999）指元素飘的高度
元素居中：
position: absolute;
left: 50%;
margin-left: -200px; //大小为宽度的一半
让元素占满整个屏幕，没有滚动条
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
- 相对定位
相对于原来的位置移动，不脱离文档流,没有飘起来。
position: relative; //只有 left，top 两个可以用
left: 20px;
top: 20px;
- 窗口定位（固定定位）
会脱离文档流，相对的是整个窗口。
position: fixed;
left: 0;
top: 100px;
子绝父相
子元素在父元素内部跑。
子元素是绝对定位，父元素是相对定位。
子元素也可以是绝对定位，也可以是固定定位。子元素就在定位过的父元素中跑，若没定位，就在父元素的父元素找，直到找到定位过的父元素为止 ，就在定位过的元素中跑。
image.png
7、浮动
浮动会脱离文档流,但只能在这一行跑。
float: left;
float: right;
什么时候会停下来
1、遇到其他的浮动元素
2、遇到父元素
父元素没有高度的时候，高度是子元素之和。（除去浮动元素的高度）
- 清除浮动
clear: both; //清除上一层的浮动
8、展示
- 展示
display: block; // 能将行级变成块级元素展示
display: none; //元素不展示
display: inline-block; //块级元素变为行级，但保留宽高
- 鼠标展示
cursor: pointer; //小手
cursor: progress; //箭头加转圈
cursor: crosshair; //十字架
cursor: wait; //转圈
9、隐藏
给父元素加，去掉子元素溢出的部分
overflow: hidden; //让超出的部分隐藏起来
10、透明
opacity: 0.1; //让整个元素透明 （取值0~1）
image.png
11、伪类
鼠标移上去会变化
.a:hover{
background: red;
}
12、去除 li 标签前面的点
list-style: none;
13、文字加阴影
text-shadow: 3px 2px 4px #ffffff; //水平阴影的位置 垂直阴影的位置 模糊距离 阴影颜色
14、文字之间间距
letter-spacing: 1px;
image.png
15、盒子阴影
box-shadow: 4px 3px 3px #000000; //水平阴影的位置 垂直阴影的位置 模糊距离 阴影颜色
image.png
鼠标点上去有阴影部分
没点的时候：
image.png
点击后：
image.png
.content1 .list li .item .mask{ //用一个mask div和 li 标签大小一样，背景颜色设置透明，然后隐藏。
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.3);
display: none;
}
.content1 .list li .item:hover .mask{ //点击之后显示
display: block;
}
没有宽度还能让其居中
display:table;
margin: auto;
去掉图片底边三像素
img{
vertical-align: middle;
}
原图：
image.png
去掉后：
image.png
强制改变优先级
后面加 ！important
background: greenyellow !important;
1.顺序选择器
简化取名字，可省略 class（input 除外，其他都可以）
ul li:nth-child(1){ //第一个 li
background: gold;
}
ul li:nth-child(2){ //第二个 li
background: green;
}
注意 : a 要这样写
<div class="d" id="c">
<ul>
<li><a href="">1111111</a></li>
<li><a href="">2222222</a></li>
<li><a href="">3333333</a></li>
<li><a href="">4444444</a></li>
</ul>
</div>
ul li:nth-child(1) a{
background: gold;
}
ul li:nth-child(2) a{
background: green;
}
2.属性选择器
除过 class 其他属性都可以。
form input[type="text"]{
border: solid 1px palegreen;
}
form input[type="password"]{
background: gold;
}
网友评论