【HTML元素、盒子模型、定位方式、JavaScript变量、数据类型、运算符、方法、语句、VUE框架】

主要内容：

HTML元素、盒子模型、定位方式、JavaScript变量、数据类型、运算符、方法、语句、VUE框架

• HTML:超文本标记语言

文本相关标签：h1标题,p段落,hr分割线,br换行,b加粗,i斜体,u下划线,s删除线,

列表标签：无序列表ul  li ,有序列表ol li

图片标签：img ，src路径

超链接：a href 路径

表格标签：table ，border 线 ，tr行 td列

表单 ：form ，action设置提交地址

分区标签：div 块级标签，独占1行。span行内分区标签，共占1行

        包括header,main,footer,section,nav

• CSS:层叠样式表，美化页面

引入方式：

        （a）内联样式：标签的style属性中添加样式代码

        （b）内部样式：在head中添加style标签，标签内写样式代码

         （c）外部样式：单独css样式文件写，可以多页复用

选择器：

        a、标签名、

b、#id 、

c、class类、

d、分组多个“，”

d、*任意，

e、子孙后代选择器，body div p：元素和元素之间的关系选择:包括后代

f、子元素选择：body>div>p，不包括后代

• 颜色：RGB，RGBA（透明度）        

背景图片：background-img:url 路径，size：大小，position：位置，repeat：重复，

文本和字体：text-align:水平对齐方式，decoration:划线，height高度，shadow阴影，weight:加粗，size大小，style样式，family字体

元素显示方式display

        block:块级元素，独占1行，包括p，div，h1-h6，可以修改行宽高

        inline：行内元素，共占1行，不可以修改宽高，span，a，i，u，b

        inline-block：行内块元素默认值，共占1行，img，input，可以修改宽高。

        行内元素如果需要修改宽高，需要修改display

盒子模型：content、margin控制元素显示位置、border边框、padding控制元素内容的位置

• CSS三大特性：继承性、层叠性、优先级 

定位方式：静态(默认)：、相对relative、绝对abstract、固定fixed、浮动float

静态(默认)：从左上为基准，跨级上到下排列，行内左边到右边，默认无法堆叠

相对定位：偏移也是针对初始位置进行，left，right。。

绝对定位：对于窗口进行偏移或者针对上级元素

固定定位：固定窗口位置不变

浮动定位：浮动就会往左边，需要上级元素停止。全部浮动的话没有行高，需要overflow：hidden

• JavaScript:JS，页面动态效果

添加JS代码：事件（设置时间点）、点击事件（点击元素）

内部html位置添加script标签，里面写代码。

外部：单独js文件，然后写代码。

变量：

声明变量let，作用域跟java类似。数据类型也类似，String、number、boolean、underfined。number跟java的数值类型总和。

运算符：/除法不同，根据结果自动转化为整数或小数。=== 先比较类型，后比较值。其他关系运算符、逻辑运算符、赋值运算符、三目运算符跟java一样

语句：跟java一样。if,while,for,switch case

方法：function f（参数列表）{方法体}

跟页面相关的方法：document.querySelector("选择器")；定位元素对象

元素对象.innerText:修改获取文本内容

控件对象.value 修改值

NaN：not a number不是数字

window方法：alert弹出提示框、confirm弹出确认框、setInterval 开启定时器、clearInterval 停止定时器、setTimeout 开启只执行1次的定时器

DOM：文档对象模型

创建元素对象，document.creatElement("标签名")

添加元素：父元素对象.append（）。

前端MVVM设计模式：

• VUE框架：

加载CDN服务器上的js文件，网址

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.6.14/vue.min.js

• unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

{{变量}} ：插值，让此处的文本内容和变量进行绑定

v-text=变量：元素的文本内容和变量进行绑定

v-bind：属性名=变量：元素的某个属性的值和变量进行绑定

v-model：双向绑定，用于各种控件中，控件和变量的值双向影响绑定