html重点知识总结

html重点知识

一直在网上看过许多不同的前端资料,但是总觉的只是单单的阅读和记忆不能够真正的加深自己的知识理解,所以开始尝试自己在不查看其他一切资料的情况下对自己了解的知识做一个总结(顺序或许有点乱),如果之后发现有不足再来补充,我相信输出才是最好的输入!!!

H5新增内容

语义化标签:

  • h5新增了一系列语义化标签,他们本质上和一般的div标签没有区别,但是在语义上有不同。
    • header:专门指页面的顶部区域
    • footer:专门指页面的底部区域
    • sidebar:指页面的侧边
    • nav:指页面的导航栏
    • article:指文章的内容
    • section:指文档的一部分
  • 语义化的优点:
    • 对机器友好,带有语义的文字表现力丰富,更适合搜索引擎的爬虫爬取有效信息,有利于 SEO。除此之外,语义类还支持读屏软件,根据文章可以自动生成目录;
    • 对开发者友好,使用语义类标签增强了可读性,结构更加清晰,开发者能清晰的看出网页的结构,便于团队的开发与维护。

媒体化标签:

  • 音频标签audio
  • 视频标签video

表单标签:

  • form标签:用于用户要向服务器提交内容
  • 有很多不同的表单类型:类似于email,data,color,number。
  • 表单属性:用于控制用户上传东西的限制,例如require表示该元素必须提交,placeholder表示一些用于提示的填充词

进度条(progress)&度量器

  • h5新增的用于展示进度的标签
  • value:规定当前度量值
  • max:表示当前任务的总进度

DOM查询操作

doucment.querySelect()
doucment.querySelectAll()
//二者都是用来通过标签或类来实现DOM元素的查找

Web存储操作

  • localStorge:本地存储,不会因浏览器关闭而删除
  • sessionStorge:会话存储,会因浏览器关闭而删除
  • 二者的存储容量都不会太大,大约5MB左右

Drag api

  • 用来处理拖动相关(比如实现文件拖动上传)
  • dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。
  • darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。
  • dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。
  • dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。
  • dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。
  • drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
  • dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。

从上至下对html元素进行一些简单介绍

一个完整的html页面



    
    
    基础 HTML 页面
    
    
                    
                    

你可能感兴趣的:(html,前端)