HTML_表单_input_非input_表单域_设置领域标志_file_Image(图片按钮)_要点总结_Util_3;

Topic 1 : 表单

作用 : 收集和提交用户数据

One : intput标签

他是单标记;

    input标签通过变换不同的type属性取值,从而实现显示样式和功能的变化

        可以设置value默认值



Two:非input标签

    结构:select嵌套option,select表示下拉菜单的整体,option表示下拉菜单的某一项    

 

分组功能:

optgroup分组,通过标签身上的label属性添加组名称

默认选中:目标option身上添加属性:selected=selected

这样的一个网页:

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>非input标签</title>
</head>

<body>
	<select>
		<option>北京</option>
		<option selected="selected">上海</option>
		<option>深圳</option>
	</select>
	<select>
		<optgroup label="上海">
			<option>浦东新区</optin>
			<option>金山区</optin>
			<option>黄浦区</optin>
		<optgroup>
		<optgroup label="北京">
			<option>昌平区</optin>
			<option>海淀区</optin>
			<option>东城区</optin>
		<optgroup>
			<optgroup label="北京">
			<option>罗湖区</optin>
			<option>福田区</optin>
			<option>龙岗区</optin>
		<optgroup>
	</select>

</body>
</html>

Three:表单域

提交数据用的;

form标签,一个html页面只能有一个form

action=“提交数据的地址”,前台工作人员不知道这个地址,直接留空即可

method -- 提交的方式,get -- 明文发送;post -- 密文发送


Four : 设置领域标签

网页为:

代码为:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input 2</title>
</head>

<body>
	<form action="" method="post">
		<fieldset>
			<legend>注册页面</legend>
			账号 : <input type="text" /><br><br>
			密码 : <input type="password" /><br><br>
			<input type="submit" value="提交"/>
			<input type="reset">
		</fieldset>
	</form>
</body>
</html>

实现这个网页:

代码为:

<!----radio是单选   但是要实现单选要设置域  用name 他的值一样就在一个域里面------->

 <!----扩大触发区域   这个为了增加用户体验  用label标签加上inpet里面设置id两者的值一样即可--------->

<!----check是多选  它可以设置默认选项就是checked--------->

上传文件用 ---file

图片按钮用image

       配合原则性属性src去查找图片文件

 

    
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice</title>
</head>

<body>
    <form action="" method="post">
        <fieldset>
            <!----radio是单选   但是要实现单选要设置域  用name 他的值一样就在一个域里面------->
            <!----扩大触发区域   这个为了增加用户体验  用label标签加上inpet里面设置id两者的值一样即可--------->
            性别 :<input type="radio" name="sex" id="nan"/><label for="nan">男</label><input type="radio" name="sex" id="nv"/><label for="nv">女</label><input type="radio" name="sex" id="baomi"/><label for="baomi">保密</label><br><br>

            <!----check是多选  它可以设置默认选项就是checked--------->
            兴趣 :<input type="checkbox">唱歌<input type="checkbox">跳舞<input type="checkbox" checked="checked">打羽毛球<br><br>

            上传文件 : <input type="file"/><br><br>

            自我介绍 : <br>
            <textarea cols="50" rows="10"></textarea><br>
            <input type="button" value="普通按钮"/>
            <input type="submit" />
            <input type="reset" />
            <input type="image" src="110.gif"/>
        </fieldset>
    </form>
</body>
</html>




要点总结:

 区分单双标记:需要划分选区使用双标记,不需要划分选区则是单标记

网站主导航都必须用ul结构制作

图文混排效果都用dl制作最简单;

dl中只允许出现dtdddtdd中可以存放任何内容、任何标签

在2005年之前,国内网站都是使用表格布局,缺点就是加载速度慢,用户等待时间长(当表格代码别浏览器全部读写以后才渲染页面);现有阶段运用表格制作数据统计分区或页面





  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值