01:网页开发基础

一 、HTML基础

编写第一个网页

在D:\web_work里创建一个名称为chapter01的文件夹,然后在该文件夹中新建一个文本文件(.txt后缀),将文件的名称更改为htmlDemo01,后缀名改为.html。

请添加图片描述
在htmlDemo01.html文件中编写代码
请添加图片描述
运行程序,使用浏览器打开htmlDemo01.html文件
请添加图片描述

二、常用的HTML标签

(一)段落、行内和换行标签

目标:熟悉HTML的段内、行内和换行标签
在chapter01文件夹中新建HTML文件htmlDemo02.html
请添加图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo02</title>
	</head>
	<body>
		<p>相思</p> <!--段落标签:paragraph tag-->
		<p>唐·王维</p> <!--诗佛-->
		<p>
			<span>红豆生南国,<br />春来发几枝。<br />愿君多采撷,<br />此物最相思。</span>
		</p>
	</body>
</html>

运行程序,使用浏览器打开htmlDemo02.html文件
请添加图片描述

(二)文本样式标签

目标:熟悉HTML的文本样式标签
在HTML中,使用标签控制网页中文本的样式,如字体、字号和颜色
标签的基本语法格式:<font 属性=“属性值”>文本内容
在chapter01文件夹中新建HTML文件htmlDemo03.html
请添加图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo03</title>
	</head>
	<body>
		默认样式文本:踏青寻芳<br />
		<font face="微软雅黑" size="7" color="green">微软7号绿色文本:春满人间</font>
	</body>
</html>

运行程序,使用浏览器打开htmlDemo03.html文件
请添加图片描述
说明:颜色可以用英文单词来设置,也可以用十六进制来表示,比如green就可以用#00ff00表示,purple可以用#ff00ff表示请添加图片描述
课堂练习:将王维诗的标题、作者和正文设置为不同的文本样式,而且文本居中显示请添加图片描述
拓展练习:设置页面背景图片(准备图片文件background.png放在chapter01目录)请添加图片描述

(三)表格标签

目标:掌握表格标签,学会使用border属性改变表格的边框
在HTML网页中要想创建表格,需要使用相关的表格标签才能创建表格
在HTML网页中创建表格的基本语法格式

<table>
     <tr>
          <td>单元格内的文字</td>
     </tr>
</table>

注意:

、和
是创建表格的基本标签,缺一不可。用于定义一个表格,用于定义表格中的行(table row),必须嵌套在
标签中,标签中。
用于定义表格中的单元格(table data),也可称为表格中的列,必须嵌套在

请添加图片描述
运行程序,使用浏览器打开htmlDemo04.html文件
请添加图片描述
设置表格字体颜色和背景色,让表格文字居中请添加图片描述

(四)表单标签

目标:掌握表单标签,学会使用表单标签收集数据信息
表单就是在网页上用于输入信息的区域,它的主要功能是收集数据信息,并将这些信息传递给后台信息处理模块。例如,注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。

1、表单域

在HTML中,标签用于定义表单域,即创建一个表单。

标签基本语法
<form action="url地址" method="提交方式" name="表单名称">
     各种表单控件
</form>

2、表单控件

浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等,使用控件可以在表单中定义这些元素。

控件基本语法格式:

type属性为控件最基本的属性,用来指定不同的控件类型。

控件还可以定义很多其他属性,其中,比较常用的有id、name、value、size,它们分别用来指定控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。

在chapter01文件夹中创建一个HTML文件htmlDemo05.html,添加表单,并设置提交方式为POST,再定义一个2列的表格
请添加图片描述
在htmlDemo05.html中添加用户名输入控件和密码输入框控件请添加图片描述
在htmlDemo05.html中添加性别选择控件和兴趣复选框控件请添加图片描述
在htmlDemo05.html中添加文件上传控件、提交按钮控件和重置按钮请添加图片描述
查看页面完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo05</title>
	</head>
	<body>
		<form action="#" method="post">
			<table cellpadding="2" align="center">
				<tr>
					<td align="right">用户名:</td>
					<td>
						<!--1. 文本输入框控件-->
						<input type="text" id="username" name="username" />
					</td>
				</tr>
				<tr>
					<td align="right">密码:</td>
					<td>
						<!--2. 密码输入框控件-->
						<input type="password" id="password" name="password" />
					</td>
				</tr>
				<tr>
					<td align="right">性别:</td>
					<td>
						<input type="radio" name="gender" value="male"/><input type="radio" name="gender" value="female"/></td>
				</tr>
				<tr>
					<td align="right">兴趣:</td>
					<td>
						<input type="checkbox" name="interest" value="film"/> 看电影
						<input type="checkbox" name="interest" value="code"/> 敲代码
						<input type="checkbox" name="interest" value="game"/> 玩游戏
					</td>
				</tr>
				<tr>
					<td align="right">头像:</td>
					<td>
						<input type="file" name="photo" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="注册"/>
						<input type="reset" value="重填" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

