首页 前端知识 10个好用的 HTML5 特性,2024年最新web前端开发资料

10个好用的 HTML5 特性,2024年最新web前端开发资料

2024-04-15 09:04:34 前端知识 前端哥 106 325 我要收藏

class=“data-attribute”

id=“data-attr”

data-custom-attr=“You are just Awesome!”>

I have a hidden secret!

Reveal

在 JS 中:

function reveal() {

let dataDiv = document.getElementById(‘data-attr’);

let value = dataDiv.dataset[‘customAttr’];

document.getElementById(‘msg’).innerHTML = <mark>${value}</mark>;

}

**注意:**要在 JS 中读取这些属性的值,可以通过getAttribute('data-custom-attr')g来获取,但是标准方式是用dataset来获取。

技巧

你可以使用它在页面中存储一些数据,然后使用REST调用将其传递给服务器。

🔥 output 标签


<output> 标签表示计算或用户操作的结果。

=

技巧

如果要在客户端 JS 中执行任何计算,并且希望结果反映在页面上,可以使用<output>,这样就无需使用getElementById()获取元素的额外步骤。

🔥 datalist


<datalist>元素包含了一组<option>元素,这些元素表示其它表单控件可选值.

事例:

技巧

dataList的表现很像是一个select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么

select标签创建了一个菜单。菜单里的选项通option标签指定。一个select元素内部,必须包含一个option元素,

总的来说就是,它们都可以显示出一个下拉表单框,但是select标签只能在它提供的选项中选择,而datalist不仅可以让你选择,还可以让你自己输入其它的选项。

🔥 Range(Slider)


range是一种 input 类型,给定一个滑块类型的范围选择器。

<input

type=“range”

name=“range”

min=“0”

max=“100”

step=“1”

value=“”

οnchange=“changeValue(event)”/>

🔥 meter


<meter>元素用来显示已知范围的标量值或者分数值。

2 out of 10

60%

技巧

不要将<meter>用作进度条来使用,进度条对应的<Progress> 标签。

32%

🔥 Inputs


对于input标签类型,最常见的有 textpassword 等等,下面列举一些比较少见的语法。

required

要求输入字段必填。

autofocus

文本输入字段被设置为当页面加载时获得焦点:

用正则表达式验证

可以使用regex指定一个模式来验证输入。

<input type=“password”

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
img
img
img
img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
img

总结:

  • 函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;

  • 它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;

我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势

理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;

所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
img

,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;

我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势

理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;

所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-b10kv3Tk-1712671493780)]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4945.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!