前端简单的学习。web分区

1.HTML快速入门

浏览器可以解析出来这种语言。

 title是网页打开的名字，body里的文字是内容。

 

 1.2HTML基础标签

hr：的效果，一条分割线。

 

 font ：定义文本的字体，大小，颜色。color里输出颜色英文即可。

p标签：包裹的是一段话。

br：在一段文字中让它换行。不用包。

加在文字后面。

i:包裹的，字体会变斜。

center，让东西居中。

1.2.1 html转义字符

1.3 图片音频视频标签

 可以把资源放在模块下，通过src展示。

 百分比就是占body的百分之多少。

../到上级目录，本层编写      图片音频——html     的目录是html文件。

当img和html文件夹并列，那就../返回上一层。

音频的cotrols可以不写。浏览器会自己识别。

1.4超链接标签。

 

 里面的文字就可以点。

1.5 列表标签

更改type。但一般都会被css取代。

 1.6 表格标签

tr：行，td：单元格。th：表头的单元格。table：表格，里面的border用来加边框。

第一行是四个th，自动加粗。

第二行就是四个td。

因为每个格都会加边框，所以边框会很多。用table属性里的cellspacing就合并这些线了。

这里可以让单元格占两列。

rowspan可以占两行。

 

1.7布局标签

 

div标签里的，占满一整行。

span，标签的，就在这一行接着。

 1.8 表单标签

1.8.1 form

登录和注册的窗口都是表单。点按钮，就把信息发送到服务端。然后把数据和数据库交互。

form里的标签。

action：提交表单往哪发数据，URL。

例子：

 这个submit就是后面的提交按钮。

input里的数据想提交，必须得有name属性。

点击提交后，提交键值对。属性--》input里写的值。

 

这里键值对提交到url，是因为method方法没写，默认为get,所以提交给url后面。

 

 如果method的属性是post，那这么参数会在http请求协议的请求体中。

如此查看post信息如下图。

再输入信息，就抓取到一个请求。

点进去最下边。请求体中

 

1.8.2 form里的表单项标签

下面的type取值，是<input>的。

 hidden，比如说要修改当前信息。需要把id提交到后台。id隐藏在表单里用hidden。

id=123，也提交了。

2.css大概了解。

 

 2.1css的导入方式。

第一种方式，div耦合了，不利于服用，就改一行。

第二种方式常用，定义了所有div里包 裹的  字的颜色。

第三种方式，定义一个外部css，然后引入。

2.2 CSS选择器

3.javascript

例子：比如说点一下开灯，就换了个图片。

 

 一般有一个js的文件夹用来放js。

 

 这个标签可以放很多，放一个就弹出一个窗口。

3.1JS基础语法

3.1.1书写语法。

3.1.2输出语句

 windows可以省略。

document怎么用。

 cosole写入浏览器控制台，打开F12就能看到。

 3.2 变量

var这个变量可以接收多个类型的值。

var定义的，可以在代码块外生效，相当于全局变量。

右图20覆盖了30。

 

 let声明的，只在代码块里有效

 const定义之后不可再修改。

3.3 数据类型

 3.4 运算符

与java比

多了一个===，全等于符号 。

区别如下。

 3.4.1 类型转换。

字符串转数字

1.字符串前面用+号，意思是正负号的正号

  str就转成了20。

不是数字，用+  正号，就会转成 NAN。

 2.直接用parseInt转换。

boolea 转数字。true转为1，false转为0。

其他类型转boolean

if里自动转为boolean类型。

这俩效果一样。

 

 3.5流程控制

和java一样。

3.6函数、

类似C语言函数，没有返回值。 直接在内部return。

函数不会自动运行。

1传给a，2传给b，3没人接收就不用。不报错。

4.JS对象

4.1 数组对象array

 

长度是可变的。可以用.length查看长度。 

 .push方法，往数组尾部加元素。

    .splice方法，左参数为起始下标，右参数为删除个数。

 4.2 String 对象

4.3自定义对象

类似定义类。

 用person，加.  可以调用内部结构。

5.BOM对象

5.1window对象

指，打开浏览器的窗口。一个窗口一个对象。

 confirm。

setInterval，循环执行。

setTimeout，指定时间后执行一次。

 

5.1.1 开关灯案例：定时器实现

函数是写在script里面的。

5.2navigator浏览器对象

整个浏览器就是一个对象。

5.3history历史记录对象。

后退按钮就是back方法，返回到上一个url。

 

 5.4Location地址栏对象：

获取当前地址栏的url，或者设置url。

跳转到百度。

 

 5.4.1跳转页面

 5.5 Screen对象

 6.DOM对象（查阅文档使用。）

DOM：文档对象模型

浏览器会把里面的机构封装成对象，同时有一个DOM树。

三种DOM。

JS可以通过DOM，来操作html。比如，通过image,属性里src，可以设置图片的url。

 

6.1获取Element对象

 传进来id。

6.2   Element对象的使用

查阅文档

比如图片对象，的src来设置url。

div标签对象，没有自己的方法，所有的对象都继承element。所以直接用element里的方法。

返回style属性。或者设置。

可以直接用.来调用element里的方法。

checkbox的对象使用。check方法。

true是选中，false是不被选中。

 

 例子：

给里面的都打上勾。

 

7.事件监听

 7.1 如何绑定事件并监听

方式一：onclick，就是一个事件，点击之后，就跳到后面的方法。

耦合了，没有分离服用。

方式二：通过DOM对象给onclick方法加上方法。

 7.2 常见事件（查阅资料）

焦点，就比如输入用户名，点进那输入行，这一行就有了焦点。

不点输入行点别的，焦点就不在输入行，就失去了焦点。

onblur失去焦点。

onfocus，获得焦点。

 

剩下的查阅资料看案例。

7.2.1 案例：表单验证

 看看逻辑就行。

 8.正则表达式

定义了字符串的组成规则。

输入一个字符串，看看是不是满足定义的正则表达式的规则。

不满足格式，提示错误信息。

 1.里定义的不是字符串。两边的/,相当于注释，包起来了。

2.里造的对象传的是正则表达式的字符串。

这里的正则表达式：单个字符最少6个最多12个。

 

 8.1用处

判断密码是不是满足。