整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端大神总结的HTML标签,真的是太全了-连载1

TML

本文,有很多很棘手的问题,例如使用sublime 编辑器可能安装插件的时候会使用不了view in browser我公司的电脑可以安装、结果家里的电脑就报编码错误、需要改sublime插件源代码解码成utf8就可以了、还有一直连不上packagecontrol的网页,可以群(526929231)使劲砸我得到解决~ sublime编辑器对于前端来说确实很好用!很好用!很好用! SublimeText、Webstorm推荐这两个编辑器

HTML起源

刚开始设计HTML语言是为了將文字图像关联在一起,用另一台发送或接收

HTML(HyperTextMark-up Language)超文本标记语言

HTML 不是一种编程语言,而是一中标记语言(mark-up language),标记语言是一套标记标签(mark-up tag)

HTML标签

标签是由尖括号 < > 把关键词括起来,标签通常是成对出现的

Web浏览器

读取 HTML 文档,使用标签来解析页面的内容,以网页的形式现实,浏览器不会现实HTML标签

现在市场上主流五大浏览器

每种浏览器都有自己的内核(引擎)(解析网页的一个程序,io以什么方式去渲染它都要通过引擎去执行)

目前主流的浏览器分为五种

  • Chrome谷歌浏览器 (Webkit内核,V8 js引擎)

  • Firefox火狐浏览器 (Gecko内核)

  • Internet Explorer IE浏览器( Trident内核)

  • Opera 欧朋浏览器 (Presto内核) 主要市场:移动端

  • Safari 苹果浏览器 (Webkit内核,但JS引擎为Nitro)

    不需要去记,简单了解下

标签使用规范

  1. 标签必须闭合

  2. 所有标签名一律小写

  3. 代码缩进,使阅读代码更加易懂

  4. 特殊符号规范使用

  5. 命名规范,见名之意

PS: 所有的标记符号都是半角英文

编辑器

众说纷纭编辑器太多,最终只是一个工具,希望同学们能从万千世界中找到适合自己的编辑器伙伴

编辑器描述
EditPlus手写模式,适合初学手写,无代码提示(有IE调试视图)
Sublime 插件特别多,占用内存小,启动速度快,打开大项目较慢,管理文件方式有些缺陷
webstorm集成插件特别多,启动较慢,占用内存大,开发和管理视图都很方便
Dreamweaver 适合初学,主要代码提示和代码插入功能强大,主要偏向于设计(有设计视图)

Sublime插件列表

插件名描述详情请戳
emmet前端自动补全,提供快捷补全方式
ColorPicker调色板,颜色选择器
SublimeTmplsublime模板,可以快速创建一个HTML模板
view in browser用快捷方式打开浏览器进行调试HTML(需要配置参考后面网页)
LiveReload实时刷新HTML(编辑器里按下保存ctrl+s的时候,已经打开的HTMl会自动刷新)谷歌插件文件安装方法需要配合谷歌LiveReload插件插件文件下载
Color HighlighterCSS颜色代码高亮及颜色预览提示
CSS3CSS3的代码高亮提示还针对了CSS3的选择器及锚类选择器:hover :first-child :first-child ...的高亮
JavaScript Completions原生js 代码提示
Sublime-Better-Completion可自选开启代码提示,支持jQ、js、bootstrap、php、sql ...仓库地址此插件只能通过Github克隆下载安装安装方法

注:Github 网页中 下面是有详细的使用方法 packagecontrol.io官网 里面search 可以进行搜索插件名字来找到具体使用方法,还有什么不懂或者安装出现编码错误以及安装不上的可以拍打我~

模板的配置

配置描述
!DOCTYPE html不是标签,主要用于文档类型的声明
charset="utf-8"声明字符编码集
http-equiv="Content-Type"把Content属性关联到HTTP头部(协议头)

HTML模板

简单了解,并不需要熟练掌握

HTML树状结构

Dom节点树

HTML网页扩展名

.html .htm这两种是比较常见的

在早期系统中文件名是有8+3组成 三个扩展名所以不支持四个字母的扩展采用.htm

现在通常使用.html作为扩展名


标签的学习

接下来所有的标签元素学习都在body标签里面去敲打实现、

