前端学习:基础HTML和HTML5( 二 )


  • True love will surely bring about the growth of the heart
  • Without love, there is no temperature,and the heart is cold

页面展示:
9、创建一个有序列表
HTML 中有用于创建有序列表的特定元素 。
有序列表以开始,中间包含一个或多个元素 。最后以结束 。
例如:
  1. action
  2. heart

将创建一个包含和 heart 的编号列表 。
页面展示:
10、 创建一个输入框
input 输入框可以让你轻松获得用户的输入 。你可以像这样创建一个文本输入框:

注意 `input` 输入框是没有结束标签的 。
11、给输入框添加占位符文本
占位符文本用户在 input 输入框中输入任何东西前的预定义文本 。可以像这样创建一个占位符:

注意: 别忘了 input 元素是 “自闭和标签”,即不需要结束标签 。
12、创建一个表单
可以只通过 HTML 来实现发送数据给服务器的表单,只需要给 `form` 元素添加 `action` 属性即可 。
例如:

用于设置文本框中可输入的字符数量 。
13、给表单添加提交按钮
给表单添加一个 `submit`(提交)按钮 。点击提交按钮时,表单中的数据将会被发送到 `action` 属性指定的 URL 上 。
例如:

页面展示:
14、给表单添加一个必填字段
设计表单时,可以指定某些字段为必填项(required),只有当用户填写了该字段后,才可以提交表单 。如果想把文本输入框设置为必填项,在 `input` 元素中加上 `required` 属性就可以了,例如:
15、创建一组单选按钮
radio buttons(单选按钮)就好比单项选择题,正确答案只有一个 。单选按钮是 `input` 选择框的一种类型 。每一个单选按钮都应该嵌套在它自己的 `label`(标签)元素中 。这样,我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系 。所有关联的单选按钮应该拥有相同的 `name` 属性 。创建一组单选按钮,选中其中一个按钮,其他按钮即显示为未选中,以确保用户只提供一个答案 。例:

最佳实践是在 `label` 元素上设置 `for` 属性,让其值与相关联的 `input` 单选按钮的 `id` 属性值相同 。这使得辅助技术能够在标签和相关的 `input` 元素之间建立关联关系 。例:

也可以在 label 标签中嵌入 input 元素:

16、创建一组复选框
checkboxes(复选框)就好比多项选择题,正确答案有多个 。复选框是 `input` 选择框的一种类型 。每一个复选框都应该嵌套在它自己的 `label`(标签)元素中 。这样,我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系 。所有关联的复选框应该拥有相同的 `name` 属性 。使得 `input` 与 `label` 关联的最佳实践是在 `label` 元素上设置 `for` 属性,让其值与相关联的 `input` 复选框的 `id` 属性值相同 。例: