HTML5新特性,老生常谈——前端面试常见问题

找工作面试的时候有公司技术人员会问html5新特性,那这里就再复习一遍

1、新的文档类型

<!DOCTYPE html>

2、脚本和链接无需type

<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/Angular.js"></script>

3、语义化的Header 和Footer

这里通俗说下什么叫做语义化,就是:明白每个标签的用途即直观的人是标签和属性的用途和作用。

好处:

  • 去掉样式能让页面结构呈现清晰
  • 屏幕阅读器会按标记“读”你的网页
  • 有益于SEO
  • 便于团队开发和维护

Html5新增元素表

标签 含义 与html4对照
<article> 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容 HTML5:<article></article> HTML4:<div></div>
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 HTML5: <section></section> HTML4: <div></div>
<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。 HTML5:<aside>Aside 的内容是独立的内容,但应与文档内容相关。</aside> HTML4:<div>Aside 的内容是独立的内容,但应与文档内容相关。</div>
<header> 标签定义 section 或 document 的页眉。 HTML5: <header></header> HTML4: <div></div>
<footer> 标签定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。 HTML5: <footer></footer> HTML4: <div></div>
<hgroup> 标签用于对网页或区段(section)的标题进行组合。 HTML5: <hgroup></hgroup> HTML4: <div></div>
<nav> 标签定义导航链接的部分 HTML5: <nav></nav> HTML4:<ul></ul>
<canvas> 标签定义图形,比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。 HTML5:<canvas id="myCanvas" width="200" height="200"></canvas> HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
<video> 标签定义视频,比如电影片段或其他视频流。 HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video> HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>
<audio> 标签定义声音,比如音乐或其他音频流。 HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio> HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
<embed> 标签定义嵌入的内容,比如插件。 HTML5: <embed src="horse.wav" /> HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object>
<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。 HTML5: <source> HTML4: <param>
<datalist> 标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。 HTML5: <datalist></datalist> HTML4: none
<details> 标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。与 <legend> 一起使用,来制作 detail 的标题。该标题对用户是可见的,当在其上点击时可打开或关闭 detail。 HTML5: <details></details> HTML4: <dl ></dl>
<summary> 标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。 HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details> HTML4: none
<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。 HTML5: <figure><figcaption>PRC</figcaption><p>The People‘s Republic of China was born in 1949...</p></figure> HTML4: <dl><H3>PRC</H3><p>The People‘s Republic of China was born in 1949...</p></dl>
<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。 HTML5: <figure><figcaption>PRC</figcaption></figure> HTML4: none
<mark> 主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。 HTML5: <mark></mark> HTML4: <span></span
<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。 HTML5: <meter></meter> HTML4: none
<output> 标签定义不同类型的输出,比如脚本的输出。 HTML5: <output></output> HTML4: <span></span>
<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。 HTML5: <progress></progress> HTML4: none
<time> 标签定义日期或时间,或者两者。 HTML5: <time></time> HTML4: <span></span>
<keygen> 标签用于对网页或区段(section)的标题进行组合 HTML5: <keygen> HTML4: none
<command> 标签定义命令按钮,比如单选按钮、复选框或按钮。 HTML5: <command onclick=cut()" label="cut"> HTML4: none

其中:

a、标记元素 <mark>被当作高亮标签,被这个标签修饰的字符串应当和用户当前的行动有关,比如,当我在某博客搜素“hello word”时,可以利用javaScript将出现的词组用<mark>修饰一下。

b、当图片和文字存在联系时,可以用<figure>、<figcaption>结合起来,可以语义化地将注释和相应的图片联系起来。

1 <figure>
2 <img src="/image" alt="About image" />
3 <figcaption>
4 <p>
5 This is an image of something interesting.
6 </p>
7 </figcaption>
8 </figure>

c、重新定义<small>,用来定义小字

4、表单文本框相关的属性

a、input占位符 placeholder,用来提前设置一些信息,当用户开始输入时,文本框中的文字消失。

b、input必要属性requried,或者required="required",指定输入是否必需。

c、autofocus属性,如果一个输入应该是聚焦,默认情况下,可以利用自动叫属性

