- 1、本文档共38页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
PAGE1
PAGE1
HTML5的新特性与语义化标签
1HTML5的新特性
HTML5作为Web标准的重要演进,为开发者提供了丰富的特性和工具,以创建响应式、交互性强且语义化的网页及应用程序。以下是一些关键特性:
离线存储:HTML5引入了离线存储功能,包括localStorage和sessionStorage,使得Web应用可以存储数据在用户设备上,即使在离线状态下也能使用。
//存储数据到本地存储
localStorage.setItem(username,JohnDoe);
//从本地存储读取数据
console.log(localStorage.getItem(username));//输出:JohnDoe
画布和图形:canvas元素提供了在网页上渲染图形的能力,包括2D和3D的图形渲染。
canvasid=myCanvaswidth=500height=500/canvas
script
constcanvas=document.getElementById(myCanvas);
constctx=canvas.getContext(2d);
ctx.fillStyle=#FF0000;
ctx.fillRect(10,10,50,50);
/script
媒体支持:HTML5通过audio和video元素内置了对媒体的支持,无需插件即可播放音频和视频。
videowidth=320height=240controls
sourcesrc=movie.mp4type=video/mp4
浏览器不支持video元素
/video
拖放API:允许用户直接在网页上拖放文件,提高用户体验。
divid=dropZoneclass=droppableondrop=handleDrop(event)ondragover=event.preventDefault();
/div
script
functionhandleDrop(event){
constfile=event.dataTransfer.files[0];
console.log(file);
}
/script
表单增强:HTML5对form元素进行了增强,添加了新的输入类型如date、time、email和url,并提供内置的验证功能。
form
inputtype=emailplaceholder=请输入您的邮箱required
inputtype=dateplaceholder=请选择日期required
buttontype=submit提交/button
/form
WebWorkers:允许在后台线程处理复杂的计算任务,提高应用性能。
//主线程
constworker=newWorker(worker.js);
worker.postMessage(Hello);
//worker.js
self.onmessage=function(event){
console.log(event.data);//输出:Hello
};
2HTML5的语义化标签
语义化标签不仅改善了代码的可读性,也帮助搜索引擎和辅助技术理解页面内容。下面是一些常用的HTML5语义化标签及其用途:
header:代表页面或区域的标题区域,通常包含Logo、导航等元素。
nav:用于定义页面的导航链接部分。
nav
ul
liahref=#section1首页/a/li
liahref=#section2关于我们/a/li
liahref=#section3联系我们/a/li
/ul
/nav
article:代表页面中的独立内容块,如博客文章、新闻报道等。
article
h1新闻标题/h1
p新闻内容.../p
/article
section:代表页面中的一个独立部分,可能包含多个article,常用于组织相关的HTML5内容。
section
h2关于我们/h2
p我们的历史.../p
p我们的愿景.../p
/section
aside:用于定义页面的辅助信息,如侧边栏、广告等,与主要内容平行但不直接相关。
aside
h3最近评论/h3
ul
li评论1/li
li评论2/li
/ul
/aside
footer:代表页面或区域的底部区域,常用于放置版权信息、联系信息等。
footer
p版权所有?2023/p
您可能关注的文档
- UI设计师-UI设计模式与组件库-Ant Design_状态与进度组件:进度条与骨架屏.docx
- UI设计师-UI设计模式与组件库-Ant Design_自定义主题与样式.docx
- UI设计师-UI设计模式与组件库-Apple Human Interface Guidelines_Apple Human Interface Guidelinesall.docx
- UI设计师-UI设计模式与组件库-Apple Human Interface Guidelines_测试与优化用户界面.docx
- UI设计师-UI设计模式与组件库-Apple Human Interface Guidelines_导航设计与模式.docx
- UI设计师-UI设计模式与组件库-Apple Human Interface Guidelines_多语言与地区适配.docx
- UI设计师-UI设计模式与组件库-Apple Human Interface Guidelines_反馈与过渡动画.docx
- UI设计师-UI设计模式与组件库-Apple Human Interface Guidelines_可访问性设计.docx
- UI设计师-UI设计模式与组件库-Apple Human Interface Guidelines_控制与交互元素设计.docx
- UI设计师-UI设计模式与组件库-Apple Human Interface Guidelines_视觉设计基础.docx
- 5.2 北方地区和南方地区2023-2024学年八年级下册地理同步教学设计(湘教版).docx
- Unit 3 Festivals and Customs Extended reading 教学设计-2023-2024学年高中英语译林版(2020)必修第二册.docx
- 5.1.5两栖类和爬行类教学设计2023-2024学年人教版生物八年级上册.docx
- 2024-2025学年高中物理选修3-2教科版教学设计合集.docx
- 2024-2025学年高中物理必修1沪科版教学设计合集.docx
- 2024-2025学年高中历史选修1 历史上重大改革的回眸人民版教学设计合集.docx
- 2024-2025学年小学信息技术(信息科技)五年级上册南方版(湖南)(2019)教学设计合集.docx
- 2024-2025学年初中信息技术(信息科技)九年级下册科学版(2018)教学设计合集.docx
- 2024-2025学年小学信息技术(信息科技)五年级上册浙教版(2023)教学设计合集.docx
- 2024-2025学年小学英语四年级下册人教版(PEP)(2024)教学设计合集.docx
文档评论(0)