亦有资源网

C++语言基础到进阶学习资源汇总

初识HTML——列表标签和表单标签

列表标签

在html中列表分为无序列表有序列表自定义列表(项目列表)。接下来就看看他们有什么不同吧!

作用:如果说table标签是用来显示数据的,那么列表标签就是用来进行html页面布局的。

  • 无序列表

语法:

    标签中只能且必须嵌套
  • 标签。li标签之间没有先后顺序,是并列存在的。li标签里可以容纳文本、数据、图片、超链接等内容。跟table一样,列表标签也自带样式属性,但为了代码统一,我们还是会使用css来设置。

    代码示例:

    无序列表:

    • 苹果
    • 橘子
    • 香蕉

    运行界面:

    • 有序列表

    语法

      标签里面只能嵌套
    1. 标签,在这里li标签是有顺序的。

      代码示例:

      有序列表:

      1. 苹果
      2. 橘子
      3. 香蕉

      运行界面:

      • 自定义列表

      语法

      标签:定义列表

      标签:列表标题

      标签:列表内容

      一个dd标签是对dt标签标题的说明。这两个标签中可以包含任何标签。

      代码示例:

      自定义列表:

      水果种类
      苹果
      橘子
      香蕉

      运行界面:



      表单标签

      作用:收集用户信息。一般用在注册界面等。

      组成:一个完整的表单中包含表单域(整个填写界面所有信息)、表单控件(表单元素)和提示信息(表单控件的提示作用)3个部分。

      • 表单域

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

      标签用于定义表单域,实现用户信息的收集和传递。

      作用:将其区域范围内的信息收集并传送给服务器。

      语法

      
      各种表单控件
      

      注:action:url地址,指定接收并处理表单数据的服务器程序的url地址。

      method:用于设置表单数据的提交方式。

      method=”get”:提交数据时,地址栏可查看到数据。数据量少且安全级别不高时使用。

      method=”post”:提交数据时,地址栏数据是加密的。

      name:表单域的名称。用于区分同一页面下的不同表单域。

      • 表单控件

      1.input输入表单元素

      语法,依据type属性值不同区分不同控件。

      文本框。单行输入字段,默认宽度20个字符。输入的文字可见。

      密码框。输入内容默认不可见。

      单选框,默认情况下选中后无法取消。

      注:为实现多选一状态,需要将所有的单选框控件具有同一个name名。

      复选框,选中后可以更改可以取消。

      提交按钮,默认按钮中的提示文字是提交,可以通过value值进行更改内容。点击提交按钮后会把表单数据发送到服务器。

      重置按钮,默认按钮中的提示文字是重置,可以通过value值进行更改内容。点击后会清楚表单中的所有数据。

      普通按钮

      文件域,用来选择文件,一般适用于文件上传。

      label标签:标注标签,配合input控件一起使用

      作用:绑定表单控件,扩大点击范围。

      当点击label标签的内容时,系统会自动选中该表单控件。

      代码示例:

      label标签




      运行界面:

      Input控件属性:

      name:用户自定义,提示input元素的名称。给后台工作人员的提示。

      value:用户自定义,提示input元素的内容值。给后台的提示。在文本框控件中会显示该内容,单选框和复选框则显示不出来。

      checked:默认选中状态。主要用于单选按钮和复选按钮中。

      maxlength:正整数,规定输入字段中的字符最大长度。

      input代码示例:

      表单标签

      用户名:
      密 码:
      性 别:
      爱 好:游泳 健身 跑步



      上传头像:

      运行界面:

      2.select下拉表单元素

      使用场景:地址选择、职业分类、学校分类等。

      select标签:定义下拉列表。

      语法:

      代码示例:

      下拉表单

      运行界面:

      3.textrea文本域表单控件

      使用场景:留言、介绍、评论等。

      语法

      文本内容

      跟文本框控件不同,它是多行文本输入框,可以自行设定行数以及一行容纳多少字数。

      rows=“每行可输入的字符数”,

      cols=“显示的行数”。

      这两个样式属性实际开发中大多使用css就可以改变操作。

      代码示例:

      文本域表单元素


      运行界面:

      关于HTML基础内容就学习到这里了,明天练习一个综合案例。对了,现在跟学的是黑马前端的pink老师发布的基础视频,明天做的案例按照老师讲解的案例去做。

      控制面板
      您好,欢迎到访网站!
        查看权限
      网站分类
      最新留言