html和css基础

1、标题标签
<hn></hn>
特点：加粗并变大

2、段落标签
<p>
特点：将内容单独放在一个段落里面有换行的效果

3、换行标签
<br />
特点：就是换行的意思

4、分割线标签
<hr />
特点：在页面上添加一条分割线

5、快捷键
ctrl + c 复制
ctrl + v 粘贴
ctrl + s 保存
ctrl + x 剪切
ctrl + d 删除整行
ctrl + a 全选
ctrl + r 运行
ctrl + shift+ f 格式化调整代码
ctrl + / 注释
alt  + / 代码提示
ctrl + z 撤销

6、文字标签
①加粗 <b>
②下划线 <u>
③倾斜  <i>
xdz
④统一字体标签：给文字改变字体、字号、颜色
    <font face="字体样式" size="字号" color="颜色">

7、图片标签
    <img/>
    属性：
        src ：图片提取地址
        alt ：图片加载不出来的时候用文字去替代
        title：鼠标悬停时显示的内容
        width ：宽度（最好加上px）
        height：高度（最好加上px    ）
        border：边框

8、居中标签
    <center> 居中

9、超链接标签
    <a></a>
    href : 跳转地址（必须的）
    target ：是否新建网页跳转
    锚点：
        1、准备两个a标签
        2、创建name属性（不加#）
        3、在第二a标签里面的href里面添加#+name名字。

10、跑马灯
    <marquee scrollamount="20" behavior="slide">666</marquee>
    scrollamount：滚动的速度
    behavior    ：播放的形式
    可以用来做文字，也可以用来做图片

1、列表标签
    作用：用来将文字或者图片制成表的形式（是一种形式） 这就叫做列表
    形式：
        有序列表
        无序列表
        自定义列表
    举例：将大象装进冰箱分几步：
        1、打开冰箱
        2、把大象放进去
        3、关上冰箱门
    有序列表
        按照顺序来的（这种循序一般是用在法律文献或者是必须强调用连续的数字的时候）
        <ol type="I">
            <li>打开冰箱</li>
            <li>把大象放进去</li>
            <li>关上冰箱门</li>
        </ol>
        ol：代表有序列表
        li：列表中的每一项
    无序列表
        就是没有顺序的
        <ul>
            <li>男的</li>
            <li>穷的</li>
            <li>胖的</li>
            <li>黑的</li>
        </ul>
        ul：就是一个无序列表
        li：列表中的每一项
    自定义列表
        <dl>
            <!--列表的标题-->
            <dt>灌篮高手</dt>
            <!--内容项-->
            <dd>蔡徐坤</dd>
        </dl>
        dl:代表自定义列表
        dt：列表的标题项
        dd：列表的内容

2、表格标签
    <table>
    <tr> 表格中的行
    <td> 表格中单元格
    属性：
        宽高 ： width 、height 
        边框 ：border
        边距;
            ①：边框和内容的边距：cellpadding
            ②:单元格边框的距离 ：cellspacing
        合并列的单元格：colspan    <td colspan="2">1
        合并行的单元格：rowspan  <td rowspan="7">4

3、表单标签
    为了提交数据
    普通的输入框
    密码
    。。。。
action
    method="post" 传输的一个方式
    get是明文传输，效果高但是安全性比较低
    post是密文传输，效果低但是安全性高
    input控件
        type：用来改变input样式
            text ：文本框
            password：密码
            submit：提交框
            checkbox：多选框
            radio：单选框
            <select>
            <option>中国</option>
            </select>              下拉菜单
            reset：重置
            file：文件提交
    文本域：
        <textarea cols="10" rows="5">
                
        </textarea>
        cols：每行中的字符数
        rows：显示的行数

4、视频和音频按钮
    <video src="img/video.mp4" controls="controls" loop="loop" width="500px"     height="300px" ></video>
    <audio src="img/同战.mp3" controls="controls"></audio>

    controls="controls" 控件
    loop="loop" 循环播放

5、嵌套页面
    iframe
    src ：获取地址
    width 、height 宽高
    name ：用于a链接跳转
    <p>
        <a href="http://www.4399.com" target="cxk">迪丽热巴</a>
        <a href="http://www.7k7k.com" target="cxk">陈杰涛</a>
        <a href="http://www.baidu    .com" target="cxk">马尔扎哈</a>
    </p>
    <iframe  width="500px" height="500px" name="cxk"></iframe>

