Web前端7天

最新推荐文章于 2024-07-15 22:27:18 发布
最新推荐文章于 2024-07-15 22:27:18 发布
阅读量333 收藏 1
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45945673/article/details/106003725
版权

day1
只开发服务器端server，通过浏览器访问
1.web概念概述
Javaweb:使用Java语言开发基于互联网的项目
在这里插入图片描述
B/S的访问过程
资源分类：
1.静态资源
使用静态网页开发技术发布的资源
特点：
*所有用户访问，得到的结果是一样的
*如：文本，图片，音频，视频，HTML,CSS,JavaScript
*如果用户请求的是静态资源，那么服务器会直接将静态资源发给浏览器，浏览器中内置了静态资源的解析引擎，可以展示静态资源
2.动态资源
使用动态网页及时发布的资源
特点：
所有用户访问，得到的结果可能不一样
如:jsp /servlet php…
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，在发送给浏览器。
在这里插入图片描述
先学习静态资源
静态资源：
HTML:用于搭建基础网页，展示页面的内容
CSS:用于美化页面，布局页面。
JavaScript:控制页面的元素，让页面有一些动态的效果

2.HTML
概念：是最基础的网页开发语言，Htyper Text Markup Language 超文本标记语言
*超文本：
超文本是用超链接的方法，将各种不同空间的文字信息组织咋一起的网状文本
*标记语言：
由标签构成的语言 <标签名称> 如 html xml
标记语言不是编程语言
2. 快速入门：
语法：
1. html文档后缀名 .html 或者 .htm
2. 标签分为
1. 围堵标签：有开始标签和结束标签。如
2. 自闭和标签：开始标签和结束标签在一起。如

3. 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：
正确：
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。

<html>
	<head>
		<title>title</title>
	</head>
	<body>
		<FONT color='red'>Hello World</font><br/>
		<font color='green'>Hello World</font>
	</body>
</html>
  1. 标签学习：
    1. 文件标签：构成html最基本的标签
      • html:html文档的根标签
      • head：头标签。用于指定html文档的一些属性。引入外部的资源
      • title：标题标签。
      • body：体标签
      • ：html5中定义该文档是html文档
    2. 文本标签：和文本有关的标签
      • 注释：

      • to

        ：标题标签 * h1~h6:字体大小逐渐递减

      • ：段落标签


      • ：换行标签
      • ：展示一条水平线 * 属性： * color：颜色 * width：宽度 * size：高度 * align：对其方式 * center：居中 * left：左对齐 * right：右对齐
      • ：字体加粗
      • ：字体斜体
      • :字体标签
      • :文本居中 * 属性： * color：颜色 * size：大小 * face：字体
      • 属性定义：
        • color：
          1. 英文单词：red,green,blue
          2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
          3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
        • width：
          1. 数值：width=‘20’ ,数值的单位，默认是 px(像素)
          2. 数值%：占比相对于父元素的比例
  2. 图片标签：
    * img：展示图片
    * 属性：
    * src：指定图片的位置
    * 代码：
    展示一张图片 img
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>

相对路径
* 以.开头的路径
* ./：代表当前目录 ./image/1.jpg
* …/:代表上一级目录


4. 列表标签：
* 有序列表：
* ol:
* li:
* 无序列表：
* ul:
* li:
5. 链接标签：
* a:定义一个超链接
* 属性：
* href：指定访问资源的URL(统一资源定位符)
* target：指定打开资源的方式
* _self:默认值，在当前页面打开
* _blank：在空白页面打开
* 代码：
超链接 a

<a href="http://www.itcast.cn">点我</a>
<br>
<a href="http://www.itcast.cn" target="_self">点我</a>
<br>
<a href="http://www.itcast.cn" target="_blank">点我</a>
<br>
<a href="./5_列表标签.html">列表标签</a><br>
<a href="mailto:itcast@itcast.cn">联系我们</a>
<br>
<a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>

6. div和span：块级标签
	* div:每一个div占满一整行。块级标签，会换行
	* span：文本信息在一行展示，行内标签 内联标签，不会换行

7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
	1. <header>：页眉
	2. <footer>：页脚
  1. 表格标签：
    * table：定义表格
    * width：宽度
    * border：边框
    * cellpadding：定义内容和单元格的距离
    * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
    * bgcolor：背景色
    * align：对齐方式
    * tr：定义行
    * bgcolor：背景色
    * align：对齐方式
    * td：定义单元格
    * colspan：合并列
    * rowspan：合并行
    * th：定义表头单元格
    * ：表格标题
    * ：表示表格的头部分
    * ：表示表格的体部分
    * ：表示表格的脚部分

