Java Web 开发从入门到实践课件 第1章 - Web前端基础_第1页
Java Web 开发从入门到实践课件 第1章 - Web前端基础_第2页
Java Web 开发从入门到实践课件 第1章 - Web前端基础_第3页
Java Web 开发从入门到实践课件 第1章 - Web前端基础_第4页
Java Web 开发从入门到实践课件 第1章 - Web前端基础_第5页
已阅读5页，还剩31页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第一篇

Web开发基础篇JavaWeb开发从入门到实践JavaWebDevelopmentFromIntroductiontoPracticeWeb前端基础Chap01提纲前端基础介绍Web开发的基础技术，包括HTML、CSS和JavaScript。通过学习这些核心技术，学生能够构建和美化基本的Web页面。1.1Web开发技术概述1.2HTML和CSS技术1.3JavaScript语言1.4本章小结1.1Web开发技术概述1.1.1网络程序开发体系架构1.1.2web应用技术1.1.1网络程序开发体系架构B/S体系架构C/S体系架构浏览器/服务器客户端/服务器图1-1

C/S体系架构图1-2

B/S体系架构1.1.2web应用技术01客户端应用技术02服务器端技术HTMLCSSJavaScriptjQueryVueCGIJSPASP.NETJava框架技术1.2HTML和CSS技术1.2.1HTML基础1.2.2CSS技术1.2.3示例：新浪微博热搜1.2.1HTML基础<html>

<head>

<metacharset="utf-8"/>

<title>标题</title>

</head>

<body>

主体

</body></html>HTML框架1.2.1HTML基础标签描述p段落标签a超链接h1-h6一级标题至六级标题，例如，h1表示一级标题，h1在6种标题中字体最大br换行标签img图片标签ol有序列表标签ul无序列表标签li有序列表或无序列表的列表项标签。语法：<ul><li>列表项1</li><li>列表项2</li></ul>dl、dt、dd定义性列表。这三个HTML标记是一个组合，语法：<dl><dt>标题或术语</dt><dd>描述</dd></dl>marquee文字滚动标签。实现跑马灯效果，例如，文字从左向右滚动，滚动延时500毫秒：<marqueescrolldelay="500"direction="right">跑马灯效果</marquee>strong加粗标签。例如，中国加粗显示：<strong>中国</strong>em斜体hr水平线。水平的“horizontal”中的二个字母font字体标签。通过属性color设置字体颜色，size设置字体大小表

1-1HTML常用的基本标签1.2.1HTML基础HTML常用的基本标签<imgsrc="img/icon-3.jpg"title="美女"alt="路径错误"width="100px"height="100px"align="center"/><ahref=""target="_blank">百度</a>

图片标签<img>

超链接<ul>催人上进的经典励志名言 <li>只有不断地努力和上进，才能成为更好的自己，享受更美好的人生。</li> <li>上进心是通向成功的阶梯，只有努力才能攀登到顶峰。</li> <li>不要停止前进的脚步，只有努力上进，才能不断超越自己，取得更大的成就。</li></ul>

无序列表1.2.1HTML基础HTML的表格<tableborder="1"> <tr> <th>表头第一个单元格</th><th>表头第二个单元格</th> </tr> <tr> <td>内容部分第一行，第一个单元格</td><td>内容部分第一行，第二个单元格</td> </tr></table>

表格的基本框架1.2.1HTML基础HTML的表格

表格常用的属性属性描述属性描述width表格的宽度align指定水平对齐方式height表格的高度valign指定垂直对齐方式border表格边框的宽度colspan跨列，合并同一行的单元格cellpadding指定边框与内容之间的空白rowspan跨行，合并同一列的单元格cellspacing指定单元格之间的空白

表

1-2表格常用的属性1.2.1HTML基础HTML的表单

表单示例<formmethod="post"action="目标URL"onsubmit="returncheckForm()"onreset="returnresetForm()"></form>input表单元素<inputtype="text"name="名称"value="值"/>

