一、HTML5结构以及常用标签

1、HTML5常用标签

（1）、声明文档类型

<!DOCTYPE html>

（2）
网页字符集设置

<meta charset="utf-8" />

网页相关的信息

<title>网页标题</title>

SEO优化，网页小图标，引入外部文件（css，JavaScript）

（3）网页整体结构
块级元素
标题标签h1-h6

<h1>大</h1>

（4）
没有特别含义，代表网页中的一块区域
<div>div1</div>

<div>div2</div>

段落标签

<p>第一段</p>

（5）列表标签
列表标签

ul无序列表

    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
<!--ol有序列表-->
    <ol>
        <li>1</li>
        <li>2</li>
    </ol>
    <!--表格-->
    <!--tr每一行 td每个单元格 th每列的列标题-->
    <table border="1" cellpadding="0" cellpadding="0">
        <tr>
            <th>Header</th>
            <th>Header2</th>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data2</td>
        </tr>
    </table>

（6）

<!--行内元素-->
<!--没有特别的含义，代表行内的一块区域-->
<span>span</span>
<!--超链接标签-->
<a href="#">回到顶部</a>

（7）
输入框

<input type="text" name="" id="" value="" />

单选按钮

<input type="radio" name="sex" id="sex" value="" />男
<input type="radio" name="sex" id="sex" value="" />女

多选按钮、复选框

<input type="checkbox" name="" id="" value="" />JavaScript

（8）总结
块级元素，独占一行，可以设置宽高
行内元素，宽度没有超出时，都在一行上面，设置了宽高不起作用
行内块元素，宽度没有超出时，都在一行上面，可以设置宽高

2、position的用法

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative: 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit: 规定应该从父元素继承 position 属性的值。

相对定位,让内部的元素根据它来定位,同时不影响自身的布局

position: absolute;

设置了绝对定位的元素,会去其祖先元素寻找最近的一个拥有定位属性的元素,并且根据它来定位
如果没有的话,就根据body来定位
绝对定位

position: fixed;

固定定位

3、margin标记可以带一个、二个、三个、四个参数，各有不同的含义。

margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）。

margin标记可以带一个、二个、三个、四个参数，各有不同的含义。

4、过渡属性

需要过渡的是哪些属性过渡的时间

hover：{
    transition: all 2s;
}
.box:hover{
    /*变化属性*/
    /*scale倍数 rotate旋转度数*/
    transform: scale(1.5) rotate(360deg);
}

5、水平垂直居中：

水平垂直居中

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;

6、元素层级：

定位元素的层级0-999,层级越高显示在越上面

z-index: 1;

7、css样式表

通配符

重置样式

*{
    /*外边距*/
    margin: 0;
    /*内边距*/
    padding: 0;
}

标签选择器

找到网页中所有的div

div{
    /*宽度*/
    width: 200px;
    /*高度*/
    height: 200px;
    /*背景颜色*/
    background: blue;
    /*文字颜色*/
    color: white;
    /*文字大小*/
    font-size: 30px;
}

id是唯一的

#box{
    background: green;
    /*内边距*/
    padding-left: 20px;
    padding-top: 20px;
    /*边框:边框宽度 边框样式 颜色*/
    /*solid实线 double双实线dashed虚线*/
    border: 10px solid black;
    /*外边距*/
    margin-left: 20px;
    margin-top: 20px;
    /*盒子总宽度 = 盒子的内容区域 + 内边框 + 边框  + 外边框*/
}

类选择器

.inline{
    width: 500px;
    height: 500px;
    background: skyblue;
}

伪类选择器

img:nth-of-type(1){
    width: 500px;
    height: 500px;
}

二、HTML5以及css的属性

1、改变盒模型

改变盒模型

box-sizing: border-box;

设置了之后width= content + padding + border
width = content: 区域;
盒子的总宽度content + padding + border + margin

2、加粗

bold bolder normal

font-weight: bold;

3、鼠标样式

鼠标移动上去时的样式 move help

:hover
cursor: pointer;

4、转换元素类型

转换元素类型才能设置宽高

block 块级元素 inline-block 行内块元素 inline行内元素 none元素消失

display: block;

5、定义动画

定义动画

@keyframes move{
    0%{}
    35%{left: 25%;}
    60%{left: 25%;}
    100%{left: 100%;}
}

6、将动画添加到元素中，以及animation的四个参数

将动画添加到元素当中

animation: 动画名动画执行时间(动画执行的速率) (动画执行的次数)

animation:move 5s linear infinite;

7、超出部分隐藏

超出的部分隐藏

overflow:hidden;

8、:nth-child()与nth-of-type的用法与区别

.square div:nth-of-type(1)找square下面的第一个div
.square div:nth-child(1)找square下面的第一个子元素,并且看他是不是div,是的话样式生效,不是样式就不生效

.square div:nth-child(1){
    background: lightskyblue;
}

9、透明度

透明度 0-1 1是完全不透明 0是完全透明

opacity: 0.5;

10、transition

transition属性是一个速记属性有四个属性：
transition-property,
transition-duration,
transition-timing-function,
and transition-delay。

注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

语法：

transition: property duration timing-function delay;

11、transform

定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法：

transform: none|transform-functions;

translate位移

transform: rotateY(90deg) translateZ(100px);

12、translate:移动，transform的一个方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：
用法

transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);

transform:变形。改变

CSS3中主要包括旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)

扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)

缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)

移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离

所有的2D转换方法组合在一起： matrix() 旋转、缩放、移动以及倾斜元素

matrix(scale.x ,, , scale.y , translate.x, translate.y)

改变起点位置 transform-origin: bottom left;

综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;

transition: 允许CSS属性值在一定的时间区间内平滑的过渡，
需要事件的触发，例如单击、获取焦点、失去焦点等
transition:property duration timing-function delay;
property:CSS的属性，例如：width height 为none时停止所有的运动，可以为transform

duration:持续时间
timing-function:ease等
delay:延迟
注意：当property为all的时候所有动画

HTML5基础知识