H标签

为了突出标题,字体大小和加粗发生相应的改变

<h1>我是大主题</h1>
<h2>我是大主题</h2>
<h3>我是大主题</h3>
<h4>我是大主题</h4>
<h5>我是大主题</h5>
<h6>我是大主题</h6>
<!doctype html><!-- 让浏览器使用html5的标准解析 -->
<html>
 <head>
 <!-- 设置字符编码集让浏览器使用utf8解析当前网页 -->
 <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
 <meta name="keywords" content="SEO搜索引擎,关键词,多个请用逗号分开" />
 <meta name="description" content="网页描述,八十字内" />
 <title>浏览器标签页上的网页标题</title>
 </head>
 <body> <!-- 所有的标签学习都在这body里面去敲,上面head元素里面的内容做个了解就可以了 -->
 
 <h1>我是大标题</h1>
 <h2>我是主题2</h2>
 <h3>我是主题3</h3>
 <h4>我是主题4</h4>
 <h5>我是主题5</h5>
 <h6>我是主题6</h6>
 
 </body>
</html>

可以发现h标签从h1到h6会随着数值越小字越小,并且都是会加粗和各占一行的状态(前后的元素都会被换行)

h1标签一般一个页面里面只会写一次,为了让搜索引擎爬取到 (写一次利于SEO搜索引擎优化)

p段落标签

<p>
 冬着一身素衣,缓缓而来,季节没有了往日的姹紫嫣红,却用简单的线条,勾勒出一幅洁白的画,纯洁通透,轻盈自然。
</p>

特殊符号

刚我们了解到了浏览器是识别尖括号的,如果要在页面中显示html标记那要怎么做呢?这时候就需要特殊符号的表示来显示

符号描述
空格&nbsp;
小于&lt;
大于&gt;
引号&quot;
版权&copy;
×叉&times;
&&amp;

加粗标签

符号描述
B标签物理加粗,页面呈现加粗状态.
Strong标签不仅能加粗,还利于搜索引擎优化
<b>物理加粗,页面呈现加粗状态.</b>

<strong>不仅能加粗,还利于搜索引擎优化,就是类似于百度、谷歌这种搜索引擎爬取你的网页的时候会查找这个标签里面的内容来优化显示网页的排名</strong>

可以根据word文档上面发现 b是加粗 u是下划线 i是倾斜 同样适用于标签

<i>我是倾斜</i> <u>我加了下划线</u>

A标签

  • 链接一个页面,点击则会跳转这个链接页面

  • 使用锚点滚动到设定的位置

<a href=""></a> a标签中的href控制点击的时候跳转到哪里如果没写表示刷新当前页面


<a href="#"></a> 跳转到当前页面(回归到页面顶部)


<a href="javascript: void(0);"></a> 死链接,不会跳转,一般用于js特效


<a href="#name">锚点到一个标签上所对应的ID名字,点击则跳到那个标签位置</a>


<a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 协议不能少

点击#flag的a标签的时候会跳到到上面h2标签

只有拥有name属性的

a标签

才能锚点,还有一种方式是通过ID标识唯一元素,也可以跳转(不仅仅是a标签)

补充标签

描述标签
滚动标签marquee
字体标签font
定义水平线hr

滚动标签

marquee

属性描述
direction滚动方向
behivior行为

behivior

描述
alternate交替滚动
scroll滚动
slide滑落

Font标签

属性描述
color颜色
size0-7
face字体

hr水平线

与font相似,拥有color和size属性

hr标签没有结束标签 按照早期的习惯也H5也遵循XHTML的解析 所以统一会加一个反斜杠表示结束这个标签,不加也能够正确显示,但是养成一个良好的习惯确实重要,比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、


练习一、

结合今天所学,写一个简单的网页

内容如下:

  • 写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写,网上一大把哈哈,可以自己写下,锻炼下思维

  • 需要包括h、p、a、加粗

  • 题材不限,至少200字

练习二、

在习题一的文章底部,使用滚动标签进行滚动方向为45°

可以在头部找到我,如有勘误、错别字、尽情见谅很用心的检查了 码了这么久

家好,很高兴又见面了,我是"高级前端‬进阶‬",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。