下拉列表<select> <optionvalue="选项一的值">选项一的文本</option> <optionvalue="选项二的值">选项二的文本</option></select>

多行文本域<textarearows="3"cols="20">多行文本域</textarea>1.2.2CSS技术CSS选择器类选择器定义一个类样式.类名称{属性:值}通过class属性引用类样式<标签名

class="类名称">标签内容</标签名>ID选择器定义一个ID样式#id名称{属性:值}通过id属性引用ID样式<标签名id="id名称">标签内容</标签名>1.2.2CSS技术内联样式<h1style="color:blue;">Stopstruggling,lifeisstopped.停止奋斗,生命也就停止了。</h1>内部样式表<styletype="text/css">p{

font-size:12px;color:#F00;}</style>外部样式表<linkhref="css/index.css"rel="stylesheet"type="text/css"/>一二三HTML中引入CSS样式1.2.2CSS技术内联样式、内部样式表和外部样式表的优先级内联样式>内部样式表>外部样式表ID选择器、类选择器和标签选择器的优先级ID选择器>类选择器>标签选择器样式优先级1.2.2CSS技术CSS常用样式属性描述属性描述font-family字体类型，例如，font-family:“隶书”;font-weight字体粗细，例如，font-weight:bold;font-size字体大小，例如，font-size:12px;font-style字体风格，例如，font-style:italicfont设置所有字体属性，例如，font:italicbold36px"隶书";

属性描述示例color设置文本颜色color:#abc123;text-align设置元素水平对齐方式text-align:center;line-height设置文本的行高line-height:25px;text-decoration设置文本的装饰text-decoration:underline;text-indent首行文本的缩进text-indent:20px;表1-3字体样式表

1-4

