WebKit之HTML网页和结构
应届前端面试题
应届前端面试题1. 题目：请简述HTML5的新特性有哪些？- 答案：HTML5的新特性包括语义化标签（如<header>、<footer>等），可以让代码结构更清晰；音频和视频的原生支持，不需要借助Flash等插件就可以播放多媒体内容；画布（canvas）元素，可以通过JavaScript绘制图形等；本地存储（localStorage和sessionStorage），方便在浏览器端存储数据；还有Web Workers，用于在后台运行脚本而不影响页面的响应等。
- 解析：就好比你盖房子，语义化标签就像是给房子各个部分起了明确的名字，像客厅（<header>）、卧室（<section>）之类的，让别人一看就知道结构。
音频和视频的原生支持呢，就像你手机自带的音乐播放器，不需要再额外装个专门的软件就能听歌看视频了。
画布元素就像画家的画板，JavaScript就是画笔，可以随心所欲地画画。
本地存储就像是你在房间里的小抽屉，能放些常用的小物件（数据）。
Web Workers就像是你请了个小助手在后台默默干活，不打扰你在前台干别的事。
这都是HTML5带来的很棒的新功能。
2. 题目：如何在CSS中实现垂直居中？- 答案：方法有多种。
一种是使用flex布局，在父元素设置display: flex; align - items: center; justify - content: center;。
另一种是对于已知高度的元素，可以设置其绝对定位，top: 50%; margin - top: 负的元素高度的一半。
- 解析：想象一下，你要把一个小盒子放在一个大盒子的正中间。
用flex布局就像是有个智能的管家，你只要跟它说把东西放在正中间（设置那几个属性），它就会帮你搞定。
而绝对定位那种方法呢，就像是你自己动手，先把小盒子提到大盒子中间的高度（top: 50%），然后再把它往上拉回一半它自己的高度（margin - top: 负的元素高度的一半），这样就居中了。
Vue中实现骨架屏的多种方式
Vue中实现⾻架屏的多种⽅式vue-cli项⽬⾸页加载缓慢想要使⽤⾻架屏效果，经过⼏天的实践，这⾥学习并记录⼀下vue项⽬⾃动⽣成⾻架屏⽅法。
前⾔：⾻架屏的作⽤主要是在⽹络请求较慢时，提供基础占位，当数据加载完成，恢复数据展⽰。
这样给⽤户⼀种很⾃然的过渡，不会造成页⾯长时间⽩屏或者闪烁等情况。
常见的⾻架屏实现⽅案有ssr服务端渲染和prerender两种解决⽅案。
1、⼿动编写⾻架屏代码（页⾯简单少推荐）该⽅法就是⼿动编写项⽬index.html ⼊⼝⽂件，实现在vue项⽬初始化展⽰替换div#app根元素前的⾻架屏效果。
2.通过预渲染⼿动书写的代码⽣成相应的⾻架屏（页⾯简单少推荐）⽐如：vue-skeleton-webpack-plugin ⾃动⽣成并⾃动插⼊静态⾻架屏以webpack4构建的项⽬为例开始撸代码：基于 Vue Webpack 模板应⽤这个插件的例⼦： SPA 中单个 Skeleton：1. npm install vue-skeleton-webpack-plugin 安装插件2. 在 webpack 中引⼊插件：以4版本为例配置如下 vue.config.jsconst SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');const path = require('path')module.exports = {publicPath:'./',devServer: {proxy: {'/api':{target: 'http://192.168.0.3:8123',// target: 'http://192.168.3.20:8154/',changeOrigin: true,pathRewrite: {'^/api': '/api'}},},disableHostCheck: true},chainWebpack: config => {// 其他配置config.entry('main').add('babel-polyfill') // main是⼊⼝js⽂件// 其他配置},css: {extract: true, // css拆分ExtractTextPlugin插件，默认true - ⾻架屏需要为true},lintOnSave: false,configureWebpack: (config) => {// vue⾻架屏插件配置config.plugins.push(new SkeletonWebpackPlugin({webpackConfig: {entry: {app: path.join(__dirname, './src/components/entry-skeleton.js'),},},minimize: true,quiet: true,}))},};上⾯红⾊的那⾏配置的是⾻架屏的⼊⼝⽂件⾻架屏的组件如下：这是⽬录entry-skeleton.jsimport Vue from 'vue';import Skeleton from './Skeleton';export default new Vue({components: {Skeleton},template: '<skeleton />'}); Skeleton.vue 这⾥⾯可以画出⾃⼰适合的⾻架拼样⼦<template><div class="skeleton-wrapper"><header class="skeleton-header"></header><section class="skeleton-block"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPj <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPj </section></div></template><script>export default {name: 'skeleton'};</script><style scoped>.skeleton-header {height: 152px;background: grey;margin-top: 60px;width: 152px;margin: 60px auto;}.skeleton-block {display: flex;flex-direction: column;padding-top: 8px;}</style>预加载时：加载后：⾻架屏的具体展现是需要⾃⼰画的这个实践只是对于 SPA 中单个 Skeleton下⾯同样以这个为例去实践SPA 中多个 Skeleton，以给单页⾯的不同路由设置不同的⾻架屏，也可以给多页⾯设置，同时为了开发时调试⽅便，会将⾻架屏作为路由写⼊ router 中，可谓是相当体贴了。
一种基于布局分区的网页加载方法
一种基于布局分区的网页加载方法专利名称：一种基于布局分区的网页加载方法技术领域：本发明涉及浏览器技术领域，尤其是涉及用于移动设备上使用webkit引擎的浏览器的一种基于布局分区的网页加载方法。
背景技术：WebKit的前身是KDE小组的KHTML，其所包含的WebCore排版引擎和JSCore引擎来自于KDE的KHTML和KJS。
Webkit作为一个开源的浏览器引擎，其优势在于高效稳定，兼容性好，且源代码结构清晰，易于维护。
这些优势使其在手机、平板电脑等移动设备上应用十分广泛，例如 Google 的手机 Android、Apple 的 iPhone, Nokia，s S60browser 等所使用的浏览器内核引擎都是基于WebKit。
目前，基于webkit引擎的浏览器的加载方法是I、客户端发出请求；2、客户进程与服务器建立TCP连接，客户端获取HTML文件、CSS文件、资源文件；3、客户端浏览器通过W3C规范解析HTML文件生成DOM (文档对象模型)树、解析 CSS文件生成样式表；4、同时样式表附加(attach操作)到DOM树后生成对应的渲染(Render)树；5、布局管理器布局(Layout)渲染树生成渲染布局(RenderLayer)树；6、整棵渲染布局树完成生成后，绘制(Painting)渲染布局树,从而最终显示在屏幕上。
随着近几年的飞速发展，移动互联网已经蔚然成风，2011年全球活跃移动宽带用户已达12亿，优化移动设备迫在眉睫。
由于移动设备的配置和网络连接速度等局限性，网页加载速度成为制约用户体验的重要因素。
我们经常会遇到这样一种现象用手机打开网页，首先经历界面长时间的空白，等加载(包括上段所提的获取、解析、附加、渲染、布局)结束后，网页显示出来。
这种长时间的加载过程极大地影响用户的满意度。
如专利号200910160977. 9，发明名称为《一种嵌入式网页解析方法及使用该方法的网页浏览器和终端设备》的专利即属于此列。
Web 网页设计技术考试题及答案
right: 50%; margin-left: 390px; }
12、下列哪条是定义样式规则的正确形式（ C ）
A、body {color = black}
B、body:color=black
C、body {color: black}
D、{body;color:black}
13、关于浮动，下列哪条样式规则是不正确的（ B ）
A、alert("Hello World")
B、alertBox="Hello World"
C、msgBox("Hello World") D、alertBox("Hello World")
21、小王在家上网访问搜狐网站，此时谁是服务器端，谁是客户端？（ B ）
A、小王的机器是服务器端，搜狐网站是客户端
14、关于 CSS2.1 中的背景属性，下列说法正确的是（ B ）
A、可以通过背景相关属性改变背景图片的原始尺寸大小
B、不可以对一个元素设置两张背景图片
C、不可以对一个元素同时设置背景颜色和背景图片
D、背景图片默认情况下不会平铺，左上角对齐
15、下列哪个 CSS 属性具有继承性（ A ）
A、color
Web 网页设计技术复习题
一、 选择题
1、用 HTML 标记语言编写一个简单的网页，网页最基本的结构是（ D ）
A、<html> <head>„</head> <frame>„</frame> </html>
B、<html> <title>„</title> <body>„</body> </html>
HTML页面中5种超酷的伪类选择器：hover效果
HTML页⾯中5种超酷的伪类选择器：hover效果想在⾃⼰的⽹站中应⽤超酷的hover效果吗？也许你可以从如下的这些实例中获得⼀些灵感，如果你喜欢这些效果，也可以直接拷贝代码并应⽤到你的站点。
给平淡的站点带来活⼒hover效果能给⽹页增加⼀些动态效果，并且使得站点更具有活⼒。
原来的做法是使⽤javascript来实现这些动态效果，但是随着CSS3的引⼊和现代浏览器的⽀持，我们可以⽤纯粹的CSS 代码来实现这些有趣的效果。
所谓的现代浏览器，更多的是指以Mozilla和Webkit为核⼼的浏览器，IE的表现稍微差强⼈意，所以请使⽤FireFox，Safari或者Chrome查看⼀下的效果。
如下就是要介绍的5个⾮常酷的纯CSS hover 效果。
向上跳跃这种效果⾮常适合于当页⾯上有⼀横排图⽚的场景，当⿏标hover时就产⽣波浪⼀样的效果。
这个效果实现是⾮常简单的，并且有多种⽅法实现，如下的核⼼实现⽅法是：初始给所有图⽚设置margin，当hover时，给相应的图⽚减少margin的值，这样就实现了向上跳跃的效果。
这种效果不光可以应⽤于图⽚，⼀般的横向排列的导航栏也可以应⽤这样的效果。
效果中的透明效果是并不是必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。
CSS代码：1 2 3 4 5 6 7 8 9 10 11 12.ex1img{border: 5px solid#ccc;float: left;margin: 15px;-webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out;}.ex1img:hover {margin-top: 2px;}层叠与放⼤这种效果类似于熔岩灯效果，当⿏标从上⾄下移动时，每个图⽚都是慢慢地放⼤然后恢复到原始的状态。
浏览器
浏览器概述网页浏览器是个显示网页服务器或档案系统内的文件，并让用户与此些文件互动的一种软件。
它用来显示在万维网或局部局域网络等内的文字、影像及其他资讯。
这些文字或影像，可以是连接其他网址的超链接，用户可迅速及轻易地浏览各种资讯。
网页一般是HTML的格式。
有些网页是需使用特定的浏览器才能正确显示。
网页浏览器个人电脑上常见的网页浏览器包括微软的Internet Explorer、Mozilla的Firefox、Apple的Safari、Opera、HotBrows er、Google的Chrome。
浏览器是最经常使用到的客户端程序。
浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。
网页浏览器主要通过HTTP协议与网页服务器交互并获取网页，这些网页由URL指定，文件格式通常为HTML，并由MIME在HTTP协议中指明。
一个网页中可以包括多个文档，每个文档都是分别从服务器获取的。
大部分的浏览器本身支持除了HTML之外的广泛的格式，例如JPEG、PNG、GIF等图像格式，并且能够扩展支持众多的插件（plug-ins）。
另外，许多浏览器还支持其他的URL类型及其相应的协议，如FTP、Gopher、HTTPS（HTTP协议的加密版本）。
HTTP内容类型和URL协议规范允许网页设计者在网页中嵌入图像、动画、视频、声音、流媒体等。
历史蒂姆·伯纳斯-李（Tim Berners-Lee）是第一个使用超文本来分享资讯的人。
他于1990年发明了首个网页浏览器WorldW ideWeb。
在1991年3月，他把这发明介绍给了给他在CERN工作的朋友。
从那时起，浏览器的发展就和网络的发展联系在了一起。
当时，网页浏览器被视为能够处理CERN庞大电话簿的实用工具。
在与用户互动的前题下，网页浏览器根据gopher和tel net协议，允许所有用户能轻易地浏览别人所编写的网站。
可是，其后加插图像进浏览器的举动使之成为了互联网的“杀手级应用”。
网页设计前端面试题
网页设计前端面试题网页设计前端面试题集合前端是网页设计过程中一个重要的组成部分，那么在面试网页设计师的时候，往往会遇到前端试题操作，以下是店铺为大家搜索整理的网页设计前端面试题集合，希望能给大家带来帮助!HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;2.xhtml和html有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?用于声明文档使用那种规范(html/Xhtml)一般为严格过度基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug4.行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding5.CSS引入的方式有哪些? link和@import的区别是?内联内嵌外链导入区别：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?标签选择符类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级高7.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html 表示层 CSS 行为层 js8.css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)10.写出几种IE6 BUG的解决方法1.双边距BUG float引起的使用display2.3像素问题使用float引起的使用dislpay:inline -3px3.超链接hover 点击后失效使用正确的书写顺序link visited hover active4.Ie z-index问题给父级添加position:relative5.Png 透明使用js代码改6.Min-height 最小高度 !Important 解决’7.select 在ie6下遮盖使用iframe嵌套8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)11.标签上title与alt属性的区别是什么?Alt 当图片不显示是用文字代表。
IE、Safari、Chrome浏览器JavaScript兼容性改造总结
1.1 浏览器内核差别1.2. Safari和Chrome浏览器简介Safari和Chrome，一个是苹果公司MAC OS系统的浏览器，一个是Google开发的浏览器，它们都使用了同样的内核webkit，关于webkit，有如下简介。
WebKit 是一个开源浏览器网页排版引擎，与之相应的引擎有Gecko （Mozilla，Firefox 等使用的排版引擎）和Trident（也称为MSHTML，IE 使用的排版引擎）。
同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。
WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS，当年苹果比较了 Gecko 和 KHTML 后，仍然选择了后者，就因为它拥有清晰的源码结构、极快的渲染速度。
目前使用WebKit 引擎的浏览器主要有：Safari(apple出品)，Midori，chrome(google出品)等。
1.3. 改造问题汇总在改造过程的测试及排查中，总结排查出来的共同点一共有以下数十点：1.2.1 document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.item["itemName"]或document.formName.elements["elementName"];W3C标准,只能使用document.formName.elements["elementName"].解决方法:统一使用document.formName.elements["elementName"].1.2.2 集合类对象问题说明:IE下,可以使用()或[]获取集合类对象; Safari及Chrome下,只能使用[]获取集合类对象.解决方法:统一使用[]获取集合类对象.1.2.3 各种style描述需严格大小写说明:IE下，各种CSS属性大小写要求不严格，均能正确操作。
计算机网络基础 第5章教案
教案2011 ～2012 学年第二学期课程名称：计算机网络基础授课班级：2010级4班主讲教师：刘乐平使用教材：计算机网络基础第5章HTML语言入门课型：新课课时安排：18课时教学目标：知识目标：1)理解网页与网站的概念；2)掌握HTML文件的基本结构；3)掌握HTML文件编辑的常用标记；4)掌握列表标记的应用；5)掌握超链接标记的应用；6)掌握表格标记的应用；7)掌握表单和框架技术的应用；8)掌握多媒体在网页中的应用；9)掌握CSS在网页中的应用；技能目标：培养学生运用所学知识与技能，主动探究，解决实际问题的能力。
德育目标：培养大家养成勇于探究新知识，不断地提高自身的审美意识，树立正确的人生观和价值。
教学重点：HTML、列表标记、超链接标记、表格标记、表单和框架技术、CSS 教学难点：标记的使用与运用安全教育：培养学生网络安全意识教学方法：讲演练教学过程：第1,2课时5.1 网页制作概述一、网站网站(Website)是指在Internet上，使用HTML(Hypertext Markup Language,超文本标记语言)等工具制作的用于展示特定内容的相关网页集合。
1．网站类型网站类型是指根据网站使用性质和内容的不同对网站的分类，通常情况下可以将网站分为政府网站、商业网站、企业网站、教育科研机构网站、个人网站和其它非盈利机构网站等。
2．网站结构网站结构一般分为物理结构和逻辑结构，网站物理结构是指网站真实的目录及文件所存储的位置；网站逻辑结构是指在一个网站中各页面之间的逻辑链接关系，也可称为网站地图。
常见的网站逻辑结构有以下三种：(1) 线性结构：这是网站最简单的一种结构，它是以某种顺序组织的，可以是时间顺序，也可以是逻辑甚至是字母顺序。
通过这些顺序呈线性地链接。
如一般的索引就采用线性结构。
线性结构是组织网页的基本结构。
(2) 二维表结构：这种结构允许浏览者横向、纵向地浏览信息。
(3) 层次结构：层次结构是由一条主线构成索引，每一层又由一条线性结构构成。
HTML5+CSS3网页设计基础教程第17章 网页布局
HTML5+CSS3网页设计基础教程
第17章 网页布局
第18页
17.3.2 设置元素的显示顺序
使用弹性盒布局时，可以通过order属性来改变各 元素的显示顺序。可以在每个元素的样式中加入 order属性，该属性使用一个整数值表示，浏览器 在显示元素的时候根据数值按从小到大排列。 【例17-9】设置元素的显示顺序。
HTML5+CSS3网页设计基础教程
第17章 网页布局
第27页
17.4.2 justify-content属性
指定如何布局容器中除了子元素之外的mainaxis轴方向上的剩余空白部分。当flex-grow属性 值不为0时，各子元素在main-axis轴方向自动填 满容器，所以justify-content属性值无效。属性 取值：
设置列宽和列数 设置列间距 设置列边框 设置跨列标题 统一列高
HTML5+CSS3网页设计基础教程
第17章 网页布局
第5页
17.1.1 设置列宽和列数
column-width子属性用于给列定义一个最小的宽度。默 认值为auto，表示将根据column-count子属性指定的数 目计算列宽。column-count子属性用于指定文本显示的 列数。 实际应用中，通常将这两个参数放在columns中一起指定。 例如，columns: auto 4;就是图17-1所示的4栏效果，这 行代码将div中的内容分成4列显示，根据div的宽度 640px，均分列宽为160px（包括列间距的宽度）。
HTML5+CSS3网页设计基础教程
第17章 网页布局
第15页
主要内容
17.1 17.2 17.3 17.4 17.5 多栏布局 盒布局 弹性盒布局 弹性盒布局的布局原理 本章小结
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一、网页构成1、基本元素和树状结构简单来讲，HTML网页就是一种使用HTML语言撰写的文档。
但是，现在的网页基本上都是动态网页（Dynamic HTML），也就是网页可以出现动画，可以与用户交互，这就需要CSS样式语言和JavaScript语言，其中，JavaScript代码用来控制网页内部的逻辑，CSS用来描述网页的显示信息。
下面代码将演示如何使用这些技术：<html> <!-- HTML文本 --><head><style type="text/css"> <!-- CSS代码-->img {width: 100px;}</style></head><body><img src="apic.png"></img> <!-- 图片资源 --> <div>hello world<script type="text/javascript"> <!-- JavaScript代码 -->window.onload = function() {console.log("window.onload()");}console.log("it is me");</script></body></html>整个网页可以看成一种树状结构，其树根是“html”，这是网页的根元素。
根下面也包含两个子节点“head”和“body”。
“head”的子女“style”包含的就是一段CSS代码，用来定义元素的样式信息。
CSS是一种样式表语言，用来描述元素的显示信息。
在HTML的早期，内容和显示是混在一起的，最典型的例子莫过于使用table元素来展示数据。
这对网页的代码结构非常不利。
因为，如果Web开发者想修改数据的显示方式，也要修改数据本身，会很麻烦。
有鉴于此，借鉴数据和显示分离的原理，规范设计者们可以将有关显示的信息，例如颜色、大小、字体等抽取出来，使用CSS语言编写代码来描述它们，与HTML元素的内容分离开来。
“body”节点下面包含三个子节点，其一是“img”节点，用来在网页中显示图片资源；其二是“div”节点；其三是“script”节点，它包括一段JavaScript代码。
JavaScript是一种解释型的脚本语言，主要目的是控制用户端逻辑、同用户交互等，它可以修改HTML元素及其内容。
由上面的分析可以看出，一个完整的网页组成包括HTML文本、JavaScript代码、CSS代码以及各种各样的资源文件。
而网络上的每个资源都是由URL标记，即对于浏览器而言，区分两个资源是否相同的唯一标准就是其URL是否一致。
上面代码中的这些元素组成一个树状结构，这就是HTML文档的树状结构。
在WebKit中，这个文档会构建成一个DOM树。
2、HTML5新特性在HTML4.01之后的很长时间里，规范组织都没有大而新的规范出炉，酝酿中的新规范草案在经过一番激烈的争论后，终于在2012年由两大组织WHATWG和W3C推荐为候选规范，即具有划时代意义的HTML5。
HTML5包含了一系列的标准，一共包含了10大的类别，它们分别是离线（offline）、存储（storage）、连接（connectivity）、文件访问（file access）、语义（semantics）、音频和视频（audio/video）、3D和图形（3D/graphics）、展示（presentation）、性能（performance）和其它（Nuts and bolts）。
其中，每个大的类别都是由众多技术或者规范组成，下表描述了这10个类别所包含的具体规范：类别具体规范离线Application cache，Local storage，Indexed DB，在线/离线事件存储Application cache，Local storage，Indexed DB连接Web Sockets，Server-sent事件文件访问File API，File System，FileWriter，ProcessEvents语义各种新的元素，包括Media，structural，国际化，Link relation，属性，form类型，microdata 等方面音频和视频HTML5 Video，Web Audio，WebRTC，Video track等3D和图形Canvas 2D，3D CSS变换，WebGL，SVG等展示CSS3 2D/3D变换，转换（transition），WebFonts等性能Web Worker，HTTP caching等其它触控和鼠标，Shadow DOM，CSS masking等目前，网站提供了测试浏览器支持HTML5的情况。
HTML5中的很多规范都是基于JavaScript语言来定义的。
HTML5引入的最让人惊讶的最新能力之一是对2D和3D图形以及多媒体方面的支持，这将彻底改变网页的渲染方式和复杂度。
这里包括但不限于HTML5视频、Canvas 2D、WebGL(即Canvas 3D)、CSS 3D变换和转换。
HTML5视频引入可一个新的“video”元素，支持在网页中播放视频。
Canvas 2D通过定义一个新的“canvas”元素，网页开发者利用该元素的2D绘图上下文（graphics context）调用标准定义的接口，绘制常见的2D图形，例如点、线、矩形、多边形等。
WebGL则是使用“canvas”元素，网页开发者可以利用该元素的3D绘图上下文调用标准定义的接口，绘制3D图形，这些接口类似于OpenGL ES的接口。
CSS 3D的变换和转换则可以作用于HTML的任意可视元素，制造出各种炫丽的3D效果。
之前要想达到这种效果，都需要浏览器的第三方插件才能做到，现在HTML5原生就支持了，下面网页代码演示如何使用CSS 3D变换、HTML5视频、2D图形绘制和3D图形绘制：<html><head><style type="text/css">video, div, canvas {-webkit-transform: rotateY(360deg) rotateX(-45deg); <!-- CSS 3D 变换 -->}</style></head><body><video src="avideo.mp4"></video> <!-- HTML5 video --><div><canvas id="a2d"></canvas><br> <!-- HTML5 canvas --><canvas id="a3d"><canvas> <!-- HTML5 canvas --><script type="text/javascript">var size = 300;//canvas 2D绘图var a2dCtx = document.getElementById('a2d').getContext('2d');a2dCtx.canvas.width = size;a2dCtx.canvas.height = size;a2dCtx.fillStyle = "rgba(0, 192, 192, 80)";a2dCtx.fillRect(0, 0, 200, 200);//canvas 3D, e.g. webGL绘图var a3dCtx =document.getElementById('a3d').getContext('experimental-webgl');a3dCtx.canvas.width = size;a3dCtx.canvas.height = size;a3dCtx.clearColor(0.0, 192.0/255.0, 192.0/255.0, 80.0/255.0);a3dCtx.clear(a3dCtx.COLOR_BUFFER_BIT);</script></body></html>在CSS 3D变换的代码部分，将3D变换作用于“video”、“div”和“canvas”三种元素，其含义是将它们分别绕X轴和Y轴旋转30度和-45度。
在元素“body”的子女中，首先是“video”元素，它用来播放HTML5视频。
之后是一个“div”元素，它包括两个“canvas”元素，前者将会用来绘制2D图形，后者将会用来绘制3D图形，当然目前渲染引擎区分不出2D还是3D，因为它们是由后面的JavaScript代码决定的。
在“canvas 2D”绘图的JavaScript代码中，ID为“a2d”的“canvas”元素创建2D上下文，这决定了它将采用2D绘图，之后填充该元素的颜色。
在“canvas 3d(webGL绘图)”的JavaScript代码中，ID为“a3d”的“canvas”元素创建3D上下文，这决定了它将采用3D绘图，之后更新它的颜色缓冲区。
二、网页结构1、框结构框结构很早就被引入网页中，用来对网页的布局进行分割，将网页分成几个框，网页开发者可以让网页嵌入其它网页。
在HTML语法中，“frameset”、“frame”和“iframe”可以用来在当前网页中嵌入新的框结构。
每一个框结构包含一个HTML文档，最简单的框结构网页就是单一的框，其文档没有包含任何其它的框。
当然，网页也可以有很复杂的框结构，也就是框里面再嵌入框，依次类推。
下面以一个拥有复杂框结构的网页介绍之：上图中，左边部分是两个HTML网页的示例代码，其中“main.html”是主网页，它使用“iframe”元素来嵌入左下方的“frameset.html”网页。
而“frameset.html”网页则包含两个子框，分别嵌入两个结构简单的网页。
图中右侧是左边“main.html”网页所生产的框结构，图中的箭头表示源代码和框结构的对应关系。
2、层次结构网页的层次结构是指网页中的元素可能分布在不同的层次中，也就是说某些元素可能不同于它的父元素所在的层次，因为某些原因，WebKit需要为该元素和它的子女建立一个新层。