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

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>

    定义命令行为。

原文地址:https://www.cnblogs.com/Billypanda/p/8847720.html

时间: 2024-10-13 22:57:54

前端面试基础-html篇之H5新特性的相关文章

Java面试基础 -- Git篇

1.Git和SVN有什么区别? Git SVN Git是一个分布式的版本控制工具 SVN 是集中版本控制工具 它属于第3代版本控制工具 它属于第2代版本控制工具 客户端可以在其本地系统上克隆整个存储库 版本历史记录存储在服务器端存储库中 即使离线也可以提交 只允许在线提交 push/pull 操作更快 Push/pull 操作较慢 工程可以用 commit 自动共享 没有任何东西自动共享 2.什么是Git? Git 是分布式版本控制系统,可以跟踪文件的更改,并允许你恢复到任何特定版本的更改,优点

H5 新特性之全局属性一

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<!DOCTYPE html>--><!--<html lang="en">--><!--<he

H5新特性之语义化标签

二月底,疫情仍未过去,在家逆战学习. 说道H5新特性的语义化标签,就不得不先简单说一下它的发展史,兼容和一些语法问题. H5在经过多达近百项的修改,包括HTML和XHTML的标签,相关的API,Canvas等,性 能得到进一步提升. H5仅仅是新增添了一些内容并优化了它们,而不是全盘否定之前的旧的内容.支持Html5 的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari, Opera等以及一些国内浏览器. 对于H5语法变化不大,文件的扩展名是不变

前端面试之ES6篇(高产似母猪)

这也是前端面试经常询问的问题,经常问你es6出现了哪些新的特性,平时又使用过那些.在编写此教程的时候,第一句话往往就是面试常常问到的地方,然后后面就是他的详细解释,面试要求的内容我会用*标记出来.写技术文档是真的累啊,虽然是看别人的文档,但是你得看很多,而且还得自己总结啊.所以说要是觉得对你有用还是帮我点个star吧https://github.com/skychenbo 1.箭头函数需要注意的地方 2.ES6 let.const 3.set数据结构 4.promise对象的用法,手写一个pro

前端面试集锦——CSS篇

三.CSS篇 3.1.谈谈你对CSS布局的理解 3.2.请列举几种可以清除浮动的方法(至少两种) 浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动.正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷). a. 添加额外标签,例如<div ></div> b. 使用br标签和其自身的html属性,例如<br clear="all" /> c. 父元素设置 overflow:hidden:在IE6中还需要触发hasLayou

h5新特性

  CSDN博客 Gane_Cheng HTML5新特性浅谈 发表于2016/10/17 21:25:58  7809人阅读 分类: 前端 转载请注明出处: http://blog.csdn.net/gane_cheng/article/details/52819118 http://www.ganecheng.tech/blog/52819118.html (浏览效果更好) 2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代

h5新特性 File API详解

之前一直觉得h5的新特性就是一些新标签呢,直到想研究一下图片上传预览的原理,才发现还是有好多新的api的,只是不兼容ie低版本,挺可惜的, File API在表单中文件输入字段基础上,又添加了一些直接访问文件信息的接口.H5在DOM中为文件输入元素添加了一个files集合,在通过表单元素选择了一个或多个文件时,files集合中将包含一组file对象,每个file对象对应一个文件,每个file对象都有下列只读属性: 1.name:本地文件系统的文件名: 2.size:文件的字节大小: 3.type

大数据技术之_04_Hadoop学习_02_HDFS_DataNode(面试开发重点)+HDFS 2.X新特性

第6章 DataNode(面试开发重点)6.1 DataNode工作机制6.2 数据完整性6.3 掉线时限参数设置6.4 服役新数据节点6.5 退役旧数据节点6.5.1 添加白名单6.5.2 黑名单退役6.6 Datanode多目录配置第7章 HDFS 2.X新特性7.1 集群间数据拷贝7.2 小文件存档7.3 回收站7.4 快照管理 第6章 DataNode(面试开发重点) 6.1 DataNode工作机制 DataNode工作机制,如下图所示. 1)一个数据块在DataNode上以文件形式存

一次电话Java面试的问题总结(JDK8新特性、哈希冲突、HashMap原理、线程安全、Linux查询命令、Hadoop节点)

面试涉及问题含有: Java JDK8新特性 集合(哈希冲突.HashMap的原理.自动排序的集合TreeSet) 多线程安全问题 String和StringBuffer JVM 原理.运行流程.内部结构 Linux 查询含有某字符串内容的命令grep 查询进程.GC状态.杀死进程 Hadoop五种节点介绍 -----------------------------------------------------------------------------------------------