文章目录
一,其他标签
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 其他的常用标签2:-->
<!-- audio添加音频,controls属性用来使用控件
source的src属性用来指定文件的位置`
-->
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
<!-- video添加视频,controls属性用来使用控件 -->
<video controls="controls">
<source src="b.mp4"></source>
</video>
<!-- 其他的常用标签1:
相同点:都是可以包含大量的元素
区别:div和p是块元素,span是行元素
-->
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p1</p>
<p>我是p1</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>
二,HTML练习
–1,效果
–2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息管理系统MIS</title>
</head>
<body>
<!-- 总结:
1,要求:使用form+有submit按钮+有name属性
2,单选和多选提交了on,添加value属性,会提交value属性的值
3,优化了学历提交文字的,给学历添加values属性,会提交value属性的值
4,form标签的method用来指定数据的提交方式默认是get,
action用来指定一段java程序的访问方式
-->
<h1>学生信息管理系统MIS</h1>
<form method="post" action="#">
<table>
<tr>
<td>
姓名:<br />
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>
年龄:<br />
<input type="number" name="age"/>
</td>
</tr>
<tr>
<td>
性别:(单选框)
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
爱好:(多选框)
<input type="checkbox" name="like" value="ppq" checked/>乒乓球
<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>
<option value="4">初中</option>
</select>
</td>
</tr>
<tr>
<td>
入学日期:<br />
<input type="date" name="intime"/>
</td>
</tr>
<tr>
<td>
<button type="submit">保存</button>
<button type="reset">取消</button>
</td>
</tr>
</table>
</form>
</body>
</html>
三,CSS
–1,概述
是专门用来修饰HTML网页的一个技术. 全称是层叠样式表stylesheet
使用位置:
1, 行内CSS: 是指给这行代码添加css的修饰
2, 内部CSS: 是指在head标签中使用style标签,添加添加css的代码
3, 外部CSS: 是指会单独生成.css文件,里面写css代码.哪个网页需要就引入到哪个网页里
语法:
选择器{ 属性名:属性值; 属性名:属性值; 属性名:属性值; 属性名:属性值; }
学习重点:
1,选择器有哪些
2,属性名
–2,入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.行内CSS -->
<div style="color:red;">我是div</div>
</body>
</html>
–3,测试css的出现位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css的出现位置</title>
<!-- 2.内部css. 选择器{ 属性名:属性值; 样式2;...} -->
<style>
/* 练习3:给所有div设置居中 */
div{
text-align:center;
}
/* 练习4:给所有span设置文字颜色 */
span{
color: #008000;
}
</style>
</head>
<body>
<!-- 1.行内CSS/内联CSS -->
<!-- 练习1:给div1加背景色 -->
<div style="background-color:#ADD8E6;">我是div1</div>
<div>我是div2</div>
<!-- 练习2:给div3加背景色 -->
<div style="background-color:#ADD8E6;">我是div3</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
四,CSS选择器
–1,概述
CSS提供特殊语法,可以帮你选中元素
分类: 基本选择器(标签名,类class,id) + 高级选择器(分组,属性)
–2,基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css的选择器</title>
<style>
/* 1.标签名选择器:可以根据标签的名字选中元素 */
/* 练习1:给输入框加背景颜色*/
input{
background-color: #A9A9A9;
}
/* 2.类class选择器:给元素加class属性(值可以重复) + 通过.获取class属性的值 */
/* 练习2:给 我是div2和我是p2 字号变大*/
.a{
font-size: 30px;
}
/* 3.id选择器:给元素加id属性(值不重复) + 通过#获取id属性的值 */
/* 练习3: 把 我是div1 加一个红色边框*/
#c{
border-width: 2px;/* 宽度 */
border-style: dashed;/* 样式 */
border-color: red;/* 红色 */
border-radius: 25px;/* 圆角 */
}
</style>
</head>
<body>
<div id="c">我是div1</div>
<div class="a">我是div2</div>
<p>我是p1</p>
<p class="a">我是p2</p>
用户名: <input type="text"/>
密码: <input type="password"/>
</body>
</html>
–3,高级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css的选择器</title>
<style>
/* 练习1: 设置 我是P1 的文字透明度 */
#a{
opacity: 0.5;/*值是0~1的范围,值越大越清晰 */
}
/* 练习2: 把 我是a1 和 我是a2 的效果 */
a{
font-size: 30px;/* 字号 */
font-family: "微软雅黑"; /* 字体 */
}
/* 练习3: 把所有元素设置 字号 */
body{
font-size: 10px;
}
/* 分组选择器:可以使用多种选择器选中多个元素,多种选择器用逗号隔开 */
#a,.b,input{
font-size: 10px;
}
/* 属性选择器: */
[href]{ /* 选中那些有href的元素 */
color: red;
}
[type="text"]{ /* 选中那些有type的元素,而且值要是text才行 */
background-color: hotpink;
}
input[type="number"]{/* 选中input,那些有type的元素,而且值要是number才行 */
background-color: green;
}
</style>
</head>
<body>
<p id="a">我是P1</p>
<p class="b">我是P2</p>
<a href="#" class="b">我是a1</a>
<a href="#" class="b">我是a2</a>
姓名: <input type="text" placeholder="看这里...."/>
年龄: <input type="number" />
</body>
</html>
五,练习
–1,修改学生注册网页的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息管理系统MIS</title>
<style>
/* 1.修饰输入框 宽度高度 */
.a{
width: 300px;
height: 30px;
}
/* 2.修饰按钮 */
[type="submit"]{
background-color: blue;/* 背景色 */
border-color: blue;/* 边框色 */
color: white;/* 字的颜色 */
width: 60px;/* 宽度 */
height: 30px;/* 高度 */
font-size: 15px;/* 文字大小 */
}
[type="reset"]{
background-color: hotpink;/* 背景色 */
border-color: hotpink;/* 边框色 */
color: white;/* 字的颜色 */
width: 60px;/* 宽度 */
height: 30px;/* 高度 */
font-size: 15px;/* 文字大小 */
}
</style>
</head>
<body>
<!-- 总结:
1,要求:使用form+有submit按钮+有name属性
2,单选和多选提交了on,添加value属性,会提交value属性的值
3,优化了学历提交文字的,给学历添加values属性,会提交value属性的值
4,form标签的method用来指定数据的提交方式默认是get,
action用来指定一段java程序的访问方式
-->
<h1>学生信息管理系统MIS</h1>
<form method="post" action="#">
<table>
<tr>
<td>
姓名:<br />
<input type="text" name="user" class="a" placeholder="请在这里输入姓名..."/>
</td>
</tr>
<tr>
<td>
年龄:<br />
<input type="number" name="age" class="a" placeholder="请在这里输入年龄..."/>
</td>
</tr>
<tr>
<td>
性别:(单选框)
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
爱好:(多选框)
<input type="checkbox" name="like" value="ppq" checked/>乒乓球
<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>
<option value="4">初中</option>
</select>
</td>
</tr>
<tr>
<td>
入学日期:<br />
<input type="date" name="intime"/>
</td>
</tr>
<tr>
<td>
<button type="submit">保存</button>
<button type="reset">取消</button>
</td>
</tr>
</table>
</form>
</body>
</html>
–2,用户注册练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
</head>
<body>
<form>
<h1>用户注册</h1>
<div>
<input type="text" placeholder="用户名" name="user"/>
</div>
<div>
支持中文、字母、数字、“-”、“_”的组合，4-20个字符
</div>
<div>
<input type="password" placeholder="设置密码" name="pwd"/>
</div>
<div>
建议使用数字、字母和符号两种以上的组合，6-20个字符
</div>
<div>
<input type="password" placeholder="确认密码" name="repwd"/>
</div>
<div>
两次密码输入不一致
</div>
<div>
<input type="number" placeholder="验证手机" name="phone"/>
或
<a href="#">验证邮箱</a>
</div>
<div>
<input type="checkbox"/>
我已阅读并同意
<a href="#">京淘用户注册协议</a>
</div>
<div>
<input type="submit" value="立即注册"/>
</div>
</form>
</body>
</html>
扩展: 盒子模型
CSS认为HTML的所有元素,都是一个一个的盒子.
1,外边距: margin,盒子间的距离
2,内边距: padding,一个盒子里,内容和边框的距离
4632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
