前端基础知识HTML CSS flex布局 flex元素属性 flex-direction:// 决定主轴的方向 row

`HTML CSS`

`flex布局`

flex元素属性

flex-direction:// 决定主轴的方向

row 表示从左到右边（默认）
row-reverse 表示从右到左
column 表示从上到下
column-reverse表示从下到上 flex-wrap // 表示是否换行
nowrap 表示不换行（默认）
wrap表示换行，从上倒下
wrap-reverse 表示从下到上排列 flex-flow // 是flex-direction 和flex-wrap属性的简写

justify-content // 定义项目在主轴上的对齐方式以及额外空间的分配方式

flex-start 从起点开始顺序排列（默认）
flex-end 从终点线倒序排列
center 居中排列
space-between 元素均匀分布，第一个在最开始，最后一个在末尾
space-around 每一个项目两侧均匀分配剩余宽度
space-evenly 每一个项目之间的距离和边框之间的距离相等 align-items // 元素在交叉轴上的对其方式
stretch 交叉轴拉伸显示（默认）
flex-start 项目按交叉轴起点对齐
flex-end 项目按交叉轴终点对齐
cneter 项目按交叉轴中间对其
baseline 交叉轴方向按第一行文字基线对齐

align-content // 定义在交叉轴方向的对齐以及分配剩余空间

stretch 拉伸显示(默认)
flex-start 从起点开始正常排序
flex-end 从终点开始正常倒叙
center 居中排列
space-between （多排）第一排在起点，最后一排在终点，中间间隔相等
space-around 每一排项目两侧均匀分配剩余空间

flex项目属性

order // 控制项目排列顺序，值为整数，从小到大顺序排列，可以为负数
flex-grow // 定义项目放大比例，值为正整数
flex-shrink //定义项目缩小比例，值为正整数
flex-basis //定义项目在分配额外空间之间的缺省尺寸，值可以为百分比，长度和auto
flex //是 flex-grow flex-shrink flex-basis的简写默认为0 1 auto,后两个可选
align-self // 定义项目的对齐方式，可覆盖元素align-items属性，默认为auto,表示继承父元素的align-items属性，属性值跟父元素的align-items属性基本一致

`html5新特性`

`语义标签`

标签	描述
`<header></header>`	定义文档头部区域
`<footer></footer>`	定义文档底部区域
`<nav></nav>`	定义文档导航
`<aside></aside>`	定义文档侧边栏内容
更多

`canvas`

用于图形的绘制

   <canvas id="mycanvas" width="200" height="100"></canvas>
   <script>
      var c= document.getElementById('mycanvas')
      var ctx = c.getContext('2d')
      ctx.fillStyle ='red';
      ctx.fillRect(0,0,,150,75)
   <script>

更多详细请查看

`地理定位`

getCurrenPosition() /如果支持则返回当前位置的经纬度

function getPosition(){
   if(navigator.geoloation){
      nacigator.geolocation.getCurrenPosition(showPosition=>{
      //showPosition 可以获取的当前位置的经纬度
      })
   }
}

`video`

视频元素

<video width="400" height="300" controls> //control属性供添加播放，暂停等控件
   <source scr=".mp4" type=""video/mp4> //带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
   <source scr=".WebM" type=""video/WebM>//带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
   <source scr=".Ogg" type=""video/Ogg>//带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
   //source 定义多种媒体资源，浏览器运行使用第一个可以识别的资源格式
</video>

更多属性详情查看

`audio`

音频播放器

<audio controls>
 <source src=""> //source元素同上，支持MP3,Ogg,Wav格式
</audio>

更多属性详情查看

`input类型`

输入类型	说明
color	颜色选择
date	日期选择
dateTime	日期选择
email	邮箱地址
month	选择月份
range	滑块
url	合法url

`localStorage sessionStorage`

localStorage: 用于长久保存网页数据，没有过期时间，直到手动清除,当只有在相同协议，主机名，端口的时候才能操作同一份数据

  ```
  function(){
     localStorage.setItem(key,vakue) //保存数据 key: 保存的名 value: 保存的值
     localStorage.getItem(key)// 读取名为key的值
     localStorage.removeItem(key) //删除名为key的值
     localStorage.clear() //清除
     localStorage.key(index) //得到某一个索引的key
  }
  ```

sessionStorage: 临时保存同一窗口（标签页）的数据，关闭窗口数据消失。只有在同一窗口，并且相同协议，主机名，端口才能操作同一份数据

  ```
  function(){
     sessionStorage.setItem(key,vakue) //保存数据 key: 保存的名 value: 保存的值
     sessionStorage.getItem(key)// 读取名为key的值
     sessionStorage.removeItem(key) //删除名为key的值
     sessionStorage.clear() //清除
     sessionStorage.key(index) //得到某一个索引的key
  }
  ```