网页开发基础-优快云博客

本文链接：https://blog.youkuaiyun.com/ftmy_c/article/details/81210132

HTML

HTML：超文本标记语言，Hyper Text Markup Langage

W3C标准：万维网联盟，World Wide Web Consorttium

结构化标准语言(XHTML、XML)、表现标准语言(CSS)、行为标准(DOM、ECMAScript)

HTML语义化：对文本内容进行结构化或标识；见名知义

网页开发软件：txt记事本、EditPlus、DreamWeaver

HTML网页基本结构：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

HTML基本标签：

标题标签<h1></h1>~<h6></h6>

图像标签<img src="url" alt="文本" width="x" height="y" />

段落标签<p />

换行<br />

水平线标签<hr />

超链接<a href="url" target="目标窗口位置">链接文本或图像</a>

特殊符号：空格  大于号(>)> 小于号< 引号" 版权符号©

注释

</body>

</html>

列表：

无序列表<ul>：

<ul>

<li>列表项内容</li>

</ul>

有序列表<ol>：

<ol>

<li>列表项内容</li>

</ol>

定义列表<dl>：

<dl>

</dl>

表格<table>：

<!-- border边框线条宽度 cellspacing单元格间距

cellpadding单元格边框和内容间距 -->

<tr>

<!-- rowspan：跨行，纵向合并单元格

colspan：跨列，横向合并单元格 -->

</tr>

</table>

表单<form>：

<!--表单元素：文本框、按钮等表单元素>

<input name=”元素名称” type=”类型” value=”值” size=”显示宽度”

maxlength=”字符长度” check=”是否选中” />

文本框text 密码框password 单选按钮radio 复选框checkbox

按钮(提交按钮submit 重置按钮reset 普通按钮button) 文件选择框file

表单结构：<fieldset></fieldset> 表单结构标题：<legend>

关联表单元素：<label></label> 文本域：<textarea></textarea>

下拉列表框：<select>

</select>

</form>

HTML框架结构：

<iframe>标签：行内框架

块元素：独占一行；可以定义宽度和高度；div,p,ul,li

<div>标签：结构化容器，可以放置其他HTML标签；用于定义HTML中的分区或节

内联元素：一行排列显示；不能定义宽度和高度；span,a,label

<span>标签：容器

块元素和内联元素的相互转换：内联元素->块元素 display:block;

块元素->内联元素 display:inline;

网页样式CSS

CSS：级联样式表，Cascading Style Sheet；表现XHTML文件样式的计算机语言

(包括：字体颜色边距高度宽度背景图片网页定位)

CSS引用方式：

行内样式(style属性):

行内式：<h1 style=”属性名:属性值;”>style属性</h1>

内部样式表(style标签)：

嵌入式：

<head>

选择器{

属性名：属性值;

}

</style>

</head>

外部样式表(.css)：

链接式：<link type=”text/css” rel=”stylesheet” href=”css文件路径”>

导入式：<style type=”text/css”>@import”css文件路径”</style>

选择器:

选择器{

属性名：属性值;/*声明*/

}

标签选择器：HTML标签作为名称

标签名{

属性:属性值;

}

类选择器：标签的class属性值作为名称；class可以相同

.类名{

属性;属性值;

}

<标签名 class=”类名”>标签内容</标签名>

ID选择器：标签的ID属性值作为名称；ID唯一

#ID 名称{

属性:属性值;

}

<标签名 id=”id名”>标签内容</标签名>

复合选择器

并集选择器：

p,#id,.class{

font-szie:16px;

color:green;

}

交集选择器：

p.class#id{

font-szie:16px;

color:green;

}

后代选择器：

p #id.class{

font-szie:16px;

color:green;

}

全局选择器：默认设置

font-size:24px;

color:blue;

}

CSS优先级：行内样式内部样式>外部样式 ID选择器>类选择器>标签选择器>全局选择器

CSS继承性：继承关系树(根-父标签-子标签)

