HTML 02-02 列表表单标签笔记

最新推荐文章于 2023-07-09 14:13:31 发布

不停喝水

最新推荐文章于 2023-07-09 14:13:31 发布

阅读量414

点赞数 1

分类专栏： # 【HTML5】文章标签： html

本文链接：https://blog.csdn.net/weixin_48200589/article/details/106480556

版权

【HTML5】专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.列表标签！！！不需要写table

加table 表格不是列表啊

列表不要写在table在ul ol dl前面!!

列表是用来布局的。因为非常整齐和自由。
列表的概念：容器里面装载着结构，样式一致的文字或者图表的一种形式，叫列表
特点：列表最大的特点就是，整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高

1.1无序列表ul（重点）

无序列表的各个列表直接没有顺序级别之分，是并列的。
用的最多的，只要导航栏什么的都会用到

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ul>

脚下留心：

1.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
2.<li></li>之间相当于一个容器，可以容纳所有元素（里面可以放图片链接什么的都可以）
比如 li里面再放一个ul
3.无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
ul li  div p hx table tr也是独占一行属于块级元素  
shift + alt + ↓ 复制当前行

1.2有序列表ol（了解）

有序列表即为有排列顺序的列表，其中各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
	<li>列表项目1</li>
	<li>列表项目2</li>
	<li>列表项目3</li>
</ol>

所有特性基本与ul无序列表一致，但是实际中比无序列表用的少很多

1.3自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
一般用于网站最下面的帮助或者什么的

基本语法如下：

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
	<dt>术语2</dt>
	<dd>术语2解释1</dd>
	<dd>术语2解释2</dd>
</dl>

<dt>和<dd>是同级关系，不是包含关系

1.4列表总结

<ul></ul> 无序标签：里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol>有序列表 ：里面只能包含li 有顺序，使用情况较少
<dl></dl>自定义列表：里面有两个兄弟，dt和dd，dt下面有多个dd，dd的数量取决于我们的需求

我们现在还没有学习布局，现在只要保证2点
1.学会什么时候用无序列表：小米官网的例子。学会什么时候用自定义列表：小米官网最下面举例子
2.无序列表和自定义列表代码怎么写？
无序<ul></ul> 自定义<dl></dl><dt></dt><dd></dd>
3.具体的我们刚才看的布局，等会我们学会了CSS再来全面布局

dl dt dd也是独占一行块级元素

dt一般放文字不建议放其他东西
dd里面可以放其他的了

2.表单标签（掌握）

表单作用：表单的目的是为了收集用户信息。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

3.form表单域

收集的用户信息通过form表单域传递给服务器
目的：在html中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中所有的内容都会被提交给服务器
语法：

 <form action="url地址" method="提交方式" name="表单名称">
 	各种表单控件
 </form>

常用属性：

属性			属性值			作用
action			url地址值		用于指定接收并处理表单数据的服务器程序的url地址
method			get/post		用于设置表单数据的提交方式，其取值为get或者post
name			名称			用于指定表单的名称，以区分同一个页面中的多个表单

注意：
每个表单都应该有自己表单域，我们现在做页面，不写看不到效果，但是后面学习ajax后台交互的时候，需要form表单域

2.1 input控件（重点）

语法：<input type="属性值" value="你好" />
解释：
1.input输入的意思
2.标签为单标签
3.type属性设置不同的属性值用来制定不同的控件类型
4.除了type属性还有别的属性

常用属性：

属性      	属性值			描述
		 	text	    	单行文本输入框 	昵称，用户名
			password		密码输入框		密码，输入内容不可见
			radio			单选按钮			单选，性别 加入这个代码就可以了
			checkbox 		复选框			多选，爱好 
type		button			普通按钮			就是普通按钮，你给他什么提示，他就显示什么，请输入ID
			submit			提交按钮			不需要value来提示，默认就是提交，提交注册，确认注册
			reset			重置按钮			重置所填，重置已经输出的内容
			image			图像形式的提交按钮	把文字替换成图片按钮，imsge是不带s的
			file			文件域			上传文件按钮
name		用户定义			控件的名称		自己定义控件的名称，除了单选和复选其他不能重复
value		用户定义			input控件中的默认文本值	value后面填写默认提示内容
size		正整数			input控件中在页面显示的宽度

补充几个属性:
placeholder="和value差不多但是输入的内容不需要删除
如果在submit提交按钮里面 placeholder没有的"

maxlength:这个用于设置输入的最大个数,比如游戏ID名称和设置的最大密码个数

1.type属性
1.这个属性通过改变值，可以决定你属于那种input表单
2.比如type="text"就表示文本框可以做用户名，昵称等
3.比如type=”password“就是表示密码框，用户输入的内容不可见

2.value属性

用户名：<input type="text" name="username" value="请输入用户名">

value默认的文本值。有些表单想刚打开页面就默认显示几个字，就可以通过这个value来设置

*3.name属性
1.name属性后面的值，是我们自己定义的
2.radio 如果是一组，我们必须给他们命名相同的名字，这样就可以多个选择其中一个
checkbox为复选，命名也是命名为同一个

性别	男 <input type="radio" name="sex" /> 
		女 <input type="radio" name="sex" />
		未知 <input type="radio" name="sex" /> 

