前端面试之HTML5的新变化

H5新增语义化标签

头部标签

<header> :头部标签
<nav> :导航标签
<article> :内容标签
<section> :块级标签
<aside>:侧边栏标签
<footer> :尾部标签

H5新增多媒体标签

音频:<audio>
视频:<video>

属性



描述

autoplay

autoplay

如果出现该属性,则音频在就绪后马上播放。

controls

controls

如果出现该属性,则向用户显示控件,比如播放按钮。

0

loop

loop

如果出现该属性,则每当音频结束时重新开始播放。

src

url

要播放的音频的URL。

属性



描述

autoplay

autoplay

视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)

controls

controls

向用户显示播放控件

width

pixels(像素)

设置播放器宽度

height

pixels(像素)

设置播放器高度

loop

loop

播放完是否继续播放该视频,循环播放

preload

auto(预先加载视频)

规定是否预加载视频(如果有了autoplay就忽略该属性)

none (不应加载视频)

src

url

视频url地址

poster

lmgurl

加载等待的画面图片

muted

muted

静音播放

H5新增input表单、表单属性

属性值

说明

type="email"

限制用户输入必须为Email类型

type="url"

限制用户输入必须为URL类型

type="date"

限制用户输入必须为日期类型

type="time"

限制用户输入必须为时间类型

type="month"

限制用户输入必须为月类型

type="week"

限制用户输入必须为周类型

type="number"

限制用户输入必须为数字类型

type="tel"

手机号码

type="search"

搜索框

type="color"

生成一个颜色选择表单

属性

说明

required

required

表单拥有该属性表示其内容不能为空,必填



placeholder

提示文本

表单的提示信息,存在默认值将不显示

autofocus

autofocus

自动聚焦属性,页面加载完成自动聚焦到指定表单

当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。默认已经打开,如autocomplete=" on “

autocomplete

off / on

关闭autocomplete =" off“

-需要放在表单内同时加上name属性-同时成功提交

multiple

multiple

可以多选文件提交

前端面试之HTML5的新变化的更多相关文章

  1. 2019前端面试之html5

    html5新增特性 语义化标签 表单新特性 视频和音频canva画布 svg画图 地理位置 为鼠标提供的拖放api webwroker storage websocker 常见块级标签 div,p,h ...

  2. HTML5的新变化

    1.新的html5文件类型,仅需申明在html的第一行,即 <!DOCTYPE html> 2.图形元素 figure ,将<figure>与<figcaption> ...

  3. (近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

    作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变, ...

  4. 学习前端第一天心得体会(初步了解HTML5的新特性以及和HTML的区别)

    一.HTML5是什么? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提 ...

  5. 史上前端面试最全知识点(附答案)---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  6. 前端面试总结 (转 0C°)

    前端面试总结 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五 ...

  7. Web前端面试宝典(最新)

    第一部分:HTML问答题   1.简述一下你对HTML语义化的理解? 用正确的标签做正确的事情. html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析;即使在没有样式CSS情况下也 ...

  8. JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

  9. 2020大厂web前端面试常见问题总结

    本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题.通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者. 1.web前端项目的结构是怎样的?文件有哪些命名规范? 项 ...

随机推荐

  1. MySQL如何优雅的删除大表

    前言 删除表,大家下意识想到的命令可能是直接使用DROP TABLE "表名",这是初生牛犊的做法,因为当要删除的表达空间到几十G,甚至是几百G的表时候.这样一条命令下去,MySQ ...

  2. Spring-步入Spring旅途

    一.Spring前言 讲Spring之前先写段代码,体会一下Java创建对象的方式,这块你理解了对后面有好处! 1.原始时代-new对象 直接new创建对象,代码如下: //User.java pac ...

  3. List集合转JSONObject

    以前写代码喜欢用Map拼接返回去给前端,这样得到的也是一个标准的JSON,今天先不说Map的优缺点,我们就来说说JSONObject的使用,我用的是阿里的fastjson,先上代码,当我们需要嵌套代码 ...

  4. easyui获取table列表中所有数据组装成json格式发送到后台

    jsp代码 var rows =$('#findAllRolestable').datagrid('getSelections'); var result = JSON.stringify(rows) ...

  5. [LeetCode]实现数学计算

    乘方 思路是:pow(x,n) = pow(x,n/2)*pow(x,n-n/2) 递归实现 public double myPow(double x, int n) { if (n==0) retu ...

  6. [leetcode72]166. Fraction to Recurring Decimal手动实现除法

    让人火大的一道题,特殊情况很多 不过也学到了: java中int类型的最大值的绝对值比最小值的绝对值小1 int最小值的绝对值还是负的,除以-1也是 这种时候最好转为long类型进行处理 long n ...

  7. TurtleBot3使用课程-第二节b(北京智能佳)

    目录 1.导航 2 1.1 运行导航节点 3 1.1.1 [远程PC]运行roscore 3 1.1.2 [turtlebot3 SBC]运行提出turtlebot3 3 1.1.3[远程PC]运行导 ...

  8. win8.1下jdk的安装和环境变量的配置 eclipse的安装和汉化

    1.首先下载jdk安装包,安装的时候会有两个文件安装,一个是jdk一个是jre建议两个文件不要安装在一个目录下 2.安装jdk后面就是配置环境变量,path和classpath,path要在用户变量中 ...

  9. [从源码学设计]蚂蚁金服SOFARegistry之服务上线

    [从源码学设计]蚂蚁金服SOFARegistry之服务上线 目录 [从源码学设计]蚂蚁金服SOFARegistry之服务上线 0x00 摘要 0x01 业务领域 1.1 应用场景 1.1.1 服务发布 ...

  10. linux based bottlerocket-os

    linux based bottlerocket-os 概要 aws开源,专注与运行容器的linux os 参看 https://github.com/bottlerocket-os