CSS属性

文本属性：text

color文本颜色(red、#FF0000) line-height行高 text-align文本对齐方式(left、center、right) text-decoration文本装修(underline、none、Line-through)

字体属性：font

font-style字体风格 font-size字体尺寸 font-weight字体粗细 font-family字体系列

背景属性：background

background-color背景色 background-image背景图片 background-position背景偏移(x轴:left/center/right y轴:top/middle/bottom 像素值或百分比) background-repeat背景填充方式(repeat-x|repeat-y|no-repeat)

列表属性：list

list-style:none 去除列表项标志类型

list-style-type设置列表项标志类型(disc实心圆|circle空心圆|square正方形)

表格属性：table

caption-side标题位置 table-layout设置显示单元、行、列的算法

轮廓属性：outline

outline-color outline-style outline-width

超链接伪类：

a:link{color:red}/*未访问的链接*/

a:visited{color:blue}/*已访问的链接*/

a:hover{color:green}/*当鼠标悬停在链接上*/

a:active{color:yellow}/*被选择的链接*/

鼠标形状控制：cursor属性(值：default默认指针 pointer超链接的指针 wait程序

正在忙的指针 move对象可被移动)

盒子模型：对应的标签<div>

padding(内边距：内容-边框):padding-top|-right|-bottom|-left(顺时针)

margin(外边距：div-div):margin-top|-right|-bottom|-left

盒子模型总尺度=border+padding+margin+内容尺寸(宽/高)

外边距网页居中显示：margin:0 auto;

浮动属性：

float:值; /*值-浮动方向：left|right|none|inherit*/

clear:值; /*清除浮动；取值left|right|both|none*/

overflow:值; 对溢出元素内容区的处理;取值 visible(默认)|auto|hidden|scroll

display属性：block块级元素|inline行内元素|none

定位属性：

position属性：relative相对定位(相对于当前位置)|absolute绝对定位(相对于非static的父元素位置)|fixed相对浏览器固定定位|static默认值

z-index属性：设置元素的堆叠顺序(number:-1|0|1)

偏移量设置：X轴(left|right|) Y轴(top|bottom) 可取值：像素或百分比

网页布局：

TABLE布局：表格布局

框架布局：多页面加载在同一页面 <iframe>标签

DIV+CSS方式布局：HTML结构(div标签) CSS样式(float浮动和盒子模型)

总体把握->分块设计->完善细节->性能优化

网页结构：头部HEADER|主体部分(LEFT-SIDE|MAIN|RIGHT-SIDE)|脚部FOOTER

Javascript

JavaScript：基于对象和事件驱动的脚本语言(轻量级编程语言)

ECMAScript(核心语法)-DOM(文档对象模型)-BOM(浏览器对象模型)

JavaScript基本结构：

<!-- 注释

//JavaScript代码

-->

</script>

引用JavaScript的3种方式：

外部：.js文件 <script src=”目录/文件名”></script>

内部：<head>

</head>

行内：设置在标签的属性中:on***(事件属性、超链接)

JavaScript基础语法

变量：保存值/表达式

变量声明：var 变量名;//无需指定数据类型变量名：字母、下划线、美元符$

变量作用域：全局变量(任何地方) 局部变量(函数内部)

数据类型：undefined(未定义) null string(‘’或””) boolean number(数值类型)

数据类型转换：

转换函数：parselnt()字符串转换为整数 parseFloat() toString()

强制类型转换：Boolean() Number() String()

运算符：算术运算符比较运算符逻辑运算符赋值运算符 typeof(检测变量返回值)

逻辑控制语句：条件结构--循环结构--循环中断(break|continue)

注释：单行注释|多行注释

函数

系统函数：parseInt()(将字符串转换为整数) parseFloat() isNaN()(判断非数字)

自定义函数：

function 函数名(参数列表){

//语句

return 返回值;

}

函数的调用：事件名=函数名(传递的实参值)：οnclick=”函数名()”

函数名(传递的实参)：var result=add(2,3)

匿名函数：

var sumFun=function(num1,num2){

return (num1+num2);

};

程序调试：

语法错误逻辑错误

程序调试的方法：注释调试法|输出调试法(alert()|document.write()|console对象调试法)|调试工具(Firebug):单步进入F5-单步跳过F6-调回F7-跳到下个断点F8

事件：

onload|onunload：进入或离开界面触发的事件 (<body>标签)

onsubmit：表单提交事件 (<form>标签)

onmouseover|onmouseout：鼠标悬停离开/事件

onclick|ondbclick：点击/双击时事件 (按钮)

onblur：失去焦点事件 (文本框/密码框)

onfocus：获得焦点事件 (文本框)

onchange：选择项/内容发生改变事件 (下拉框/文本框/密码框)

BOM：浏览器对象模型，Browser Object Model

Windows对象：浏览器打开的窗口；全局对象,可直接调用其方法和属性

window.οnlοad=function(){ //js程序写在window.onload函数体中

//Todo code

window.document等同于document

window.alert()等同于alert()

}

属性：height、width|left、top|toolbar工具栏|scrollbars滚动条|location

地址栏|status状态栏|menubar菜单栏

方法：prompt(“提示信息”,”输入框内默认信息”) alert(“提示信息”)

confirm(“确认信息”) //确认返回true，取消则返回false open()|close()

open(url,name,窗口特征);//普通窗口

openDialog(url,name,窗口特征);//模式窗口

定时函数：setTimeout()指定时间 setInterval()指定周期

History对象：访问url的历史页面对象

back()：加载上一个URL

forward()：加载下一个URL

go(n)：n为整数,跳转第n个浏览过的文档URL(n=0刷新,n=-1返回上一页)

Location对象：地址栏对象

属性：host(主机名和端口号) hostanme(当前url的主机名) href(完整的url)

方法：reload()重新加载当前文档 replace()用新的文档替换当前文档

Document对象：对HTMl页面所有元素进行访问

属性：URL(当前文档的YRL)

方法：write() getElementById() getElementByTagName()

Date对象：

Array对象：数组

var 数组名称=new Array();//空数组

var 数组名称=new Array(size);

var 数组名称=new Array(element0,element2,...,elementn);

数组属性/方法：length；sort()|push()向数组末尾添加元素

DOM：文档对象模型，Document Object Model；提供添加、移动、改变或移除结构文档的方法和属性

Core DOM:任何结构化文档的对象 XML DOM:XML文档对象 HTML DOM:HTML文档对象

CoreDom：

DOM节点树：文档节点--元素节点--文本节点--属性节点--注释节点

节点间关系：父节点--子节点--兄弟节点(同级节点)

parentNode(父节点)|childNodes(子节点列表)|firstChild|lastChild|

nextSibling(下一个兄弟节点)|previousSibling(上一个兄弟节点)

节点属性Attribute：nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)

