HTML网站首页代码详细知识点

作者：你好赵伟 | 2024-05-23 09:00:24

踩

HTML网站首页代码详细知识点

前言
表单表标签:
小结

请添加图片描述

前言

这是我学习HTML网站首页代码详细知识点，希望对大家有用

表单表标签:

action:提交的地址(我理解为要跳到的页面地址)

method:

get方式:默认提交方式，会将参数拼接在链接后面,并且有大小限制，4K

post方式:会将参数封装在请求体中，没有大小限制

★post提交方式，如果action的链接中包含中文，由于HBuilder内置服务器不支持，所以会出现“内部服务器错误”，所以方法①不要写中文链接；方法②直接用浏览器打开HTML文件,不通过HBuilder打开即可

input

type:指定输入项的类型
- text :文本框
- password:密码框
- radio :单选按钮
- checkbox:复选按钮
- file :上传文件
- submit :提交按钮
- button :普通按钮
- reset :重置按钮
- hidden :隐藏域
date :日期类型
- tel :手机号
- number :只允许输入数字
placeholder:指定默认的提示信息
- name:在表单提交的时候，当作参数的名称
- id:给输入项一个名字，以便于后期我们去找到它，并且操作它
textarea:文本域，可以输入一段文本
- cols:指定宽度
- rows:指定高度
select:下拉列表
- option:选择项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>入门案例01</title>

	</head>
	<body>
		<!--
        	表单表标签:
        		action:提交的地址(我理解为要跳到的页面地址)
        		method:
        			get方式:默认提交方式，会将参数拼接在链接后面,并且有大小限制，4K
        			post方式:会将参数封装在请求体中，没有大小限制
        					★post提交方式，如果action的链接中包含中文，由于HBuilder内置服务器不支持，
        					   所以会出现“内部服务器错误”，所以方法①不要写中文链接；方法②直接用浏览器打开HTML文件，
        					  不通过HBuilder打开即可	
        	input:
        		type:指定输入项的类型
        			text	:文本框
        			password:密码框
        			radio	:单选按钮
        			checkbox:复选按钮
        			file	:上传文件
        			submit	:提交按钮
        			button	:普通按钮
        			reset	:重置按钮
        			hidden	:隐藏域
        			
        			date	:日期类型
        			tel		:手机号
        			number	:只允许输入数字
        		
        		placeholder:指定默认的提示信息
        		name:在表单提交的时候，当作参数的名称
        		id:给输入项一个名字，以便于后期我们去找到它，并且操作它
        	
        	textarea:文本域，可以输入一段文本
        		cols:指定宽度
        		rows:指定高度
        	
        	select:下拉列表
        		option:选择项
        		
        -->
		<form action="../11.21百度地图/index.html" method="get">
			<!--隐藏域:主要用来存放页面上的一些ID信息-->
			<!--隐藏域在表单提交的时候，会携带一些数据过去，name属性是参数的名称-->
			<input type="hidden" value="sssss" name="uid"/>
			
			<!--文本输入框-->
			<!--此处的value是文本框的默认输入内容，如果没有value，那么就会显示placeholder的内容-->
			用户名:<input type= "text" value="didadida" id="usrname" 
				  placeholder="请输入用户名"/><br />
			<!--密码框-->
			密码:<input type="password" placeholder="请输入密码"/> <br />
			确认密码:<input type="password" placeholder="请再次输入相同密码 " /><br />
			邮箱:<input type="text" /><br />
			
			<!--type是number时，只能输入数字
				如果是tel时，在手机端可以显示一个九宫格的输入键盘
			-->
			手机号码:<input type="number"  /><br />
			照片:<input type="file" /><br />
			
			性别:<input type="radio" name="sex" />男
				 <input type="radio" name="sex" />女<br/>
			
			爱好:
				<input type="checkbox" />阅读
				<input type="checkbox" />打代码
				<input type="checkbox" />搞对象
				<br />
			
			择偶要求:<br />
				<textarea cols="40" rows="4"></textarea><br />
			籍贯:
				<select>
					<option>--请选择--</option>
					<option>湖北</option>
					<option>山西</option>
				</select>
				<br />
			出生日期:
				<input type="datetime-local" /><br/>
			验证码:<input type="text" /><br />
			
			<input type="submit" value="注册" />
			<input type="button" value="普通按钮" />
			<input type="reset" value="重置按钮"/>
		</form>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

小结

《HTML网站首页代码详细知识点》是一篇关于HTML网站首页代码的详细介绍。文章中提到了HTML网站首页的基本结构和常用的HTML标签，以及一些HTML5的新特性。

在HTML网站首页的基本结构方面，文章重点介绍了DOCTYPE声明、html、head和body标签的作用和使用方法。这些标签为网页提供了基本的框架和结构。

总的来说，《HTML网站首页代码详细知识点》这篇文章提供了一个全面的HTML网站首页代码指南。通过学习这些知识点，读者可以掌握HTML网站首页的基本结构和常用标签的使用方法，从而构建出美观、功能丰富的网站页面。
请添加图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/612194