htnl/css

常用快捷键
新建 ctrl+n
保存 ctrl+s
另存为 ctrl+shift+s
全选 ctrl+a
后退 ctrl+z
撤回后退 ctrl+y
复制 ctrl+c
粘贴 ctrl+v

常用标签
标签主要负责页面结构
标签常见结构
<标签 k=“v” k=“v”>内容</标签> 或者 <标签> k属性 v值：

img <img src="haha.gif" alt="" width="100px"> img在页面中引入图片。src放置图片地址，width设置图片宽度， height设置高度， 图片只需要设置一个尺寸，另一个自动缩放；
标题文字h1-h6 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h6>六级标题</h6> ；
p引入段落 <p>人工智能是计算机科学的一个分支，它企图了解<a href="">智能</a> 的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。</p> ；
span b u i 引入小元素，一些不太重要的元素 ；
a超链接，实现页面跳转 href放置跳转地址 默认在当前页面打开。如果想在新页面打开 target="_blank" <a href="https://baike.baidu.com/item/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/9180?fr=aladdin">百度</a> <a href="my.html" target="_blank">我的页面</a> ；
6.ul>li` ul>li实现结构类似的布局
ul的子级(第一层包裹的)只能是li
li的父级(上一级)只能是ul ；
7.audio <audio src="music.m4a" controls></audio>，引入音乐 src放置的是音乐地址 controls播放控制条-;
8.video <video src="" controls></video>引入视频 src放置的是视频地址 controls播放控制条;
9.table 表格

 <table id="box">
        <!-- tr代表一行 td代表一列 -->
        <tr class="head">
            <td>商品名字</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>华为</td>
            <td>5000</td>
            <td>233</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
    </table>
         

常用表单元素
input表单标签 type可以限制类型
                text：可以输入任意字符
                number只能输入数值 在web兼容性不太好 移动端兼容性较好 一般正则表达式限制
                password密码 输入内容不可见
                radio 单选框 只有加了相同的name值才可以使真正的单选框 name值命名和class一样
                checkbox 多选框 
                按钮：submit提交  reset清空
                常用属性 autofocus(自动聚焦)
                checked默认选框选中
                selected下拉选框默认选中
label的for值和input的id值保持一致。 就可以实现点击label文字聚焦选框效果。id和for值和class命名规则一样
<label for="user">用户名</label><input type="text" id="user">
<!-- br换行 -->
  <br><br>
  <label for="phone">号码</label> <input type="number" id="phone">
  <br><br>
  <label for="pass">密码</label> <input type="password" id="pass">
  <br><br>
  <label for="">性别</label> <input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex">未知
  <br><br>
  <label for="">爱好</label><input type="checkbox"> 游戏<input type="checkbox"> 看书
  <br><br>
  <label for="">自我介绍</label>
  <!-- textarea文本域 -->
 <textarea name="" id="" ></textarea>
  form用来进行表单提交 action后台地址
  <form action="https://www.baidu.com/"></form>

常用css
1.类名增加

 标签可以取类名class
      一个标签可以有多个类名 多个类名使用空格隔开
      类名必须是英文开始。只能由数字、字母、中横线组成
      类名一般需要有语义
      标签名可以重复
      <标签 class="类名 类名"></标签>   
      <div class="one">sdfsd</div>

2.css书写格式

 /* 
选择标签{
     书写样式 每一个样式结束，必须加分号 所有符号都是英文
     k:v;
     k:v
 }
 样式所有的标签都适用
  
*/
3.常用css样式

 /*文字颜色  */
color:red;
/* 文字大小 */
font-size: 20px;
/* 文字居中 */
text-align: center;
 /* 首行缩进  em倍数  参考的是文字大小 */
text-indent: 2em;
/* 文字不能小于12px 默认大小16px */
font-size: 18px;
/* 字体 字体的值需要加引号 */
font-family: "楷体";
/* 文字下划线 */
text-decoration: underline;
/* 去除下划线 */
text-decoration: none;
/* 文字加粗 */
font-weight: bold;
/* 文字不加粗 */
font-weight: normal;
/* 鼠标移入增加小手 */
cursor: pointer;
/* 增加圆角 值越大圆角越明显 值是50%的时候为圆形* /
border-radius: 10px;
/* 背景颜色 */
background:rebeccapurple;
 /* 宽度 */
width: 100px;
/* 高度 */
height: 100px;
/* 边框 三个值 用空格隔开
第一个值：线的粗细
第二个值：线的类型 solid实线 dashed虚线 dotted点线 
第三个值：线的颜色
*/
border:10px dashed #dc0115;
/* 外边距 */
margin:100px;
//移入小手
cursor:pointer;
//行高
line-height:100px;
/* 内边距边框和内容的留白 */
margin和padding 多个值使用空格隔开
一个值：上下左右
两个值：第一个值上下 第二个值左右
三个值：第一个值上 第二个值左右 第三个值下
四个值：上右下左
padding:10px;
margin padding border都可以只可以设置一个方向
margin-top margin-bottom margin-left margin-right
 选择器:hover{
     样式 鼠标移入样式才会生效，鼠标移出无效果
  } 
  /*
第一个值图片地址 url('地址')
第二个值平铺方式，默认平铺 no-repeat repeat-x水平轴平铺 repeat-y垂直轴平铺
第三个值：水平方向坐标 可以书写具体值 也可以left center right
第四个值：垂直方向坐标 可以书写具体值 也可以top center bottom
第五个值：颜色
*/
background: url('pic.gif') no-repeat center center pink;
/*同样的样式 权重一样 后写的生效 background:lime; */
/* 渐变色 可以书写多个颜色，第一个值可以书写渐变角度 */
background: linear-gradient(90deg,red,pink,blue,yellow)
/* 固定定位 */
position: fixed;
float:left;
float:right;
浮动：实现的效果就是水平排列。只有两种，左右浮动
 固定定位：
    1、不会随着窗口滚动而滚动
    2、参照物是可视窗口  top left right bottom 
        left和right不能同时书写
        top和bottom不能同时书写
    3、固定定位完以标签变成行内块(设置宽高有效，可以在一行排列)
    4、固定定位以后不占位，后写的(根据html顺序)在上面
/* 相对定位 */
position: relative;
相对定位：
1、单独使用的时候，一般用来做微调。
2、相对定位，参照物是自身原来的位置
top left right bottom 
left和right不能同时书写
top和bottom不能同时书写
3、相对定位，占位，占得是原来的位置
/* 绝对定位 */
position: absolute;
绝对定位：一个标签绝对定位，会一直向上寻找，直到找到有定位方式(任意一种定位方式都可以，如果原来没有默认定位方式，一般使用相对定位，相对定位对别的标签影响最小。)的标签，然后以该标签作为参照。
修改滚动条样式 
 p::-webkit-scrollbar {
     width: 4px; 
     height: 4px;
 }
 p::-webkit-scrollbar-thumb {
     border-radius: 5px;
     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     background: rgba(0,0,0,0.2);
 }
p::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px rgba(255,0,0,1);
     border-radius: 0;
     background: rgba(0,0,0,0.1);
 }
 转换模块
 div{
     width: 100px;
      height: 100px;
      background:red;
      /* 转换以后，占的还是原来的位置 */
      /* transform: translate(100px,100px); */
      /* 旋转 */
      /* transform: rotate(30deg); */
      /* 缩放 */
      /* transform: scale(0.3); */
      /* 旋转以后，坐标系也跟着改变 */
      /* 一般实际开发的时候，先位移再旋转 */
      transform: rotate(30deg) translate(100px,100px);
      transform: translate(100px,100px) rotate(30deg) ;
  }
  过渡模块
   div{
       width: 100px;
       height: 100px;
       background: red;
       /* 中间变化过程可见
           第一个值：样式 可以指定某一个样式 也可以设置所有
           第二个值:时间
           第三个值：动画曲线 一般是linear
           第四个值：动画延迟执行时间
        */
       transition: width 2s linear 0s,height 2s linear 2s,border-radius 1s linear 4s,background 1s linear 4s;
    }
     /* 
         选择器:hover{
             样式
             此处的样式，鼠标移入才会生效
         }
             */
div:hover{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background:blue;
    /* background:blue;
    transform: rotate(290deg); */
}
 动画模块
 div{
     width: 100px;
       height: 100px;
       background:lime;
       /* 使用动画 animation：动画名字 持续时间 次数infinite 动画曲线linear */
       animation:move 3s infinite linear;
   }
   /* 定义动画
    @keyframes 动画名字{
         各个状态样式条
     }
   */
@keyframes move{
    0%{
        transform: translate(0px,0px);
    }
    25%{
        transform: translate(500px,0px);
        background:red;
    }
    50%{
        transform: translate(500px,500px) rotate(360deg);
        border-radius: 50%;
    }
    75%{
        transform: translate(0px,500px);
    }
    100%{
        transform: translate(0px,0px);
    }
}
4.标签分类

标签分类
    单双标签：
        双标签:<标签></标签> h1-h6 p div 
        单标签：<标签>img
    行内标签和块级标签：
    行内标签：水平排列，可以和其他标签并排 a  
    1、设置宽高无效 
    2、上下外边距无效，左右有效 
    3、内边距有效，上下外边距不占位，左右占位
    块级标签：独占一行 div h1-h6 p 

5.选择器分类和权重

选择器分类：
     *:选择所有标签
     标签选择器：直接通过标签名选择标签。div p img
     类名选择器：通过类名选择  .+类名
     交集选择器：  p.one 中间不使用空格 标签名为p同时类名为one 
                 div.one.two标签名为div类名同时需要有one和two
     后代选择器：后代(c标签内部的标签都称为c的后代) div p使用空格隔开即可
     子代选择器 div>p(第一层包裹的才称为子代)
     并集选择器：同样的样式可以合并。使用逗号隔开。a,div a和div有同样的样式
     :nth-of-type()可以选择具体某一个标签，也可以选择某一类标签2n 3n 4n

 选择器权重：
     选择器权重可以叠加
     哪一个选择器的权重高，样式就取决于谁
     同样的权重后写的生效
     标签选择器1g<类名选择器1kg