常用html/css/js学习（会持续更新）

html5

前端三要素：
js 动化（能说会道 会交流）
css 美化（妆容）
html 结构（身材）

1. html5

  超文本标记语言
  解释型标签语言 

  运行机制？
    1) 开发pc - 部署pc - pc-浏览器 file:// 【开发】
    2) 开发pc - 部署云服务 - pc-浏览器 http://
              apache2 - scp/filezilla
        http://www.tyut.edu.cn/
  B/S架构   b浏览器(html、css、js) s服务器

>   **面试题：**
>     **1. 访问百度/淘宝，浏览器-页面渲染出来中间经历了什么？
>     2. h5 与h4区别？
>         标准
>         doc声明不同  
> 
>   <`meta charset="UTF-8">`
>      h5新增标签
>       h5新增api**

  超文本:
    超级文本：字符，超级链接，图片，音频，视频，画布（地图、图表、3D模型）
  标记：
    标签进行标记， html标签（无法使用自定义标签）
  

  <h1>标题1h1>
  <p>段落p>

语言：
c、java 编译型语言 ，
hello.c --gcc–> hello.o --运行–>linux
Hello.java --javac–> Hello.class --运行–> jvm --> linux/win
html、js、css 解释型语言
hello.html --> 浏览器 -> linux/win
执行效率：c > java > js

2. 工具

  vscode(koroFileHeader)

3. 前端地位

 软件开发主流架构（前后端分离）
 前端(html、css、js)
   浏览器（终端）显示
     pc（淘宝pc） 移动端（android/ios/pad h5、混合式app）小程序 大屏
 
 后端(Java / python / c# / Nodejs)
   逻辑（登录、注册）
   数据库操作
   中间件操作（消息队列...）

4. html结构

  继承 xml 

  
    文档类型： html
  
    
      "UTF-8">
      "viewport" content="width=device-width, initial-scale=1.0">
    
    
    
  

  head中的内容无法显示到浏览器视口中
  charset   设定编码格式
  viewport  适配移动端
    pc分辨率      1480 * 800
    手机分辨率     2000 * 400
  title     网页标题，显示在选项卡中
  apache2  favicon.ico

5.标签

  不区分大小写
  单标签
  	

  双标签
 	
  	
  	

元素

  标签 + 内容

 <h1>这是一个一级标题h1>
    <div>
      <div id="one" class="logo">logodiv>
      <div class="menu">menudiv>
    div>

  属性
    位于开始标签中
    核心属性（通用，绝大多数标签都具有的属性）
      id      唯一标识
      class   分类，可以重复
      title   悬浮提示
      style   添加css规则的
    自有属性

 <img src="" alt="">img>
  <a href="https://www.baidu.com" target="_blank">百度一下，你就知道a>

注释

不会被浏览器解释，注释是用来描述代码含义。

6. 块标签（块元素）

  特点：
    1) 独占一行空间（100%）
    2) 高度默认为0，高度由内容决定
    3) 可以指定宽、高
    4) 用来搭建页面框架
  元素：
    h4：div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6
    h5：header、footer、nav、section、article、aside、address... 语义化标签
    简单大方、无招胜有招

7. 行内标签（行内元素）

  特点：
    1) 行内与其他行内元素共享一行空间
    2) 宽高都由内容决定
    3) 无法指定宽、高
    4) 用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中。
  元素：
    span、a、img
    装饰类型标签：strong b em i sub sup ...

  功能标签：
    a
      超级链接 
      href=""     跳转
        url 跳转到一个外网地址中
        相对路径：相对于当前代码所在文件的路径
          **.   当前目录下
          ..  当前目录下的上一级目录**
        绝对路径：相对于基准点
          linux操作系统中
            / 操作系统根目录 也就是 /
   /var/www/html  apache2部署目录
            index.html  / 代表apache的根部署目录 即 /var/www/html
        锚点
          1. 定义锚点  
