HTML学习

最新推荐文章于 2024-02-27 14:46:01 发布

乌衣-

最新推荐文章于 2024-02-27 14:46:01 发布

阅读量1.4k

点赞数

文章标签： html linq elementui

本文链接：https://blog.csdn.net/qq_61711708/article/details/122654511

版权

列表

无序列表

无序列表的列表项是没有顺序的。

默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变其样式。

语法：

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

ul，即unordered list（无序列表）。

li，即list（列表项）。

在该语法中，使用<ul></ul>标签表示一个无序列表的开始和结束，<li>表示这是一个列表项。一个无序列表可以包含多个列表项。ul标签和li标签也是配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。

type属性：

有序列表

有序列表中的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束。

有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

语法：

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

ol，即ordered list（有序列表）；

li，即list（列表项）；

type属性：

自定义列表：

自定义列表由两部分组成：名词和描述。

语法：

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

dl即definition list（定义列表）；dt即definition term（定义名词）；dd即definition description（定义描述）。

在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。

表单标签：

HTML 表单用于收集不同类型的用户输入。

由表单域（<form> ）表单控件（元素），提示信息组成。

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

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

1.表单使用表单标签 <form> 来设置:

<form action="url地址" method="提交方式" name="表单域名称">
    input 元素.
</form>

2.表单元素：

允许用户在表单中输入或选择的控件。

<1>.input（单表签）

输入类型是由类型属性（type）定义的。

text属性：

语法：

<input type="text" />

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        姓名：<input type="text" />
    </form>
</body>
</html>

属性：

三个属性没有顺序之分。

value：默认文本框内显示内容，如果没有设置则为空。

size:用来设置单行文本框的长度，不过在实际开发中，我们一般不会用到这个属性，而是使用 CSS来控制。

maxlength:可限制最多输入的字符。超出则无法再输入。

密码文本框：

语法：

<input type="password" />

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        姓名：<input type="text" /><br>
        密码：<input type="password" />
    </form>
</body>
</html>

会有字符遮掩的效果。

属性与text一致，有，size,maxlength,value。用法类似。

单选框：

语法：

<input type="radio" name="组名" value="取值" />

name属性表示单选按钮所在的组名(同一种类型组名最好一致，否则达不到单选的效果)，而value表示单选按钮的取值，这两个属性必须要设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        性别:
        <input type="radio" name="sex" value="男" />男
        <input type="radio" name="sex" value="女" />女
    </form>
</body>
</html>

可实现单选效果。

若要默认为第一个，只需增加checked属性，则会默认选择第一个。

<input type="radio" name="sex" value="男" checked />男
        <input type="radio" name="sex" value="女" />女

以下两种写法效果一致。

<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="男" checked="checked" />男

另外：

若要点击文本就可以选择选项，可以增加<label>标签。

<label><input type="radio" name="sex" value="男" />男</label>
<label><input type="radio" name="sex" value="女" />女</label>

复选框：

复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。

单选框只能选择一项，而复选框可以选择多项。

语法：

<input type="checkbox" name="组名" value="取值" />

name属性表示复选框所在的组名，而value表示复选框的取值。

跟单选框一样，这两个属性也必须要设置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form >
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果"/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜"/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
    </form>
</body>
</html>

可同时选择多个；

同样的，checked="checked"为浏览器默认选项。

按钮：

·button:普通按钮一般情况下都是配合JavaScript来进行各种操作的。

语法：

<input type="button" value="取值" />

value的取值就是按钮上的文字。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form >
        <input type="button" value="你好"/>
    </form>
</body>
</html>

提交按钮（submit）：

提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。

语法：

<input type="submit" value="取值" />

value的取值就是按钮上的文字。

重置按钮（reset）：

<input type="reset" value="取值" />

当我们在文本框中输入内容，然后按下重置按钮，会发现内容被清空了。这就是重置按钮的功能。

不过要注意一点：重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。

文件上传（file）：

文件上传也是使用input标签来实现的，其中type属性取值为file。

<input type="file" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form ">
        <input type="file"/>
    </form>
</body>
</html>

<2>.textarea

单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。

在HTML中，多行文本框使用的是textarea标签，而不是input标签。

语法：

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form ">
        个人简介：<br/>
        <textarea rows="5" cols="20">请介绍一下你自己</textarea>
    </form>
</body>
</html>

<3>.select 下拉表单元素

语法：

select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

select属性：

size:设置下拉列表显示几个列表项，取值为整数(将size取值为1、2、3时，对Chrome浏览器无效。这是因为Chrome浏览器最低是4个选项，我们只能选取4及以上数字。)

option属性：

value用来配合js使用；

selected：定义selected="selected"时，选中极为默认项。

乌衣-

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

列表无序列表无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变其样式。语法：<ul> <li>列表项</li> <li>列表项</li> <li>列表项</li></ul>ul，即unordered list（无序列表）。li，即list（列表项）。在该语法中，使用<ul></ul&
复制链接

扫一扫