本文介绍了前端开发的基础知识，包括HTML用于创建静态网页的结构，CSS用于美化网页样式，JavaScript用于实现交互功能。此外，还讲解了Git的使用，包括工作空间、本地索引、本地仓库和远程仓库的概念，以及常用命令如`add`、`commit`、`push`。在HTML部分，详细展示了表格、表单以及各种输入类型的用法。CSS部分讲解了选择器、属性等基础知识。最后，通过DOM技术介绍了如何利用JavaScript操作网页元素，并使用JSON进行前后端数据交换。
- HTML
是超文本标记语言.用来完成一个静态网页.
结构:
由大量的标签组成的.
标签都是成对儿出现的
- 入门案例
<!DOCTYPE html> <!-- 文档声明 -->
<html> <!-- 根元素,标记这是一个网页文件 -->
<head><!-- 头部分 -->
<meta charset="utf-8"> <!-- 设置了编码 -->
<title>1243</title> <!-- 设置了标题 -->
</head>
<body> <!-- 体部分,指定网页要展示的内容-->
hello
</body>
</html>
- Git
- 概述
是一个开源的分布式的版本控制产品.
可以上传 开源项目 , 上传到Gitee服务器上. 很方便的管理代码, 还 可以下载.
上传:
工作空间: 用来保存资源的一个文件夹
本地索引: 给即将上传的资源, 设置索引, 提高传输效率
本地仓库: 是指你自己电脑里 ,的一个文件夹 ,已经存好了要提交的资 源
远程仓库: 是指在Gitee的服务里 ,创建一个文件夹 ,保存了 你提交 的资源
下载:
只 从 远程仓库 下载 资源 到自己的电脑里
- 常用命令
add : 从 工作空间把要上传的资源 添加到 本地索引
commit : 从本地索引 提交到 本地仓库
push : 从本地仓库把 资源 推送到 远程仓库
clone/pull : 从远程仓库 下载到 本地
- 准备环境
- 安装Git软件,下一步就行了
- 注册一个Gitee的账号
- 创建了一个本地仓库(在你自己的磁盘里创建的,存放你想要上传 的资源)
- 创建了一个远程仓库(在Gitee服务器上,创建的)
- 执行一些自动生成的Git命令
在本地仓库,执行命令(在本地仓库的路径处,直接输入cmd):
git config --global user.name "cgblpx" #配置在gitee上注册 的账号
git config --global user.email "2250432165@qq.com" #配置在 gitee上注册的邮箱
git config --list #检查配置信息
git init #初始化了git(产生了一个隐藏文件.git)
git add . # 提交本地仓库的所有资源
git commit -m "first commit" #把本地索引的文件提交到本地仓 库
git remote add origin https://gitee.com/cgblpx/cgb2107.git # 建立本地仓库和远程仓库的关系
git push -u origin master #把本地仓库的资源 提交给Git服务 器
#第一次上传文件,需要输入用户名和密码的......；坎坎坷坷
- 表格标签
- 测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 1. input标签,输入框 -->
密码输入框:<input type="password" /> <br/>
普通输入框:<input type="text" /> <br/>
单选框:<input type="radio" />男 <br/>
多选框:<input type="checkbox" />迪丽热巴 <br/>
日历:<input type="week" /> <br/>
<input type="date" /> <br/>
数字:<input type="number" /> <br/>
邮箱:<input type="email" /> <br/>
普通按钮:<input type="button" value="点我"/>
<button >点我</button> <br/>
提交按钮:<input type="submit" value="注册"/>
<button type="submit">点我</button>
<!-- 2. table表格标签 tr是行 th是表头(加粗居中) td是列
border设置边框 width设置宽度
bgcolor设置背景颜色 cellspacing单元格间距
rowspan行合并(合并多个行) colspan列合并(合并多个
列)
-->
<table border="2px" width="300px"
bgcolor="lightgreen" cellspacing="0">
<tr>
<td colspan="3"><h2>流量调查表</h2></td>
</tr>
<tr> <!-- 行 -->
<th colspan="2">11</th> <!-- 列 -->
<th>13</th>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
- 表单标签
最大的作用就是可以提交数据.
把表格里想要收集的数据可以提交给服务器.
- 测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单标签</title>
</head>
<body>
<!-- 1. 表单标签form:用来提交数据,默认数据是在地址栏中
拼接的
提交的数据有两种方式: get post
区别:
get方式提交数据是在地址栏,默认方式,安全性低,长度受
限
http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?
user=1&pwd=2&repwd=2&nick=3&mail=4@.com&sex=on&hobby=on&hobby=
on&hobby=on
post方式提交数据不在地址栏,安全性高,没有上限
method属性用来设置数据的提交方式,默认是get
action属性用来指定数据即将提交给哪个程序去处理
-->
<form method="post" action="#">
<h2>注册表单</h2>
<table border="1px" bgcolor="#A9A9A9"
width="500px" cellspacing="0">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd"/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="repwd"/>
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" name="nick"/>
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" name="mail"/>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="1"/> 男
<input type="radio" name="sex" value="0"/> 女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby"
value="1"/>篮球
<input type="checkbox" name="hobby"
value="2"/>足球
<input type="checkbox" name="hobby"
value="3"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<!-- 下拉框 -->
<select name="city">
<option value="">-请选择-</option>
<option value="bj">北京市</option>
<option value="sh">上海市</option>
<option value="gd">广东省</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<!-- 上传文件 -->
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text"/>
<img src="a.png"/>
<button>点我换一张</button>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>在这儿输入...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
- 总结
form 标签用来 把页面填写的数据提交给后台的java程序
table 标签用来 向网页中添加表格
tr标签用来表示表格里的一行
td标签表示行里的列元素
input标签用来实现输入框(text password email radio checkbox…)
select标签用来定义一个下拉框,option标签用来定义选项
textarea 标签用来表示一个大的文本框(文本域)
img 标签用来向网页中加入图片
button标签用来表示一个按钮
src属性用来指定图片的位置,type属性用来指定输入框的类型,
width属性用来指定宽度,height属性用来指定高度,bgcolor属性用来
设置背景颜色
- 提交数据
- 必须用form标签
- 必须有提交submit按钮
- 必须设置name属性
- 提交的数据都在?之后 , 多个值用&连接 ,
每个值用=连接 , user和pwd是页面上name属性的值 , 1和2是 用户在浏览器输入的数据
http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?user=1&pwd= 2 - 遇到的问题
–性别可以多选: 让性别的输入框name属性的值相同
–单选框和多选框提交的数据是on: 设置value属性
- 练习学生管理系统
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册学生信息</title>
</head>
<body>
<!-- 添加音频 controls使用控制组件-->
<audio controls="controls">
<!-- 指定资源的位置 -->
<source src="jay.mp3"></source>
</audio>
<!-- 添加视频 controls使用控制组件-->
<video controls="controls" loop="loop">
<source src="b.mp4"></source>
</video>
<!-- form标签用来提交数据,
method属性用来指定提交数据的方式,
action属性用来指定提交到哪里
-->
<form method="post" action="#">
<table>
<tr>
<td>
<h2>学生信息管理系统MIS</h2>
</td>
</tr>
<tr>
<td>姓名:</td>
</tr>
<tr>
<td>
<input type="text" name="user"
placeholder="在这里输入姓名"/>
</td>
</tr>
<tr>
<td>年龄:</td>
</tr>
<tr>
<td>
<input type="number" name="age"
placeholder="在这里输入年龄"/>
</td>
</tr>
<tr>
<td>
性别:(单选框)
<input type="radio" name="sex" value="1"
最低0.47元/天 解锁文章
扫一扫
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
