表单控件

01、<form>表单 表单是比较重要的HTML元素,主要作用是向服务端提交数据。比如结合表单元素input使用,通过内部的button按钮提交(type=“submit”)表单数据。 元素/属性 描述 值/备注 <form> 表单元素 action 提交表单的目标(服务端)地址url method 提交数据的方式,就是数据传输的方式 get:通过URL提交数据 url?uname=1&age=2;post,通过HTTP表单数据提交,键值格式。 target 提交数据时打开action url的方式 _self:当前窗口(默认值);_blank:新窗口 enctype 编码类型(encode type),规定了form表单在发送到服务器时候编码方式,不常用。 application/x-www-form-urlencoded:编码所有字符(默认);multipart/form-data :混合类型, 表单中有文件上传时使用;text/plain:纯文体,空格转换为 “+” 加号,不对特殊字符编码 submit() 提交表单数据,通过js代码调用 <fieldset> 表单分组,默认样式:一个框 便于表单样式管理的语义化元素 form from的id,当<fieldset>不在form中时 disabled 整个分组都不可用 <legend> 作为<fieldset>的标题,显示在框上 (legend /ˈledʒənd/ 铭文、图例) <style> #form fieldset { border: 1px solid skyblue; padding: 20px 10px; border-radius: 5px; text-align: center; margin: 10px 0px; } #form fieldset legend { font-size: 1em; border: 1px solid rgb(236, 175, 43); border-radius: 1em; padding: 3px 15px; } </style> <form id="form" action="#" target="_self" method="post"> <fieldset> <legend>登录</legend> <input type="text" name="uname" placeholder="请输入用户名" required maxlength="36"> <input type="password" name="upwd" required maxlength="12" placeholder="输入密码"> <input type="submit" value="submit-登录"> </fieldset> </form> 📢注意:<form>提交数据时参数名为表单元素的name,因此表单控件须设置name属性。 ...

September 25, 2024

语义化

HTML 语义化是什么? HTML 语义化是指使用 HTML 标签来正确地表示文档的结构和内容的方式。通过使用正确的标签和元素,可以使网页的结构更加清晰、易于理解,并且对搜索引擎和辅助技术(如屏幕阅读器)更友好。 CSS 命名的语义化指的是在给 CSS 类名、选择器和 ID 命名时,使用具有语义的名称来描述元素的用途和功能。这样的命名方式可以使代码更具可读性、可维护性和可拓展性。 为什么需要语义化? 有利于搜索引擎优化(SEO):搜索引擎依赖于网页的结构和语义来识别和理解网页内容。使用语义化的 HTML 标签可以提高网页在搜索引擎结果的排名,从而提高页面的 SEO(搜索引擎优化)。 可读性和可维护性:使用语义化的代码可以增强代码的可读性和可维护性,有利于开发人员理解和维护代码。同时,遵循 W3C 标准的团队可以遵循相同的标准,减少差异化,提高团队的效率和协调能力。 提高可访问性:语义化可以提高网页的可访问性,让页面更容易被搜索引擎、辅助技术(如屏幕阅读器)解析和理解,让更多的人能访问和理解网页。 可间接提升网页的性能:在传统的 HTML 代码中,有时候会存在一些重复的标签和属性,导致代码冗余。使用语义化的 HTML 代码,可以减少这种冗余,让代码更加简洁和高效。 面向未来的 HTML ,浏览器在未来可能提供更丰富的支持。 一些常用的语义化标签及使用场景 布局相关的语义化标签: <header> 标签:用于定义文档或一个节的头部区域。通常包含网页的标题、导航栏、logo 或其他相关信息;作用是为页面提供附加的信息或功能,以帮助用户更好地理解或导航网页内容。适用于表示网页或一个节的顶部区域。 <aside> 标签:用于定义与页面内容相关但可以被视为独立于主要内容的部分。它通常用于侧边栏、广告、导航链接、附加信息或其他类似的内容。 <section> 标签:用于表页面中的一个独立部分,具有明确的主题或目的。例如文章、评论、产品列表、产品规格及描述等。一个页面可以包含多个不同主题的 section ;并且这个标签可以包含标题、段落、列表、表格等其他HTML元素。 <nav> 标签:用于表示导航菜单,包括主导航、子导航、面包屑导航等。这个标签通常包含链接(<a> 标签)来指向其他页面或网站的部分。 <footer> 标签:用于表示文档的页脚,通常包含版权信息、联系方式、法律声明等内容。它通常出现在页面的底部,并且只应该出现一次。 <main> 标签:用于表示页面中的主要内容区域,是所有主要内容(包括头部、尾部和侧边栏)的容器。每个<main>元素都应该包含独特的内容,这部分内容在页面上是唯一的,且对整个页面来说是重要的。<main>标签不能包含在页面其它区块元素中,通常是<body>的子标签,或者是全局<div>的子标签。 <address> 标签:用于表示联系信息,通常包含地址、电子邮件地址、电话号码等。这个标签通常用于定义页面或其部分内容的作者或拥有者的联系信息。 举个栗子🌰: <body> <!-- 页面的头部 --> <header> <h1>欢迎来到我的网站</h1> <p>这是网站的标题,用于展示网站的核心信息。</p> </header> <!-- 导航菜单 --> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <!-- 主要内容区域 --> <main> <!-- 第一个内容区块 --> <section></section> <!-- 第二个内容区块 --> <section> <aside></aside> <aside></aside> </section> </main> <!-- 联系信息 --> <address> <p><strong>联系信息:</strong></p> <p>电话:(123) 456-7890</p> <p><a href="mailto:example@email.com">example@email.com</a></p> </address> <!-- 页面的底部 --> <footer> &copy; 2023 My Website. All rights reserved. | 设计:北冥有锅 </footer> </body> 文本相关语义化标签: figure 和 figcaption、del 和 ins <figure> 标签:用于处理带有某些嵌入式内容的一组图,照片,代码清单等。表示独立的内容单元,它可以包含任何与主内容相关的附加内容,包括但不限于:文本内容、媒体文件、交互式内容等。使用<figure>标签时应当注意内容的独立性和相关性,确保它与主内容是相关的,并且不依赖于主内容而存在。 <figcaption> 标签:<figcaption>标签是<figure>元素的一部分,并且它是可选的。它应该包含在<figure>标签内部,作为其第一个或最后一个子元素。一个<figure>标签中只能有一个<figcaption>标签。 <del> & <ins> 标签: <del> 用作已删除内容的标签。浏览器通常通过在已删除的文本上打一行删除线来呈现它。 <ins> 用于表示HTML文档中新添加的文本。它通常在文本上带有下划线。 <ins> 与<del> 一起使用时更有用,他们都可以使用CSS属性进行更改。 <ins> 与<del> 的特定属性: cite:URL => 它指定资源的URL,该URL解释更改或删除文本的原因。 datetime:YYYYMMDD || HH:MM:SS => 它指定更改或删除文本的日期和时间。 举个栗子🌰: ...

