学习回顾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(标准)