CSS-in-JS 技术用于在同一文件中编写组件和样式,同时保持简单性和清晰度。

根据 styled-components 创建者 Max Stoiber 的说法,超过 60% 的 React 安装者还安装了 CSS-in-JS 库。 在 JavaScript 中编写 CSS 非常流行,尤其是在使用 React 或 Angular 等 JS 框架时。 但是许多库可用于简化编写 CSS-in-JS 的过程,本文将向大家介绍6款零运行时 CSS-in-JS 库。

什么是 CSS-in-JS

CSS-in-JS 是一种样式技术,使用 JavaScript 直接对组件进行样式设置,其使用变量来定义组件的 CSS。 该变量将包含所有 CSS 属性,确保组件与其指定的样式无缝衔接。

随着基于组件的样式变得越来越流行,CSS-in-JS 近年来也有所增加。 由于大多数现代 JavaScript 框架都是组件化,从而进一步推动 CSS-in-JS 的流行。 CSS 现已嫣然成为 JavaScript 的一个模块,可以在需要时自由定义和使用。

在类似 React 的现代框架中,开发者可以通过编写 CSS-in-JS 使用内联技术在 JavaScript 文件的 JSX 部分中编写 CSS。 但这种技术可能会令人困惑、可读性较差,并且可能会破坏代码流程。 通过库编写 CSS-in-JS 并不能取代 CSS 的模块化。

使用 CSS-in-JS

在 CSS-in-JS 中,开发者可以在变量中定义样式,然后通过用变量标签包装组件来设置组件样式。

styled 标签是从库中导入,创建一个具有预定义样式的 React 组件,然后在 HTML 标签中使用。 下面的示例使用 h1,根据定义的 CSS 属性进行自定义。 编码完成后,定义属性,如下所示:

const Title = styled.h1`
  font-family: sans-serif;
  font-size: 48px;
  color: #f15f79;
`;

接下来,将内容包装在变量标签中:

const App = () => <Title>Hello world!</Title>;

这就是在大多数 CSS-in-JS 库中定义样式的方式。

使用 CSS-in-JS 的优点

使用 CSS-in-JS 具有以下优点:

  • 轻松实现代码共享:使用 CSS-in-JS 共享代码更容易、更高效,因为其他人可以轻松理解代码,而无需尝试在项目中查找组件和样式
  • 减少 DOM 负载:因为将 CSS 和组件定义在同一个文件中,所以组件的 CSS 仅在组件加载时才会加载,减少了虚拟 DOM 上不必要的负载
  • 在 CSS 中使用 JavaScript:由于 CSS 是在 JavaScript 文件中定义的,因此可以使用复杂的 JavaScript 逻辑来定义 CSS 属性的值
  • CSS 中更好的错误处理:由于 CSS 也会经历编译过程,因此会在编译过程中收到错误消息,从而可以轻松查找和解决 CSS 中潜在的错误
  • 可移植性:将样式和组件放在同一个文件中可以轻松在其他项目中使用该组件

使用 CSS-in-JS 的缺点

使用 CSS-in-JS 有一些缺点,包括:

  • 由于样式是在 JavaScript 文件中定义的,因此如果禁用 JavaScript,将会影响组件的样式
  • 样式被双重解析,一次由库解析,然后在插入样式时由浏览器解析
  • 传统上,当加载网页时,浏览器只是读取 CSS 并渲染。 当使用 CSS-in-JS 时,浏览器动态生成 CSS 样式标签,然后读取它并将其应用到网页,而读取和生成此内容会消耗性能时间

编译时和运行时 CSS-in-JS

编译时是指用高级、人类可读语言编写的代码被编译器转换为低级、机器可读代码,而运行时是指程序转换后的代码在最终用户的计算机上运行。

改善 CSS-in-JS 由于双重解析而导致的性能时间损失的解决方案之一是,库可以首先将 CSS-in-JS 块转换为单独的 CSS 文件。 然后,浏览器将读取这些样式并将其应用到网页,最终节省生成 style 标签时浪费的时间。 这称为零运行时 CSS-in-JS。 它对于性能至关重要的规模化或复杂的项目特别有用。

零运行时 CSS-in-JS 的方案