September 24, 2024

DOCTYPE

DOCTYPE 是一个声明,位于 HTML 文档的最顶部,指示浏览器使用哪种 HTML 或 XHTML 版本来渲染页面。它的主要作用是确保浏览器以标准模式解析文档,从而避免不同浏览器间的渲染差异。正确使用 DOCTYPE 可以提升页面的兼容性和可访问性。 <!DOCTYPE>声明应该位于HTML文档的第一行,紧接着是<html>标签。 例如,对于 HTML5 文档,你只需写: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document Title</title> </head> <body> <!-- 页面内容 --> </body> </html> 这个声明告诉浏览器该文档是一个HTML5文档。HTML5是最新的HTML标准,它包括了许多现代化的功能,如语义元素、表单控件、音频和视频等。 DOCTYPE 的作用有以下几个方面: 指定 HTML 版本:浏览器根据 DOCTYPE 的声明来确定使用哪个 HTML 版本来渲染页面,从而保证页面在不同的浏览器上显示一致性。 触发标准模式:在 HTML 中,如果省略了 DOCTYPE 声明,浏览器会进入混杂模式(Quirks mode),这种模式下浏览器的渲染方式与早期的浏览器相同,可能导致页面的显示出现不可预测的错误。而指定了 DOCTYPE 声明,则会触发标准模式(Standards mode),使得浏览器按照 HTML 规范的要求进行页面渲染,从而保证页面的稳定性和可靠性。 供浏览器和开发人员参考:DOCTYPE 声明还包含了有关 HTML 文档的元信息,例如所使用的 DTD(文档类型定义),以及其他的元数据信息,这些信息可以供浏览器和开发人员参考,帮助开发人员更好地了解和掌握 HTML 语言的特点和规范。 提高网页加载速度:指定 DOCTYPE 声明可以帮助浏览器更快地加载网页,因为浏览器知道要使用哪种渲染模式,从而更快地解析 HTML 文档。 避免代码错误:指定 DOCTYPE 声明可以帮助开发人员在编写 HTML 代码时遵循标准,避免一些常见的代码错误,例如忘记关闭标签或者使用非法的属性和元素等等。 除了HTML5的<!DOCTYPE>声明之外,还有一些其他版本的HTML和XHTML文档类型声明。这里是一些例子: 1. HTML 4.01 Strict: ...

