<div>：通用的块级容器元素，可用于划分页面的不同部分。
<p>：段落元素，用于包含文本段落。
<h1>到<h6>：标题元素，用于表示不同级别的标题。
<ul>和<ol>：无序列表和有序列表元素。
<li>：列表项元素，用于包含在<ul>或<ol>中。
<blockquote>：引用块元素，用于引用大段文本。
<form>：表单元素，用于包含表单控件。
<table>：表格元素，用于创建表格结构。

二、行内元素

特点：

不会独占一行，多个行内元素可以在同一行内水平排列。
宽度和高度由内容决定，不能直接设置宽度和高度。
可以设置内边距和外边距，但上下边距的效果可能与块级元素不同。

常见的行内元素有：

<span>：通用的行内容器元素，可用于包裹文本或其他行内元素。
<a>：链接元素，用于创建超链接。
<img>：图像元素，用于插入图片。
<strong>和<em>：强调元素，分别用于表示强烈强调和强调的文本。
<input>：输入框元素，用于表单中的用户输入。
<button>：按钮元素，用于触发特定的操作。
<label>：标签元素，通常与表单控件关联。

此外，还有一些元素具有特殊的显示特性，既可以表现为块级元素，也可以表现为行内元素，例如<li>元素在某些情况下可以作为块级元素显示，也可以通过 CSS 设置为行内元素显示。通过 CSS 的display属性，可以改变元素的默认显示方式，将块级元素转换为行内元素，或将行内元素转换为块级元素。

iframe有那些缺点？

页面导入样式时，使用link和@import有什么区别？

a 标签保存文件

在浏览器中，通常情况下无法直接通过点击一个<a>标签将其指向的内容保存为文件。但是可以通过一些特定的方法来实现类似的功能：

一、使用服务器端响应

服务器端生成文件：如果要让用户下载一个文件，可以在服务器端生成该文件，并设置适当的响应头，让浏览器将响应内容视为一个文件进行下载。

例如，在后端使用 Node.js 和 Express 框架，可以这样设置响应头来提供一个文件下载：

const express = require('express')
const app = express()
const fs = require('fs')

