HTML入门基础知识(五)

  • html标签入门基础知识
  • HTML常用标签(四)
  • 列表标签
  • 无序列表
  • 有序列表
  • 自定义列表
  • 三种列表总结:
  • 表单标签
  • 为什么需要表单
  • 表单的组成
  • 表单域
  • 表单控件(表单元素)

html标签入门基础知识

HTML常用标签(四)

列表标签

表格是用来显示数据的,那么列表就是用来布局的。

列表的最大特点就是整齐、整洁、有序,它作为布局会更加自由和方便。

根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。

无序列表

< ul>标签表示html页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用< li>标签定义。

html5 列表选择 html中列表_表单


例子:

html5 列表选择 html中列表_html5 列表选择_02


html5 列表选择 html中列表_自定义_03


注意:

1、无序列表的各个列表项之间没有顺序级别之分,是并列的。

2、< ul>< /ul>中只能嵌套< li>< /li>,直接在< ul>< /ul>标签中输入其他标签或者是文字的做法都是不被允许的。

3、< li>与< /li>之间相当于一个容器,可以容纳所有元素。

4、无序列表会带有自己的样式属性,但实际使用时,会用css来设置。

有序列表

有序列表即为有排列顺序的列表,其各个列表选项会按照一定的顺序排列定义。

在html中,< ol>标签用于定义有序列表,列表排序以数字来显示,并且使用< li>标签来定义列表项。

html5 列表选择 html中列表_html_04


例子:

html5 列表选择 html中列表_控件_05


html5 列表选择 html中列表_表单_06


注意:

1、< ol>< /ol>中只能嵌套< li>< /li>,直接在< ol>< /ol>标签中输入其他标签或者是文字的做法都是不被允许的。

2、< li>与< /li>之间相当于一个容器,可以容纳所有元素。

3、有序列表会带有自己的样式属性,但实际使用时,会用css来设置。

自定义列表

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

在html中,< dl>标签用于定义描述列表(或定义列表),该标签会与 < dt>(定义项目/名字)和< dd>(描述每一个项目/名字)一起使用。

html5 列表选择 html中列表_html_07


例子:

html5 列表选择 html中列表_html_08


html5 列表选择 html中列表_表单_09


注意:

1、< dl>< /dl>里面只能包含< dt>< dd>。

2、< dt>< dd>个数没有限制,经常是一个< dt>对应多个< dd>。

三种列表总结:

html5 列表选择 html中列表_控件_10


注意:

1、学会什么时使用无序列表,什么时候用自定义列表。

2、列表布局是用css来完成。

表单标签

为什么需要表单

使用表单是为了收集用户信息。
在网页中,需要跟用户进行交互,收集用户资料,此时就需要表单。

表单的组成

在html中,一个完整的表单由表单域、表单控件(也称为表单元素)和提示信息三个部分构成。

表单域

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

在html标签中,< form>标签用于定义表单域,以实现用户信息的搜集和传递。

< .form>会把它范围内的表单元素提交给服务器。

html5 列表选择 html中列表_html_11


html5 列表选择 html中列表_自定义_12


注意:

1、写表单元素之前,应该有表单域把他们进行包含。

2、表单域就是form标签。

表单控件(表单元素)

在表单域中可以可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容的控件。

< input>表单元素

iinput是输入的意思,在表单元素中< input>标签用于收集用户信息。

在< input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

html5 列表选择 html中列表_html5 列表选择_13


1、< input />标签为单标签。

2、type属性设置不同的属性值用来指定不同的控件类型。

html5 列表选择 html中列表_自定义_14


例子:

html5 列表选择 html中列表_html_15


html5 列表选择 html中列表_控件_16


除了type属性外,< input>标签还有其他很多属性。

html5 列表选择 html中列表_html_17


例子:

html5 列表选择 html中列表_html5 列表选择_18

1、name和value是每个表单元素都有的属性值,主要是给后台人员使用。
2、name表单元素的名字,要求单选按钮和复选框要有同样的name值。
3、checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就可以默认选中某个表单元素。

(ps:引自pink老师~,刚刚开始作为自己的学习笔记写,如有不好请见谅,阿里嘎多)