顶部
          2. 跳转     跳转顶部
        其他
      target=""   目标
        _self   默认值 ，当前页面
        _blank  新页面
    img
      src   图片地址
        1. 网络资源
        2. 相对路径
        3. 绝对路径
        4. base64格式值
      alt     图片找不到时候的文本替换

8.功能标签（功能元素）

 1) table           表
    tbody         表格体  thead、tfoot
     tr          行 
     td、th    列 （容器）
     子标签可以为任意其他标签
     行中的列数在经过计算后应该是相同的


 2) form
   用来进行前后台数据交互（默认情况下，同步交互：JavaEE(jsp)、nodejs(模板)）
   ajax 异步交互
   前置技术： http协议
   form( action 后端处理接口，enctype 表示编码方式，method请求方法)
     method取值
       get   用于查询操作，参数携带在url后面 
       post  用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中
     enctype取值：
       application/x-www-form-urlencoded
         查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&...
         schoolName=xxxx大学&userName=陈明
       multipart/form-data
         用于表单中有附件提交的时候，二进制，无需进行编码
       text/plain
         纯文本提交
     

  1) input     输入框
    注意：input(text、password、radio、checkbox)必须添加name属性，(radio、checkbox)必须添加value属性

    <input type="text" />   单行文本框
    <input type="password" />  密码
    <input type="radio" />    单选按钮
    <input type="checkbox" />  复选按钮
    <input type="file"/>        附件
    <input type="submit" /> 提交按钮
    <input type="reset" />  重置按钮

    <input type="date" />  日期选择器（h5新增，兼容性差，一般不用）

  2) textarea  多行文本

  "description"</span> cols=<span class="token string">"50"</span> rows=<span class="token string">"4"</span>>

  3) select    下拉菜单

<select name="address">
      <option value="js">江苏option>
      <option value="sx">山西option>
      <option value="hn">河南option>
    select>  

  iframe  

  <iframe width="100%" height="300" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1">iframe>

9、 css3

层叠样式表
1) 在html中应用
  css嵌入到html的头部的style标签内
  css嵌入到元素style属性内
    css规则与html结构分离（解耦）
    css规则可以复用
  css单独写入到.css文件，通过link引入到html
2) 语法
  注释： /* 注释内容 */
  语法：
    选择器 {
      样式规则
    }

.box {
      background-color:lightcoral; 
      color: #fff; 
      width: 300px;
      margin-bottom: 1em;
    }

3) 选择器
  1. 核心选择器
    id选择器      利用了html元素的id属性，唯一
      #one {}    选中id为one的元素
    class选择器   利用html元素的class属性，非唯一
      .box {}    选中class为box的元素
    标签选择器     利用标签名进行选择
      div {}     选中所有的div元素
    并且选择器
      div.box {} 选中div元素，并且这个div的class为box
    和选择器
      div,.box{} 选中div元素和class为box的元素
    普遍选择器
      * {}       选中所有元素
  2. 层次选择器( 两个选择器配合使用)
    子选择器    通过父元素选择子元素
      >
      .menu > li {} 
    后代选择器
      空格
     .menu li {}

 <ul class="menu">
    <li>li>
    <li>
      <ul>
        <li>li>
        <li>li>
      ul>
    li>
  ul>

    兄弟选择器
      ~ 当前元素之后的所有兄弟
      ul.rank > li:nth-child(2) ~ *{}
        第二个li之后的所有li
      + 当前元素之后的下一个兄弟
      ul.rank > li:nth-child(2) ~ *{}
        第三个li
  3. 属性选择器(属性过滤器)，一般应用在表单元素
    input[name]   
      具有name属性input元素
    input[name='username'] 
      具有name属性，并且name属性值为username的input元素
    input[name^='u']
      具有name属性，并且name属性值以'u'作为开始
    input[name*='u']
      具有name属性，并且name属性值包含'u'
    input[name$='u']
      具有name属性，并且name属性值以'u'作为结尾
  4. 伪类选择器(伪类过滤器)
    :first-child
    :last-child
    :nth-child(n)  第n个孩子，n=1,2,3.... 
    :visited      访问过的
    :hover        光标悬浮上去
    :foucus       聚焦上去
  5. 伪元素选择器
    ::after
    ul.menu::after {

    }
    在class为menu的ul元素中追加一个子元素
      

        
