前段开发三剑客
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
段落标签：
段落标签
列表(一行多列）标签：
无序列表（加点）：
有序列表（加数字）:
表格（多行多列）标签：
表单标签（收集输入数据，提交给服务器）：
<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)
扫一扫
4380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