案例：旅游网站首页

  1. 确定使用table来完成布局
  2. 如果某一行只有一个单元格，则使用
  3. 如果某一行有多个单元格，则使用
  4. 代码实现
<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>黑马旅游网</title>
	</head>
	<body>
	    <!--采用table来完成布局-->
	    <!--最外层的table，用于整个页面的布局-->
	    <table width="100%" align="center">
	       <!-- 第1行 -->
	        <tr>
	            <td>
	                <img src="image/top_banner.jpg" width="100%" alt="">
	            </td>
	        </tr>
	        <!-- 第2行 -->
	        <tr>
	            <td>
	                <table width="100%" align="center">
	                    <tr>
	                        <td>
	                            <img src="image/logo.jpg" alt="">
	                        </td>
	                        <td>
	                            <img src="image/search.png" alt="">
	                        </td>
	                        <td>
	                            <img src="image/hotel_tel.png" alt="">
	                        </td>
	                    </tr>
	                </table>
	            </td>
	        </tr>
	        <!-- 第3行 -->
	        <tr>
	            <td>
	                <table width="100%" align="center">
	                    <tr bgcolor="#ffd700" align="center" height="45" >
	                        <td>
	                            <a href="">首页</a>
	                        </td>
	                        <td>
	                            门票
	                        </td>
	                        <td>
	                            门票
	                        </td>
	                        <td>
	                            门票
	                        </td>
	                        <td>
	                            门票
	                        </td>
	                    </tr>
	                </table>
	            </td>
	        </tr>
	        <!-- 第4行 轮播图 -->
	        <tr>
	            <td>
	                <img src="image/banner_3.jpg" alt="" width="100%">
	            </td>
	        </tr>
	        <!-- 第5行 黑马精选-->
	        <tr>
	            <td>
	                <img src="image/icon_5.jpg" alt="">
	                黑马精选
	                <hr  color="#ffd700" >
	            </td>
	        </tr>
	        <!-- 第6行 -->
	        <tr>
	            <td>
	                <table align="center" width="95%">
	                    <tr>
	                        <td>
	                            <img src="image/jiangxuan_1.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 899</font>
	                        </td>
	                        <td>
	                            <img src="image/jiangxuan_1.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 899</font>
	                        </td>
	                        <td>
	                            <img src="image/jiangxuan_1.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 899</font>
	                        </td>
	                        <td>
	                            <img src="image/jiangxuan_1.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 899</font>
	                        </td>
	                    </tr>
	                </table>
	            </td>
	        </tr>
	        <!-- 第7行 国内游 -->
	        <tr>
	            <td>
	                <img src="image/icon_6.jpg" alt="">
	                国内游
	                <hr  color="#ffd700" >
	            </td>
	        </tr>
	        <!-- 第8行 -->
	        <tr>
	            <td>
	                <table align="center" width="95%">
	                    <tr>
	                        <td rowspan="2">
	                            <img src="image/guonei_1.jpg" alt="">
	                        </td>
	                        <td>
	                            <img src="image/jiangxuan_2.jpg" alt="" height="100%">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                        <td>
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                        <td>
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                    </tr>
	                    <tr>
	                        <td>
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                        <td>
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                        <td>
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
   </tr>
	                </table>
	            </td>
	        </tr>
	        <!-- 第9行 境外游 -->
	        <tr>
	            <td>
	                <img src="image/icon_7.jpg" alt="">
	                境外游
	                <hr  color="#ffd700" >
	            </td>
	        </tr>
	        <!-- 第10行 -->
	        <tr>
	            <td>
	                <table align="center" width="95%">
	                    <tr>
	                        <td rowspan="2">
	                            <img src="image/jiangwai_1.jpg" alt="">
	                        </td>
	                        <td>
	                            <img src="image/jiangxuan_3.jpg" alt="" height="100%">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                        <td>
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                        <td>
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                    </tr>
	                    <tr>
	                        <td>
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                        <td>
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                        <td>
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
 </tr>
	                </table>
	            </td>
	        </tr>
	        <!-- 第11行 -->
	        <tr>
	            <td>
	                <img src="image/footer_service.png" alt="" width="100%">
	            </td>
	        </tr>
	
	        <!-- 第12行 -->
	        <tr>
	            <td align="center" bgcolor="#ffd700" height="40">
	                <font color="gray" size="2">
	                江苏传智播客教育科技股份有限公司
	                版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
	                </font>
	            </td>
	        </tr>
	    </table>
	</body>
	</html>