d、pattern引用正则表达式

<input type="text" name="someInput" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" required autofocus>

5、音频视频相关标签

a、<audio>音频,当使用<audio>元素时请记得包含两种音频格式。FireFox想要.ogg格式的文件,而Webkit浏览器则需要.mp3格式的。和往常一样,IE是不支持的,且Opera 10及以下版本只支持.wav格式。另外可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.
    </a>
    你的浏览器不支持audio标签
</audio>

b、<video>视频。然而,和<audio>类似,HTML5中并没有指定视频解码器,它留给了浏览器来决定。虽然Safari和Internet Explorer9可以支持H.264格式的视频,Firefox和Opera是坚持开源Theora 和Vorbis格式。因此,指定HTML5的视频时,你必须提供这两种格式。在<video>元素中加上preload="preload"或者只是preload,当用户访问页面时这一属性使得视频得以预载。如果你使用过上面的每一个提到的技术点,你可能已经注意到,使用上面的代码,视频仅仅显示的是张图片,没有控制条。为了渲染出播放控制条,我们必须在video元素内指定controls属性。

<video preload controls>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs=‘vorbis,theora‘" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; ‘codecs=‘avc1.42E01E, mp4a.40.2‘" />
    <p> Your browser is old.
        <a href="cohagenPhoneCall.mp4">Download this video instead.</a>
    </p>
</video>
时间: 2024-10-12 22:22:22

HTML5新特性,老生常谈——前端面试常见问题的相关文章

HTML5新特性data_*自定义属性使用

HTML5 新特性data_*自定义属性使用HTML5规范里增加了一个自定义data属性. 这个自定义data属性的用法非常的简单,就是你可以往 HTML 标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. 使用 data-* 可以解决自定义属性混乱无管理的现状.

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据.它是通过一个网络浏览器作为客户端数据库实现的,它允许网页以键值对的形式来存储数据. 它具有以下特征: 每个原始网站/域最多可存储 5MB 的数据. 你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问. 就像 cookies,你可以选择将保持数据(维持),即使你已

Html5新特性 &lt;canvas&gt;画板画直线

 下面例子为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

Html5新特性 &amp;lt;canvas&amp;gt;画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

HTML5新特性新增功能

HTML5 现如今已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 如:绘图canvas:用于媒介回放的video和audio元素:本地存储localStorage;语义化元素:表单控件等等新增的功能,都是HTML5新特性. 下面列举HTML5新特性详细说明: 一.新的文档类型  (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

HTML5新特性有哪些

HTML5新特性有哪些: 1.新的文档类型 2.脚本和链接无需 3.语义Header和Footer The Semantic Header and Footer 4.Hgroup 10.Autofocus 属性 Autofocus Attribute 12.Video 支持 Video Support 13.视频预载 Preload attribute in Videos element 14.显示控制条 15.正规表达式 5.标记元素 6.图形元素 8.占位符 9.必要属性

HTML5新特性小结

HTML5 新特性 新的DocType: <!DOCTYPE html> 不需要声明文档类型: 脚本和链接不需要type属性,如 lingk, script; 语义化标签,如:header, footer, hgroup, mark, figure, small, article, 属性及校验, 新的属性,如:placeholder, required, autofocus, pattern, autocomplete, data, contenteditable 自动校验,如: requir

HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " stroke="" stroke-width=""> </polyline> #points 一组坐标点 #渐变特效对象:一种特效样式(从一种颜色慢慢过滤另一种颜色效果) #渐变特效对象:(1)创建渐变对象 <defs> (2)在指定图形应用

前端开发攻城师绝对不可忽视的五个HTML5新特性

本文固定链接:http://www.verydemo.com/demo_c101_i62930.html 日期:2013-7-2??来源:GBin1.com HTML5已经火了一段时间了,相信作为web相关开发project师,肯定或多或少的了解和尝试过一些HTML5的特性和编程. 还记得曾经我们介绍过的HTML5新标签. 作为未来前端开发技术的潮流和风向标.HTML5绝对不容忽视. 在今天这篇技术分享文章中.我们将介绍几个HTML5的重要特性.能够帮助你提高整个web应用的使用体验和开发效率,