one
        
two
        ::after
      

    ul.menu::before {

    }
    在class为menu的ul元素中插入一个子元素
      

        ::before
        
one
        
two
      

  3)计算选择器优先级
      当多个选择器中的相同规则作用于同一个元素的时候，我们纠结到底这个元素上使用哪个规则的时候。

    
      1. 权重（积分）
        1000  style
        100   id
        10    class、伪类
        1     元素选择器、伪元素

        1+10 + 1 + 10 + 1+ 10 + 1
        ul.menu > li.menu_item > ul.sub_menu > li {
          color: lightcyan; /* 34*/
        }
        #introduce {
          color:lightcoral    /*100*/
        }
        .si {
          color: gray !important;
        }
      2. 顺序（排名）
        当权重值相同的情况下，后者覆盖前者
      3. 特权（!important）
        脱离了权重和顺序规则

4) 样式规则
  1. 字体规则
    可被继承
    font-family 字体
      字体栈 "Microsoft YaHei","宋体"
      在浏览器所在pc从字体栈顶到底寻找字体，找不到使用默认字体
    font-size   字体大小
      12px
    font-weight 字体粗细程度
      100~900
      bold
      bolder
    font-style  是否是斜体
      italic
      normal
    color       字体颜色
    line-height 行高
    长度的相对单位
      1px
      em    相对于当前元素上的字号
      rem   相对于根元素上的字号  
    font  速写形式
    font: font-style font-weight font-size/line-height font-family
      font: normal normal 14px/1.2 '宋体','微软雅黑';
      font: 14px/1.2 '宋体','微软雅黑';
    
    网络字体(iconfont)
      应用
      分析实现过程
        @font-face {
          font-family:"iconfont"
          src:
        }

        .iconfont {
          font-family:"iconfont"
        }
        .icon-Backward-Button:before {
          content: "\e82e";
        }


  2. 文本规则
    text-align  文本在容器中显示方式
      center
    text-decoration-line:underline;
    text-decoration-style: double;
    text-decoration-color: lightsalmon;
    text-decoration: none;
    text-indent     缩进
    text-transform  控制大小写
    white-space：容器内的文本是否会主动换行
      nowrap  不换行
    overflow: 容器内的内容超出部分如何处理？
      hidden
    text-overflow: 文本超出部分如何显示提示？
      ellipsis '...'
     3. 列表规则
  用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
  list-style:none;
4. 其他规则
  cursor:pointer;
  visibility:hidden
  opacity:0.2
  display:none; 【三十年河东三十年河西】
    改变元素的显示方式
    none
    block   将行内元素转换为块元素
    inline  将块元素转换为行内元素
    inline-block  行内块元素
      与其他行内元素共享一行空间
      可以指定宽高
  面试题：
    如何将一个文本在块元素进行水平居中？
      text-align:center
    如何将一个文本在块元素进行垂直居中？
    如何将一个块元素进行水平居中？【3种】

  overflow:
    overflow-x,overflow-y速写
    overflow:hidden;
    overflow:scroll; 
    overflow:auto;
    容器，容器的内容的大小超过容器本身
  outline
    外圈线框
  outline-color: pink;
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 1px;
  outline:
