html表单文本域 html文本域标签属性 收藏 0

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

在html中列表分为无序列表、有序列表和自定义列表（项目列表）。接下来就看看他们有什么不同吧！

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

• 无序列表

语法：

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

代码示例：

运行界面：

• 有序列表

语法：

<ol></ol>标签里面只能嵌套<li></li>标签，在这里li标签是有顺序的。

代码示例：

运行界面：

• 自定义列表

语法：

<dl></dl>标签：定义列表

<dt></dt>标签：列表标题

<dd></dd>标签：列表内容

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

代码示例：

运行界面：

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

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

• 表单域

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

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

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

语法：

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

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

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

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

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

• 表单控件

1.input输入表单元素：

语法：<input type=””>，依据type属性值不同区分不同控件。

文本框：<input type=”text”>。单行输入字段，默认宽度20个字符。输入的文字可见。

密码框：<input type=”password”>。输入内容默认不可见。

单选框：<input type=”radio”>，默认情况下选中后无法取消。

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

复选框：<input type=”checkbox”>，选中后可以更改可以取消。

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

重置按钮：<input type=”reset”>，默认按钮中的提示文字是重置，可以通过value值进行更改内容。点击后会清楚表单中的所有数据。

普通按钮：<input type=”button”>

文件域：<input type=”file”>，用来选择文件，一般适用于文件上传。

label标签：标注标签，配合input控件一起使用

作用：绑定表单控件，扩大点击范围。

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

代码示例：

运行界面：

Input控件属性：

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

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

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

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

input代码示例：

运行界面：

2.select下拉表单元素：

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

select标签：定义下拉列表。

语法：

代码示例：

运行界面：

3.textrea文本域表单控件

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

语法：

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

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

cols=“显示的行数”。

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

代码示例：

运行界面：

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

HTML前端常用标签(复习)

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)

所谓超文本，有2层含义：

1. 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
2. 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。

文本格式化标签

图片标签

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

属性:

alt 文本,图像不显示时显示文字<img src=\”\” alt=\”\”>

title 文本,鼠标悬停时显示内容<img src=\”cz.jpg\” title=\”文本\” />

width 图像宽度<img src=\”cz.jpg\” width=\”300\” height=\”300\” />

height 图像高度<img src=\”cz.jpg\” width=\”300\” height=\”300\” />

border 设置图像边框宽度<img src=\”cz.jpg\” border=\”3\” />

链接标签

属性：

锚点标签

base标签

预格式化标签

表格标签

列表标签

input控件

<label> </label>

文本域

select下拉列表

form表单域

以上标签基本包含了前端开发所需常用标签.来自本人,黑马程序员.传智播客学习笔记.

以下是个人笔记整理,需要请关注私信我.

希望本人笔记能对各位有所帮助.

前端不难,难的在于东西多和杂.每天努力学习一点点,不放弃.

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com