更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
按住视频可进行拖动
&正在加载...
举报视频：
举报原因(必填)：
请说明举报原因(300字以内)：
请输入您的反馈
举报理由需要输入300字以内
感谢您的反馈～
请勿重复举报~
请刷新重试~
收藏成功，可进入
查看所有收藏列表
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
用爱奇艺APP或微信扫一扫，在手机上继续观看
当前播放时间：
一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
从零开始学HTML CSS 01章 网页的基础知识
正在检测客户端...
您尚未安装客户端，正在为您下载...安装完成后点击按钮即可下载
30秒后自动关闭
从零开始学HTML CSS 01章 网页的基础知识">从零开始学HTML CSS 01章 网页的基础知识
请选择打赏金额：
播放量12.7万
播放量数据：快去看看谁在和你一起看视频吧~
更多数据：
热门短视频推荐
Copyright (C) 2018 & All Rights Reserved
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
正在为您下载爱奇艺客户端安装后即可快速下载海量视频
正在为您下载爱奇艺客户端安装后即可免费观看1080P视频
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
后才可以领取积分哦~
每观看视频30分钟
+{{data.viewScore}}分
{{data.viewCount}}/3
{{if data.viewCount && data.viewCount != "0" && data.viewCount != "1" && data.viewCount != "2" }}
访问泡泡首页
+{{data.rewardScore}}分
{{if data.rewardCount && data.rewardCount != 0 && data.getRewardDayCount != 0}}1{{else}}0{{/if}}/1
{{if data.rewardCount && data.rewardCount != 0 && data.getRewardDayCount != 0}}
+{{data.signScore}}分
{{data.signCount}}/1
{{if data.signCount && data.signCount != 0}}
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制从零开始玩转前端与移动开发（第一阶段HTML5）
1、HTML5（常用浏览器与浏览器内核、HTML的语义化、HTML中常用的标签以及每个标签的语义。HTML5新特性及新增常用标签）
2、Css3（CSS语法、选择器、字体样式、边框、背景、图片格式详解、定位、浮动、盒模型。CSS3新增选择器及新增属性、圆角、阴影、伸缩布局、变形、过渡、动画。CSS使用的高级技巧）
3、京东综合项目（代码分离原则，使用div+css布局完成一个完整的页面，使用CSS3完成动画效果）
此为第一阶段html5阶段
小提示:直接在B站视频地址".com"前面加上jj，回车即可到下载页面！
唧唧更新时间: 10:59:04 &&B站发布时间: 16:21:00
输入B站视频地址下载或任意字符搜索
唧唧PC客户端 4.5更新(测试版)公告公告
需要使用迅雷、QQ旋风等下载工具.
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P1.1、01 认识网页
1、01 认识网页
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P2.2、02 常见浏览器
2、02 常见浏览器
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P3.3、03 浏览器内核
3、03 浏览器内核
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P4.4、04 web标准
4、04 web标准
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P5.5、05 HTML初识
5、05 HTML初识
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P6.6、06 HTML骨架
6、06 HTML骨架
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P7.7、07 我的第一个页面及其标签简介
7、07 我的第一个页面及其标签简介
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P8.8、08 猪八戒版骨架记忆法
8、08 猪八戒版骨架记忆法
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P9.9、09 什么是标签及其分类
9、09 什么是标签及其分类
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P10.10、10 标签嵌套和并列关系
10、10 标签嵌套和并列关系
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P11.11、11 简单小测验
11、11 简单小测验
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P12.12、12 开发工具sublime
12、12 开发工具sublime
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P13.13、13 sublime生成html骨架
13、13 sublime生成html骨架
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P14.14、14 doctype文档类型
14、14 doctype文档类型
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P15.15、15 字符集简介
15、15 字符集简介
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P16.16、16 标签的语义化及其标题标签
16、16 标签的语义化及其标题标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P17.17、17 段落标签和水平线标签
17、17 段落标签和水平线标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P18.18、18 课堂案例-新闻页面
18、18 课堂案例-新闻页面
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P19.19、19 换行和div span标签
19、19 换行和div span标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P20.20、20 文本格式化标签
20、20 文本格式化标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P21.21、21 标签属性
21、21 标签属性
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P22.22、22 图像标签
22、22 图像标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P23.23、23 链接标签
23、23 链接标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P24.24、24 锚点定位
24、24 锚点定位
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P25.25、25 base标签
25、25 base标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P26.26、26 特殊字符
26、26 特殊字符
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P27.27、27 注释标签
27、27 注释标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P28.28、29 相对路径(二)
28、29 相对路径(二)
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P29.29、30 无序列表的使用
29、30 无序列表的使用
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P30.30、31 无序列表注意事项
30、31 无序列表注意事项
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P31.31、32 有序列表
31、32 有序列表
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P32.32、33 四大名著案例
32、33 四大名著案例
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P33.33、34 自定义列表
33、34 自定义列表
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P34.34、35 总结
34、35 总结
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P35.35、01 认识表格
35、01 认识表格
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P36.36、02 表格的注意事项
36、02 表格的注意事项
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P37.37、03 表格属性
37、03 表格属性
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P38.38、04 表头标签
38、04 表头标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P39.39、05 表格结构
39、05 表格结构
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P40.40、06 浏览器审查HTML标签元素
40、06 浏览器审查HTML标签元素
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P41.41、07 表格标题标签
41、07 表格标题标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P42.42、08 合并单元格
42、08 合并单元格
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P43.43、09 合并单元格复习
43、09 合并单元格复习
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P44.44、10 表单的作用
44、10 表单的作用
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P45.45、11 文本框和密码框
45、11 文本框和密码框
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P46.46、12 单选按钮和复选按钮
46、12 单选按钮和复选按钮
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P47.47、13 默认选中表单属性
47、13 默认选中表单属性
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P48.48、14 input按钮组
48、14 input按钮组
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P49.49、15 最多字符数和文本值
49、15 最多字符数和文本值
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P50.50、16 label标签
50、16 label标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P51.51、17 文本域
51、17 文本域
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P52.52、18 下拉菜单
52、18 下拉菜单
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P53.53、19 表单域
53、19 表单域
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P54.54、20 html5 文档类型和字符集
54、20 html5 文档类型和字符集
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P55.55、21 查看手册及其新增标签
55、21 查看手册及其新增标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P56.56、22 datalist标签
56、22 datalist标签
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P57.57、23 fieldset元素
57、23 fieldset元素
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P58.58、24 HTML5 新增input 表单(一)
58、24 HTML5 新增input 表单(一)
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P59.59、25 HTML5 新增input 表单(二)
59、25 HTML5 新增input 表单(二)
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P60.60、26 新增占位符焦点多选属性
60、26 新增占位符焦点多选属性
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P61.61、27 autocomplete属性
61、27 autocomplete属性
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P62.62、28 内容不能为空和获得焦点属性
62、28 内容不能为空和获得焦点属性
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P63.63、29 表单综合案例-学生档案
63、29 表单综合案例-学生档案
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P64.64、30 embed引入网上视频
64、30 embed引入网上视频
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P65.65、31 播放音频audio
65、31 播放音频audio
载入B站播放器预览MP4
Flv文件下载
MP4/MP3下载
ASS/XML弹幕下载
P66.66、32 播放视频video
66、32 播放视频video
').removeClass("DownTop");
$(".DownBottom").html('').removeClass("DownBottom");
$(".I61").click(function () { window.open('https://item.taobao.com/item.htm?id='); });
$(".I60").click(function () {
window.open('http://www.upupoo.com?source=e2e0fc75a24db93ac57e51d51c62e5a7');
$(".I62").click(function () { window.open('http://t.cn/RQ2GA29'); });
$(".I63").click(function () { window.open('http://app.swfuli.com'); });
$(".I65").click(function () { window.open('http://anime.upupoo.com/detail-348914'); });
$("head").append("");
function LoadA_DImage(ClassName) {
$(ClassName).each(function () {
var ImageID = $(this).attr("I665606");
var ImageVer = $(this).attr("I665606Ver");
console.log(ImageID);
if (!window.localStorage.getItem("W10086" + ImageID) || ImageVer != window.localStorage.getItem("VerW10086" + ImageID)) {
var This =
type: "GET",
url: "//szcdn.jijidown.com/system/" + ImageID + ".html",
dataType: "text",
data: { v: ImageVer },
success: function (data) {
window.localStorage.setItem("W10086" + ImageID, data);
window.localStorage.setItem("VerW10086" + ImageID, ImageVer);
$("head").append("")
$("head").append("")
LoadA_DImage(".I60");
LoadA_DImage(".I61");
LoadA_DImage(".I62");
LoadA_DImage(".I63");
LoadA_DImage(".I65");
function ShowOrHideA_D() {
if (!window.localStorage.ShowAD || window.localStorage.ShowAD == "true") {
$("a_dlist").css("display", "block");
$(".meimeimei").css("display", "block");
$("a_dlist").css("display", "none");
$(".I656068").css("display", "block");
$(".VideoBaiDuA_D").css("display", "none");
$(".meimeimei").css("display", "none");
ShowOrHideA_D();
$(".RI66560 ul").each(function () { $(this).Roll(10000) });
function ShowECF() {
if (!window.localStorage.JJ_SetDM) {
window.localStorage.ShowDM = "false";
window.localStorage.JJ_SetDM = "1";
function DM(obj) {
if (window.localStorage.ShowDM == "false") {
$(obj).html("关闭弹幕");
window.localStorage.ShowDM = "true";
$(".d_show").show();
$(obj).html("打开弹幕");
window.localStorage.ShowDM = "false";
$(".d_show").hide();
try { if (window.localStorage.ShowDM == "false") $("#closeDM").html("打开弹幕"); }
catch (ee) { }后使用快捷导航没有帐号？
() () () () () () () () () () () () () () ()
【视频教程】从零开始学习HTML和CSS
「你还想找」
欢迎加入「奥学网」学霸平台，让自学改变你的世界！
才可以下载或查看，没有帐号？
0042008b_medium.jpg (17.98 KB, 下载次数: 0)
11:12 上传
　　MP4|视频：AVC|音频：AAC44kHz的双声道|行程：2小时|LEC：18|422MB
　　类型：电子学习|语言：英语
　　设计使用HTML和CSS从零开始的初学者建立网站。
　　你知不知道！无论你看到在您的浏览器在网站上是纯HTML和CSS。如果你是在学习使用任何技术天气是Asp.Net，Java或PHP网站开发真正感兴趣的，在基本的东西你应该知道的是HTML和CSS。如果你想开发自己的静态网站与我们联系，形成了更多的则此课程教您最好的。
　　在这个过程中，我们将开始与我们为什么需要HTML概念那么我们潜入白天河边，将覆盖意见，页面信息，文档结构，链接，文本标记，列表，表格和图像。我们采取的CSS下手，为什么，去对网站设计各种类型的造型技巧和各种选择向前迈进，从头开始设计一个漂亮的菜单，最后用最后的设计和托管静态网站。
　　而且它是完全免费的，免费的，直到永远。
0042008c.jpg (172.41 KB, 下载次数: 0)
11:12 上传
　百度网盘 / Download（回复可见）：
　 The following hidden content members only. 　
游客，如果您要查看本帖隐藏内容请
上一篇：下一篇：
楼 主 推 荐
width:100%">
一个个全都骑到老大头上来了...
width:100%">
好啊，，不错、、、、
width:100%">
width:100%">
希望大家帮我把这个帖发给你身边的人，谢谢
width:100%">
不能被埋没的好帖子，顶上去，让世界都看到
width:100%">
人生感悟：牵手时，即使你的手有多汗，也别放开。
width:100%">
好东西我喜欢
width:100%">
辛苦了，真心辛苦了
width:100%">
注册花了60元，有点小贵，但是发现还是值这个价格的
width:100%">
金山卫士红围巾
金山卫士资深围巾
“金粉是家”联盟团队一员
疯狂的发帖人
爱宠一族专享
忠实金山会员
金粉闪亮小编
圣诞节纪念勋章
光棍骄傲日11月11日
最拉风人物
举办活动：最拉风人物
Xtreme-aesthetic Design
& 2012~Now 6SO.SO传播正能量
从零开始，学习web前端之HTML5
什么是HTML5
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。是下一代 HTML 标准。
为什么要学习HTML5
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些新的Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
HTML5的设计目的是为了在移动设备上支持多媒体，它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5的优势有很多,比如：更聪明的存储，更具有语义化的标签，对视频和音频的支持等等。。。最重要的是，HTML5是未来的趋势。
HTML5的改进：
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地 SQL 数据
新增的语义化标签
HTML5新增了一些标签，也移除了一些标签。
目前兼容性比较好的常用的新标签有：
表示页眉，一般用在文档头部
表示导航，一般用于导航区域
表示区块，定义了某个区域
表示文章，一般用于表示文章（评论，博客...）
表示侧边栏，一般和article一起用，表示文章的侧边栏
表示独立的流内容（图像、图表、照片、代码等等）
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
width: 1000px;
height: 50px;
background: red;
margin: 0 auto;
color: white;
text-align: center;
width: 1000px;
height: 50px;
background: blue;
color: white;
text-align: center;
margin: 0 auto;
margin: 0 auto;
width: 1000px;
height: 500px;
color: white;
text-align: center;
margin: 0 auto;
float: left;
width: 300px;
height: 500px;
background: green;
color: white;
text-align: center;
margin: 0 auto;
float: right;
height: 500px;
width: 700px;
color: white;
text-align: center;
background: pink;
margin: 0 auto;
width: 1000px;
height: 50px;
background: gray;
color: white;
text-align: center;
margin: 0 auto;
浏览器兼容问题
目前新版本的浏览器对H5的支持都比较好，但是有些旧的浏览器并不识别H5的新元素。所有的浏览器对于无法识别的元素都会作为内联元素来处理。
为了让旧版本的浏览器识别这些新元素，我们可以将这些元素CSS 的 display 属性值为 block:
, , , , , , ,
display: block;
自定义标签
我们可以自定义一个标签，并在html中使用它
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
document.createElement("myNode");
display: block;
width: 100px;
height: 100px;
background: red;
IE9以下的兼容性解决办法
在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过
document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。
1.先下载js下面的文件
2.将html5shiv.js引入即可
注意：并不是所有的浏览器都需要引入这个文件，所以我们在IE9以下的浏览器引入即可
上面代码是条件注释，只有IE浏览器识别，当IE浏览器版本小于9时，才会引入js文件。
伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
input输入类型
输入email格式
只能输入url格式
只能输入数字
范围 滑动条
日期 不是绝对的
新的表单元素
(在新的web标准中已废弃)
数据列表，一般配合form和input使用，使其具有自动完成的功能。
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
action=""&
type="text" list="cityData"&
id="cityData"&
用来输出计算结果或用户动作的结果。
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)"&
name="a" type="number" step="any"& +
name="b" type="number" step="any"& =
name="o"&&
表示度量器（不常用）
&meter min="0" max="100" low="20" high="80" value="81"
表示进度条
&progress min="0" max="100" value="10"&&/progress&
autocomplete
是否自动完成，on：开启
off取消，可用于form和input
action="" autocomplete="on"&
First name: type="text" name="fname"&&
Last name:
type="text" name="lname"&&
type="email" name="email" autocomplete="off"&&
type="submit"&
可以看到，当我们输入过信息后，再次输入时，会自动匹配之前输入够的内容。而邮箱由于设置了autocomplete=”off”，所以不会自动完成，
novalidate
取消验证，用于form元素上。
html5表单本身会自动验证一些input，例如属性为email的input
action=""&
type="email" name="user_email"&
type="submit"&
如果再form中添加这个属性，那么点击提交按钮时将不会验证。
action="" novalidate&
type="email" name="user_email"&
type="submit"&
点击提交表单不会验证，直接提交
required 属性适用于以下类型的 input标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
action=""&
type="text" name="usrname" required&
type="submit"&
添加该属性后该input不能为空。点击提交按钮时会验证。
注意：如果form元素设置了novalidate属性，就算input设置了required 属性，也不会进行验证。
action="" novalidate&
type="text" name="usrname" required&
type="submit"&
placeholder
占位符，一般用于提示用户输入信息
email：&input type="email" placeholder="请输入邮箱"&
获取焦点，用于input中。添加该属性进去页面时会自动获取焦点。如果多个input都设置了这个属性的话，最前面的input会获取焦点。
&form action="" &
userName: &input type="text" &
pwd：&input type="password" placeholder="请输入密码" autofocus&
email：&input type="email" placeholder="请输入邮箱" autofocus&
&input type="submit"&
multiple 文件上传多选或邮箱多个,属性适用于以下类型的 input标签：email 和 file
&input type="file" name="img" multiple&
正则表达式 验证表单
pattern 属性适用于以下类型的 input 标签: text, search, url, tel, email, 和 password.
action="" &
type="text" pattern="[A-Za-z]{3}" title=""&
type="submit"&
formaction
描述表单提交的URL地址
formaction 属性用于 type=”submit” 和 type=”image”.
&input type="submit" formaction="demo-admin.php"
value="提交"&
用户输入时触发
$(function
$("#emailIpt")[0].oninput=function
console.log(this.value);
验证不通过时触发
$(function
$("#emailIpt")[0].oninvalid=function
this.setCustomValidity("请输入正确的邮箱地址");
在之前的版本我们如果想在网页上播放多媒体，必须依赖第三方插件，现在HTML5给我们提供了多媒体标签使我们可以音频和视频。
id="myAudio" src="music/TheTruthThatYouLeave.mp3"&
但是不同浏览器对音频文件的支持程度不同。
controls loop&
src="music/yinyue.mp3"/&
src="music/yinyue.ogg"/&
src="music/yinyue.wav"/&
抱歉，你的浏览器不支持音频标签！
视频标签同样存在浏览器兼容问题
controls autoplay&
src="video/movie.mp4"/&
src="video/movie.ogg"/&
src="video/movie.webm"/&
抱歉，浏览器要换了！
属性有很多，常用的也就那几个
新增获取DOM的方式
querySelector
返回文档中匹配指定 CSS 选择器的一个元素。
document.querySelector("img");//返回第一个img
querySelectorAll
返回所有的元素
document.querySelectorAll("img");//返回img集合
1、Node.classList.add('class')
2、Node.classList.remove('class')
3、Node.classList.toggle('class')
切换class，有则移除，无则添加
4、Node.classList.contains('class')
检测是否存在class
自定义属性
在HTML5中我们可以自定义属性，其格式如下data-*=””
data-info=”我是自定义属性”，通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。
Node.dataset是以类对象形式存在的
当我们如下格式设置时，则需要以驼峰格式才能正确获取
data-my-name=”itcast”，获取Node.dataset[‘myName’]
&!DOCTYPE html&
charset="UTF-8"&
width: 100px;
height: 100px;
background: pink;
&window.onload=function
var div=document.querySelector("div");
console.log(div.dataset["info"]);
class="box" data-info="自定义属性"&&
在HTML5的规范中，我们可以通过为元素增加draggable=”true”来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
页面中设置了draggable=”true”属性的元素
页面中任何一个元素都可以成为目标元素，
例如：将盒子a中的元素拖拽到盒子b中，那么，盒子a中的元素就是拖拽元素，盒子b就是目标元素
应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
应用于拖拽元素，当拖拽结束时调用
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
&Tab 标签&
window.onload=function(){
var imgNode=document.querySelector("img");
imgNode.ondragstart=function(){
console.log("拖拽开始");
imgNode.ondragleave=function(){
console.log("离开拖拽元素")
imgNode.ondrag=function
console.log("正在拖拽");
imgNode.ondragend=function(){
console.log("拖拽结束")
src="../img/yixin.png" /&
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover
应用于目标元素，当停留在目标元素上时调用
应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
&Tab 标签&
width: 50px;
height: 50px;
background: red;
width: 150px;
height: 150px;
border: 1px solid red;
margin-left: 200px;
position: relative;
display: block;
left: 200px;
window.onload=function(){
var divNode=document.querySelector(".box1");
divNode.ondragover=function
e.preventDefault();
console.log("停留在目标元素上了");
divNode.ondragenter=function
console.log("拖拽元素进入");
divNode.ondrop=function
console.log("在目标元素上松开鼠标");
divNode.ondragleave=function
console.log("离开目标元素了");
draggable="true" class="box" &&
class="box1"&&
注意：ondragoverondragover 默认地无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
event.preventDefault()
HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示
不同浏览器需要添加前缀：
webkitRequestFullScreen、mozRequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
兼容写法：
function requestFullScreen() {
var de = document.documentE
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
function exitFullscreen() {
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
window.sessionStorage
window.localStorage
1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
window.localStorage
1、永久生效，除非手动删除
2、可以多窗口共享
setItem(key, value)
设置存储内容
getItem(key)
读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
localStorage.setItem("name","yzq")
localStorage.getItem("name")//取数据
localStorage.removeItem("name")
localStorage.clear()
sessionStorage.setItem("pwd","aaa")
sessionStorage.getItem("pwd")
sessionStorage.removeItem("pwd")
sessionStorage.clear()
网络状态监听
if(navigator.onLine) {
alert("有网")
alert("没网");
window.addEventListener('online', function() {
alert('网络连接已建立！');
window.addEventListener('offline', function() {
alert('网络连接已断开！');
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
1.首先创建一个manifest 文件，manifest 文件的建议的文件扩展名是：”.appcache”。
2.在需要缓存的页面的根标签添加manifest 属性。
2.编写manifest 文件，告知浏览器哪些需要缓存，哪些不需要…
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"
注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST
/theme.css
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
下面的 NETWORK 小节规定文件 “login.asp” 永远不会被缓存，且离线时是不可用的：
可以使用星号来指示所有其他资源/文件都需要因特网连接：
当页面无法访问时的回退页面（比如 404 页面）
创建demo.appcache文件
编写manifest文件
CACHE MANIFEST
#上面一句必须
#需要缓存的文件
#不需要缓存的文件
#无法访问页面
在html标签中添加manifest属性
&!DOCTYPE html&
manifest="demo.appcache"&
charset="UTF-8"&
如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可。也可以关注我web前端的博客专栏，我会不定期的更新，如果文中有什么错误的地方，还望指正，谢谢！
扫码向博主提问
非学，无以致疑；非问，无以广识
擅长领域：
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！