




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
添加背景音乐
本讲大纲:1、新增的结构元素
2、新增的块级(block)的语义元素
3、新增的行内(inline)的语义元素
4、新增的嵌入多媒体元素与交互性元素
5、新增的input元素的类型
5、废除的元素
新增的结构元素
section元素section元素定义文档或应用程序中的一个区段,比如章节、页眉、页脚或文档中的其他部分。它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构。HTML5中代码示例:<section>…</section>HTML4中代码示例:<div>…</div>article元素article元素表示文档中的一块独立的内容,譬如博客中的一篇文章或报纸中的一篇文章。HTML5中代码示例:<article>…</article>HTML4中代码示例:<divclass="article">…</div>新增的结构元素header元素header元素表示页面中一个内容区块或整个页面的标题。HTML5中代码示例:<header>…</header>HTML4中代码示例:<div>…</div>nav元素nav元素表示导航链接的部分。HTML5中代码示例:<nav>…</nav>HTML4中代码示例:<ul>…</ul>新增的结构元素footer元素footer元素表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、文档的创作日期以及创建者联系信息。HTML5中代码示例:<footer>…</footer>HTML4中代码示例:<div>…</div>新增的块级(block)的语义元素
aside元素
aside元素表示article元素的内容之外的与article元素的内容相关的有关内容。HTML5中代码示例:<aside>…</aside>HTML4中代码示例:<div>…</div>新增的块级(block)的语义元素figure元素figure元素表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用<figcaption>元素为figure元素组添加标题。HTML5中代码示例:<figure><figcaption>PRC</figcaption><p>ThePeople'sRepublicofChinawasbornin1949...</p></figure>HTML4中代码示例:<dl><h1>PRC</h1><p>ThePeople'sRepublicofChinawasbornin1949...</p></dl>新增的块级(block)的语义元素dialog元素dialog标签定义对话,比如交谈。注意:对话中的每个句子都必须属于<dt>标签所定义的部分。HTML5中代码示例:<dialog><dt>老师</dt><dd>2+2等于?</dd><dt>学生</dt><dd>4</dd><dt>老师</dt><dd>答对了!</dd></dialog>
新增的行内(inline)的语义元素
mark元素mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。HTML5中代码示例:<mark>…</mark>HTML4中代码示例:<span>…</span>新增的行内(inline)的语义元素time元素
time元素表示日期或时间,也可以同时表示两者。HTML5中代码示例:<time>…</time>HTML4中代码示例:<span>…</span>新增的行内(inline)的语义元素meter元素
meter元素表示度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在min/max属性中定义。HTML5中代码示例:<metervalue="3"min="0"max="10">3/10</meter><br><metervalue="0.6">60%</meter>新增的行内(inline)的语义元素progress元素progress元素表示运行中的进程。可以使用progress元素来显示JavaScript中耗费时间的函数的进程。HTML5中代码示例:<progress>…</progress>下载进度:<progressvalue="22"max="100"></progress>新增的嵌入多媒体元素与交互性元素
details元素details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示出details。summary元素应该是details元素的第一个子元素。HTML5中代码示例:<details><summary>HTML5</summary>ThisdocumentteachesyoueverythingyouhavetolearnaboutHTML5.</details>新增的嵌入多媒体元素与交互性元素datagrid元素datagrid元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。HTML5中代码示例:<datagrid>…</datagrid>新增的嵌入多媒体元素与交互性元素menu元素menu元素表示菜单列表。当希望列出表单控件时使用该标签。HTML5中代码示例:<menu><li><inputtype="checkbox"/>Red</li><li><inputtype="checkbox"/>blue</li></menu>注意:HTML4中menu元素不被推荐使用。新增的嵌入多媒体元素与交互性元素command元素command元素表示命令按钮,比如单选按钮、复选框或按钮。HTML5中代码示例:<commandonclick=cut()"label="cut">新增的input元素的类型
HTML5中,新增了很多input元素的类型,现列举如下:email
email类型用于应该包含e-mail地址的输入域。url
url类型用于应该包含URL地址的输入域。number
number类型用于应该包含数值的输入域。range
range类型用于应该包含一定范围内数字值的输入域。DatePickers(数据检出器)searchsearch类型用于搜索域,比如站点搜索或Google搜索。search域显示为常规的文本域。新增的input元素的类型HTML5拥有多个可供选取日期和时间的新输入类型date-选取日、月、年month-选取月、年week-选取周和年time-选取时间(小时和分钟)datetime-选取时间、日、月、年(UTC时间)datetime-local-选取时间、日、月、年(本地时间)废除的元素
由于各种原因,在HTML5中废除了很多元素,下面简单介绍一下被废除的元素。1.能使用css代替的元素对于basefont、big、center、font、s、strike、tt、u这些元素,由于他们的功能都是纯粹为画面展示服务的,而在HTML5中提倡把画面展示性功能放在css样式表中统一编辑,所以将这些元素废除,并使用编辑css样式表的方式进行替代。2.不在使用frame框架对于frameset元素、frame元素与nofranes元素,由于frame框架对页面可以性存在负面影响,在html5中已不再支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的复合页面的
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 【正版授权】 IEC 60670-21:2024 EN-FR Boxes and enclosures for electrical accessories for household and similar fixed electrical installations - Part 21: Particular requirements for boxes
- 存量房屋买卖协议书
- 木门安装工程合同
- 门面房装修合同书(6篇)
- 房地产项目认购协议
- 技术改造借款合同书
- 解决某个问题的解决方案报告
- 农业生产环境保护与监测方案
- 委托投资协议合同
- 小学词语听活动方案
- 2024-2025学年山东省潍坊市高三上学期1月期末英语试题
- 2025年安徽碳鑫科技有限公司招聘笔试参考题库含答案解析
- 2025年寒假实践特色作业设计模板
- 过敏性肺泡炎课件
- 客运车辆进站协议书
- 2022-2023学年杭州市六年级下学期数学期末考试试卷及答案解析
- 公务员录用审批表
- 重庆市住宅装饰装修工程质量验收标准
- 部编版初中语文七至九年级语文教材各册人文主题与语文要素汇总一览表合集单元目标能力点
- 新苏教版六年级下册《科学》全一册全部课件(共16课)
- 幼儿园食品安全教育培训ppt课件模板
评论
0/150
提交评论