web前端:(HTML.CSS,JS(JavaScript)
HTML
-
系统架构体系
1.b(浏览器)/s(服务器)架构
2.c(客户端)/s(服务器)架构 -
B/S(web系统)特点
1.规范性高
2.使用比较方便
3.本身的实现成本较低 -
HTML核心基础:网页内容包含了文字,图片,超链接,视频等等内容。
-
HTML是超文本标记语言;超文本是图片+视频+文字+链接
-
web前端的三项技术:
1.HTML标签基本内容
2.CSS:设置元素的属性样式
3.JS:让元素有动态效果。 -
web前端常用的开发工具是IDE工具,特点是快捷的开发效率、语法提示、语法高亮等
-
7.HTML常识标签
1.<!DOCTYPE html>
是申明执行的文件是HTML
2.快捷键注释:ctrl+/
3.<title>
在这里插入代码片:窗口的标题
4.charset=“utf-8”:定义字符编码
5.<body>
:页面显示的文本,超链接,图片,视频
6.<h1>
标签 h1-h6 从字体的大小粗细依次递减,h1最大,h6最小
7.<p></p>
标签,段落标签
8.<br />
标签,换行标签
9.<hr>
标签,分割线标签
10.<font>
标签,字体设置标签
11<img>
标签,图片标签
12.<a>
标签,超链接标签
13.行、列标签
<tr>
<td>
<td>
<tr>
- 标签的特点:
1.标签是放在尖括号中的
2.标签一般是成对出现的,称为闭合标签
3.单标签是只有一个的,也称为自关闭标签
CSS
-
CSS三种使用方式:
1.元素内嵌样式表(只作用于标记的自己)
2.文档内嵌样式表(单写玩css文件保存后,html中引用时,会全部使用)
3.外部样式表 -
三种方式的使用范畴;
1.网站主页一般使用文档内嵌样式表
2.网站的其他页面使用外部样式表
3.元素内嵌样式表一般是很少使用的。 -
选择器:
1.标签选择器:例如<h1>
标签
2.id选择器:指定id后,#(id){}输入属性与值(单元素需设置时选择)
3.类选择器:class属性,.ip{}输入属性与值(多元素需设置时使用)
4.组合选择器:结合类、id、标签选择器
5.伪类选择器: -
优先级
就近原则,因代码是从上至下执行,最后的执行结果会覆盖之前的结果。 -
css常用的属性:
1.color:字体颜色
2.background:背景颜色
3.font-size:字体大小
4.font-family:字体型号(黑体)
5.font-style:字体风格
6.text-align:居中
7.border:1px solid red :设置元素的边框,包括大小,颜色和边框样式。
8.background-color:HTML元素背景颜色
9.background-image:图片地址,设置html背景图
10.line-height:20px :设置html元素的行高
11.text-decoration:none:设置超链接的下划线
12.margin: 0 auto; : 设置html元素和其他周围html元素之间的距离。 -
盒模型
1.总元素的宽=内容宽度+左填充+右填充+左边框+右边框+左边距+右边距。
2.总元素的高=内容高度+顶部填充+底部填充+上边框+下边框+上边距+下边距。
3.设置边框时,边框宽、样式、颜色缺一不可。
4.内边距会自动使用内容区的背景颜色。
5.margin auto容器对于父容器居中,内容不会居中。
6.text align是文字对于本容器的内容居中,容器不会居中。
7.border-width:10px,20px,30px。40px,分别对应上,右,左,下。
8.float:是浮动。是能左和右。
js
-
1.变量:是一个保存数据的容器;
2…变量命名规则:1.大小字母开头,数字可以在中间或者结尾; 2:也可以以下划线或$开头,但是不建议这么做; 3:变量命名不能使用关键字和保留字; 4:关键字为js本身已经使用的,已经有意义的单词; 5:保留字为js准备使用的单词; 6:(给项目起相关的名字,别鸡儿瞎起) 7:y Y 是两个不同的变量;
3变量赋值时,数字不加引号就是number数字,加了引号就是字符串。
4.双等号不会判断数据类型,三等号要数据类型都一样才可以
5.(!=)一个不等于号的时候不管类型,(!==)两个不等于时会判断数据类型。
6.&&表示且,and的意思,||是或,or的意思。满足其中一个就可以的意思。
7. ! 一个感叹号是“非”得意思。
8. If(条件) {达成条件时输出的语句}else if(条件){ 达成条件时输出的语句}
9. Switch(表达式){ case1: 执行代码1 Break; case2: 执行代码2 Break; defult 与1和2都不同时执行的代码 } 10 for(执行语句1;执行语句2;执行代码3){ 被执行的代码块 } 11 While(条件){
需要执行的代码 } 12 do{执行的代码}
While(条件)
3.i++是先赋值,再自增;++i是先自增,再赋值。
4.While循环特点:条件肯定会判断一次,但是花括号里面代码语句块不一定会执行。
5.Do while循环:不管条件是否成立,代码语句总会执行一次。
6.break为结束循环,之后的代码循环不会再执行。
7.continue为结束本次循环,大循环会继续。
8.函数的实现代码的重复使用,减少代码冗余。
9.定义函数
10.函数命名规则:禁止使用关键字,保留字,数字。一般用英文起名字。要见名明意。
11.函数名后面括号里面是定义形参,定义了几个参数,再函数调用的时候,就要传入几个。一根萝卜一个坑。占满他。
12.函数的调用:函数调用的时候使用:函数名(),函数如果定义了参数,调用时要传入参数,传入的位置要与形参一致。
13.Return函数的返回值
14.写在函数外的定义,是全局变量。写在函数内的是局部变量。
15.全局变量:是定义在函数体外的变量,可以在任意地方调用。
16.局部变量:定义在函数体内的变量,只能在函数体内使用。
17.局部变量参数只能在函数中使用!!
18.三种方式修改html
1 id定位元素修改 getElementByid
2.通过标签名修改 getElementsByTagName 返回的是一个元素对象的集合,以数组的形式来保存的,要改变其中的某个标签的内容,需要使用数组的下标(0)之类的,来选中.
3.通过类来选择 getElementsByclassname返回的也是一个数组,和标签的修改方式一样的
4.通过name也可以的。 getElementsByName.也是一个数组的方式。和标签修改方式一样。