html常用标签3

最新推荐文章于 2023-04-02 14:32:57 发布

Luuuzi

最新推荐文章于 2023-04-02 14:32:57 发布

阅读量238

点赞数

分类专栏： web 文章标签： html html5

本文链接：https://blog.csdn.net/qq_36366618/article/details/119998950

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

表单和div标签

表单和div标签

对于经常上网的人来说,对网站中的登录等页面肯定不会感到陌生。在登录页面中,网站会提供给用户用户名文本框与密码文本框,以供访客输入信息。这里的用户名文本框与密码文本框就属于HTML中的表单元素。表单在HTML页面中起着非常重要的作用,是用户与网页交互信息的重要手段。
表单就是收集用户信息，让用户填写，选择的。

1、表单标签

表单标记以标记开头,以标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。标记的基本语法如下:

<form action ="url" method ="get|post" name="nameon" onsubmit="" target="">
	</form>

标记的各属性说明如下。

action属性
该属性用来指定处理表单数据程序的URL地址
method属性
该属性用来指定数据传送到服务器的方式。它有两种属性值,分别为get与post。get属性值表示将输入的数据追加在action指定的地址后面,并传送到服务器。当属性值为post时,会将输入的数据按照HTTP协议中的post传输方式传送到服务器
name属性
该属性指定表单的名称,程序员可以自定义其值。
onSubmit属性
该属性用于指定当用户单击提交按钮时触发的事件
target属性
该属性指定输入数据结果显示在哪个窗口中,其属性值可以设置为 _blank、_self、_parent和_top其中,blank表示在新窗口中打开目标文件;self表示在同一个窗口中打开,该项一般不用设置;parent表示在上一级窗口中打开,一般使用框架页时经常使用;_top表示在浏览器的整个窗口中打开,忽略任何框架。

表单语法

<form  method="post"（规定如何发送表单数据      常用值：get|post）
 action="result.html">（表示向何处发送表单数据）
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

举例

<form id="form 1" name="form" method="post" action="action.html" target="blank">
	</form>

<div>
		<h3>欢迎注册</h3>
		<form action="">
		所有的表单内容，都要写在form标签里面	
		</form>
	</div>

form是英语表单的意思
action属性表示，表单要提交到哪里
method属性表示用http方法提交，有get、post两种方式
输入类型

<input type="text" > 文本框

2、input标签

input是一个自封闭标签
3个自封闭标签
meta,img,input

表单输入标签是使用最频繁的表单标签,通过这个标签可以向页面中添加单行文本、多行文本、按钮等。< input>标签的语法格式如下

<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri" alt=name="checkbox" value="checkbox">

属性描述

type：用于指定添加的是哪种类型的输入字段,共有10个可选值,如表2.2所示
disabled：用于指定输入字段不可用,即字段变成灰色。其属性值可以为空值,也可以指定为 disabled
checked：用于type属性值为 radio和 checkbox的情况下。用于指定输入字段是否处于被选中状态,其属性值可以为空值,也可以指定为checked
width：用于type属性值为 Image的情况下，用于指定输入字段的宽度,
height：用于type属性值为 Image的情况下，用于指定输入字段的高度,
maxlength：用于type属性值为text和 password的情况下,用于指定输入字段可输入文字的个数,默认没有字数限制
readonly：用于指定输入字段是否为只读。其属性值可以为空值,也可以指定为 readonly
size：用于指定输入字段的宽度,当type属性为text和password时,以文字个数为单位,当type属性为其他值时,以像素为单位
src：只有当type属性为 Image时有效，用于指定图片的来源,
usemap：只有当type属性为Image时有效。为图片设置热点地图,属性值为URI,URI格式为“#+<map标记的name属性值”。例如,标记的name属性值为Map,该URI为#Map
alt：只有当type属性为 Image时有效，用于指定当图片无法显示时显示的文字
name：用于指定输入字段的名称
value：用于指定输入字段默认的数据值,当type属性为checkbox和 radio时,不可省略此属性:为其他值时,可
以省略。当type属性为button、reset和submit时,指定的是按钮上的显示文字:当type属性为 checkbox和 radio时,指定的是数据项选定时的值

type属性是标记中非常重要的内容,决定了输入数据的类型。该属性值的可选项如表2.2所示。

可选值	描述
text	文本框
password	密码域
file	文件域
radio	单选按钮
checkbox	复选框
submit	提交按钮
reset	重置按钮
button	普通按钮
hidden	隐藏域
image	图像域

举例

