Html标签总结（三）

最新推荐文章于 2023-05-05 16:34:10 发布

True | Fasle

最新推荐文章于 2023-05-05 16:34:10 发布

阅读量201

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/caiyu666/article/details/80474203

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

下面是表单的常用功能，大家可以复制过到notepad++中保存成为html文件拖入到浏览器中

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content=charset="text/html;charset=utf-8"/>
<meta name="author" content="caiyu">
<title>网站</title>
</head>
<body>
<h1>关于网页里表单的一些内容</h1>
<form name="表单识别名称" action="xx.php" method="get/post">
用户名：<input type="text" name="username" size="10" maxlength="10" value="手机号码"/></br><!--单行文本框,name是文本框的识别名称，size文本框的宽度（以字符为单位），Maxlength允许输入最多的字符长度，value默认输入值-->
密码：<input type="passward" name="pwd" size="10" maxlength="10" value="输入密码" readonly="readonly" disabled="disabled"/></br><!--readonly只读 disabled禁止，不能选中也不能更改-->
性别：<input type="radio" name="sex" value="boy"/>男
       <input type="radio" name="sex" value="girl"/>女</br><!--单选框-->
爱好：<input type="checkbox" name="hobby" value="game" checked="checked">game
	<input type="checkbox" name="hobby" value="TV">TV
	<input type="checkbox" name="hobby" value="travel">travel
	<input type="checkbox" name="hobby" value="swim" checked="checked">swim
	<input type="checkbox" name="hobby" value="basketball">basketball</br><!--checked默认选择项-->
多行文本框：<textarea rows="10" cols="80" name="内容的识别名称" >文本框的内容</textarea>	   
你所在的城市：<select name="city">
	<option>--选择所在城市--</option>
	<option value="bj">北京</option><!--如果不写value值，默认值就"北京"-->
	<option value="wh">武汉</option><!--如果不写value值，默认值就"武汉"-->
	<option value="nc">南昌</option><!--如果不写value值，默认值就"南昌"-->
	<option value="qd">青岛</option><!--如果不写value值，默认值就"青岛"-->
	<option value="sz">深圳</option><!--如果不写value值，默认值就"深圳"-->
</select><!--下拉列表--></br>
<input type="hidden" name="id1"/></br> <!--隐藏域-->
	请上传文件<input type="file" name="file"/>

	


<input type="submit" value="提交"/> <!--提交按钮-->
<input type="image" src="C:\Users\Administrator\Desktop\123.png"/>
<input type="reset" value="重置"/><!--恢复设置的状态-->
<input type="button" value="按钮" onclick="javascript:window.alert(别按了，啥也没有哦)"/><!--本身没有任何功能，结合js程序可以实现不同的功能-->


</form></br><!--action：通过php处理数据，method:get：通过地址栏来传递表单中的数据，每次只能传递1024字节-->
<!--post:不通过地址栏传递数据，数据传给文件处理程序，可以传递海量数据，能上传附件--> 


</body>
</html>

显示结果如下：

可以结合效果和注释学习一下每个标签的功能和属性。

前面三篇博客基本包含了html所有的基本知识，接下来就是css和js的学习，另外可以了解一下xhtml（可扩展的超文本标记语言）--取代html，pc机，当今面向移动端设备，语法比html严格，1.xhtml输入的标签和属性必须是小写，2.xhtml单标签后必须加/，3.属性必须引用双引号，4.必须有dtd（document type definition（文档类型定义））申明，是一种验证机制，检验驶入的xhtml是否符合规范。