一、CSS三种引入方式
    1.行内样式表
        style=""  是标签的属性 “”去包括
        只作用一行
    2.内部样式表
        在页面内加上一个<style type="text/css"> 并且最好写在head标签里
        只作用在本页面
    3.外部样式表
        在CSS文件夹中创建一个CSS文件并写上样式
        在页面内加入<link  rel="stylesheet" type="text/css" href="css/Test01.css"/>
        只要link引入了就可以了使用
    
二、选择器
    1.标签选择器
    2.类选择器
        在标签内加上一个class并且给上类名
        在样式表中 .类名 的形式更改样式表
    3.ID选择器
        id是惟一的 但是仅对于同一个标签
        在标签内加上一个id并且给上id名
        在样式表中 #id名 的形式更改样式表
    
    4.通配符选择器
        通过*来更改样式
        
    优先级
        id > class > 标签 >通配符
        最终实现的是id选择器
    5、伪类选择器
        1.指向的时候产生的伪类 hover
        2.点击的时候产生的伪类 active
        
三、样式
        字体样式汇总
            font-family：字体样式
            font-size  ：字号
            color      ：颜色
            font-weight：字体的粗细
            font-style:  字体的形状  italic（斜体）
            text-align: center; ：字体的水平居中
            line-height: 500px; ：字体的行高（垂直居中）
            text-decoration: underline;  下划线
            text-decoration: line-through;删除线
            text-decoration: overline;    上划线
            text-indent:2em;首行缩进 （em就是中文的一个空格）
            text-shadow: 3px 4px 5px rgba(0,0,0,0.5); 文字阴影
                    水平位置  垂直位置  模糊距离  阴影颜色（后面两个值是可以不写的）
        背景样式
            background-color: red; 背景颜色
            background-image: url(img/btn.jpg);  背景图片
            background-attachment: fixed;   背景锁定
        首行缩进
            text-indent:2em    
            
四、元素的分类
    块级元素  : 可以调整宽高    如果不给定宽度的话会随着页面的宽度而决定宽度
    行内元素  ：不可以调整宽高的 如果不给定宽度的话会随着内容的宽度而决定宽度
    行内块元素 ：可以调整宽高的 如果不给定宽度的话会随着内容的宽度而决定宽度
    display:   可以调类型
    
五、div和span
     div就是一个容器，想装什么就装什么
    类:.city{}     ID:#boy  标签：p{}
    class="city"  id="boy"
    

一、盒子模型
    盒子模型由  外边距 边框  内边距  内容 组成
    margin :外边距
    padding：内边距
    border ：边框
        solid 实线  dashed 虚线 dotted 点线 double 双线
    PS：如果要让子级的div在父级移动，那么必须要加上一个边框

二、画画

三、关键帧动画
    1、写剧本
        @keyframes 副本的名称{
            from 起
            to   止
        }
    2、引用剧本
        animation-name :副本的名称
    3、一个动画的时长
        animation-duration：8s  （带上秒数）

    4、播放的次数
        animation-iteration-count：infinite（无限次）
    5、播放的速度曲线
        animation-timing-function：速度曲线
    6、设置是否轮流播放
        animation-direction:normal 默认顺序  alternate 轮流播放

一、浮动
    关键字 ：float
        左浮动：float:left
        右浮动：float：right
        没有上下浮动
    清除浮动：
        clear ： left左浮动  right右浮动
            all 取消全部的浮动

    
二、盒子居中
    margin ：0 auto
    先决条件：
         1、不能有浮动
         2、必须是块级元素
         3、父级标签必须加上宽高
        
三、CSS样式（新增）
    text-decoration: none; 取消a连接的下划线
    list-style ：no        取消列表的项目符号

一、定位
    1、相对定位
        语法：position:relative;
        特点：是自己位置的左上角顶点开始偏移的

    2、绝对定位
        语法：position: absolute;
        特点：脱离原先的文档流，并且它是随着body的左上角顶点进行位置偏移的
    
    3、相对定位和绝对定位的结合使用
        在父级里面加上一个相对定位，那么子级所拥有的绝对定位就会随着父级左上角顶点开始进行位置偏移
    
    4、固定定位
        语法position: fixed;
        特点：不占原先的位置，一旦发生偏移，相对于body发生偏移，滚动条是不影响固定定位的
    5、背景定位
        background-position: 0px -32px;
    6、改变图层
        两个或者多个标签使用绝对定位或者固定定位
        然后通过z-index：图层数 进行调整