完成ENGINEERING NOTE

HTML&JavaScript

从 HTML 标题、图片、链接、表格、音视频和常用布局标签开始整理的前端基础笔记。

HTML前端

CSS格式控制

引入

行内引入

<h1 style:"...">

</h1>

内嵌引入内嵌引入需要在head部分进行声明，格式为：

<style>
    h1 {
        ...
    }
    h2 {
        ...
    }
</style>

CSS文件引入（外联引入）这种引入方式需要一个.css文件来保存格式信息。

h1 {
    ...
}
h2 {
    ...
}

同时在html中使用link来引入，内嵌引入的优先级大于CSS文件引入。

<link rel="stylesheet" href="style.css">

CSS选择器

元素选择器：

typename {
}

类选择器：

.classname {
}

id选择器：

#id {
}

其中，id选择器的优先级最高，类选择器次之，元素选择器最低

CSS属性

color：设置文本颜色
font-size：字体大小，单位为px
text-decoration：规定添加到文本的修饰，none表示定义标准的文本
line-height：行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中文本的对齐方式，right.center.left

盒子属性

组成：content·内容，padding·内边距，border·边框，margin·外边框属性：width：设置宽度 height：设置高度 border：设置边框的属性（边框粗细， solid，颜色） padding·内边距 margin：外边距如果只需要设置某个方位的边框，内边框或外边距，可以在属性名后加上-位置，如padding-top, padding-left, padding-right

JavaScript基础

javascript的引入

在html中引入js有两中方法，一是内嵌引入，在html中使用

<script>
    alert("牛魔酬宾")
</script>

第二种是有独立的js文件，通过

<script src="../js.js"></script>

来引入。

输出语句

在浏览器中输出：window.alert()
将字符写入html，并在网页中显示：document.write()
在网页控制台中输出：console.log()

数据类型

js中使用var声明变量，且js是一门弱类型语言。var定义的变量是全局变量，可以重复定义。使用let声明的变量是局部变量，不能重复定义。可以使用const声明只读变量。 js拥有五种数据类型：number, string, boolean, null, undefined。当数据未作初始化时，默认为undefined；使用typeof可以获取数据类型。使用=或进行比较操作，前者不会进行类型转换，而后者会进行类型转换，只要值相等就会判定为等。

类型转换

将字符串转化为数字时，若有不是数字的元素，则转化为NaN，否则转化为数字。将字符串转化为boolean时，空字符串转化为false，只要有元素，则转化为true。数字转为boolean，0和NaN转化为false。Null和undefined均转化为false。全局方法parseInt()可将字符串类型转化为int（float需要用parseFloat()）。

函数

Js是弱类型语言，不需要指定返回类型和参数类型。使用function关键字来声明函数。

function(num1, num2) {
    return num1 + num2;
}

可以使用以下语法来声明一个函数对象：

var plus = function(num1, num2) {
    return num1 + num2;
}

对象

Array对象定义Array对象可以使用如下语法：

var array = new Array(1, 2, 3, 4);
var array = [1, 2, 3, 4];

访问则使用[]符号。

String对象定义String对象使用与Array对象类似的语法。 String对象有以下方法（成员方法）：

charAt()     //返回在指定位置的字符
indexOf()    //检索字符串
trim()       //去除字符串两边的空格
substring()  //提取字符串两个指定的索引号之间的字符

自定义对象定义自定义对象使用如下语法

var classname = {
    int: 100,
    string: "我不到啊",
    fun(color) {
        return color;
    }
}

JSON对象定义JSON对象使用以下语法：

var jsonObject = '{"name":"JSKringKoter", "age":20, "addr":["南京", "仪征"]}';

JSON对象与JS对象的相互转化使用以下语法：

var jsObject = JSON.parse(jsonObject);
var jsonObject = JSON.stringify(jsObject);

BOM对象 BOM是将整个浏览器封装而成的一个对象，包括五个方面：Window窗口，Navigator浏览器对象，Screen屏幕对象，History历史记录对象，Locatiion地址栏对象。对于Window对象，它的属性包括：

window.history    对History对象的只读引用
window.location   对location对象的只读引用
window.navigator  对Navigator对象的只读引用

方法：

alert()     弹出一个消息框，其中可以填消息内容
confirm()   确认框，可以填内容
setInterval()    按照指定时间循环执行函数，参数是一个函数对象和一个数字
setTimeout()     在指定的时间延时后执行操作，参数同上

其中，location拥有一个成员href，对这个成员赋值即可跳转至相应的页面。

alert(location.href);      //输出当前页面的href
location.href = "jskrigkoter.github.io"  //跳转页面

DOM对象 DOM是将document封装起来的一个对象，其中包括了该HTML文件中的所有内容。使用以下函数可以获得相应目标的引用：

document.getElementById(Id);                  //获得指定id的元素
document.getElementsByName(name);             //获得指定name的元素数组
document.getElementsByClassName(classname);   //获得指定classname的元素数组
document.getElementsByTagName(tagname);       //获得指定tagname的元素数组

JavaScript事件

监听事件可以通过两种方式：

<input type="reset" onclick="msgBoxCareful"></input>
<script>
    function onclick() {
        alert("牛魔酬宾");
    }
</script>

或：

<input type="reset" id="resetButtom"></input>
<script>
    document.getElementById("resetButtom").onclick = function() {
        alert("牛魔酬宾");
    }
</script>

on+事件可以找到挺多事件。

Vue框架

Vue是一种数据-模型-数据的框架，需要从其官网下载vue.js，并通过scirpt标签引入：

<script url="vue.js"></script>

Vue可以实现数据的接管，将代码层的数据与前端相绑定，使得数据能够动态变化。要使Vue接管区域，需要使用以下命令：

<script>
    new Vue ({
        el: "#app",
        data: {
            message="Hello World",
            url="http://jskringkoter.github.io"
        }
        methods: {
            handle: function() {}
        }
    })
</script>

Vue指令

带有v-前缀的字段称作Vue指令。常用的指令有：

指令	作用
v-bind	实现与目标元素的单项绑定
v-model	在input标签中，实现双向绑定
v-if	条件性的渲染某元素，判定与ture时渲染
v-else-if	条件性的渲染某元素，判定与ture时渲染
v-else	条件性的渲染某元素，判定与ture时渲染
v-show	根据条件展示某元素，区别在于切换的是display的值

HTML&JavaScript

标签

标题标签

水平线标签

图片标签

注释

Span

超链接

音频，视频

换行，段落

空格：&nbsp

表格

表单