<!DOCTYPE html>
<html>
	<head>
		<title>表单标记</title>
	</head>
	<body>
		<form action="" method="post" name="myform">
		用户名：<input type="text" name="username" id="UserName4" maxlength="20"><br/>
		密码：<input type="password" name="pwd1" id="pwd14" size="20" maxlength="20"><br/>
		确认密码：<input type="password" name="pwd2" id="pwd25" size="20" maxlength="20"><br/>
		性别：<input type="radio" name="sex" class="noborder" value="男" checked>男&nbsp； <!-- checked表示默认选中， &nbsp:表示空格-->
			<input type="radio" name="sex" class="noborder" value="女">女<br/>
		爱好：<input type="checkbox" name="like" id="like" value="体育">
					体育
				<input type="checkbox" name="like" id="like" value="旅游">
					旅游
				<input type="checkbox" name="like" id="like" value="音乐">
					音乐
				<input type="checkbox" name="like" id="like" value="看书">
					看书<br/>

		E-mail：<input type="text" name="email" id="pwd224" size="50"><br/>
		<input type="submit" name="Submit" class="btn_grey" value="确定保存">
		<input type="reset" name="Reset" class="btn_grey" id="Reset" value="重新填写">
		</form>
	</body>
</html>

效果
效果图

HTML5中，input标签又添加了很多

3、< textarea>多行文本标记

< textarea>为多行文本标记,与单行文本相比,多行文本可以输入更多的内容。通常情况下,< textarea>标记出现在标记的标记内容中。< textarea>标记的语法格式如下

<textarea cols="digt" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值
			</textarea>

属性说明

cols：用于指定多行文本框显示的列数(宽度
rows：用于指定多行文本框显示的行数(高度)
name：用于指定多行文本框的名称,当表单提交后,在服务器端获取表单数据时应用
disabled：用于指定当前多行文本框不可使用(变成灰色)
readonly：用于指定当前多行文本框为只读
wrap：用于设置多行文本中的文字是否自动换行,可选值如表2.5所示

wrap可选值

hard：默认值,表示自动换行,如果文字超过col属性所指的列数就自动换行,并且提交到服务器时换行符同时被提交
soft：表示自动换行,如果文字超过cols属性所指的列数就自动换行,但提交到服务器时换行符不被提交
off：表示不自动换行,如果想让文字换行,只能按下 Enter键强制换行

举例：
在页面中创建表单对象,并在表单中添加一个多行文本框,文本框的名称为 content,
6行30列,文字换行方式为hard。关键代码如下

<form name="form1" method="post" action="">
			<textarea cols="30" rows="6" name="content" wrap="hard">默认值

			</textarea>
		</form>

效果图

4、div标签

div是英语单词"division"分割的缩写
div在浏览器中，默认不会增加任何的效果改变，但是语义变了，div中的所有元素是一个小区域。
div是一个容器级标签，可以放任何东西，包括div标签

<body>
	<div>
	<h2>中国主要城市</h2>
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li>深圳</li>
		</ul>
	</div>
	<div>
		<h2>美国主要城市</h2>
		<ul>
			<li>纽约</li>
			<li>华盛顿</li>
			<li>拉斯维加斯</li>
		</ul>
	</div>
</body>

div标签是最重要的布局标签

<div class="header">
		<div class="logo"></div>
		<div class="nav"></div>
	</div>
	<div class="content">
		<div class="guanggao"></div>
		<div class="dongxi"></div>
	</div>

这种模式叫“div+css”,div标签负责布局，负责分块。css负责样式。

5、span标签

span表示范围的意思
span表示“小区域”，“小跨度”的标签，但是是一个文本级标签，主要用来组合文档中的行内元素。

<body>
	<h3>书</h3>
	<p>简介简介简介简介简介简介
		<span>
			<a href="">详细信息</a>
			<a href="">购买</a>
		</span>
	</p>
</body>

标签嵌套

块级元素里面放什么都可以
行内元素里面最好只放行内元素
p里面不能放div
a里面随便放。但是不能放a,input等

Luuuzi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html常用标签3

文章目录表单和div标签1、表单标签表单语法2、input标签3、< textarea>多行文本标记4、div标签5、span标签标签嵌套表单和div标签对于经常上网的人来说,对网站中的登录等页面肯定不会感到陌生。在登录页面中,网站会提供给用户用户名文本框与密码文本框,以供访客输入信息。这里的用户名文本框与密码文本框就属于HTML中的表单元素。表单在HTML页面中起着非常重要的作用,是用户与网页交互信息的重要手段。表单就是收集用户信息，让用户填写，选择的。1、表单标签表单标记以标记开头
复制链接

扫一扫