Linaria

Linaria 的编译时 CSS-in-JS 工具提供了介于纯 CSS 解决方案和运行时 CSS-in-JS 方法之间的中间解决方案,即编译时方案。

Linaria 具有以下特征:

  • 在 JS 中编写 CSS,但运行时为零,CSS 在构建期间被提取到 CSS 文件
  • 熟悉的 CSS 语法与 Sass 类似嵌套
  • 将基于动态 prop 的样式与 React 绑定一起使用,在幕后使用 CSS 变量。即动态样式使用 CSS 变量,从而不需要任何运行时
  • 使用 CSS 源映射轻松找到定义样式的位置便于调试
  • 使用 stylelint 在 JS 中检查 CSS
  • 使用 JavaScript 进行逻辑,无需 CSS 预处理器
  • 可以选择使用任何 CSS 预处理器,例如 Sass 或 PostCSS
  • 使用 @linaria/atomic 支持原子样式

总之,Linaria 在编译时生成 CSS 类并将其提取到单独的 CSS 文件中,而不是在运行时生成。 这使得可以避免运行时 CSS-in-JS 解决方案的性能损失,同时保留组件隔离和动态样式匹配的优势。

import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';
// Write your styles in `css` tag
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};
  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;
// Then use it as a class name
<h1 className={header}>Hello world</h1>;

使用 Linaria 的缺点主要包括以下两点:

  • 难以实施:正确实施 Linaria 可能很困难,因为它需要设置 Babel
  • 设置打包器:从 JS 文件中提取 CSS 需要使用打包器,例如 Rollup 或 webpack、Vite,有一定的技术门槛

下面是 Linaria 的完整的 Webpack 示例配置:

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const dev = process.env.NODE_ENV !== 'production';
module.exports = {
  mode: dev ? 'development' : 'production',
  devtool: 'source-map',
  entry: {
    app: './src/index',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: '[name].bundle.js',
  },
  optimization: {
    noEmitOnErrors: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) },
    }),
    new MiniCssExtractPlugin({ filename: 'styles.css' }),
    // 将所有文件中的 CSS 提取到单个 styles.css 中
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' },
          //   最终通过Babel处理
          {
            loader: '@linaria/webpack-loader',
            options: { sourceMap: dev },
          },
          // 添加js文件的linaria的自定义loader
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: { sourceMap: dev },
          },
        ],
      },
      {
        test: /\.(jpg|png|gif|woff|woff2|eot|ttf|svg)$/,
        use: [{ loader: 'file-loader' }],
      },
    ],
  },
  devServer: {
    contentBase: [path.join(__dirname, 'public')],
    historyApiFallback: true,
  },
};

Astroturf

Astroturf 允许开发者在 JavaScript 文件中编写 CSS,而无需添加任何运行时层,并使用现有的 CSS 处理管道。

Astroturf 具有以下特征:

  • 零运行时 CSS-in-JS: 获得与 CSS-in-JS 相同的许多好处,但不会失去需要特定于框架的 CSS 处理的灵活性,同时保持 CSS 完全静态,无需运行时样式解析。
  • 使用现有工具 :Sass、PostCSS、Less 等工具依然可用 , 但仍将样式定义写入 JavaScript 文件中
  • 整个组件位于单个文件中: 在模板文字中编写 CSS,然后像在单独的文件中一样使用
import React from 'react';
import { css } from 'astroturf';

const btn = css`
  color: black;
  border: 1px solid black;
  background-color: white;
`;

export default function Button({ children }) {
  return <button className={btn}>{children}</button>;
}

Astroturf 的缺点主要包括:

  • 糟糕的文档:Astroturf 在 GitHub 上缺乏合适的自述文件。 它还缺乏贡献指南,并且文档很短,经常遗漏重要细节
  • 实现:为了提取样式,Astroturf 需要 Rollup 或 webpack 等捆绑器,这可能很难实现

Reshadow

Reshadow 用 JavaScript 编写。 该库提供了许多功能,最值得注意的是为 React 等虚拟 DOM 框架提供了 Shadow DOM 开发人员体验,同时还支持 CSS-in-JS 语法。

