什么是HTML5和CSS3

html-css012

什么是HTML5和CSS3,第1张

HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。

HTML5草案的前身名为 Web Applications 1.0，于04年被WHATWG提出，于07年被W3C接纳，并成立了新的 HTML 工作团队。

HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。

HTML5将会取代99年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

    1、给body添加背景图，在body中添加一个父盒子（父盒子开启绝对定位），父盒子中再添加一个子盒子。

    2、给window添加鼠标移动事件，根据鼠标在浏览器中的坐标（clientX和clientY）修改父盒子的top和left，以达到移动镜面的效果。

    3、给子盒子添加背景图（和body背景图一致），在window的鼠标移动事件中修改子盒子的样式——background-position，改变子盒子中的背景图在盒子中的显示位置，使背景图的显示与body一致。

    4、再给子盒子添加缩放（transform:scale(2)），即可实现放大功能。

    1、由于背景图无法设置透明度，所以使用body的伪元素，给伪元素添加背景图和opacity属性。

    2、这时虽然给背景设置上了透明的，但却是发白的那种透明，要想变成暗沉的透明，只需要给body添加背景颜色就行。

    3、background-position的使用，由于是要将背景的选中位置移动到盒子的中心，所以使用的是负值。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    body {

      padding: 0

      background-color: #000

      margin: 0

    }

    body::after{

      display: block

      position: absolute

      top: 0

      left: 0

      content: ''

      width: 100%

      height: 100%

      background-image: url('伊芙琳.jpg')

      background-position: 0px 0px

      background-size: 100% auto

      opacity: 0.1

    }

    .magnifier {

      width: 300px

      height: 300px

      background-image: url('伊芙琳.jpg')

      background-size: 1730px auto

      background-position: 0px 0px

      transform: scale(2)

      margin: 0

      position: relative

      z-index: 100

    }

    .main {

      width: 300px

      height: 300px

      border-radius: 50%

      overflow: hidden

      position: absolute

    }

  </style>

</head>

<body>

  <div class="main">

    <div class="magnifier"></div>

  </div>

  <script>

    let flag = true

    let magnifier = document.getElementsByClassName('magnifier')[0]

    let main = document.getElementsByClassName('main')[0]

    let boxLeft = 0

    let boxTop = 0

    window.onmousemove = (event) => {

      if(!flag) return

      setTimeout( ()=>{

          flag = true

      },50)

      console.log(event.clientX, event.clientY)

      if(event.clientX > 1590) {

        event.clientX = 1590 

      }

      boxLeft =  event.clientX > 1590 ? '1440px' : event.clientX > 150 ? event.clientX - 150 + 'px':'0px'

      boxTop = event.clientY > 720 ? '575px' : event.clientY > 150 ? event.clientY - 150 + 'px':'0px'

      main.style.left = boxLeft

      main.style.top = boxTop

      // magnifier.style.backgroundPosition = '830px 570px'

      magnifier.style.backgroundPosition = '-' + boxLeft + ' ' + '-' + boxTop

      flag = false

    }

  </script>

</body>

</html>