公输的前端学习记录day4-1（列表标签和表单标签）

         列表标签

  表格是用来显示数据的，列表是用来布局的。

根据使用场景不同，列表可以分为无序列表，有序列表和自定义列表。

1）无序列表（重点！！！）

  ＜ul＞标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用＜li＞标签定义。

基本语法格式：

＜ul＞

  ＜li＞列表项1＜/li＞

  ＜li＞列表项2＜/li＞

    。。。

＜/ul＞

注意：各列表项之间是没有顺序级别之分的，是并列的。

＜ul＞标签中只能放＜li＞，其他标签都不能放，也不能直接放文字。而＜li＞与＜/li＞之间就相当于一个容器，可以容纳所有元素。各种标签都能放进＜li＞里边。

无序列表会带有自己的样式属性，但在实际使用时，我们会使用css来设置。

2）有序列表（理解，用的不多）

 各列表项会按照一定顺序排列定义。

 ＜ol＞来定义，里边使用＜li＞

注意与＜ul＞标签一样。

3）自定义列表（重点！！！）

   通常用于对术语或名词进行解释和描述，列表项前没有任何项目符号。

语法格式：

＜dl＞定义列表会与＜dt＞（定义项目/名字）和＜dd＞（描述每一个项目/名字）一起使用。

＜dl＞

  ＜dt＞名词1＜/dt＞

  ＜dd＞名词1解释1＜/dd＞

  ＜dd＞名词1解释2＜/dd＞

＜/dl＞

注意：＜dl＞＜/dl＞里面只能包含＜dt＞和  ＜dd＞。

  ＜dt＞和＜dd＞没有个数限制，经常是一个＜dt＞对于多个＜dd＞。

        表单标签

（一般用于注册页面）

1。使用表单的目的是为了收集用户信息。

2。在HTML中，一个完整的表单通常由表单域，表单控件（也称表单元素）和提示信息3个部分组成。

1）表单域

  是一个包含表单元素的区域。

 ＜form＞标签用于定义表单域，以实现用户信息的收集和传递。

 ＜form＞会把它范围内的表单元素信息提交给服务器。

语法格式：

＜form action="url地址" method="提交方式”name="表单域名称”＞各种表单元素控件

＜/form＞

（三个属性后边学服务器编程会再学，先理解表单域的意思）

2）表单控件（表单元素）

  表单元素就是允许用户在表单中输入或者选择的内容控件。

（1）input输入表单元素（收集用户信息）  ＜input type="属性值" /＞（＜input /＞是单标签！！！  type属性设置不同的属性值用来指定不同的控件类型 ）

type的属性：

• text 文本框，可以让用户输入文字，
• password 定义密码字段，改字段中的字符被掩码，（输入后用户看不到，变成*或·）（默认宽度为20个字符）
• radio 定义单选按钮，实现对选一 如：性别：男＜input type="radio"＞ 女＜input type="radio"＞（要给选项起一个相同的name）
• checkbox 复选框（多选）可以单独写一个。

• button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本，如：点击发送短信验证码）

• file定义输入字段和“浏览”按钮，供文件上传

• hidden定义隐藏的输入字段

• image定义图像形式的提交按钮

• reset定义重置按钮。重置按钮会清楚表单中的所有数据。

• submit定义提交按钮，把表单数据发送到后台服务器。

＜input＞的其他属性

name （用户自定义）定义＜input＞元素的名称

value （用户自定义）规定input元素的值（如：在框内显示“请输入用户名”）

checked（checked）规定此input元素首次加载时应当被选中。（主要针对单选按钮和复选框中的，默认选中）

格式在要默认选中的input标签内添加checked="checked"

maxlength（正整数）规定输入字段中的字符的最大长度

name和value是每个表单元素都有的属性值，主要给后台人员使用。

name表单元素的名字，要求单选按钮和复选框要有相同的name值。

3。＜label＞标签：为input元素定义标注（标签）。（增大点击面积，就是使点击目标文字也会使按钮选中）

＜label＞用于绑定一个表单元素。

语法规范：

＜label for ="sex"＞男＜/label＞

＜input type="radio" name="sex" id="sex" /＞

核心：＜label＞标签的for属性应当与相关元素的id属性相同。

4。另外两个表单控件（表单元素）

 1）select下拉表单元素。

（展开选一个后自动折叠）

语法：

＜select＞

  ＜option＞选项1＜/option＞

  ＜option＞。。＜/option＞

   。。。

＜/select＞

注意：＜select＞中至少包含一对＜option＞

在＜option＞中定义selected="selected"时，当前项即为默认选中项。

 2）＜textarea＞ 文本域元素

 场景：提建议的建议框，留言板，评论等允许输入大量文字的框。

语法：＜textarea rows="3" cols="20"＞

   文本内容（默认显示文字直接在这里输入）

＜/textarea＞

cols="每行中的字符数”，rows="显示的行数”，实际开发中不会使用，都是用CSS来改变大小。