前端面试基础-html篇之H5新特性

迭代潮涌
• 阅读 136

h5的新特性(目前个人所了解)如下 语义化标签
表单新特性
视频(video)和音频(audio)
canvas画布
svg绘图
地理定位
为鼠标提供的拖放API
webworker
(重点)Storage
(重点)Websocket
  HTML语义化是什么? 语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。
为什么要语义化? 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。

语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

方便其他设备的解析

便于团队开发和维护

 
  1、<section></section>
    定义文档中的主体部分的节、段。
  2、<article></article>
    一个特殊的section标签,比section有更明确的语义。定义来自外部的一个独立的、完整的内容块,例如什么论坛的文章,博客的文本。。。
  3、<aside></aside>
    用来装载页面中非正文的内容,独立于其他模块。例如广告、成组的链接、侧边栏。。。
  4、<header></header>
    定义文档、页面的页眉。通常是一些引导和导航信息,不局限于整个页面头部,也可以用在内容里。
  5、<footer></footer>
    定义了文档、页面的页脚,和header类似。
  6、<nav></nav>
    定义了一个链接组组成的导航部分,其中的链接可以链接到其他网页或者当前页面的其他部分。
  7、<hgroup></hgroup>
    用于对网页或区段(section)的标题元素(h1~h6)进行组合。
  8、<figure></figure>
    用于对元素进行组合。
  9、<figcaption></figcaption>
    为figure元素加标题。一般放在figure第一个子元素或者最后一个。
  10、<details></details>
    定义元素的细节,用户可以点击查看或者隐藏。
  11、<summary></summary>
    和details连用,用来包含details的标题。
  12、<canvas></canvas>
    用来进行canvas绘图。
  13、<video></video>
    定义视频。
  14、<audio></audio>
    定义音频。
  15、<embed></embed>
    定义嵌入网页的内容。比如插件。
  16、<source></source>
    该标签为媒介元素(比如video、audio)定义媒介元素。
  17、<datalist id='dl'></datalist>
    定义可选数据的列表,与input配合使用(<input list='dl'>)可制作输入值的下拉列表。
  18、<mark></mark>
    在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。
  19、<meter [min/max/low/high/optimum/value]></meter>
    度量衡,用红黄绿表示出一个数值所在范围。
  20、<output></output>
    定义不同类型的输出,样式与span无异。
  21、<progress></progress>
    进度条,运行中的进度。
  22、<time></time>
    定义日期或者时间。
  23、<keygen></keygen>
    定义加密内容。
  24、<command></command>
    定义命令行为。
转载于猿2048:➭《前端面试基础-html篇之H5新特性》

点赞
收藏
评论区
推荐文章
冴羽 冴羽
2年前
聊聊 npm 的语义化版本(Semver)
前言现在我们要开发一个项目,我们都知道为了方便项目管理,要写一个版本号,那开发的时候初始的版本号是多少呢?是1.0.0还是0.0.1开始?如果一个版本号为X.Y.Z,什么时候是X应该加1,什么时候Y应该加1,什么时候Z应该加1,加1遵循十进制吗?比如1.0.9的下一个版本应该是1.1.0吗?我们经常看到一些项目的版
添砖java的啾 添砖java的啾
3年前
distinct效率更高还是group by效率更高?
目录00结论01distinct的使用02groupby的使用03distinct和groupby原理04推荐groupby的原因00结论先说大致的结论(完整结论在文末):在语义相同,有索引的情况下groupby和distinct都能使用索引,效率相同。在语义相同,无索引的情况下:distinct效率高于groupby。原因是di
Wesley13 Wesley13
3年前
SEO和标签的语义化
做网站,我们都是需要考虑到标签语义化来提高SEO搜索排名的,那么我们就先来了解一下:w3c标准:html结构css样式js行为遵循的原则:先确定语义的HTML,再选合适的CSS。语义是否良好:当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。作用:语义化的网页的好处,最主要的就是对搜索引擎友好,有了
菜园前端 菜园前端
2年前
什么是HTML语义化?
原文链接:什么是语义化?简单了来说就是,当网页去掉CSS样式时,页面能呈现出来清晰的结构。语义化的核心作用:提升代码可读性,便于团队开发和维护。以下是语义化的HTML标签结构(部分语义化标签):假设我要编写一个这样的布局不使用语义化是这样的使用语义化是这样
Stella981 Stella981
3年前
LocalDateTime计算时间差
<divclass"htmledit\_views"id"content\_views"<pLocalDateTime为java8的新特性之一<br</p<p<br</p<pLocalDateTime.now()获得当前时间<br</p<p</p<h5</h5<divstyle"marginleft
Wesley13 Wesley13
3年前
HTML5的一些新特性之增强型表单
     众所周知,HTML5增加了一些新特性,作为一名小白,我也紧跟步伐,接下来几天将会学习HTML5的以下的一些新特性(可能会有多或少,会不定时更新和编辑):(1)增强型表单;(2)视频和音频(重点);(3)Canvas绘图技术;(4)SVG绘图技术;(5)拖放API;(6)地理定位(重点)熟练掌握; (7)WebWorker;(8)W
Stella981 Stella981
3年前
HTML5新标签与javaScript新方法
HTML5(0106)1、文档声明<!DOCTYPEhtml2、字符编码设置<metacharset"UTF8"3、验证(http://validator.w3.org/)HTML5新增的语义化标签
Stella981 Stella981
3年前
HTML5 audio 如何实现播放多个MP3音频
<audio标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流。用的比较多音频格式是.mp3。<audio标签常用属性如下表属性值描述autoplayautoplay添加该属性后,音频会自动播放controlscontrols设置后,显示控件,如播放按钮、音量looploop添加
Wesley13 Wesley13
3年前
mysql中的几种判断语句
在使用mysql过程中,经常会有根据某个字段的不同值显示语义化的名称的需求,例如一张用户表,有个sex字段存放的是用户性别,一般不会直接存男,女,未知这种字符串,而是存的0,1,2这种整型,整型的好处是查询效率高于字符串,查询出结果要显示成男,女这种,通常做法是查询出结果,在结果里if判断再赋值成字符串。其实mysql提供了类似判断的语法可以直接查出语义化的
Wesley13 Wesley13
3年前
HTML5标签(语义化)
HTML语义化是什么?HTML语义化是指根据内容的结构化,选择合适的标签。举个例子:之前所有的都用div,span等标签实现页面结构,而这些标签都没有实际的意义,而新的HTML5标签<header\<footer<nav<section<article<aside等这些标签的出现与使用,让人一目了然的知道页面结构是