爱好	滑板<input type="checkbox" name="hobby" />
		游泳<input type="checkbox" name="hobby" />
		睡觉<input type="checkbox" name="hobby" />

3.name属性，我们现在用的少，但是我们学ajax和后台的时候，是必须的

4.checked属性
1.默认选中状态。较常见于，单选按钮和复选按钮

checked="checked"

性别
男	<input type="radio" name="hobby"  value="男" checked="checked"/>
女	<input type="radio" name="hobby"  value="女" />

上面这个表单中默认就选中了男这个单选按钮

5.button属性
按钮类型
就是普通的按钮按一下不能提交

<input type="button" value="请输入ID" />

<button>双标签 </button>也可以用来提交哈
比较灵活 用的比较多

6.submit属性
普通按钮需要value值，而submit不需要，默认就是提交也可以改成其他.
必须配合form来进行

<input type="submit" value="确认注册" />

7.reset属性
重置所填

<input type="reset" value="重置所填" />

8.image属性 使用图片来设置按钮，比如：免费注册
需要注意image后面不能带s，是固定写法

<input type="image" src="文件地址值" >

9.file文件域
文件域，上传文件用的

上传头像：<input type="file" />

附加:
hidden 隐藏域 可以当变量来用不是给用户用的是给程序员用的

<input type="hidden">

10.input属性小结

属性			说明			作用
type			表单类型	 		用来制定不同的控件类型
value			表单值			表单里面默认显示的文本
name			表达名字			页面中的表单很多，name主要作用就是用于区别不同的表单。
checked			默认选择			表示那个单选或者复选按钮一开始就被选中了

2.2 label标签（理解）

目标：提高用户体验，为用户提高最优秀的服务
概念：label标签为input元素定义标注（标签）
作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点
如何绑定元素？
1.用label直接包括input表单

<label> 用户名： <input type="radio" name="username" value="请输入用户名" </label>

适合单个表单选择

2.第二种比较常用的用法for属性规定label与哪个表单元素绑定
分两个步骤:看下面代码

<label for="nc">昵称：</label> 	
<input type="text或者其他都可以" id="nc" />

第二种就是label里面加上for=“x”,然后后面input也加上id=“x”
理解：当鼠标点击label标签里面的文字时，光标会定位到指定的表单里面点击文字，会直接和点到框框里时一样的效果

2.3 textarea控件（文本域）

**语法：

<textarea > 文本内容 </textarea>

作用：通过textarea控件可以轻松的创建多行文本输入框

ols="每行中的字符数" rows"显示行数"实际开发不用

文本框和文本域的区别

 input type="text"     文本框：只能显示一行文本 ，单标签，通过value显示默认值，比如用户名，昵称，密码等
 <textarea></textarea> 文本域：可以显示多行文本，双标签，默认值写到标签中，放到外面的话就是一个外部提示信息，比如比如留言板

2.4 select下拉列表

目的：如果有多个选项让用户选择，为了节约时间，我们可以使用select控件定义下拉列表
语法：

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option selected="selected">选项3</option>
</select>

注意：1.<select>中至少包含一对option
2.在option中定义selected = "selected"时，当前选项即为默认选项
3.但是我们实际开发中会使用的比较少

2.6团队约定

1.元素属性值使用双引号语法
2.元素属性值可以写上的都写上,每个不同的元素最好都加上Name 以区别,写了后台才能拿到数据,不然会导致同事关系不好
有两个不需要 ,一个submit,一个image不需要
3. value如果表单控件中 ,你写其他值,那么发给后台的就是你写的值,如果没写,就发送给后台默认值

<!-- 这两个不需要写name值 -->
    <input type="submit" value="提交" ><br>
    <input type="image" src="案例/" ><br>

3.注册页面项目笔记

分析：
1.标题在正中间：用<caption>
2.选择表格在前table面输入 width align这类属性
3.列tr td单元格
4.input type img

个人一些写项目的问题总结：
1.没有分析步骤
2.<br />在项目中额运用有问题 </tr>后面无脑加<br />
3.cheecke=checked的运用有时候会多用，全都给用上了，导致默认的时最后一个
4.textarea这个文本域还不够熟悉，文本域，文本域，文本域！
5.使用照片按钮的时候，忘记了很多次，这个要重点运用和记忆

<input type="image" src="images/btn.png" />

6.checkbox这个复选框的运用在只有一个选项的时候有点陌生

<input type="checkbox" name="agree" checked="checked" /> 我同意注册条款和会员加入标准

如果只有一个选项并且在有默认勾选的情况下可以取消，应该命名name=“agree”
一定要命名！！！！
7.同样类型的可以直接CV这样快速，只需要改数据就可以了
8.要习惯性加备注！
9.快捷方式:复制以后鼠标滚轮按住然后粘贴
10.文字添加链接，一定不要忘了给<a herf="#" > 后面的</a>
11.重新填写，那就是重置呀，就是reset按钮
12.重点****td里面还可以套用table把剩下的表格百分比化！

<tr>
			<td></td>
			<td>
				<table width="80%" >
					<tr>
						<td> <input type="image" src="images/button.jpg" /> </td>
						<td> <input type="reset" value="重新填写"> </td>
					</tr>
				</table>
			</td>
		</tr>