文本样式1.2.2CSS技术CSS常用样式伪类名称描述示例a:link未单击访问时超链接样式a:link{color:#123abc;}a:visited单击访问后超链接样式a:visited{color:#666;}a:hover鼠标悬浮其上的超链接样式a:hover{color:#ffff00;a:active鼠标单击未释放的超链接样式a:active{color:#888;}属性描述示例background-color背景颜色背景色设置为透明background-color:transparent;background-image背景图像background-image:url(images/car.jpg);background-repeat背景重复方式background-repeat:no-repeat;background-position背景定位background-position:topright;background设置所有背景属性background:#F00url(../images/cat.gif)115px20pxno-repeat;表

1-5

超链接伪类样式表

1-6

背景样式1.2.2CSS技术CSS常用样式值描述XposYposXpos表示水平位置，Ypos表示垂直位置，单位为pxX%Y%使用百分比表示背景的位置X、Y方向关键词水平方向的关键词：left、center、right垂直方向的关键词：top、center、bottom定义时垂直方向在前，水平方向在后，例如右下角：bottomright;值描述值描述none无标记符号，例如，list-style-type:none;square实心正方形disc实心圆，默认类型decimal数字circle空心圆

表

1-7

属性background-position的值表1-8列表样式1.2.3示例：新浪微博热搜图

1-3

新浪微博热搜页面1.3JavaScript语言1.3.1JavaScript的引入1.3.2JavaScript基础1.3.3JavaScript常用事件和对象模型1.3.4JavaScript对象1.3.5表单验证1.3.1JavaScript的引入内嵌引入JavaScript代码外链式引入JavaScript代码<scripttype="text/javascript"> JavaScript代码</script><scriptsrc="外部JavaScript文件的URL"type="text/javascript"></script>1.3.2JavaScript基础变量及变量的命名规则注释var变量名=值;varname="Charles";//单行注释/*多行注释*/运算符赋值运算符：=、+=、-=算术运算符：+、-、*、/、%、++、--逻辑运算符：&&、||、！1.3.2JavaScript基础数据类型及数据类型的转换数据类型：数值型、字符型、布尔型、空值和未定义值数据类型的转换：parseInt(字符串)

：

varnum=parseInt("123abc");parseFloat(字符串)：varnum=parseFloat("123.567abc");Number(字符串）：

varnum=Number("123");eval(字符串表达式）：varnum=eval("1+2");流程控制语句if语句switch语句for循环语句while语句do...while语句1.3.3JavaScript常用事件和对象模型事件描述事件描述onblur元素失去焦点时触发onmousedown按下鼠标时触发onfocus元素获得焦点时触发onmousemove移动鼠标时触发onload页面加载完全后触发onmouseout鼠标离开某对象范围时触发onclick单击某个对象时触发onmouseover鼠标移到某对象范围的上方时触发ondblclick双击某个对象时触发onmouseup鼠标按下后松开时触发onchange内容改变时触发onkeydown键盘上某个键按下时触发onsubmit单击提交按钮时触发onkeypress键盘上某个键按下并释放时触发onreset单击重置按钮时触发onkeyup键盘上某个键被放开时触发表

1-12

JavaScript常用事件1.3.3JavaScript常用事件和对象模型实现树形菜单显示和隐藏的切换功能实现图片自动轮播效果图1-5

加载页面时的效

图

1-6

点击父节点后的效果图

1-7

图片轮播效果1.3.3JavaScript常用事件和对象模型JavaScript对象模型window对象1）alert()2）prompt()3）confirm()4）open()history对象方法描述forward()加载历史记录列表中的下一个URLback()加载历史记录列表中的前一个URLgo()加载历史列表中的某个具体的页面，带一个正/负整数或字符串。弹出广告页面:window.open("adv.html","广告页","width=350,height=230,left=100,top=100");图

1-9

open()方法打开广告页表

1-13history对象的方法1.3.3JavaScript常用事件和对象模型JavaScript对象模型location对象window.location="test.html";location.href="test.html";document对象常用的方法：getElementById(id)方法：该方法根据指定的id属性值得到对象。getElementsByName(name)方法：该方法根据指定的name属性值得到对象。getElementsByTagName(tagName)方法：该方法根据指定的标签名得到对象。获取表单对象：document.forms[下标]document.forms["表单名称"]document.表单名称1.3.4JavaScript对象数组对象使用Array构造函数vararr=newArray();vararr=newArray(10);vararr=newArray("Charles","Jack","Mia");使用数组字面量表示法vararr=[];vararr=["Charles","Jack","Mia"];varelement=arr[0];//读取arr数组中的第一个元素1.3.4JavaScript对象日期对象创建日期对象vardate=newDate("June8,2024");//2024年6月8日vardate=newDate();//系统当前日期和时间获取和设置日期某部分的方法方法描述方法描述getYear()获取年份setYear()设置年份getMonth()获取月份（从0到11）setMonth()设置月份getDate()获取一个月中的某一天setDate()设置某日getDay()获取星期几（0-6）setHours()设置小时getHours()获取小时setMinutes()设置分钟getMinutes()获取分钟setSeconds()设置秒getSeconds()获取秒setTime()设置毫秒getTime()获取毫秒

表

1-14

获取和设置日期某部分的方法1.3.4JavaScript对象字符串对象创建字符串对象varstr=newString("JavaWeb从0到1");varstr="JavaWeb从0到1";字符串的常用方法方法描述trim()去掉左边和右边空格substring(start,end)截取字符串，不包含endsubstr(start,length)在字符串中截取从start下标开始到指定length数目的字符charAt(index)获取下标为index的字符toUpperCase()转换为大写字母toLowerCase()转换为小写字母indexOf(searchValue)获取第一次出现子字符串的字符位置lastIndexOf()获取最后一次出现子字符串的字符位置concat()连接字符串replace(old,new)子字符串old被new替代split(separator,limit)以separator为分隔符切割成多个子字符串，子字符串以数组形式返回表

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论