Reshadow 的典型特征包括:

  • 摆脱额外的抽象
  • 以类似本机的方式为虚拟 DOM 编写独立的语义样式
  • 匹配元素、组件和 prop 的样式
  • 编译时样式处理和高效运行时
  • 静态样式提取选项
  • 静态分析
  • 结合 css-in-js 和 css-modules 方法或选择更适合您的方法
  • PostCSS 生态系统的所有优势
  • 可互操作,支持将其与 React、Preact、Vue、htm 中的组件一起使用。
import styled, { css } from 'reshadow';

const styles = css`
  button {
    font-size: 16px;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 20px;
    border: 2px solid;
    background-color: white;
    color: darkorange;
  }
`;

const Button = ({ children, ...props }) =>
  styled(styles)(<button {...props}>{children}</button>);

Reshadow 的缺点包括:

  • 文档和内容较差:网络上关于 Reshadow 的内容很少,而且文档也不是很全面。 因此,学习需要时间并且可能很困难
  • 贡献者较少:Reshadow 的贡献者很少,这减慢了解决附加到其 GitHub 存储库的问题的过程

vanilla-extract

vanilla-extract 是 TypeScript 中的零运行时样式表。使用本地范围(locally scoped)的类名和 CSS 变量在 TypeScript(或 JavaScript)中编写样式,然后在构建时生成静态 CSS 文件。

基本上,它是“TypeScript 中的 CSS Modules”,但具有作用域 CSS 变量 等更多特性。

  • 所有在构建时生成的样式 : 就像 Sass、Less 等。
  • ✨ 对标准 CSS 的最小抽象。
  • 可与任何前端框架配合使用,甚至无需任何前端框架。
  • 本地范围的类名,就像 CSS module 一样。
  • 本地范围的 CSS 变量、@keyframes 和 @font-face 规则。
  • 高级主题系统,支持同步主题,而且没有全局变量
  • 用于生成基于变量的计算表达式的实用程序。
  • 通过 CSSType 实现类型安全样式。
  • ‍♂️ 用于开发和测试的可选运行时版本。
  • 用于动态运行时主题的可选 API。
// styles.css.ts

import { createTheme, style } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue',
  },
  font: {
    body: 'arial',
  },
});

export const exampleStyle = style({
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: 'white',
  padding: 10,
});

vanilla-extract 的缺点包括:

  • 未积极维护:存在大量未解决的问题和 pull 请求,其中一些已经存在一年多了。

Treat

Treat 是可主题化、静态提取的 CSS-in-JS,运行时间接近于零。使用 Treat 时,样式在 .treat.js 或 .treat.ts 文件中声明。 Treat 执行 .treat.js 文件并在构建时生成所有 CSS 规则,仅打包生成的 CSS 样式。

如果使用主题功能,Treat 会在构建时生成所有 CSS 样式。 然后,当切换主题时,它会在运行时交换预先生成的类。

Treat 的特征可以总结为以下几点:

  • Treat 在构建时执行的处理文件(例如 Button.treat.js)中用 JavaScript/TypeScript 编写样式。
  • 所有 CSS 规则都是提前创建的,因此运行时非常轻量,只需要交换预先存在的类。 事实上,如果应用程序不使用主题,甚至根本不需要运行时。
  • 所有 CSS 逻辑(包括其依赖项)都不会包含在最终 Bundle 中。
  • 由于主题是通过生成多个类来实现的,因此支持旧版浏览器。
import { style } from 'treat';

export const buttonStyle = style({
  backgroundColor: '#1e4db6',
  color: '#fff',
  padding: '10px 20px',
  borderRadius: '5px',
  border: 'none',
});

然后,可以将声明的样式导入到组件中,如下例所示。

import React from 'react';
import { buttonStyle } from './Button.treat';

export const Button = () => {
  return <button className={buttonStyle}>Click me</button>;
};

Treat 的缺点包括:

  • Treat 需要 webpack,这可能很难设置
  • 缺少对前端框架的有限开箱即用支持

Goober

Goober 是一个流行的、轻量级的、零依赖包。 虽然它不是严格意义上的零运行时 CSS-in-JS 解决方案,但其内置的 extractCss 函数允许开发者提取静态 CSS 文件并将它们注入到 <head> 标记中,就像在零运行时 CSS-in- 中一样。

