首页 前端知识 10个好用的 HTML5 特性,字节跳动 阿里 华为 小米等10家大厂面试真题

10个好用的 HTML5 特性,字节跳动 阿里 华为 小米等10家大厂面试真题

2024-05-03 18:05:53 前端知识 前端哥 519 230 我要收藏

运行结果:

技巧

在 GitHub Readme 中使用它来显示按需的详细信息。 这是一个示例https://github.com/atapas/notifyme#properties

🔥 内容可编辑


contenteditable是可以在元素上设置以使内容可编辑的属性。 它适用于DIVPUL等元素。

注意,当在元素上没有设置contenteditable属性时,它将从其父元素继承该属性。

Shoppping List(Content Editable)

    • 1. Milk
    • 2. Bread
    • 3. Honey
    • 运行结果:

      技巧

      可以让spandiv标签可编辑,并且可以使用css样式向其添加任何丰富的内容。 这将比使用输入字段处理它更好。 试试看!

      🔥 Map


      HTML <map> 属性 与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域)。可点击的区域可以是这些形状中的任何一个,矩形,圆形或多边形区域。如果不指定任何形状,则会考虑整个图像。

      事例:

      Circus

      运行结果:

      技巧

      map有其自身的缺点,但是你可以将其用于视觉演示。

      🔥 mark 标签


      Did you know, you can "Highlight something interesting" just with an HTML tag?

      运行结果:

      技巧

      可以使用css更改高亮颜色:

      mark {

      background-color: green;

      color: #FFFFFF;

      }

      🔥 data-* 属性


      data-*属性用于存储页面或应用程序专用的自定义数据。 可以在 JavaScript 代码中使用存储的数据来创建更多的用户体验。

      data-*属性由两部分组成

      • 属性名不能包含任何大写字母,并且必须在前缀“data-”之后至少有一个字符

      • 属性值可以是任何字符串

      事例:

      Know data attribute

      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”

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

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

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

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

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

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

      总结

      阿里十分注重你对源码的理解,对你所学,所用东西的理解,对项目的理解。

      最新阿里蚂蚁金服四面(已拿offer)Java技术面经总结

      最新阿里蚂蚁金服四面(已拿offer)Java技术面经总结

      CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

      如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
      [外链图片转存中…(img-wb0wWXQu-1712121214561)]

      总结

      阿里十分注重你对源码的理解,对你所学,所用东西的理解,对项目的理解。

      最新阿里蚂蚁金服四面(已拿offer)Java技术面经总结

      最新阿里蚂蚁金服四面(已拿offer)Java技术面经总结

      CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

      最新阿里蚂蚁金服四面(已拿offer)Java技术面经总结

    转载请注明出处或者链接地址:https://www.qianduange.cn//article/6806.html
    标签
    评论
    会员中心 联系我 留言建议 回顶部
    复制成功!