WEB

web前端技术

web三要素：服务器、浏览器、HTTP；
1、HTML
1）概述
超文本标记语言；
分为(head>部分和(body>部分；
前者用来设置基本属性和优化页面内容；
后者是页面具体显示的内容；
2)常用标签
（1）标题标签
h1~~h6-----字号设置不同；
（2）列表标签
(ol> (/ol>----有序列表；
(ul> (/ul>----无序列表；
（3）(p>、(div>与(span>
(p>是段落标签，属于块级元素；
(div>是行标签，属于块级元素；
(span>是组合连接标签，属于内联元素；
（4）输入框标签
(input type=“text”>;—普通文本框；
(input type=“password”>----密码；
(input type=“radio”>—单选框；
(input type=“number”> —数字；
(input type=“week”>—日历；
(input type=“checkbox”>----复选框；
(input type=“button”>----点击；
(input type=“submit”>----提交；
(textarea> (/textarea>----多行文本框；
(select> (option> (option> (/select>—下拉选择框；
（5）图片与链接标签
(img src=“1.jpg”>—图片标签；
(a herf=“网址链接” target="_blank">；----链接标签,target="_blank"表示在新的空白窗口展示链接窗口；
（6）表格标签
(table> (/table>
(tr> (/tr>-----行；
(td> (td>-----列；
(th> (th>-----表头；
#1.表格属性
width—长度；
hight—高度；
border—边界；
cellspacing—边界空隙；
rowspan—行合并；
colspan----列合并；
（7）表单标签
(form method=“get”> (/form>----表单具有提交填写内容的作用；
提交方式有get(默认方式)和post；区别是get方法会使提交内容显示在地址栏上，不安全且有字数限制；post方法会直接提交到服务器；
（8）h5特性
#1.音频标签
(audio controls=“controls”>----添加control控制播放；
(video controls=“controls” loop=“loop”>----添加control控制播放，添加loop来循环；
2、CSS
1）概述
层叠样式表，用来修饰HTML网页；
2)分类
（1）行内CSS
使用style属性；
（2）行外CSS
在头部使用(style> (/style>；
（3）引入外部CSS文件
在头部使用(link href=“CSS文件位置” rel=“stylesheet”/>；
其中rel=“stylesheet"指明了文件的格式为样式表；
3）CSS选择器
（1）标签名选择器；
<标签名>{
}；
（2）class选择器；
.class{
}；
（3）id选择器；
.#id{
}；
（4）属性选择器；
input[type=‘text’]{
}；
（5）分组选择器；
.class,#id{
}；
4)CSS常用属性值
font-size: 10px;----字号；
text-indent: 10px;----缩进；
text-align: center;-----居中；
border-style: solid;-----边界形式，其中solid表示实线，dashed表示虚线；
5）盒子模型
margin—外边框；
border----边框；
padding----内边框；
其中以margin为例，
margin-left表示左侧；
margin-right表示右侧；
margin-top表示上侧；
margin-bottom表示下侧；
margin: 10px 60px前者表示上下，后者表示左右；
3、JS
1）概述
基于对象和事件驱动的脚本语言；
用来实现用户与浏览器的交互；
直译式，边解释边运行；
弱类型语言，不区分数据类型；
良好的交互性和跨平台性；
2）分类
（1）内部JS
在头部用(script> (/script>；
（2）引入外部JS文件
在头部用(script src=“JS文件位置”> (/script>；
3）基本数据类型
number—数字类型；
String----字符串类型；
boolean----布尔类型；
null----空；
undefined----未定义；
4）运算符
++、–、&&、||、三元、三个等号和两个等号以及typeof;
其中，两个等号比较的是数值；三个等号比较的是数值和类型；
typeof运算符用来返回数据类型；
5）变量
统一使用var类型定义；
6）方法
（1）function 方法名(){ };
（2）var 方法名=function(){ };
7)数组
（1）var 数组名=new Array(数组元素)；
（2）var 数组名=[数组元素]；
JS语法中数组的长度可以随时改变，可以存放各种类型的数据；
8）对象
（1）内置对象
#1、window
alert(“text”)----弹出提示框；
prompt(“text”)----弹出输入框；
confirm(“text”)-----弹出确认框；
console.log(’'text”)----控制台输出；
document-----获取文档对象；
event----属性，获取事件；
onload()—在浏览器加载完整个html后立即执行!
其中，prompt中输入的数据默认为string类型，若改为数值类型要使用
#2、document
getElementById(id)—获取指定ID的元素；
getElementByName(name)----获取指定名字的元素；
getElementsByClassName (class)----获取指定类的元素；
getElementsByTagName(标签名)----获取自定标签的元素；

（2）自定义对象
#方式一
function Person(){ }；
var p1 = new Person();
#方式二
var p2 = {
“pname”:“李四”,
page : 100,
psay : function(){
console.log(this.pname+this.page);
}
}
4、JQuery
1）概述
js数据库，用于简化js代码;
使用时先引入外部的JQuery文件；
2)用法
在头部中的(script>内部，用$(function(){
})----简写了文档就绪—让body的内容全部执行完再执行；
3）常用的事件
（1）click----单击；
（2）dblclick—双击；
（3）mouseenter----鼠标进入；
（4）mouseleave-----鼠标移出；
4）选择器
$(".s1")----直接获取class为s1的元素，如果有多个，则获取元素的集合；
$("#a1")
$(“div”)
$(“div,span,.mini,#one”)
5、json
1）概述
一种轻量级的数据交换格式；
用来解决浏览器与服务器的数据传输；
2）语法
{k:“v”}-----单条记录，多条记录用逗号隔开；
[{k:“v”},{k:“v”}]-----数组；
3）转换
JOSN.parse(“json”)----将json字符串转为json对象；
JOSN.stringify(obj)----将json对象转为字符串；
6、ajax
1)概述
为了实现异步加载，局部刷新；
2）语法
$(function(){
$.ajax{
type:post,
url:“https://p.3.cn/prices/mgets”,
contentType: “application/json;charset=utf-8”,
data:{
“skuIds”: “J_100003717483”
},
dataType:“jsonp”,
success:function(data){ },
error: function(data){ }
}
})
其中，
type----提交的方式—get/post；
uri-----访问的网址链接；
contentType-----固定写法，提交的数据类型；
data----数据参数；
dataType-----希望返回的数据类型—jsonp;
success----访问成功后执行的命令；
error----访问出错后执行的命令；