day2
表单标签
表单：
概念**：用于采集用户输入的数据的，用于和服务器进行交互**
标签：from
from:用于定义表单的，可以定义一个范围 范围代表采集用户的数据的范围
属性： action 指定提交数据的URL
method:指定提交方式
分类： 一共七种，两种比较常见
get:
1.请求参数会在地址栏中显示 会封装到请求行中
2.请求参数大小是有限制的
3.不太安全
post:
2.请求参数不会在地址栏中显示，会封装在请求体中
2.请求参数的大小没有限制
3.较为安全
注意:表单项中的数据要想被提交：必须指定其name属性

 * 表单项标签：
		* input：可以通过type属性值，改变元素展示的样式
			* type属性：
				* text：文本输入框，默认值
					* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	
				* password：密码输入框
				* radio:单选框
					* 注意：
						1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
						2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
						3. checked属性，可以指定默认值
				* checkbox：复选框
					* 注意：
						1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
						2. checked属性，可以指定默认值

				* file：文件选择框
				* hidden：隐藏域，用于提交一些信息。
				* 按钮：
					* submit：提交按钮。可以提交表单
					* button：普通按钮
					* image：图片提交按钮
						* src属性指定图片的路径	

		   * label：指定输入项的文字描述信息
			   * 注意：
				   * label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
		* select: 下拉列表
			* 子元素：option，指定列表项
			
		* textarea：文本域
			* cols：指定列数，每一行有多少个字符
			* rows：默认多少行。        
           
 <form action="#" method="get">
    <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="male" >  男
         <input type="radio" name="gender" value="female" checked>  女
            <br>
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
        <input type="checkbox" name="hobby" value="java"  checked> Java
        <input type="checkbox" name="hobby" value="game"> 游戏<br>
    图片：<input type="file" name="file"><br>
    隐藏域：<input type="hidden" name="id" value="aaa"> <br>
    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"> <br>
    生日：<input type="datetime-local" name="birthday"> <br>
    邮箱：<input type="email" name="email"> <br>
    年龄：<input type="number" name="age"> <br>
    省份：<select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>陕西</option>
         </select><br>
    自我描述：
        <textarea cols="20" rows="5" name="des"></textarea>
    <br>
    <input type="submit" value="登录" >
    <input type="button" value="一个按钮" ><br>
    <input type="image" src="img/regbtn.jpg">
</form> 
 
