html:页面结构
css:页面美化
javascript:页面行为(用户和页面交互)
定义:超文本标记(标签)语言,让浏览器了解页面
作用:开发网页的语言,网页页面结构
结构:
<!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=收集数据的值
定义
选择器{
样式规则
属性名:属性值;
…
}
作用:选中标签,设置标签样式
选择器分类:
标签选择器:标签名{}(通用设置,同意改)
类选择器:.标签名 class=
后代选择器:有嵌套关系的 选择器1 选择器2…{}
id 选择器:ID选择器只能对应于页面一个元素,不能复用(行内样式可以使用)使用:#id名
组选择器:类选择器1,类选择器2,类选择器3…{}
伪类选择器:向选泽器添加特效,使用:div:hover{}
行内样式(代码复用低):style= ‘’
内嵌样式:head内直接改 style=’’
外链样式:link rel =‘stylesheet’ type = ‘/’ href= ‘css/main.css’
边框(border):粗细,颜色,实虚,边框合并(collaspe)
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:加下划线
定义:解释型的脚本语言,是由浏览器解释执行的
作用:实现网页行为,让用户和页面有交互
应用场景:提交注册,弹出请输入用户名和密码
使用方式:
行内式(处理事件):<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)