5. 盒子规则
  盒子 - 块元素
  margin  外边距（盒子外边框距离其他元素的距离）
    margin: 10px;       上右下左
    margin: 10px 20px;  上下，左右
    margin: 10px 20px 30px;   上 左右 下
    margin: 10px 20px 30px 40px; 下 右 下 左
    速写形式，外边距，上下外边距会进行重叠
    margin-top
    margin-right
    margin-bottom
    margin-left
  border 边框
    border-width
      border-top-width
      border-right-width
      border-bottom-width
      border-left-width
    border-style
      border-top-style
      border-right-style
      border-bottom-style
      border-left-style
    border-color
      border-top-color
      border-right-color
      border-bottom-color
      border-left-color
    border 速写
      border: 2px solid #ccc;
  padding 内边距(内容距离盒子内边框的距离)
    padding: 10px;       上右下左
    padding: 10px 20px;  上下，左右
    padding: 10px 20px 30px;   上 左右 下
    padding: 10px 20px 30px 40px; 下 右 下 左
    速写形式，外边距，上下外边距会进行重叠
    padding-top
    padding-right
    padding-bottom
    padding-left
  width/height
    宽高
  box-sizing(盒子模式)
    内容盒子（普通盒子 ， 默认盒子）
      content-box;
      盒子实际占据的宽度 2borderWidth + 2padding + width
      盒子实际占据的高度 2borderWidth + 2padding + height
    边框盒子（怪异盒子 ie低版本）
      border-box;
      盒子实际占据的宽度 :width
        width = 2borderWidth + 2padding + 内容宽
      盒子实际占据的高度 :height
  border-radius:2px
      外圆    300px 
      内圆    200px
      期望 内圆由200 变化到250，并且，中心点不变
  background
    background-color 
    background-image
    background-repeat
    background-size
    background-position
    background-clip
    background-orign
    background-attachment
    background  速写形式
6. 默认文档流 （y轴）
  块元素， 独占一行空间，高度由内容决定。块元素默认从上往下排列

6. 布局

1. 浮动布局（x轴）
  float:left
  浮动元素：
    1) 脱离文档流
    2) 块元素的宽度不再是100%，由内容决定
    3) 块元素不再支撑其父元素
    4) 同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。
  clear
    清理浮动
    left  不与左浮动元素在同一水平线上
    right 不与右浮动元素在同一水平线上
2. 伸缩盒布局（x轴）
  div.container > div
  ul.container > li
  1) 概念
    伸缩盒容器 div.container 、ul.container
    伸缩盒元素 div、li
    主轴    默认主轴x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列
    交叉轴  与主轴垂直的轴
  2) 规则
    伸缩盒容器
      display:flex;
        强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。
      flex-direction:row;
        定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴
      flex-wrap:nowrap 
        当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，
      align-items: stretch;
        定义伸缩盒容器中的子元素在交叉轴上的排列方式
      justify-content:space-around;
        定义伸缩盒容器中的子元素在主轴上的排列方式
    伸缩盒元素
      flex-basic:   主轴上的基础长度（基本工资）
      flex-grow:    主轴上剩余空间分配的份数（分红）
      flex-shrink:  主轴上亏损空间的分摊份数（亏损）
3. 定位布局(z轴)
  position:
    static  静态（默认、非定位元素）
    relative  相对（定位元素）
    absolute  绝对（定位元素）
    fixed     固定（定位元素）
    sticky    粘滞（定位元素）
  定位元素的特点: 可以使用定位规则。top right bottom left
  1) 相对定位
    1. 不脱离文档流
    2. 相对于它原来所在位置移动
  2) 绝对定位 
    1. 脱离文档流
    2. 相对于距离它最近的父定位元素位置移动！如果所有的父元素都不是定位元素，相对于浏览器视口位置移动
    一般情况下，绝对定位元素应该嵌套在相对定位元素内容来使用
  3) 固定定位
    1. 脱离文档流
    2. 相对于浏览器视口进行定位
  4) 粘滞定位
    1. 在没有达到阈值的时候是不脱离文档流（相对），达到阈值脱离文档流（固定）
    2. 通过left、top、right、bottom来设定阈值

  定位布局的应用：
    1. 二级栏目
    2. 模态框
    3. 特殊布局

