html基础标签

clsds

2022 年 07 月 07 日

1188 次浏览

暂无评论

1596字数

默认分类

<div>和<span>的区别：div是整块的，自带换行，span是行内元素
通过F12点击框选处，查看单个元素

<form>标签：HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

<input>标签：HTML <input>用来填写内容，常见类型有：

<input type="text">：创建基础的单行文本框。
<input type="number">：用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。
<input type="email">：带有 “email” (电子邮箱) 类型标记的输入框元素 (<input>)
能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址(非空值且符合电子邮箱地址格式). CSS 伪标签 : valid 和 :invalid 能够在校验后自动应用。
<input type="password">：<input> 元素里有一种叫做 “password”的值，给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。
<input type="radio">：<input> 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。
<input type="file">：<input> 使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件进行操作。

常用属性有：

name: 名称
id: 唯一ID
maxlength：最大长度
minlength：最小长度
required：是否必填
placeholder：当表单控件为空时，控件中显示的内容

label和input的name需要保持一致，链接跳转是直接跳转，表单是数据提交服务器，服务器再返回表单（POST）

<textarea>标签：HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

<select>与<option>标签：HTML <select> 元素表示一个提供选项菜单的控件。

<button>标签：HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。

<form action="index2.html">
    <label for="username"></label>
    <input placeholder="用户名" type="text" maxlength="10" minlength="3" name="username" id="username">

    <br>
    <label for="age">年龄</label>
    <input required type="number" name="age" id="age">

    <br>
    <label for="email">邮箱</label>
    <input type="email" name="email" id="email">
    
    <br>
    <label for="password">密码</label>
    <input type="password" name="password" id="password">

    <!-- name一样的radio是互斥的，只能选一个 -->
    <br>
    <label for="cpp">cpp</label>
    <input type="radio" name="lang" value="cpp" id="cpp">
    <br>
    <label for="python">python</label>
    <input type="radio" name="lang" value="python" id="python">
    <br>
    <label for="java">java</label>
    <input type="radio" name="lang" value="java" id="java">

    <br>
    <label for="comment">comment</label>
    <textarea placeholder="comment" name="comment" id="comment" cols="30" rows="10"></textarea>

    <br>
    <label for="langua">语言</label>
    <select name="langua" id="lang">
        <option selected value="cpp">cpp</option>
        <option value="java">java</option>
        <option value="python">python</option>
        <option value=""></option>
    </select>

    <br>
    <button type="submit">提交</button>
</form>

html基础标签