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

最新推荐文章于 2024-06-06 10:36:09 发布

内涵是一种信仰

最新推荐文章于 2024-06-06 10:36:09 发布

阅读量365

点赞数

分类专栏：基于黑马传智 Web前端 HTML

本文链接：https://blog.csdn.net/qq_38053395/article/details/81015176

版权

Web前端同时被 3 个专栏收录

27 篇文章 1 订阅

订阅专栏

基于黑马传智

25 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

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>

实现这个网页：

代码为：

上传文件用 ---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中只允许出现dt和dd，dt和dd中可以存放任何内容、任何标签

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