运行程序,使用浏览器打开htmlDemo05.html文件
请添加图片描述
给表单加一个有标题的边框
请添加图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo05</title>
	</head>
	<body>
		<form action="#" method="post">
			<fieldset>
				<legend>新用户注册</legend>
				<table cellpadding="2" align="center">
					<tr>
						<td align="right">用户名:</td>
						<td>
							<!--1. 文本输入框控件-->
							<input type="text" id="username" name="username" />
						</td>
					</tr>
					<tr>
						<td align="right">密码:</td>
						<td>
							<!--2. 密码输入框控件-->
							<input type="password" id="password" name="password" />
						</td>
					</tr>
					<tr>
						<td align="right">性别:</td>
						<td>
							<input type="radio" name="gender" value="male"/><input type="radio" name="gender" value="female"/></td>
					</tr>
					<tr>
						<td align="right">兴趣:</td>
						<td>
							<input type="checkbox" name="interest" value="film"/> 看电影
							<input type="checkbox" name="interest" value="code"/> 敲代码
							<input type="checkbox" name="interest" value="game"/> 玩游戏
						</td>
					</tr>
					<tr>
						<td align="right">头像:
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web开发技术课程,网页设计大作业。主题为个人网站,构思了五个部分,分别是①主页index ②我的博客myBlogs 学期期末网页设计作业合集分享 内容概览: 这个分享包涵了我在本学期期末完成的网页设计作业,其中包含多个关键部分,以帮助你全面了解和学习网页设计的整个流程。 HTMLCSS、JS、Vue代码:我提供了完整的网页源代码,详细简单有效 项目文件:除了代码,我还分享了整个项目的文件,包括设计稿、图标、图片等资源。这些资源对于理解项目背景和设计思路至关重要。 MD文档与操作手册:为了方便他人理解和使用我的作品,我编写了详细的操作手册和使用说明,同时提供了一份Markdown格式的文档,概述了项目的主要功能和特点。 学习笔记:在项目开发过程中,我记录了大量的学习笔记和心得体会。这些笔记不仅有助于理解项目的开发过程,还能为学习前端技术提供宝贵的参考资料。 适用人群: 这份作业合集适用于所有对网页设计、前端开发感兴趣的人,无论你是学生、初学者还是有一定经验的开发者。无论你是想学习新的技术,还是想了解一个完整的项目开发流程,这份资料都将为你提供极大的帮助。 使用建议: 按部就班地学习:建议从基础HTMLCSS开始,逐步深入到JavaScript和Vue的学习。通过实践,逐步掌握前端开发的各项技能。 参考项目文件和笔记:项目文件和笔记提供了丰富的背景信息和开发经验。在学习的过程中,不妨参考这些资料,以帮助你更好地理解和学习。 动手实践:网页设计是一门实践性很强的技能。通过实际操作,你可以更好地掌握前端开发的各项技能,并提高自己的实践能力。
学期期末网页设计作业合集分享 内容概览: 这个分享包涵了我在本学期期末完成的网页设计作业,其中包含多个关键部分,以帮助你全面了解和学习网页设计的整个流程。 HTMLCSS、JS、Vue代码:我提供了完整的网页源代码,详细简单有效 项目文件:除了代码,我还分享了整个项目的文件,包括设计稿、图标、图片等资源。这些资源对于理解项目背景和设计思路至关重要。 MD文档与操作手册:为了方便他人理解和使用我的作品,我编写了详细的操作手册和使用说明,同时提供了一份Markdown格式的文档,概述了项目的主要功能和特点。 学习笔记:在项目开发过程中,我记录了大量的学习笔记和心得体会。这些笔记不仅有助于理解项目的开发过程,还能为学习前端技术提供宝贵的参考资料。 适用人群: 这份作业合集适用于所有对网页设计、前端开发感兴趣的人,无论你是学生、初学者还是有一定经验的开发者。无论你是想学习新的技术,还是想了解一个完整的项目开发流程,这份资料都将为你提供极大的帮助。 使用建议: 按部就班地学习:建议从基础HTMLCSS开始,逐步深入到JavaScript和Vue的学习。通过实践,逐步掌握前端开发的各项技能。 参考项目文件和笔记:项目文件和笔记提供了丰富的背景信息和开发经验。在学习的过程中,不妨参考这些资料,以帮助你更好地理解和学习。 动手实践:网页设计是一门实践性很强的技能。通过实际操作,你可以更好地掌握前端开发的各项技能,并提高自己的实践能力。
intitle: 网页设计期末作业是指在网页设计课程的期末阶段所要完成的作业。在这个作业中,学生需要运用所学的网页设计知识和技巧,设计、开发和呈现一个具有一定功能和美观度的网页。 在进行网页设计期末作业时,学生需要先确定作业要求和主题。主题可以根据个人兴趣和课程要求来选择,例如设计一个在线购物网站、个人简历网页等等。然后,学生需要进行网页规划,包括确定网页的布局、色彩和字体等方面的设计。 接下来,学生需要使用HTMLCSS网页设计工具和编程语言来搭建网页的结构和样式。学生可以根据要求添加导航菜单、图片、视频、表格等元素,以及设计响应式网页,使网页在不同设备上都能正常显示和使用。 完成网页的设计和开发后,学生还需要进行测试、调整和优化,确保网页的功能和用户体验都能达到预期的效果。同时,学生还需要注意网页的加载速度和兼容性,确保网页在不同浏览器和操作系统上都能良好运行。 最后,学生需要将完成的网页进行提交和展示,同时撰写一份简短的报告,介绍设计思路、实施过程和遇到的问题和解决方法等。 综上所述,intitle: 网页设计期末作业是一项全面的任务,要求学生运用所学的网页设计知识和技巧,设计和开发一个具有一定功能和美观度的网页,并在期末阶段进行测试、调整和优化,最终提交和展示作业成果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值