September 24, 2024

HTML 5 新特性

HTML5 新特性 语义标签 增强型表单 视频和音频 Canvas绘图 SVG绘图 地理定位 拖拽API WebWorker WebStorage WebSocket 语义标签 语义化标签使得页面的内容结构化,可以使开发者更方便清晰地构建页面的布局 标签 描述 <header> 定义了文档的头部区域 <footer> 定义了文档的尾部区域 <nav> 定义文档的导航 <section> 定义文档中的书 <acticle> 定义页面独立的内容区域 <aside> 定义页面侧边栏内容 <details> 定义用户可以看到或隐藏的额外细节 <summary> 标签包含details元素的标题 <dialog> 定义对话框 <figure> 定义自包含内容,如图表 <main> 定义文档主内容 增强型表单 HTML5新增input输入特性,改善更好的输入控制和验证 输入类型 描述 color 主要用于选取颜色 date 选取日期 datetime 选取日期(UTC时间) datetime-local 选取日期(无时区) month 选择一个月份 week 选择周和年 time 选择一个时间 email 包含email地址的输入域 number 数值的输入域 url url地址的输入域 tel 定义输入电话号码的字段 search 用于搜索域 range 一个范围内数字值的输入域 HTML5也新增了五个表单元素 ...

September 24, 2024

HTML 面试题

共 77 道 HTML 面试题。答案默认折叠,便于先自行作答。 1. SPA和MPA的区别? 难度:1 · 类型:QA 题目要点 SPA 通过前端路由在单一 HTML 中完成页面切换,交互流畅但首屏和 SEO 成本较高;MPA 每次导航请求新页面,SEO 友好且隔离性强,但交互体验有限;两者本质差异在于前后端渲染与路由职责的划分;现代项目常通过 SSR、SSG 等方式在两种模式之间折中。 参考答案 SPA 和 MPA 的区别,表面看是“页面跳转方式不同”,本质上是前端与服务器在渲染职责、路由控制以及资源加载策略上的分工差异。理解这一点,才能在具体业务中做出合理选择。 SPA(Single Page Application)只有一个 HTML 入口,首屏加载时会拉取完整的 JavaScript 应用骨架,之后的页面切换通过前端路由完成。URL 的变化并不会触发浏览器重新请求文档,而是由前端框架根据路由状态切换视图并复用已有资源。这种模式的优势在于页面切换流畅、状态可以在客户端长期保留,复杂交互体验更接近原生应用,非常适合后台系统、强交互工具型产品。但代价也同样明显:首屏资源压力大,SEO 先天不足,对 JS 执行和异常处理的依赖极高,一旦主 bundle 出现问题,整个应用都无法正常工作。 MPA(Multi Page Application)则以“页面”为核心单元。每一次导航都会向服务器请求一个新的 HTML 文档,路由和渲染主要由服务端控制。页面之间天然隔离,资源和状态会随页面刷新而重置。这种模式的优势在于首屏直观、SEO 友好、容错性强,适合内容型站点、营销页和对搜索引擎依赖较高的业务场景。但在交互复杂度上,MPA 往往需要付出更多成本,例如重复加载公共资源、跨页面状态共享困难,整体体验也更接近传统 Web。 从工程角度看,SPA 和 MPA 的差异还体现在构建和部署方式上。SPA 更强调前端工程化和运行时能力,构建目标是一个可长期运行的客户端应用;MPA 更强调页面级拆分和服务端模板渲染,前端更多是增强层而非控制中心。在现代实践中,两者并非对立关系,常见的折中方案包括 SSR、SSG 以及“多入口 SPA”,试图在交互体验和首屏性能、SEO 之间取得平衡。 因此,选择 SPA 还是 MPA,并不存在绝对优劣,关键在于业务目标:是以复杂交互和状态管理为核心,还是以内容分发和搜索可见性为核心。 2. 常见的H5标签有哪些 ,你是怎么用的 难度:1 · 类型:QA 题目要点 常见 H5 标签包括结构语义标签、文本语义标签、表单标签和媒体标签;实际使用中优先考虑语义表达和可访问性,而非样式;充分利用表单和媒体标签的原生能力以减少 JS 复杂度;canvas 与 svg 需根据场景选择;合理使用语义化标签能显著提升页面质量和长期可维护性。 ...