HTML
超文本标记语言
- <!DOCTYPE>标记
- <html> 标记
- <head> 标记
- <body> 标记
- 单标记
- 双标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<P> 这个是段落标记</P>
<br/>换行标记
<!--文本样式标记-->
<font face="宋体" color="red">
这是文本样式标记<br/>
</font>
<!--图像标记-->
<img src="#"/>
<!--表格标记-->
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
<fieldset>
<p>fieldset标记将表单内的元素分组</p>
<legend>定义标题</legend>
</fieldset>
<!--表单标记-->
<form action="#" method="post" name="表单名称">
<!--文本框-->
用户：<input type="text" name="username" value="username">
密码：<input type="text" name="password" value="password">
<!--单选框-->
性别：<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<!--复选框控件-->
<input type="checkbox" name="interest" value="film">看电影
<input type="checkbox" name="interest" value="code">敲代码
<input type="checkbox" name="interest" value="game">玩游戏
<!--上传文件控件-->
<input type="file" name="photo">
<!--提交按钮控件-->
<input type="submit" value="注册">
<!--重置按钮控件-->
<input type="reset" value="重置">
</form>
<!--多行文本标记-->
<textarea rows="5" cols="60">
rowspan 合并行
colspan 合并列
cols表示每行多少字，rows表示几行。
</textarea>
<!--无序列表-->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<!--超链接标记-->
<a href="#" target="_self">自身窗口打开</a>
<a href="#" target="_blank">新窗口打开</a>
</body>
</html>
CSS技术
- 主要设置HTML页面中的文本内容（字体，大小，对齐方式），图片的外形以及页面的布局。
div标记
就是一个区块的容器标记，将网页分割为独立的，不同的部分，
CSS内嵌式
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS内嵌式</title>
<style>
/*定义标题标记居中对齐*/
h2{
text-align: center;
}
/*使用div标记样式*/
div{
border: 1px solid red;
width: 300px;
height: 80px;
color: blue;
}
</style>
</head>
<body>
<h2>内嵌式CSS样式</h2>
<div>
使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，title标记之后。
</div>
</body>
</html>
CSS链入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--链入式-->
<link href="css文件的路径" type="text/css" rel="stylesheet">
<!--rel表示当前文档与被链接的文档之间的关系，这表示被链接的文档是一个样式表文件-->
</head>
<body>
<h2>内嵌式CSS样式</h2>
<div>
使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，title标记之后。
</div>
</body>
</html>
CSS选择器与属性
- 标记选择器
- 类选择器： .类名{属性：属性值；}
- id选择器： # id名{属性：属性值；}
- 通配符选择器 *{} 匹配页面的所有元素
- id选择器的值为一，而class的值可以是多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
text-align: center;
}
.red{
color: red;
}
#blue{
color: blue;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1> 这是标记选择器</h1>
<h2 class="red">这是类选择器</h2>
<h3 id="blue">这是id选择器</h3>
</body>
</html>
CSS常用的属性
- margin 对象外边距，表示对象与对象之间的距离
- padding 对象的内边距，表示对象的内容与对象边框的距离
- background 设置有关背景的属性
- font-family 元素字体系列
- border 设置边框的属性
- font 设置字体等元素
- height 对象高度
- line-height 行与行的距离
- color 字体颜色
- text-align 文本的对齐方式
- text-decoration 文本的显示样式
- vertical-align 垂直对齐方式
- display 对象的显示形式
JavaScript
DOM
Document Object Model 可以一种独立于平台与语言的方式访问和修改一个文档的内容和结构。
三部分：XML Dom ,HTML Dom, Dom 核心
HTML Dom
将html各种标记当成的一个树，该树的根节点是文档对象，该对象有一个documentElement的属性的引用，
- document.getElementById()：通过元素的id属性获取元素
- document.getElementsByName(): 通过元素的name属性获取元素
JAVAScript介绍
为网页添加各式各样的动态功能，不需要编译，直接嵌入到HTML页面中，，可以把静态的页面变成与用户进行交互的动态页面
- 三种弹出对话窗的方式： alter()；confirm（），prompt（）。
JAVAScript内嵌式引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
document.write("javascript的内嵌式引入")
</script>
</head>
<body>
<br/>
javascript的内嵌式引入
</body>
</html>
JAVAScript外链式引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="#" type="text/javascript"></script>
</head>
<body>
JAVAScript外链式引入
</body>
</html>
语法
- 数据类型 Number 数值型（不分整型和浮点型）
- Object 对象类型 一组数据和功能的键值对集合
- 其他类型与java大致相同
@@@ - 变量
- var number = 12;
- javaScript是一种弱语言，不用声明变量的类型，它自动根据变量的赋值确定。
@@@ - 运算符
- 条件语句
函数的定义
script type="text/javascript" >
document.write("javascript的内嵌式引入")
function funtionNmae(parameter1,parameter2,...) {
statements;
[return expression; ]
}
</script>
事件处理
- 发生事件，启动事件处理程序，事件处理程序做出反应
- 事件驱动是js中的基本特征，
- 事件驱动就是当浏览器检测到一个事件，例如点击鼠标，，它可以出触发与这个事件相关联的事件处理程序。
@@@ - 表单事件
- onblur 当前元素失去焦点时触发事件
- onchange 当前元素失去焦点且元素内容发生改变时触发事件
- onfocus: 当某个元素获得焦点时触发事件
- onreset : 当表单被重置的时候触发事件
- onsubmit: 当表单被提交的时候触发事件。
- 页面事件
- onload : 当页面加载完成时触发事件
对象
- window 对象
- Date对象
- String对象
代码
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html">
<title>首页</title>
<!--导入main.css,首页轮播图css和js脚本-->
<link type="text/css" href="css/main.css" rel="stylesheet"/>
<link type="text/css" href="css/autoplay.css" rel="stylesheet"/>
<script type="text/javascript" src="js/autoplay.js"></script>
</head>
<body class="main">
<!--1.传智书城顶部 sart
cellspacing是单元格之间的距离
-->
<div id="divhead">
<table cellspacing="0" class="headtable">
<tr>
<td>
<a href="#"><img src="images/logo.png" width="200" height="60" border="0"/>></a>
</td>
<td style="text-align: right">
<img src="images/cart.gif" width="26" height="23" style="margin-bottom: -4px"/>
<a href="#">购物车</a>
/ <a href="#">帮助中心</a>
/ <a href="#">我的账户</a>
/ <a href="register.html">新用户注册</a>
</td>
</tr>
</table>
</div>
<div id="divmenu">
<a href="#">文学</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#">生活</a>
<a href="#" style="color: #FFFF00">全部商品的目录</a>
</div>
<div id="divserch">
<form action="#" id="searchform">
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="text-align: center ;padding-right: 220px">
Search
<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
onmouseover="this.focus();"
onclick="my_click(this,'textfield');"
onblur="my_blur(this,'textfield');"/>
<a href="#">
<img src="images/serchbutton.gif" border="0" style="margin-bottom: -4px " onclick="search()" />
</a>
</td>
</tr>
</table>
</form>
</div>
<div id="box_autoplay">
<div class="list">
<ul>
<li><img src="ad/index_ad1.jpg" width="900" height="335"/></li>
<li><img src="ad/index_ad2.jpg" width="900" height="335"/></li>
<li><img src="ad/index_ad3.jpg" width="900" height="335"/></li>
<li><img src="ad/index_ad4.jpg" width="900" height="335"/></li>
<li><img src="ad/index_ad5.jpg" width="900" height="335"/></li>
</ul>
</div>
</div>
<div id="divcontent">
<table width="900px" border="0" cellspacing="0">
<tr>
<td width="497">
<img srd="images/billboard.gif" width="497" height="38"/>
<table cellspacing="0" class="ct1">
<tr>
<td width="485" height="29">
尊敬的传智书城的用户，<br/>
为了让大家有更好的购物体验，3月25日起，当日达业务关小黑屋回炉升级！<br/>
具体开放时间请留意公告<br/>
3月23日<br/>
</td>
</tr>
</table>
</td>
<td style="padding: 5px 15px 10px 40px">
<table width="100%" border="0" cellspacing="0">
<tr><td>
<img src="images/hottitle.gif" width="126" height="29"/>
</td></tr>
</table>
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="width:80;text-align: center">
<a href="#">
<img src="bookcover/105,jpg" width="102" height="130" border="0"/>
</a>
<br/>
</td>
<td style="width:80;text-align: center">
<a href="#">
<img src="bookcover/106.jpg" width="102" height="130" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="divfoot">
<table width="100%" border="0" cellspacing="0">
<tr>
<td rowspan="2" style="width:10%">
<img src="images/lpgo.png" width="195" height="50"
style="margin-left:175px ">
</td>
<td style="padding-top: 5px;padding-left: 50px">
<a href="#">
<font color="#747556"><b>CONTACT US</b></font>
</a>
</td>
</tr>
<tr>
<td style="padding-left: 50px">
<font color="#CCCCCC"><b>COPYRIGHT 2015 © BookStore All Rights RESERVED.
</b>
</font>
</td>
</tr>
</table>
</div>
</body>
</html>
- form.js
var emailObj;
var passwordObj;
var usernameObj;
var confirmObj;
var emailMsg;
var usernameMsg;
var passwordMsg;
var confirmMsg;
// 页面加载之后，获取页面中的对象
window.onload = function (ev) {
emailObj = document.getElementById("email");
usernameObj = document.getElementById("username");
passwordObj = document.getElementById("password");
confirmObj = document.getElementById("repassword");
emailMsg = document.getElementById("emailMsg");
usernameMsg = document.getElementById("usernameMsg");
passwordMsg = document.getElementById("passwordMsg");
confirmMsg = document.getElementById("confirmMsg");
}
//校验整个表单
function checkForm() {
var bEmail = checkEmail();
var bUsername = checkUsername();
var bPassword = checkPassword();
var bConfirm = checkConfirm();
//return false后，事件将被取消
return bUsername && bPassword && bConfirm && bEmail;
}
//验证邮箱
function checkEmail() {
var regex = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
var value = emailObj.value;
var msg="";
if(!value){
msg= "邮箱必须填写 ";
}else if(!regex.test(value)){
msg = "邮箱格式不合法";
}
emailMsg.innerHTML = msg;
emailObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg = "";
}
//验证用户名
function checkUsername() {
var regex = /^[a-zA-Z0-9_-]{4,16}$/;
var value = usernameObj.value;//获取usernameObj中的文本
var msg = "";//最后的提示消息，默认为空
//如果用户名为null或者“”，！vlaue的值为false;如果不为空！value值为true
if(!value){
msg = "用户名必须填写";
}else if(regex.test(value)){
msg = "用户名不和规则";
}
usernameMsg.innerHTML = msg; //将提示消息放入SPAN;innerHTML用于设置或返回指定的HTML
usernameObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg = ""; //如果提示消息为空则代表没出错，返回true
}
//验证密码
function checkPassword() {
var regex = /^.{6,16}$/;
var value = passwordObj.value;
var msg = "";//最后的提示消息，默认为空
//如果用户名为null或者“”，！vlaue的值为false;如果不为空！value值为true
if(!value){
msg = "密码必须填写";
}else if(regex.test(value)){
msg = "密码不和规则";
}
passwordMsg.innerHTML = msg; //将提示消息放入SPAN;innerHTML用于设置或返回指定的HTML
passwordObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg = ""; //如果提示消息为空则代表没出错，返回true
}
//验证确认密码
function checkConfirm() {
var passwordValue = passwordObj.value;
var confirmValue = confirmObj.value;
var msg = "";
if(!confirmValue){
msg = "确认密码必须填写";
}else if(passwordValue != confirmValue){
msg = "请密码保持一样";
}
confirmMsg.innerHTML = msg;
confirmObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg = "";
}
- register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" href="css/main.css" rel="stylesheet">
<script type="text/javascript" src="js/form.js"></script>
</head>
<body>
<div id="divcontent" align="center">
<!--提交表单-->
<form action="registersuccess.html" method="post" onsubmit="return checkFrom();">
<table width="850px" border="0" cellpadding="0">
<tr>
<td style="padding: 30px"><h1>新会员注册</h1></td>
<table width="70%" border="0" cellpadding="2" class="upline">
<tr>
<td style="text-align: center;right;width: 20%">会员邮箱</td>
<td style="width: 40%">
<input type="text" class="text-input" id="email" name="email" onkeyup="checkEmail()">
</td >
<td colspan="2"><span id="emailMsg"></span>
<font color="#99999"> 请输入有效的邮箱地址</font>
</td>
</tr>
<tr>
<td style="text-align: right">会员名：</td>
<td>
<input type="text" class="textinput" id="username" name="username" onkeyup="checkUsername();">
</td>
<td colspan="2"> <span id="usernameMsg"></span>
<font color="#999999">字母数字下划线1到10位，不能时数字开头</font>
</td>
</tr>
<tr>
<td style="text-align: right">密码：</td>
<td>
<input type="password" class="textinput" id="password" name="password" onkeyup="checkPassword();">
</td>
<td>
<span id="passwordMsg"></span>
<font color="#99999">密码请设置6-16位字符</font>
</td>
</tr>
<tr>
<td style="text-align: right">重复密码</td>
<td>
<input type="password" class="text-input" id="repassword" name="repassword" onkeyup="checkConfirm();">
</td>
<td><span id="confirmMsg"></span> </td>
</tr>
<tr>
<td style="text-align: right">性别：</td>
<td onclose="2">
<input type="radio" name="gender" value="男" checked="checked">男
<input type="redio" name="gender" value="女">女
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">联系电话</td>
<td colspan="2">
<input type="text" class="text-input" style="width: 350px" name="telephone">
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">个人介绍：</td>
<td colspan="2" >
<textarea class="textarea" name="introduce"></textarea>
</td>
<td> </td>
</tr>
</table>
<table width="70%" border="0" cellspacing="0">
<tr>
<td style="padding-top: 20px;text-align: center">
<!--表示以图片的形式提交-->
<input type="image" src="imsges/signup.gif" name="submit" border="0">
</td>
</tr>
</table>
</tr>
</table>
</form>
</div>
</body>
</html>
- registersuccess.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<center>
<font size="7" color="green">注册成功</font>
</center>
</body>
</html>
- main.css
.main{
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
background: #FFFF00;
font-family: Arial , Helvetica, sans-serif;
font-size: 12px;
line-height: 150%;
color: #000000 ;
text-align: center;
vertical-align: top;
}
.headtable{
width: 100%;
}
#divmenu{
width: 100%;
border-top-width: 4px;
border-top-color: #82B211;
border-top-style: solid;
background-color: #1C3F09;
text-align: center;
padding: 10px 0px 10px 0px;
font-size: 14px;
}
#divmenu a{
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
padding: 10px 10px 10px 10px;
}
#divmenu a:link {
text-decoration: none;
font-weight: bold;
}
a{
font-size: 12px;
color: #0066FF;
}
a:link{
text-decoration: none;
}
扫一扫
9352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
