前端知识的学习！

静态网页：

<title>标签显示网页的名字。

<body>标签里写网页显示的内容。

<H1>-<H6>标题标签，从大到小。

<br>换行

<ul><li>列表标签，无序排列，自动换行。

<ol> <li>列表标签，有序排列，自动换行。

<img>图片标签，src里写图片地址，一般都为相对路径，便于移植。

<a></a>超链接标签，href里写要跳转的地址，#号代表空地址，点击它可以访问链接的页面。还可以添加name属性，在另一个a标签里的href里写入上一个a标签的name值可以跳转到上一个a标签的位置，称为锚定效应，一般用于网页里的回到顶部功能。还可以添加target属性_blank表示跳出新页面，_top表示此页面跳转，不写的话默认是此页面进行跳转。

<input>输入框标签，里面的type属性可以修改输入框的类型，text文本输入，password密码输入，radio单选框（注：name属性值的参数要相同，否则产生不了单选效果）,number数字输入，week/date日期选择输入，checkbox多选框，email邮件输入，file选择文件，button按钮，submit提交按钮

<select><option>下拉选择框

<textarea>文本段输入框        

<table>表格标签，border属性边框宽度，cellspacing属性边框间距，bgcolor背景颜色，background添加背景图片

<tr><th>tr代表行，th、td代表列，th一般在第一行使用，自动加粗剧中，而td是普通文本。里面可以加rowspan（行合并）和colspan（列合并），align="center"剧中属性。

<form>表单，包裹表格，有提交的功能（前后端交互关键），method属性默认为get（在地址栏显示提交的信息），改为post（不在地址栏显示，交给程序去处理），action属性（配合post使用，指定数据的去处）！

面试：表单post和表单的区别：get不安全，且长度受限；post不在地址栏展示，更加安全。

<audio>播放音频文件，controls属性播放控制台，是否展现，不写这个属性就不展示，src添加文件的地址，可以是网页，也可以是本机文件。

<video>播放视频文件，属性同上！

css修饰：

        <style>css修饰的关键字，可以加在行里，可以在<head>里分别或者集体修饰，可以另外保存在一个css文件里与展示代码进行分离。分离后只需要在要使用的html文件的表头里添加<link>表签，rel="stylesheet"属性表示引入css样式表，href属性里添加css表的名称。

        class修饰，通过点class名对本属性或多个class名字相同的属性进行修饰。

        id修饰，通过#id名对id名为此的进行属性修饰，一般每个属性的id名都不相同。

        分组选择器修饰：将多个选择器选中的元素组合在一起，统一设置样式。

        标签修饰，通过标签名进行修饰，或者方括号里面填写条件。例：提交按钮如下：

        

input[type="submit"]{
				width: 60px;
				right: 30px;
				color: white;
				background-color: blue;
				border-color: blue;
				font-size: 15px;
			}

盒子模型：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

理解如下图：（摘自菜鸟教程）

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。 

JS动态网页

<script>:js代码写入的地方，可以在表头，可以在body内，可以单独写在js文件里。

js常用数据类型：number，String，boolean，null，undefined；还有Symbol，这种类型的值用不相等，用来解决属性名相同的问题；bigInt，安全存储，操作大整数，后两种少用。

js是弱类型语言，所以定义数据类型时万物皆可var类型 

parseInt：转换为number类型，其他类型语法同此，后面类型不同

onclick属性：单击事件

ondblclick属性：双击事件

 onmouseenter：鼠标划入事件

onmouseout：鼠标划出事件

alert：页面弹窗

confirm：确认框

prompt：从键盘接受数据

document.write('hello js');向网页写出数据

=：赋值

==：比较值

===：比较值和数据类型

typeof：返回指定参数的类型

console.log：控制台进行输出

if else for while语法同java，高效for循环for(var 自定义名称   in     遍历目标名称){ }

js数组的创建方式：

        var arr=new Array('abc','hello',123,null);直接赋值，可存null。

        var arr4=[1.1,2,'hello',null];直接赋值

        var arr=[ ]; arr=["abc",123,1.2,null];先定义再赋值或者直接赋值。

数组遍历同java

js函数创建方式：

function a(){
				console.log("第一种无参函数")
			}
			var b=function(){
				console.log("第二种无参函数")
			}
			function c(a,b){
				console.log("第一种带参函数"+(a+b));
			}
			var d=function(a,b){
				console.log("第二种带参函数"+a*b);
			}
			function e(a,b){
				var x=a+b;
				console.log("第一种带参返回函数");
				return x;
			}
			var f=function(a,b){
				var x=a*b;
				console.log("第二种含参返回函数");
				return x;
			}

        第一种调用和函数写的位置无所谓，只要有就可以；第二种必须先定义再调用，顺序不可变！

js对象创建方式：

        

            //1.声明对象
			function Car(){}
			//2.创建对象
			var c=new Car();
			//3.动态的绑定函数或者属性
			c.color='red';
			c.name=prompt("请输入姓名");
			c.price=9.9;
			console.log(c)
			console.log(c.color);
			console.log(c.name);      
			//绑定函数
			c.run=function(){
				alert("我是c的run函数")
			}
			c.run();
			console.log(c);
			
			
			
			//方式二
			var c2={
				cname:"jack",
				cage:22,
				crun:function(){
					console.log(c2.cage+c2.cname);
				}
			}
			console.log(c2);
			c2.crun();

        第一种可以动态的定义属性或者方法，第二种简单，但是需要提前定义好使用。

JSON

        用来数据之间数据类型的互相转换，一般在表头<script>里写,或者单独拿出来在js文件里写。HTML文件调用格式：<script src="JSON.js">

        json字符串：利于传输，给服务器发送数据，可以对字符串进行截取拼接等操作。

        json对象：调用操作方便。

        字符串转对象：JSON.parse(字符串名);

        对象转字符串：JSON.stringify(对象名);

        三种定义格式：

一、字符串：var a='"name":"yjh"';
二、json对象：var b='{"name":"yjh","age":"22"}';
三、json数组：var c='[{"name":"zzf","age":"18"},{"name":"lyf","age":"30"}]';

DOM树：把页面里所有的元素都变成活的，可调用的，可编写变化的！

常用语句：

        getElementById(id属性的值)。

        getElementsByName(name属性的值)，获取多个存入数组。

        getElementsByClassName(class属性的值)获取多个存入数组。

        getElementByTagName(标签名的值)获取多个存入数组。

        write（浏览器展示的数据）。

后面我会学习VUE，简化编码，DOM做过度作用。

读到这里就结束了！学习完VUE再来和大家分享更多的前端知识吧！