ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

day08-2022-01-08

2022-01-08 16:00:49  阅读:172  来源: 互联网

标签:day08 网页 标签 08 01 div MIS 选择器 css


湖南

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

<!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,网页,标签,08,01,div,MIS,选择器,css
来源: https://www.cnblogs.com/elliottmoo/p/15778476.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有