使用 Goober 的优点包括:

  • 捆绑包大小:Goober 是轻量级的(约 1kb)
  • 框架支持:Goober 与框架无关

该 API 的灵感来自于 emotion 的 styled 函数。意思是,您使用 tagName 调用它,它会返回该标签的 vDOM 组件。请注意,需要在使用样式函数之前运行安装程序。

import { h } from 'preact';
import { styled, setup } from 'goober';

// Should be called here, and just once
setup(h);

const Icon = styled('span')`
  display: flex;
  flex: 1;
  color: red;
`;

const Button = styled('button')`
  background: dodgerblue;
  color: white;
  border: ${Math.random()}px solid white;

  &:focus,
  &:hover {
    padding: 1em;
  }

  .otherClass {
    margin: 0;
  }

  ${Icon} {
    color: black;
  }
`;

Goober 的缺点包括:

  • 从技术上讲不是零运行时 CSS-in-JS 设置:它需要 Babel 或 webpack,这可能很难设置
  • 对其他捆绑器的支持:Goober 没有对某些捆绑器进行开箱即用的集成

参考资料

https://github.com/callstack/linaria

https://blog.logrocket.com/comparing-top-zero-runtime-css-js-libraries/

https://github.com/astroturfcss/astroturf

https://github.com/yandex/reshadow

https://github.com/vanilla-extract-css/vanilla-extract

https://github.com/seek-oss/treat

https://github.com/cristianbote/goober

https://medium.com/@arnabroyy/21-best-javascript-and-css-library-in-2023-for-web-development-e6e6af939a1e

TML 的 input 标签是构建网页表单的基石。它提供了多种多样的输入字段类型,使网页开发人员能够创建功能强大且用户友好的表单。从简单的文本输入到复杂的日期选择器,input 标签为表单交互提供了无限的可能性。在本文中,我们将全面探索 input 标签的各种应用,并揭秘一些提高用户体验的技巧。

input 标签的类型揭秘

input 标签提供了丰富的类型属性,使我们能够创建不同的输入字段。一些常见的类型包括:

  • 文本输入:type="text" 创建一个单行文本输入字段。
  • 密码输入:type="password" 创建一个隐藏用户输入的密码字段。
  • 复选框:type="checkbox" 创建一个可以选择多个选项的复选框。
  • 单选按钮:type="radio" 创建一个只能选择一个选项的单选按钮。
  • 下拉列表:type="dropdown" 或 type="select" 创建一个下拉列表供用户选择。

自定义输入字段

input 标签的真正强大之处在于它的自定义能力。你可以利用各种属性来定制输入字段,满足特定的需求。例如:

  • placeholder 属性为输入字段提供占位符文本,指导用户输入。
  • required 属性确保输入字段在提交表单前必须填写。
  • pattern 属性使用正则表达式来验证输入是否符合特定模式。
  • min 和 max 属性可以指定输入字段的数值范围。

增强用户体验

除了基本的输入字段类型,input 标签还提供了多种功能来增强用户体验:

  • 自动完成:autocomplete 属性可以启用浏览器自动完成功能,帮助用户快速填写表单。
  • 输入提示:list 属性可以将输入字段与 datalist 元素关联,为用户提供输入提示。
  • 日期和时间选择器:type="date" 和 type="time" 允许用户方便地选择日期和时间。
  • 文件上传:type="file" 让用户可以上传文件。

样式化输入字段

使用 CSS,你可以完全控制输入字段的外观和感觉,使其与网页设计完美融合。你可以改变输入字段的背景颜色、边框、字体大小和圆角等。来看一个例子:

<style>
  input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>

<input type="text" placeholder="输入你的名字">

在这个例子中,我们使用 CSS 为文本输入字段添加了内边距、边框和圆角。

结论:打造动态表单

HTML input 标签为网页开发人员提供了构建动态表单的强大工具。通过结合不同的输入类型、自定义属性和样式化技术,你可以创建出引人入胜且易于使用的表单。不断探索 input 标签的无限可能,让你的网页表单更加高效、直观和视觉吸引力!释放你的创造力,打造令人难忘的用户体验!