7. 动画特效

1. 动画
  设计师；美工；前端（实现）
  动态网站（具有动画 错误！）是数据是动态的。
  
  1) 实现步骤
    1. 定义动画帧
      @keyframes 动画名{
        from {
          // 开始帧
        }
        to {
          // 结束帧
        }
      }

      @keyframes 动画名{
        0% {
          // 开始帧
        }
        20% {

        }
        ...
        100% {
          // 结束帧
        }
      }
    2. 设定动画（贺卡）
      animation-name: move; 
        动画名
      animation-duration: 2s;
        持续时间
      animation-timing-function: linear;
        时间曲线函数（自由落体，贝塞尔曲线）
      animation-fill-mode:forwards;
        填充模式，动画结束后保留哪一帧规则
      animation-iteration-count: 2;  
        动画迭代次数 infinite
      animation-direction: alternate-reverse;   
        动画执行的方向 from->to , to->from
      animation-play-state: paused;
        动画状态
      animation-delay: 1s;
        延迟时间
      animation: move 2s 1s 2 linear;
        动画的速写形式
  2) 案例（呼吸灯）
  3) 案例（梦幻西游）
2. 动画库 animate.css
  动画帧、动画设定规则都有第三方完成，我们直接使用class即可
  1) 引入动画库
    
  2) 使用
    1. 直接调用动画设定类
      

    2. 引用关键帧
      
      

3. 过渡
  过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）
  transition-property: width;
    过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性
  transition-duration: 2s;
    过渡持续时间
  transition-delay: 0; 
    过渡延迟时间
  transition-timing-function: linear; 
    时间曲线函数
  transition:transform,background-color 2s,2s 0s linear;
    速写形式
4. 变形
  transform:变形函数
  1. 缩放
    scale(2)
  2. 平移
    translate(100px,50px)
  3. 旋转
    rotate(360deg)
  4. 拉伸
    skew(45deg)

8. 媒体查询（响应式布局）
   pc、 pad 、phone (中小型网页)
   一套网页(pc、pad、phone)

网易严选（非响应式）
  pc 定宽
  mobile  响应式
腾讯视频 （半响应式）复杂，to-c
  pc (响应 ：4k 2k 1080p 普通)  https://v.qq.com/
    1. 定宽？ 1190px (淘宝)
    2. 非定宽（响应 4k 2k 1080p 普通）
  mobile (响应)                https://m.v.qq.com/
newbalance (全响应)中国、汇智网
  pc、mobile - 简单，小众
    https://www.newbalance.com.cn/
    https://www.newbalance.com.cn/

黑话：
to-C  client    个人（抖音、淘宝、京东）互联网
to-B  business  企业级
to-G  政府       学校/政府 - 监控终端、大屏、二手房交易网、健康码

1. 如何实现
  1) 非响应式
    2套   
      - pc  
        1190px 宽度写死   400px 700px
      - mobile(响应式)
  2) 半响应式
      - pc（4k 2k 1080p 普通）
      - mobile(响应式) 宽度尽可能使用百分比
  3) 全响应式
      -pc、mobile (4k 2k 1080 普通 pad phone)
2. 技术
  @media 判断媒体类型（屏幕类型）
  @media screen and (min-width:900px) and (max-width:1200px) {
    /* 当屏幕满足上述条件，执行该代码块内部的css*/
    .container {
      background-color: pink;
    }
  }
3. bootstrap中响应式
  

    

    

    

    

  
  

    

    

    

  
  

    

    

  

9. 补充样式
   verticle-align 行内元素在垂直方向上的排列规则。这个规则只能应用于行内元素

1. 前提
  盒子中存在多个行内元素
2. 基线
  行内元素默认在基线上下排列
  ...

面试题：
如何理解语义化？
利用标签表达出来的含义（而不利用标签表达的样式）来表达页面结构
换句话说，就是在合适的页面位置上使用合适的标签