cgb2106-day07
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2106-day07相关的知识，希望对你有一定的参考价值。
文章目录
一,html练习
–1,改造用户注册的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单标签</title>
</head>
<body>
<!-- 创建表单,
下拉框:select(下拉) + option(选项)
文件上传: <input type="file"/>
文本域:<textarea></textarea>
-->
<h1>注册表单</h1>
<form>
<table border="1px" cellspacing="0px" bgcolor="lightgray">
<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>
<!-- 想单选就必须设置name属性,而且值必须相同
设置好name属性数据就可以提交了,但是默认提交了on
-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="like" value="lq"/>篮球
<input type="checkbox" name="like" value="zq"/>足球
<input type="checkbox" name="like" value="ppq"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city" >
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="imgs/a.png" />
<input type="button" value="点我换一张" />
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>描述信息...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
<input type="button" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
–2,创建学生系统的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习表单标签</title>
</head>
<body>
<!-- 使用h5的播放音频,controls是使用控件,source是文件位置-->
<audio controls="controls">
<source src="res/jay.mp3"></source>
</audio>
<!-- 使用h5的播放视频,controls是使用控件,source是文件位置-->
<video controls="controls" loop="loop">
<source src="res/b.mp4"></source>
</video>
<!-- form 可以提交数据,而且数据默认采用了get方式,就在地址栏中展示的.
http://127.0.0.1:8848/cgb2106/test04.html?user=1&age=123&sex=1&like=ppq&like=ps&edu=2
不好:长度受限,不安全
可以改成post提交数据,而且可以指定,交给哪段程序处理数据action
面试题:get和post提交数据的区别?
get方式:是默认的提交方式,但是不安全(都展示在地址栏),长度受限
post方式:安全,数据不在地址栏展示啦,看不见,提高安全性
-->
<form method="get" action="#">
<table>
<tr>
<td>
<h1>学生信息管理系统MIS</h1>
</td>
</tr>
<tr>
<td>
姓名:
</td>
</tr>
<tr>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>
年龄:
</td>
</tr>
<tr>
<td>
<input type="number" name="age"/>
</td>
</tr>
<tr>
<td>
性别:(单选框)
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
爱好:(多选)
<input type="checkbox" name="like" value="ppq"/>乒乓球
<input type="checkbox" name="like" value="ps"/>爬山
<input type="checkbox" name="like" value="cg"/>唱歌
</td>
</tr>
<tr>
<td>
学历:(下拉框)
<select name="edu">
<option value="1">本科</option>
<option value="2">研究生</option>
<option value="3">专科</option>
</select>
</td>
</tr>
<tr>
<td>
入学日期:<br />
<input type="date" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="保存"/>
<input type="button" value="取消"/>
</td>
</tr>
</table>
</form>
<!-- div p span -->
<div>我是div</div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p2</p>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
二,CSS
–1,概述
专门用来修饰网页的技术,全称层叠样式表stylesheet
语法: 元素的选择器{ 属性名:属性值; 属性名:属性值; 属性名:属性值; }
用法:
1,行内CSS(在标签上使用css代码)
2,内部CSS(使用style标签,在head里写css代码)
3,外部CSS(把HTML代码和CSS代码分离)
–2,入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css</title>
<!-- 写法2:内部css -->
<style>
//语法: 元素的选择器{ 属性名:属性值; }
div{
font-size:30px; /* 修饰div的字号 */
background-color:red;/* 修饰div的背景色 */
}
</style>
</head>
<body>
<!-- 写法1:行内css 修饰div的背景色,优先级最高-->
<div style="background-color:pink;">我是div1</div>
<div style="background-color: pink;">我是div2</div>
</body>
</html>
三,CSS选择器
–1,概述
辅助你选中网页中的元素.
常见的:
1,标签名选择器 : 根据标签的名字选中元素
2,class选择器 : 根据有class属性的选中元素(添加class属性,通过.选中元素)
–2,基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css选择器</title>
<!-- 内部css -->
<style>
/* 1.标签名选择器: 选中网页中所有标签名是div的元素*/
div{
background-color: skyblue;/* 给div加背景色 */
}
span{
font-size: 40px; /* 给span加大字号 */
}
/* 2. class选择器: 给指定元素加class属性 , 通过.获取class的值 ,值可以相同 */
.a{
color: crimson;/* 给第一个span元素,改变字的颜色 */
}
/* 3. id选择器: 给指定的元素加id属性 , 通过#获取id的值 , 值不要相同 */
#b{
font-family: "微软雅黑";/* 字体 */
}
</style>
</head>
<body>
<div id="b">我是div1</div>
<div class="a">我是div2</div>
<span class="a">我是span1</span>
以上是关于cgb2106-day07的主要内容，如果未能解决你的问题，请参考以下文章