HTML5 教程

阅读(6090.8k) 收藏赞(463)

手册简介

HTML 5 是下一代的 HTML。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。在 W3Cschool 的 HTML 5 教程中，您将了解 HTML5 中的新特性。

手册说明

教程简介

通过这本教程的学习，你可以了解HTML基础知识、HTML代码规范、HTML标签列表。如果你之前学习过 HTML教程，想必会对于HTML5的特性更加了解。看完HTML5之后，你还可以辅助以一些CSS样式的教程来进行学习。学好HTML5的话，相信制作一个精美的网站对于你而言不再是难题。

学完本教程之后，W3Cschool推荐您进行实战练习：HTML5实战

学习本门课程的同时，建议大家结合W3Cschool的《HTML和CSS3零基础快速入门》视频课程，学习效果更佳。

HTML5介绍

HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最核心的超文本标记语言。万维网不等同于互联网，但它是依靠互联网运行的服务之一，万维网又简写为www，它可以实现在互联网的帮助下，访问由许多互相链接的超文本组成的系统。

从1999年发布了HTML4.01之后，到2014年经历十五年才推行HTML，中间还出现了WHATWG和XHTML2.0两种规范，最后双方合并成全新的HTML5版本。

传言HTML5手机应用上运行缓慢并且漏洞百出，目前还不适合进行大规模推广，但这些问题都是可以优化的，并且HTML5手机应用有着可以在网页上直接调试和修改的优点，不需要再重复地编码和调试，相信未来HTML5手机应用的普及率只会越来越高。

HTML5新版本特性

淘汰过时的或冗余的属性
Indexed DB本地存储功能
脱离Flash 和Silverlight直接在浏览器中显示图形或动画
一个HTML5文档到另一个文档间的拖放功能
提供外部应用和浏览器内部数据之间的开放接口

HTML5的缺点

欧洲网络信息安全机构已经发出警告，HTML5可能并不够安全。

HTML5还没有被各大浏览器所支持

HTML5要求技术必须全部开放，而这可能触及到一些大公司的利益

HTML5未来展望

随着移动化的进程，HTML5终将成为主流。

毕竟，它更简单、更规范、对于初学者而言更加友好。

HTML相关教程

HTML5开发者工具

附加资料

HTML参考手册：http://www.w3cschool.cn/htmltags
Indexed DB API说明文档：http://www.ibm.com/developerworks/cn/web/wa-indexeddb/
WebIDE编辑器：http://www.w3cschool.cn/webide
W3C介绍：http://www.w3cschool.cn/xuexiw3c

更新记录

多端阅读

意见反馈 X

意见反馈：

联系方式：

查看完整版笔记

违规举报 X

广告等垃圾信息
不友善内容
违反法律法规的内容
不宜公开讨论的政治内容
其他

