编程技术

Document

学习回顾No.2

学习回顾No.2

常见布局技巧

  1. margin负值运用
  2. 文字围绕浮动元素运用
  3. 行内块巧妙运用
  4. CSS三角巧妙运用

HTML5

  • header、section、footer、aside、nav、main、article、figure 块级
  • canvas标签 => 图形容器，通过脚本绘制图形.
  • audio标签 => 定义音频内容.
  • video标签 => 定义视频(video或movie) 以及拥有autoplay、controls、loop、muted属性.
  • source标签 => 为媒体元素定义媒体资源 拥有src、type属性.
  • track标签 => 为媒体元素规定外部文本轨道，即字幕.
  • datalist标签 => 规定input标签可能的列表，使用list属性绑定datalist.
  • output标签 => 作为计算结果输出显示 拥有for、form属性.
  • article标签 => 定义页面独立区域.
  • aside标签 => 定义页面侧边栏内容.
  • dialog标签 => 定义对话框.
  • figure标签 => 规定独立的流内容.
  • figcaption标签 => 定义标题.
  • footer标签 => 定义section或document的页脚.
  • header标签 => 定义文档的头部区域.
  • mark标签 => 定义带有记号的文本.
  • meter标签 => 定义度量衡.
  • nav标签 => 定义导航链接的部分.
  • progress标签 => 定义任何类型的任务的进程.
  • ruby标签、rt标签、rp标签 => 定义注释（中文注音或字符）.
  • section标签 => 定义文档某个区域.
  • time标签 => 定义日期或时间.
  • wbr标签 => 规定在文本中何处适合添加换行符.

HTML5的新特性

  1. 新增语义标签 => header、nav、article、section、aside、footer
  2. 新增多媒体标签 => audio、video
  3. 新增input类型 => email、url、date、time、month、week、number、tel、search、color
  4. 新增表单属性 => required、placeholder、autofocus、autocomplete、multiple

CSS3的新特性

  1. 新增属性选择器 => 根据元素的属性及属性值来选择元素

    • E[att^=value] 指选择名称为E的元素，且该元素定义了att属性，att属性值包含前缀为value的子字符串。
    • E[att$=value]指选择名称为E的元素，且该元素定义了att属性，att属性值包含后缀为value的子字符串。
    • E[att*=value]指选择名称为E的元素，且该元素定义了att属性，att属性值包含value的子字符串。
    • 其中E可以省略，省去后可以匹配所有满足条件的元素。

  2. 新增结构伪类选择器 => E:first-child、E:last-child、E:nth-child(n) [even、odd、n的公式]

    E:first-of-type、E:last-of-type、E:nth-of-type(n)[even、odd、n的公式]

  3. 新增伪元素选择器 => ::before ::after 必须有content属性

滤镜filter

​ filter:blur(5px) => blur模糊处理，数值越大越模糊

calc函数

​ width:calc(100% - 80px); => 父元素的宽度减去50px

CSS3过渡（重点）

  • transition:要过渡的属性(多个用all) 花费时间 运动曲线 何时开始；
  • 谁做过渡给谁加 搭配hover使用
  • Web服务器一般指网站服务器，又分为本地服务器和远程服务器
  • px:固定像素 em相对于父元素 rem相对于根元素

JavaScript

  • C语言：puts(“你好”);
  • PHP：echo"你好";
  • Java: System.out.println(“你好”);
  • JavaScript:alert(“你好”);
  • 作用：表单动态校验（最初目的）、网页特效、服务端开发（Node.js）、桌面程序（Electron）、APP（Cordova）、控制硬件-物联网（Ruff）、游戏开发（cocos2d-js）
  • JS组成：ECMAScript(JS语法)、DOM（页面文档对象模型）、BOM（浏览器对象模型）
  • alert(msg) => 浏览器弹出警示框
  • console.log(msg) => 浏览器控制台打印输出信息
  • prompt(info) => 浏览器弹出输入框，用户可以输入信息
  • DOM主要用来操作元素
  • 获取页面元素
    1. 根据ID获取 => document.getElementById(‘time’)
    2. 根据标签名获取 => document.getElementsByTagName(‘li’)
    3. 根据HTML5新增方法获取 => document.getElementsByClassName(‘类名’)、document.querySelector(‘选择器’)、document.querySelectorAll(‘选择器’)
    4. 特殊元素的获取 => 获取body元素：document.body 获取html元素：document.documentElement
  • 事件三要素：事件源、事件类型、事件处理程序
  • 执行事件的步骤
    1. 获取事件源
    2. 注册事件（绑定事件）
    3. 添加事件处理程序（采取函数赋值形式）
  • 改变元素内容 => element.innerText => 起始到终止全部内容，但去除html标签，去掉空格和换行 element.innerHTML => 起始到终止全部内容，包括html标签，同时保留空格和换行
  • element.style => 行内样式操作
  • element.className => 类名样式操作（会直接更改元素类名，会覆盖原先类名）
  • element.onfocus => 获取焦点事件
  • element.onblur => 失去焦点事件
  • 排他思想：首先干掉其他人，再设置自己
  • onmouseover => 鼠标经过
  • onmouseout => 鼠标离开
  • 获取属性值 element.属性 => 自带属性 element.getAttribute(‘属性’) => 自定义属性
  • 设置属性值 element.属性=‘值’ element.setAttribute(‘属性’,‘值’)
  • 移除属性值 element.removeAttribute(‘属性’)
  • H5自定义属性 => 以data-开头
  • H5新增element.dataset.index或element.dataset[‘index’] dataset包含data开头的集合
  • 节点操作：nodeType、nodeName、nodeValue
  • 父级节点：node.parentNode
  • 子级节点：parentNode.childNodes(标准)