HTML入门学习day03笔记

最新推荐文章于 2024-08-13 21:58:24 发布

Perryc

最新推荐文章于 2024-08-13 21:58:24 发布

阅读量277

点赞数 1

分类专栏： HTML基础文章标签： html 入门 html表单 css

本文链接：https://blog.csdn.net/Perryc/article/details/97886887

版权

HTML基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

表单

一个简单地表单

框架
实现功能

<!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文件内容
这种方式符合行业规范。更利于网页后期的修改和维护。

3.css语法

css的语法规则由选择器及一条或多条声明规则两个主要的部分构成。样式如下：

选择器 {样式名:样式值;样式名:样式值;…}

选择器通常是需要改变样式的html 元素（每条声明由一个属性和一个值组成。属性是希望设置的样式属性。每个属性有一个值。属性和值被冒号分开）。

举例说明：

h1 {color:blue; font-size:28px;}

代码是将h1元素内的文字颜色定义为蓝色，同时将字体大小设置为 28像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，blue 和 28px 是值。
最终实现为

附一个html初学者的参考网站：
HTML初学者教程

Perryc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门学习day03笔记

HTML入门学习day03笔记1.css的层叠样式表层叠主要体现在：多个样式表修饰同一个元素他可以继承具有优先级样式表为{color:#fff;}2.css在html中的应用在html中，css的运用主要有三种方式：1.在元素中添加style属性，style属性值为css样式规则<div style="width:100px;height:100px;">&l...
复制链接

扫一扫