访问节点->操作节点属性值->创建和增加节点->删除和替换节点

HTML DOM：每个节点都是一个对象(Table对象 Document对象 form对象 Image对象)

使用HTML DOM操作表格：

Table对象：row[]行数组;insertRow()deleteRow()

TableRow对象：cells[]单元格数组;insertcell() deleteRow()

TableCell对象：cellIndex|className|align

访问样式的常用方法：

通过属性：style属性|className属性|display属性

标签对象.style.backgroundColor=””;

标签对象.className=”选择器名”;

标签对象.display=”值”;

表单验证

客户端验证：浏览器+javascript

服务器验证：tomcat+java框架

String内置对象实现客户端验证：

length;indexOf(str,index)、substring(index1,index2)+文本框对象

表单HTML代码基本结构：

<form action=”提交地址” method=”post/get” id=”myform”

onsubmit=”return checkform()”>

</form>

表单验证JS代码结构：

function checkform(){

//1.获取要验证的表单元素

var input=document.getElementById(“username”);

//2.验证输入内容

if(input.value==””||input.value.length){

//3.弹出提示内容

alert(“内容不能为空或长度不能超过12字符”);

return false;//返回验证结果

}

正则表达式：一个描述字符模式的对象，由一些特殊符号组成，组成的字符模式用来匹配各种表达式

RegExp对象：javascript内置对象 RegexBuddy工具

声明：var reg=new RegExp(‘正则表达式’,参数);//构造函数方式

var reg=/正则表达式/参数; //普通方式

常用符号：

/^ $/代表一个模式的开始和结束 ^匹配字符串的开始 $匹配字符串的结束

一个字符：

\s+\S：任意一个(非)空白字符

\d+\D：任意一个(非)数字字符

\w+\W：任意一个数字、下划线或字母字符

.：任意一个字符

[]:选取罗列的字符/指定范围中任意一个 [A-Za-z0-9]

一个单元：默认一个字符一个单元

()：组 ((123)456)78

单元重复次数：

{n}：左边单元重复n次

{n,}：左边单元重复至少n次

{n,m}：左边单元重复n-m次

*：{0,} 可以无也可多次

+：{1,} 至少一次

?：{0,1} 有或无

|：或者，必然与()一起使用

邮箱正则表达式：\w{6,20}@[0-9a-z]{2,6}(.com.cn|.com|.cn)

jQuery/Ajax

jQuery：Write less,do more;页面元素查询

jQuery优势：出色的DOM封装、可靠的事件处理机制、浏览器兼容性强、隐式迭代简化编程、丰富的插件支持(jquery.com 发行版min.js[压缩版本]和开发版.js)

jQuery语法结构：

$(selector).action();

//工厂函数${}:将DOM对象转换为jQuery对象

//选择器selector：获取DOM元素

//action():jQuery方法

//$等同jQuery

//加载事件

/* window.onload = function(){

document.getElementById("div1").innerHTML="Hello jQuery!"

}; */

//jQuery加载事件

//$等同jQuery -> jQuery(document).ready()

$(document).ready(function() {//简化$function(){//执行代码}

//document.getElementById("div1").innerHTML="Hello jQuery!"//DOM对象

$("#div1").html("Hello jQuery!"); //jQuery对象

});

/* DOM对象转jQuery对象：$(DOM对象)

var oDiv = document.getElementById(“txtName”);

var $oDiv = $("oDiv");

jQuery对象转DOM对象

$("div1").get(0).innerHTML="Hello"

$("div").css("background","#09F");

$("div:first").html("hello");//第一个div

$("div:eq(1)").html("hello");//第二个div

$("div:last").html("hello");//最后一个div */

</script>

</head>

<body>

</body>

选择器selector：

标签选择器(element)：$(“input”).addClass(“current”);

id选择器(#id)：$(“#current”).addClass(“current”);

class选择器(.class)：$(“.current”).addClass(“other”);

并集选择器：$(“div,p,.title”)

交集选择器(element#id或element.class)：$(“h1.title”)

全局选择器*：$(“*”)

属性选择器[attribute=value]：$(“[href=’#’]”)

过滤选择器：基本过滤选择器$(“li:first”)|可见性过滤选择器$(“:hidden”)

JSON：JavaScript Object Notation,一种轻量级的数据交互格式

//创建普通对象

function Student(id,name,age){

this.id = id;

this.name = name;

this.age = age

this.info = function(){

alert(this.name);

}

var stu1 = new Student(1,"json",18);

stu2.info();

//动态创建对象

var stu2 = new Object();

stu2.id = 2;

stu2.name = "java";

//创建json对象

//var JSON = { 名称 :值,名称:值};

var stu = {"id":3,"name":"json","age":23};

//json数组

var cls = {

"no":3,

"stus":[

"id":3,"name":"json1","age":23

"id":4,"name":"json2","age":23

"date":"2016-7-1"

};

alert(stu.name);

alert(cls.stus[0].name);

jQuery中DOM操作：

样式操作：css(name,value)或css({name:value,name:value})

内容值及value属性：$(input).val();//获取

节点操作：append(content)//插入子节点

$(A).clone(true).appendTo(B);//复制节点

$(“p”).empty();//清空节点

jQuery事件处理：javascript事件封装

基础事件：window事件、鼠标事件、键盘事件(keydown|keyup)、表单事件

复合事件：鼠标光标悬停、鼠标连续点击

$(document).ready(function () {

//鼠标事件 click事件提交表单，鼠标移至按钮，按钮字体变粗。移出按钮则字体为正常字体

$(".btn").click(function(){

$("#login").submit();//submit() jQuery表单提交事件

});

$(".btn").mouseover(function(){

$(this).css("font-weight","bold");

});

//用户名输入框的焦点事件

$("[name=member]").focus(function(){

$(this).addClass("input_focus");

});

$("[name=member]").blur(function(){

$(this).removeClass("input_focus");

});

//键盘事件，敲击回车键进行表单提交,keyCode的数值代表不同的键盘按键

//JavaScript需要区分keyCode(IE)和which(FF)的兼容性

$(document).keypress(function(e){

if(e.keyCode == 13){

$("#login").submit();

}

});

事件绑定：$(selector).bind(type,fn方法名)

解除事件绑定：$(selector).bind(“click”,handler)

jQuery效果：

显示隐藏效果：显示效果show(speed[,callback])

隐藏效果hide(speed[,callback])

滑动效果：向上滑动slideUp(speed[,callback])

向下滑动slideDown(speed[,callback])

淡入淡出效果：淡入效果fadeIn(speed[,callback])

淡出效果fadeOut(speed[,callback])

自定义动画：animate(params[,duration][,callback])

Ajax：Asynchronous JavaScript And XML,异步的JavaScript及XML；

使用XMLHttpRequest对象直接与服务器进行通信，异步数据传输；页面局部数据更新

提升用户体验；通过在js中发送ajax请求，由专门的回调函数来接收返回结果，通过dom编程把结果显示在页面上

AJAX的工作流程：

XML 发送请求

JavaScript --> XMLHttpRequest对象 <---------------> 服务器/action层

CSS 响应结果

发送Ajax请求：

//发送ajax请求

//1 创建xmlHttpRequest对象

var xmlHttpRequest = createXmlHttpRequest();

//alert(xmlHttpRequest);

//2 设置回调函数

xmlHttpRequest.onreadystatechange = callback;

//3 初始化

var url = "t38/user/ajaxLogin.action";

xmlHttpRequest.open("POST",url,true);

//用POST的时候一定要有这句

xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

//4 发送

xmlHttpRequest.send("item.username="+oUsername.value+"&item.password="+oPassword.value);

//回调函数

function callback(){

if(xmlHttpRequest.status == 200 && xmlHttpRequest.readyState == 4){

var result = xmlHttpRequest.responseText;

if(result == "true"){

alert("登陆成功！");

}else{

alert("用户名或密码错误！");

}

//xmlHttpRequest对象

function createXmlHttpRequest(){

if(window.ActiveXObject){ //IE浏览器

return new ActiveObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){ //非IE浏览器

return new XMLHttpRequest();

}

jQuery实现Ajax：

$.ajax()方法：

$.ajax({

url:”发送的请求地址”,

type:”请求方式get/post”,

data:”要发送的数据”,

dataType:”服务器返回的数据类型”,//”xml html script json text”

beforeSend:function(data) {//发送请求前执行的代码},

success:function(data) {//发送成功后执行的代码},

error:function() {//请求失败执行的代码}

});

$.get()/$.post()方法：

$.get/$.post (

“发送的请求地址”,//url

要发送的数据 key/value,

回调函数,

“返回内容格式,xml,html,script,json,text”

);

03_Web编程