web基础资料.ppt

课后练习 提示： style #menu{ width:200px; background:#ccc; font:bold 14px 宋体; } /style … … div id=menu ul li家用电器/li …… /ul /div ID选择器 选择器的分类3-3 如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？ 演示案例3：ID选择器 练习——CSS选择器 需求说明： 使用各类CSS选择器，实现如下的页面美化效果 完成时间：15分钟 div块：总宽度200px，背景灰色#ccc 商品类别：字体为橘色（#ff7300），粗体，大小为14px 其余商品： 字体大小为12px div-ul-li组织结构 javascript 编写如下图所示的注册页面，实现注册表单的验证功能 要求： 1、根据所给素材，完成以下页面； 2、对用户、密码做非空验证； 3、用户、密码长度在6-16之间。 * 提一下CSS编码规范： 1）代码都小写 2）可以添加注释说明：同C#,单行//，多行/*......*/ * 规定块的样式，一般和DIV标签配对使用 * * * * * * 不要深讲 * * 使用ol li有序列表，ul li无序列表和dl dt dd定义列表实现简单的商品购买页 HTML文档的基本结构 HTML文档的结构 html head title我的第一个网页 /title /head body Hello World! /body /html HTML 网页 head头部部分 body主体部分 html…/html标签标记 HTML 文档的开始和结束 网页标题 网页内容，可以是文本、图像等 这部分包括标题和其他说明信息，包括在 head…/head 标签内 这部分包含文本、图像和链接，它包括在 body…/body 标签内 超链接 超链接---实现页面间的导航 链接文本或图像 链接地址（目标） 基本语法 …… a href=span.html target=_blank灿坤蒸气电熨斗/a …… 链接在新窗口中打开 操作演示1：超链接 a href=链接地址 target=目标窗口位置 链接热点文本或图像/a …… a href=../web1.htm上级目录/a a href=../../web2.htm上上级目录/a …… 链接路径 相对地址：相对于当前目录的地址，常用 绝对地址：指向目标地址的完整描述 ，少用 上级目录：../ 上上级目录：../../ a href=/memAdmin/login/login.htm登录/a a href=搜狐/a a href=login/login.htm登录/a 操作演示2：链接路径 特殊符号 特殊符号 空格：nbsp; 版权号() ：copy; …… COPYRIGHT copy;npbs;nbsp;2003-2010nbsp;nbsp; a href=“index.htm”北京市贵美商城有限公司 …… 1、因为、等符号在HTML中已使用，所以必须用其他符号来代替 2、都以分号结束（；） 操作演示8：版权信息 单行文本框(text) 单选按钮(radio) 复选框(checkbox) 下拉列表(select) 重置按钮 (reset) 提交按钮(submit) 密码框(password) 常见的表单元素 文本域(textarea) form action=表单提交地址 method=提交方法 … 文本框、按钮等表单元素… /form 表单的基本语法2-1 指定提交后，由服务器上哪个处理程序处理 指定向服务器提交的方法： 一般为post或get方法, post方法比较安全 表单的基本语法2-2 …… form action=login.jsp method=post p用户名：input name=username type=text size=20 maxlength=10 //p p密nbsp;nbsp;码： input name=pwd type=password size=20 //p pinput type=submit name=btn value=提交 /nbsp;nbsp; input name=reset type=reset value=重填 //p /form …… 表单输入元素：input 表单提交地址和方法的设置 操作演示9：表单应用 表单的典型应用：假定登录 126 邮箱 表单的执行原理 Internet 1 2