cgb2108-day08
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2108-day08相关的知识，希望对你有一定的参考价值。
一,表单提交数据
–1,代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单标签</title>
</head>
<body>
<!-- 添加音频 -->
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
<!-- 添加视频 -->
<video controls="controls">
<source src="b.mp4"></source>
</video>
<div>大家好</div>
<div>大家好</div>
<div>大家好</div>
<p>大家好2</p>
<p>大家好2</p>
<p>大家好2</p>
<span>大家好3</span>
<span>大家好3</span>
<span>大家好3</span>
<!--1.表单:本质就是表格,只有表单才能提交数据(把浏览器输入的数据交给java程序处理)
form标签专门用来提交数据:必须使用form标签 + 必须有submit按钮 + 必须配置name属性
地址栏: http://127.0.0.1:8848/cgb2108/test3.html?user=jack
?用来拼接用户输入的数据,user=jack,其中user是给标签配置的name属性的值,jack是用户从浏览器上输入数据
面试题:提价数据的两种方式: get方式 和 post方式
get方式:被拼接在地址栏,方便看,坏处是不安全,长度受限--不推荐
post方式:不方便看,好处是安全--推荐!!!
method属性用来指定数据的提交方式,默认是get
action属性用来指定数据将要交给哪个程序处理
-->
<form method="post" action="#">
<h1>注册表单</h1>
<table bgcolor="lightgray" border="1px"
bordercolor="green" cellspacing="0"
width="500px">
<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> <!-- 问题1:提交的数据都是on,加value属性,区分提交的数据-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td><!-- 问题1:提交的数据都是on,加value属性,区分提交的数据-->
<input type="checkbox" name="hobby" value="lq"/>篮球
<input type="checkbox" name="hobby" value="zq"/>足球
<input type="checkbox" name="hobby" value="pqq"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city"> <!-- 定义下拉框-->
<option value="0">-请选择-</option> <!-- 定义下拉选项-->
<option value="1">北京</option>
<option value="2">广东</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" name="touxiang"/>
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="a.png" />
<input type="button" value="点我换一张"/>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea></textarea> <!-- 文本域-->
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" />
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
二,CSS
–1,概述
全称是 层叠样式表 stylesheet ,作用是用来修饰HTML网页.
语法: 选择器{ 属性名:属性值 ; 属性名:属性值 ; 样式3…}
学习重点: 选择器 + 各种属性
位置:
1, 行内CSS:只作用在当前行, 给当前元素使用style属性来修饰样式
html <h1 style="text-align:center;">我是h1</h1>
2, 内部CSS: 在HTML代码里使用style标签,包裹着CSS代码.提高了CSS代码的复用性
3, 外部CSS: 把HTML代码和CSS代码分离,在HTML中引入CSS文件
–2,入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css</title>
<!-- style标签是HTML提供的,写css代码 -->
<style>
/* CSS语法:选择器{样式} */
div{/* 选中div */
text-align: center;/* 文字居中 */
}
</style>
</head>
<body>
<!--style属性用来设置样式 属性名:属性值; -->
<h1 style="text-align:center;">我是h1</h1><!-- 设置文本居中 -->
<div>我是div1</div>
<div>我是div2</div>
</body>
</html>
–3,基础选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css</title>
<!-- 用HTML提供的style标签包裹css代码 -->
<style>
/* 1.标签名选择器:根据标签的名字选中 */
div{/* 练习1:修饰div的样式 */
color: red;/* 字的颜色 */
background-color: darkgray;/* 背景色 */
border-style:dashed;/* 边框的样式,虚线 */
border-color:blue;/* 边框的颜色 */
}
span{/* 练习2:修饰span的样式 */
font-size: 30px;/* 字号 字体 */
font-family: "黑体";/* 字体 */
}
/* 2.class选择器:根据class属性的值选中元素,class的值能相同
步骤:给元素加class属性+通过.获取元素
*/
.a{/* 练习3:修饰div1的样式*/
font-size: 25px;/* 字号 */
}
.b{/* 练习4:修饰span1的样式 */
opacity:0.4 ;/* 透明度 0.0~1.0,数值越小越透明 */
}
/* 3.id选择器:根据id属性的值选中元素,要求id的值不能相同
步骤:给元素添加id属性 + 通过#获取值
*/
#c{/* 练习5:修饰a2的样式 */
border-style: solid; /* 边框的样式:实线*/
border-radius: 25px; /* 圆角 */
}
</style>
</head>
<body>
<div class="a">我是div1</div>
<div>我是div2</div>
<span class="b">我是span1</span>
<span>我是span2</span>
<a class="a b">我是a1</a> <!--同时拥有a b两种样式的修饰-->
<a id="c">我是a2</a>
</body>
</html>
–4,高级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 CSS高级选择器</title>
<style>
/* 1.分组选择器:把多种选择器的结果,组成一组进行修饰,逗号隔开 */
a , input{ /* 利用标签名选择器,选中一组元素,修饰样式 */
/* 边框: 宽度 样式 颜色; */
border:1px dashed red;
}
/* 利用基本选择器,选中一组元素,修饰样式 */
.x , #y , input{
font-size: 20px;
}
/* 2.属性选择器:按照标签的属性来选择元素,标签名[属性名]*/
a[href]{ /* 选中拥有href属性的a标签*/
font-size: 50px;
}
input[type='text']{/* 选中type="text"的input设置背景色 */
background-color: green;
}
</style>
</head>
<body>
<a class="x">我是a1</a>
<a href="#" class="x">我是a2</a>
<a href="#" id="y">我是a3</a>
<input type="text" />
<input type="password" placeholder="请您输入密码..."/>
<input type="text" />
</body>
</html>
三,盒子模型
–1,概述
CSS认为HTML里的每个元素都是一个盒子.
外边距margin: 盒子间的距离,可以设置左边距,右,上,下
边框border: 盒子的边框,可以设置宽度/颜色/样式
内边距padding: 盒子里的内容和盒子的边框的距离,可以设置左边距,右,上,下
内容: 可以设置 width 和 height
–2,练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 外边距: 单选框是一个盒子 男也是一个盒子 两个盒子的距离margin -->
<input type="radio" style="margin: 20px;"/>男
<!-- 内边距: 一个盒子里, 内容到边框的距离padding -->
<input type="text" placeholder="你好" style="padding: 20px;"/>
</body>
</html>
三,
以上是关于cgb2108-day08的主要内容，如果未能解决你的问题，请参考以下文章