app.get('/download', (req, res) => {
  const fileStream = fs.createReadStream('path/to/your/file')
  res.setHeader('Content-disposition', 'attachment; filename=yourFileName.ext')
  res.setHeader('Content-type', 'application/octet-stream')
  fileStream.pipe(res)
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

在上面的例子中，当用户访问/download路径时，服务器会将指定的文件以附件的形式提供给浏览器进行下载。

<a>标签链接到服务器端路径：在前端，可以使用一个<a>标签链接到服务器端提供文件下载的路径。

<a href="/download">下载文件</a>

二、使用 JavaScript 和 Blob 对象

创建 Blob 对象：可以使用 JavaScript 创建一个 Blob 对象，该对象包含要保存的文件内容。

例如：

const data = 'This is the content of the file'
const blob = new Blob([data], { type: 'text/plain' })

创建临时 URL：使用URL.createObjectURL()方法创建一个临时的 URL，指向创建的 Blob 对象。

const url = URL.createObjectURL(blob);

使用<a>标签和 JavaScript：创建一个隐藏的<a>标签，设置其href属性为临时 URL，并模拟点击该标签来触发下载。

例如：

const a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = 'yourFileName.txt'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)

这种方法的局限性在于，它只能在浏览器的安全限制范围内工作，并且可能受到同源策略的限制。此外，不同浏览器对于这种方法的支持程度也可能有所不同。

HTML 中的 input 标签有哪些 type

created_at: 2024-10-18T15:07:49Z
updated_at: 2024-10-18T15:07:49Z
labels: web应用场景
milestone: 初

关键词：input 标签 type 属性

HTML 中的<input>标签有多种type属性值，以下是一些常见的类型：

一、文本输入类型

text：

用于输入单行文本。这是最常见的输入类型之一，用户可以在输入框中输入任何文本内容。
例如：<input type="text">。

password：

用于输入密码，输入的内容会以掩码形式显示，以保护密码的安全性。
例如：<input type="password">。

二、数值输入类型

number：

用于输入数值。可以设置最小值、最大值、步长等属性来限制输入的范围。
例如：<input type="number" min="0" max="100" step="1">。

range：

以滑块的形式显示，用户可以通过拖动滑块来选择一个数值范围内的值。
例如：<input type="range" min="0" max="100">。

三、日期和时间输入类型

date：

用于选择日期。通常会显示一个日期选择器，方便用户选择日期。
例如：<input type="date">。

time：

用于选择时间。可以选择小时、分钟和秒。
例如：<input type="time">。

datetime-local：

用于选择日期和时间，包括本地时区信息。
例如：<input type="datetime-local">。

四、选择类型

checkbox：

复选框，用户可以选择多个选项。
例如：<input type="checkbox">。

radio：

单选按钮，用户只能选择一个选项。通常多个单选按钮具有相同的name属性，以确保只能选择其中一个。
例如：<input type="radio" name="option">。

select：

下拉列表，用户可以从预定义的选项中选择一个值。可以使用<option>标签来定义选项。
例如：

<select>
 <option value="option1">Option 1</option>
 <option value="option2">Option 2</option>
</select>

五、按钮类型

submit：

提交按钮，用于提交表单数据。通常与<form>标签一起使用。
例如：<input type="submit" value="Submit">。

reset：

重置按钮，用于重置表单中的所有输入字段为初始状态。
例如：<input type="reset" value="Reset">。

button：

普通按钮，可以通过 JavaScript 为其添加自定义的行为。
例如：<input type="button" value="Click Me">。

六、其他类型

email：

用于输入电子邮件地址。浏览器可能会对输入的内容进行有效性验证。
例如：<input type="email">。

url：

用于输入 URL 地址。浏览器可能会对输入的内容进行有效性验证。
例如：<input type="url">。

search：

用于输入搜索关键词。通常会显示一些特定的样式，如圆角等。
例如：<input type="search">。

hidden：

隐藏输入字段，用于在表单中传递数据，但不会在页面上显示给用户。
例如：<input type="hidden" value="some-value">。

color：

用于选择颜色。通常会显示一个颜色选择器。
例如：<input type="color">。

file：

用于上传文件。可以设置multiple属性允许选择多个文件。
例如：<input type="file">或<input type="file" multiple>。

标签

doctype(文档类型) 的作用是什么？

说一下什么是语义化标签

meta 标签的作用

header 的作用

请解释 `<script>、<script async> 和 <script defer>` 的区别

为什么通常推荐将 CSS `<link>` 放置在 `<head></head>` 之间，而将 JS `<script>` 放置在 `</body>` 之前？你知道有哪些例外吗？

html 元素类型

iframe有那些缺点？

页面导入样式时，使用link和@import有什么区别？

a 标签保存文件

HTML 中的 input 标签有哪些 type

doctype(文档类型) 的作用是什么？​

说一下什么是语义化标签​

meta 标签的作用​

header 的作用​

请解释 <script>、<script async> 和 <script defer> 的区别​

为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？​

html 元素类型​

iframe有那些缺点？​

页面导入样式时，使用link和@import有什么区别？​

a 标签保存文件​

HTML 中的 input 标签有哪些 type​

doctype(文档类型) 的作用是什么？

说一下什么是语义化标签

meta 标签的作用

header 的作用

请解释 `<script>、<script async> 和 <script defer>` 的区别

为什么通常推荐将 CSS `<link>` 放置在 `<head></head>` 之间，而将 JS `<script>` 放置在 `</body>` 之前？你知道有哪些例外吗？

html 元素类型

iframe有那些缺点？

页面导入样式时，使用link和@import有什么区别？

a 标签保存文件

HTML 中的 input 标签有哪些 type