JavaWeb学习——HTML第一课（HTML基本标签）

1.什么是html

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/5f79f465ad14455eb4522a4c0add32ee.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaWRpb3RzLg==,size_20,color_FFFFFF,t_70,g_se,x_16)
最基本的HTML页面大致由<html></html>,<head></head>,<title></title>,<body></body>几部分组成。

<html></html>称为HTML页面的根元素，元素定义了整个 HTML 文档。
<head></head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。后续可以在<head></head>里面定义标签 <script type="text/javascript"> </script>来实现JS代码。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/062ac294412c495d9186c471ad698bf4.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaWRpb3RzLg==,size_13,color_FFFFFF,t_70,g_se,x_16)
<title></title>元素描述了文档的标题
<body></body> 元素包含了可见的页面内容.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的HTML标题</title>
	</head>
	<body>
		hello HTML！！！
	</body>
</html>

2.HTML的标签

2.1 输入标签

input标签：利用type的值区分以下各输入类型，默认为文本

-1 文本输入框：type属性值为text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的HTML标题</title>
	</head>
	<body bgcolor="aquamarine">
		姓名：<input type="text" />
	</body>
</html>

- 2 密码输入框：type属性值为password

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body bgcolor="aquamarine">
		密码：<input type="password" />
	</body>
</html>

-3 文件选择框：type属性值为file

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body bgcolor="aquamarine">
		文件：<input type="file" />
	</body>
</html>

- 单选按钮：type属性值为radio

- 复选按钮：type属性值为checkbox

- 普通按钮：type属性值为button

- 重置按钮：type属性值为reset

- 提交按钮：type属性值为submit

- 图片按钮：type属性值为image

- 隐藏框：type属性值为hidden

其他：数字输入框、日期输入框、颜色输入框、邮箱输入框、电话输入框、搜索输入框等

2.2 select标签

下拉列表标签，默认为单选，如果加上multiple="true"就可以多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body bgcolor="aquamarine">
		<table>
			<tr>
				<td>国籍：</td>
				<td>
					<select name="country" multiple="true">
						<option >--请选择国籍--</option>
						<option >中国</option>
						<option >美国</option>
						<option >俄国</option>
						<option >法国</option>
						<option >英国</option>
					</select>
				</td>
			</tr>
			<tr>
		</table>
	</body>
</html>

2.3 textarea标签

可以输入多行文本，用rows，cols调整行列字符数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body bgcolor="aquamarine">
		<table>
			<tr>
				<td>自我描述：</td>
				<td>
					<textarea rows="10" cols="30" placeholder="" >
						请输入自我评价信息，不低于200字！
					</textarea>
				</td>
			</tr>
		</table>
	</body>
</html>

2.4 输入标签的一些共有属性

id属性：不会影响显示效果，几乎所有html标签都可以有，是此标签在当前网页中的唯一表示，可以重复但不推荐。
name属性：用于将数据提交到后端时，在后端根据name来接受对应的value值
required属性：设置此输入框必须输入数据，否则不能提交
placeholder属性：用于设置输入框空值提示信息
readonly属性：用于表示此输入视图只能显示数据，不能输入
disabled属性：设置输入组件禁用
value属性: 可以设置默认显示的值，表示当前输入框或下拉菜单或单复选框选中的值

3.form标签

在页面中没有显示效果，用于将用户在输入视图中输入的数据提交到网络中对应的位置

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body bgcolor="aquamarine">
		<h1 align="center">用户注册信息</h1>
		<form action="http://www.baidu.com" method="get">
			<table >
				<tr>
					<td>姓名：</td>
					<td><input type="text" name="name" /></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="psd" placeholder="请输入6-12位由字母数字下划线组成的密码！"/></td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" name="psd" placeholder="确认密码！"/></td>
				</tr>
				<tr>
					<td>年龄：</td>
					<td><input type="number"/></td>
				</tr>
				<tr>
					<td>生日：</td>
					<td><input type="date" name="bir"/></td>
				</tr>
				<tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="email" name="email"/></td>
				</tr>
				<tr>
					<td>电话：</td>
					<td><input type="tel" name="tel" /></td>
				</tr>
					<td>性别：</td>
					<td><input type="radio" name="gender" value="boy" checked="checked"/>男
						<input type="radio" name="gender" value="girl" />女
					</td>
				</tr>
				<tr>
					<td>兴趣爱好：</td>
					<td>
						<input type="checkbox" name="hobby" value="java" />java
						<input type="checkbox" name="hobby" value="c++" />c++
						<input type="checkbox" name="hobby" value="python" />python
						<input type="checkbox" name="hobby" value="js" />javascript
					</td>
				</tr>
				<tr>
					<td>国籍：</td>
					<td>
						<select name="country" multiple="true">
							<option >--请选择国籍--</option>
							<option >中国</option>
							<option >美国</option>
							<option >俄国</option>
							<option >法国</option>
							<option >英国</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>自我描述：</td>
					<td>
						<textarea rows="10" cols="30" placeholder="" >
							请输入自我评价信息，不低于200字！
						</textarea>
					</td>
				</tr>
				<tr>
					<td>其他信息：</td>
					<td><input type="file" name="file"/></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
			</table>
			<input type="submit" align="center" value="提交"/>
			<input type="reset" align="center" value="重置" />
		</form>
	</body>
</html>

效果图：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/623511c2733848b485862dbdad3f9169.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaWRpb3RzLg==,size_13,color_FFFFFF,t_70,g_se,x_16)

posted @ 2022-02-28 11:14 我没得冰阔落阅读(114) 评论(0) 收藏举报

刷新页面返回顶部

.陈兴

JavaWeb学习——HTML第一课（HTML基本标签）