<> /* 初始状态隐藏组件 */ #aiBox.m-aiTool { visibility: hidden; opacity: 0; transition: opacity 0.3s ease; } #aiBox { box-sizing: border-box; } /* 组件加载完成后的显示状态 */ #aiBox.loaded.m-aiTool.loaded { visibility: visible; opacity: 1; } .m-aiTool { display: none; position: fixed; bottom: 20px; right: 5px; width: 40px; height: 40px; } .m-aiTool img { width: 100%; height: 100%; } .ai-warp { position: fixed; bottom: 30px; right: 20px; width: 128px; height: 128px; background-image: url("https://atts.w3cschool.cn/ai-tool.png"); background-repeat: no-repeat; background-position: center; background-size: 100% auto; cursor: pointer; z-index: 2000; user-select: none; /* 防止拖拽时选中文本 */ } /* 修改样式部分 */ #popup-window { position: fixed; bottom: -100%; /* 初始位置在视口下方 */ left: 80px; width: 530px; height: 600px; border: 1px solid #c5c5c5; border-radius: 5px; background-color: #fff; opacity: 0; z-index: 2000; transition: opacity 0.3s ease; } /* 显示状态的样式 */ #popup-window.show { bottom: 20px; opacity: 1; } .popup-window-warp { width: 100%; height: 100%; display: flex; flex-flow: row wrap; } .popup-nav { width: 110px; height: 100%; flex: 0 0 80px; background-color: #232324; padding: 5px; box-sizing: border-box; } .popup-iframe { flex: 1; display: flex; flex-direction: column; background: #fff; overflow: hidden; } .popup-iframe iframe { width: 100%; height: 100%; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; } .popup-iframe .ai-tool-top { padding: 8px; background: #EEF0F4; display: flex; justify-content: flex-end; align-items: center; height: 32px; } .popup-iframe .ai-tool-top .maxkb-chat-close { cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.3s; } .popup-iframe .ai-tool-top .maxkb-closeviewport { cursor: pointer; } .popup-iframe .ai-tool-top .maxkb-openviewport { cursor: pointer; } .popup-iframe .ai-tool-top .maxkb-viewportnone { display: none; } .nav-title-openwin { width: 100px; height: 36px; display: flex; align-items: center; box-sizing: border-box; padding: 5px 3px; margin-bottom: 3px; font-size: 12px; color: rgb(201205212); cursor: pointer; } .nav-title-openwin img { width: 22px; height: 22px; margin-right: 5px; } .nav-title { width: 100px; height: 36px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 5px 3px; margin-bottom: 3px; font-size: 12px; color: rgb(201205212); cursor: pointer; } .nav-title img { width: 22px; height: 22px; margin-right: 5px; } .nav-title:hover { background-color: #2C2C2D; border-radius: 8px; } .nav-title.nav-active { border-radius: 8px; background-color: #2C2C2D; color: #fff; } /* 放大状态的样式 */ #popup-window.maxkb-enlarge { width: 50% !important; height: 100% !important; top: 0 !important; right: 0 !important; /* 改为right: 0，使其靠右显示 */ left: auto !important; /* 改为auto，避免left属性影响 */ bottom: auto !important; opacity: 1; transition: width 0.3s easeheight 0.3s ease; } /* 移动端适配 */ @media only screen and (max-width: 768px) { #aiBox { display: none; } .m-aiTool { display: block; } } .ai-tool-top { padding: 8px; background: #EEF0F4; display: flex; justify-content: flex-end; align-items: center; height: 32px; box-sizing: border-box; } .tool-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .tool-title { font-size: 16px; font-weight: 500; color: #333; } .more-link { display: flex; align-items: center; color: #666; text-decoration: none; font-size: 14px; gap: 4px; } .more-link:hover { color: #1890ff; } .tool-content { flex: 1; overflow-y: auto; padding: 20px; } .tool-grid { display: grid; grid-template-columns: repeat(41fr); gap: 12px; padding: 0; max-width: 100%; } .tool-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; padding: 8px; border-radius: 6px; transition: background-color 0.3s; aspect-ratio: 1; width: 90px; height: 90px; box-sizing: border-box; } .tool-item:hover { background-color: #e8e8e8; } .tool-icon { width: 32px; height: 32px; /* 固定图标容器高度 */ display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .tool-icon img { width: 32px; height: 32px; /* 固定图标大小 */ object-fit: contain; /* 保持图片比例 */ } .tool-name { font-size: 12px; color: #333; text-align: center; width: 100%; line-height: 1.2; height: 2.4em; /* 固定文字容器高度，刚好容纳两行 */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; padding: 0 4px; position: relative; } /* 工具提示样式 */ .tool-name::after { content: attr(data-tooltip); position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); background: rgba(0000.75); color: white; padding: 3px 6px; border-radius: 4px; font-size: 12px; white-space: normal; /* 允许提示文字换行 */ max-width: 200px; /* 设置最大宽度 */ text-align: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.2svisibility 0.2s; } .tool-name::before { content: ''; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-bottom-color: rgba(0000.75); z-index: 1000; } /* 响应式布局调整 */ @media (max-width: 768px) { .tool-grid { grid-template-columns: repeat(31fr); gap: 10px; } .tool-item { width: 70px; height: 70px; } .tool-icon { width: 28px; height: 28px; } .tool-icon img { width: 20px; height: 20px; } } @media (max-width: 480px) { .tool-grid { grid-template-columns: repeat(21fr); gap: 8px; } .tool-item { width: 60px; height: 60px; } .tool-icon { width: 24px; height: 24px; } .tool-icon img { width: 18px; height: 18px; } .tool-name { font-size: 11px; } } .maxkb-chat-close { cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.3s; } .maxkb-chat-close:hover { background-color: rgba(0000.05); }