day08-2022-01-08

湖南

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>
		
		<!-- 一个占一行:块元素(h1~h6,ul+li) -->
		<div>大家好</div>
		<div>大家好</div>
		<div>大家好</div>
		
		<p> Nice</p>
		<p> Nice</p>
		<p> Nice</p>
		
		<!-- 多个占一行:行元素(img,a,input,button) -->
		<span> hello</span>
		<span> hello</span>
		<span> hello</span>
	</body>
</html>

2.练习学生管理系统

学生信息管理系统MIS

day08-2022-01-08

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息管理系统MIS</title>
	</head>
	<body>
		<!-- 提供表单来提交学生的数据 -->
		<form>
			<h1>学生信息管理系统MIS</h1>
			<table>
				<tr>
					<td>
						姓名: <br />
						<input type="text" name="user" placeholder="请输入姓名.."/>
					</td>
				</tr>
				<tr>
					<td>
						年龄: <br />
						<input type="number" name="age" 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="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.概述

  1. 全称是层叠样式表stylesheet,专门用来修饰HTML网页的,就是让网页变漂亮.
  2. 语法:选择器{属性名:属性值;样式2;样式3;}
  3. 使用位置:内联css,内部css,外部css

2.入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css入门案例</title>
	</head>
	<body>
		<!-- css代码的出现位置:行内css/内联css  -->
		<!-- 1, 需求:把div文字修饰成红色 -->
		<div style="color: red;">你好css1</div>
		<div style="color: red;">你好css2</div>
		<div style="color: red;">你好css3</div>
	</body>
</html>

三,选择器

css为了方便的选中网页中的元素进行修饰,提供了各种选择器,分类:基础选择器+高级选择器

1.标签名选择器

按照标签的名字,来选择元素.可能会选中多个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<!-- css的存在位置:内部css -->
		<style>
			/* 1.标签名选择器 */
				/* 练习1:把div修饰成红色文字 */
				div{  /* 选中了网页中所有叫div的标签们 */
					color:red; /* 红色文字 */
				}
				/* 练习2:把span字号加大 */
				span{
					font-size:30px; /* 字号加大 */
					font-family: "宋体" ;/* 字体 */
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div> 
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>
上一篇:Day08


下一篇:从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(Day08)