HTML入门学习day03笔记_html制作一个半径为100像素的圆圈-优快云博客

表单

一个简单地表单

框架
实现功能

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<form action="http://134.175.154.93:8099/manager/user/saveOrUpdateUser" method="get" enctype="application/x-www-form-urlencoded">
		<table>
			<tbody>
				<!-- 用户名 -->
				<tr>
					<td>用户名</td>
					<td><input placeholder="please input you username" type="text" name="username"></td>
				</tr>
				<!-- 密码 -->
				<tr>
					<td>密码</td>
					<td><input type="password" name="password"></td>
				</tr>
				<!-- 真实姓名 -->
				<tr>
					<td>真实姓名</td>
					<td><input type="text" name="nickname"></td>
				</tr>
				<!-- email -->
				<tr>
					<td>email</td>
					<td><input type="text" name="email"></td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td><input type="date" name="birth"></td>
				</tr>
				<!-- 性别 -->
				<tr>
					<td>性别</td>
					<td>
						<label for="gender_male">
							<input id="gender_male" type="radio" name="gender" value="male">男
						</label>
						<label for="gender_female">
							<input id="gender_female" type="radio" name="gender" value="female" checked>女
						</label>
					</td>
				</tr>
				<!-- 爱好 -->
				<tr>
					<td>爱好</td>
					<td>
						<label>
							<input type="checkbox" name="hobby" value="basketball">篮球
						</label>
						<label>
							<input type="checkbox" name="hobby" value="football" checked>足球
						</label>
						<label>
							<input type="checkbox" name="hobby" value="reading">阅读
						</label>
					</td>
				</tr>
				<!-- 地址 -->
				<tr>
					<td>地址</td>
					<td>
						<select name="province">
							<option value="js">江苏</option>
							<option value="sx">山西</option>
							<option value="hn">湖南</option>
							<option value="gs">甘肃</option>
						</select>
						省
						<select name="city">
							<option value="sz">苏州</option>
							<option value="nj">南京</option>
							<option value="zj">镇江</option>
							<option value="hn">淮安</option> 
						</select>
						市
						
						区/县

						<input type="text" name="address">
					</td>
				</tr>
				<!-- 个人介绍 -->
				<tr>
					<td>介绍</td>
					<td>
						<textarea placeholder="请编写个人介绍" name="description" cols="30" rows="10"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册">
					</td>
				</tr>
			</tbody>
		</table>
	</form>
</body>
</html>

实现效果为：

css

1.css的层叠样式表

层叠主要体现在：

多个样式表修饰同一个元素
他可以继承
具有优先级

样式表为
{color:#fff;}

2.css在html中的应用

在html中，css的运用主要有三种方式：

1.在元素中添加style属性，style属性值为css样式规则

<div style="width:100px;height:100px;"></div>
<div style="width:100px;height:100px;"></div>

对于这种方式来说，它的样式与结构与杂糅，该元素的内容，对于另一个同名的元素则不起作用，而且不利于页面的修改和维护，但这种方式简单直接，优先级高。

2.将样式添加到head标签中的style标签里，以下列代码为例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css使用方式</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background:pink;
			color: #fff;
			text-align: center;
		}
		#two {
			line-height: 200px;
			color: #ccc;
		}
	</style>
</head>
<body>
	<!-- 半径为100px的圆，背景色为粉色，文本颜色为白色，字体居中显示 -->
	<div> hello css </div>
	<div id="two"> hello html </div>
	<h1>hello js</h1>
</body>
</html>

在head>style中，我们将元素放入,在文档中定义CSS样式。这种方式适合于做一些小的效果或者验证样式无效的原因。

3.html文档本身不含有CSS样式，而是动态引用外部的CSS文件定义文档。如下图：
在这里插入图片描述
图中发现我们并没有定义css属性，我们将它所具有的css属性放入一个和html代码是并列的css文件中
css文件与html文件并列
css文件内容
这种方式符合行业规范。更利于网页后期的修改和维护。