案例：
    <!--定义表单 form-->
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" id=
最低0.47元/天 解锁文章
Loner-wei
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Web前端之正则表达式例子大全.pdf
06-20
\d{7,8}$：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。 验证身份证号（15位或18位数字）：^\d{15}|\d{}18$ 验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：...
element 时间日期选择器限制选择范围为7天
caimaomaocai的博客
09-23 4670
1、template部分 <el-date-picker v-model="time" style="width:350px" :type="dateType" size="small" start-placeholder="开始日期" end-placeholder="结束日期"
前端cookie七天自动登录
StubbornAccepted的博客
08-23 2202
登陆页中 //记住密码一个星期 var email=$.cookie('email'); var password=$.cookie('password'); $('#email').val(email); $('#password').val('password');登录验证账号密码成功后,cookie记住密码
获取当前系统时间计算后面的七天的日期和星期,本周，本月
IOS_Mainstay的博客
07-13 7737
在计算时间之时，需要判断是否是闰年还是平年，
2019年河北省职业院校技能大赛 中职组Web前端开发竞赛规程.pdf
06-03
《2019年河北省职业院校技能大赛 中职组Web前端开发竞赛规程》是一份针对中职学生举办的Web前端开发竞赛的详细指南。该规程旨在通过竞赛培养学生的专业技术能力，团队协作精神，以及对Web前端行业的理解。以下是规程...
web前端课程设计
12-21
此文件只用于应付web课程设计 https://pan.baidu.com/s/1ixIqN_QtcNIS5rf7tl_ocQ 源码百度云链接，这好像不能设置0积分了。。 参考别人（不会的太多，只模仿了少部分）...
移动web 第7天响应适配
12-25
BootStrap是一个流行的前端UI框架，提供了大量的CSS样式和JavaScript插件，允许开发者快速开发响应式网页。BootStrap的栅格系统是其核心组件之一，提供了灵活的布局方式，允许开发者快速布局响应式网页。 ...
(完整word版)假期web前端实习报告.doc
11-24
实习的时间为2015年7月12号至2015年7月18号，共七天。 二、实习内容 实习的内容包括学习软件开发的各种模式，重点学习敏捷开发，并学习HTML5、CSS、JAVASCRIP技术。实习的过程中，学员分组，制定每日的站立会议时间...
配置Java开发环境
Broken_x的博客
07-10 1622
Java开发环境配置
java集合工具类
药的博客
07-12 489
【代码】java集合工具类。
java版的上门家政系统和PHP版的上门家政有什么区别？
baina666的博客
07-12 584
综上所述，Java版和PHP版的上门家政系统各有优缺点，选择哪种语言主要取决于项目的具体需求、预算、开发团队的技术栈以及未来的扩展计划等因素。同时，由于Java生态系统的复杂性和多样性，也可能需要投入更多的时间和资源来学习和掌握相关的技术和工具。Java版：Java拥有庞大的生态系统和丰富的第三方库，这为家政系统的开发和扩展提供了强大的支持。Java版：由于Java的编译执行机制和高效的垃圾回收算法，Java版家政系统通常具有更高的运行效率和更好的性能表现，尤其是在处理高并发、大数据量等复杂场景时。
Java方法练习-双色球彩票系统
T1798218285的博客
07-11 315
红色球号码从1-33中选择；蓝色球号码从1-16中选择。投注号码由6个红色球号码和1个蓝色球号码组成。三等奖 5+1 / 5+0 3000。四等奖4+1 / 4+0 200。六等奖1+1 / 1+0 5。一等奖6+1 1000w。二等奖6+0 500w。五等奖3+1 / 2+1。
基于Java技术的校园台球厅人员与设备管理系统
heye0910032的博客
07-12 560
本文介绍了一个基于Java技术和SpringBoot框架开发的校园台球厅人员与设备管理系统。该系统利用MySQL数据库进行数据存储，实现了包括首页、个人中心、用户管理、会员账号管理、会员充值管理、球桌信息管理、会员预约管理、普通预约管理、留言反馈和系统管理等多功能集成。系统设计考虑了用户友好性和操作便捷性，旨在提高校园台球厅人员与设备管理的效率和质量。本文介绍了一个基于Java技术和SpringBoot框架开发的校园台球厅人员与设备管理系统。
Java 中有哪几种基本数据类型？请分别列出它们并简述每种数据类型的特点及其在内存中的占用空间？
最新发布
liangzai215的专栏
07-15 315
在Java的世界里，数据是构建应用程序的基石。为了高效地处理这些数据，Java设计了一系列基础数据类型，它们直接映射到计算机硬件上，因此在性能和内存使用上更为高效。我们常说的Java八大基本数据类型，涵盖了整数、浮点数、字符和布尔值，下面我将一一介绍它们的特点以及在内存中的占用空间，并通过简单的代码实例来加深理解。
深入剖析 Java 中 Spring Bean 的生命周期
weixin_42545951的博客
07-12 639
在 Java 开发中，Spring 框架是广泛使用的企业级应用开发框架。理解 Spring Bean 的生命周期对于开发者来说至关重要，这也是面试中经常会被问到的重要知识点。
maven项目容器化运行之1-基于1Panel软件将docker镜像构建能力分享给局域网
qq_37372909的博客
07-15 415
docker核心功能包括镜像的构建和容器的运行，它可以开放端口将镜像构建的能力暴露。docker daeson就是docker的守护进程，开放能力是通过指定docker守护进程监听端口来实现的。后面开发人员就可以通过maven中docker插件来远程调用docker镜像构建能力了。
从零手写实现 nginx-27-return 指令
07-14 647
大家好，我是老马。很高兴遇到你。我们为 java 开发者实现了 java 版本的 nginx如果你想知道 servlet 如何处理的，可以参考我的另一个项目：手写从零实现简易版 tomcatminicat。
web前端开发实习总结范本2021.docx
12-31
在2021年的web前端开发实习总结范本中，实习生着重回顾和实践了面向对象编程和JavaWeb开发技术。实习的主要目的是深化理解和运用所学知识，提升实际操作能力。以下是关键知识点的详细解析： 1. **实训项目与目标**:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值