前段开发三剑客

it2023-01-09  52

前段开发三剑客

html:页面结构

css:页面美化

javascript:页面行为(用户和页面交互)

html

定义:超文本标记(标签)语言,让浏览器了解页面

作用:开发网页的语言,网页页面结构

结构:

<!DOCTYPE html> <!--文档声明,html5 --> <html lang = 'en'>翻译 <html> <head> <meta charset = 'utf-8'> <!--编码--> <!--当时用手机时不做缩放--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>

标签

单标签:

行分割标签:


换行标签:

图片标签:’’(alt时加载失败显示的文字)

双标签(可以嵌套使用):

标题标签(h1~h6):

标题标签

块标签:<div class=>块标签 span

段落标签:

段落标签

超链接:href=’’:刷新,href=’#’:不刷新

列表(一行多列)标签:

无序列表(加点):

有序列表(加数字):

表格(多行多列)标签:

(表头加粗) (表数据,写多个)

表单标签(收集输入数据,提交给服务器):

<form,> <label,>(文本标签) <input,>(一行) <textarea col,row>(多行) <select,option>(下拉)

input :type =text,password(加密框),radio(圆点),checkbox(小框),file(文件)button ,submit(提交),reset(重置)

提交数据:

form: action=提交网址 method=提交方式(GET:传参方式提交/POST:以响应体穿表单)

input :name=收集数据的键 value=收集数据的值

css

定义:层叠样式表

作用:添加样式(style):美化网页页面,控制页面布局

基本语法:

选择器

定义

选择器{

样式规则

属性名:属性值;

}

作用:选中标签,设置标签样式

选择器分类:

标签选择器:标签名{}(通用设置,同意改)

类选择器:.标签名 class=

后代选择器:有嵌套关系的 选择器1 选择器2…{}

id 选择器:ID选择器只能对应于页面一个元素,不能复用(行内样式可以使用)使用:#id名

组选择器:类选择器1,类选择器2,类选择器3…{}

伪类选择器:向选泽器添加特效,使用:div:hover{}

css的引入方式:

行内样式(代码复用低):style= ‘’

内嵌样式:head内直接改 style=’’

外链样式:link rel =‘stylesheet’ type = ‘/’ href= ‘css/main.css’

边框(border):粗细,颜色,实虚,边框合并(collaspe)

css属性:

width,height,background,border(top,left,bottom,right)

内边距:padding(内容到边框的距离)

外边距:marign(这个表情的边框到那个边框的距离)居中:margin = auto

文本属性:color,font_size,font_family(类型和风格),font_weight:bold,line_light,text_decoration,text_align(居中显示),text_indent(首行缩进)

text_decoration:none:去掉下划线under_line:加下划线

JavaScript

定义:解释型的脚本语言,是由浏览器解释执行的

作用:实现网页行为,让用户和页面有交互

应用场景:提交注册,弹出请输入用户名和密码

使用方式:

行内式(处理事件):<input type = ‘button’ name = ‘’ value= ‘普通按钮’ onclick ='alert('ok);>

内嵌式:可以写在head,也可以在body <script,> alert(‘内嵌式打印’);</script,>

外链式:‘ alert(‘内嵌式打印’);’

变量和数据类型

变量

定义:var 变量 = 值;

变量作用域:跟Python一样

注释:单行注释:// 多行注释: /* */

数据类型

number 数字类型 iNum

string: 字符串类型 sTr

boolean:布尔类型 bIsTrue

undefined:未定义类型 tmp

null:空对象类型 oNull = null

object: 对象类型:复合类型 oPerson ={

name:‘xiaoming’,

age:20

}

alert(oPerson.name)

alert(oPerson.age)

命名规范

区分大小写

字母,数字,下划线$

匈牙利命名

第一个字母为类型第一个字母,后面是大驼峰命名

打印:alert(’+’)

数据类型判断:typeof()

运算:iNum++ 相等于 iNum +=1

函数定义和调用

function foo(n1,n2){

alert(‘hello!’);

return(返回函数值,执行完函数结束)

}

调用:foo();

var iCount = foo(19,20)

alert(iCount)

jQuery

最新回复(0)