web前端H5新增标签.pptx

web前端开发H5第一节:新增常用标签 主讲人：lucy老师01

HTML5新增标签01HTML5+CSS3 1 HTML5语法2 HTML5新增元素3 HTML5废除元素4 HTML5重新定义的元素

文档类型申明01HTML5+CSS3 文档类型申明： !doctypehtml H5标签虽然不注重样式的表现，但是注重 结构，CSS3注重表现层

HTML5标签与HTML4标签区别01HTML5+CSS3 H5在规范在声明和标签上简化，新增了一部分常用的具有语义化的标签，同时也废除了一些标签 结构标签：(块状元素)有语义的块级元素 header 标记定义一个页面或一个区域的头部 article 标记定义一篇文章 nav 标记定义导航链接 section 标记定义一个区域 aside 标记定义页面内容部分的侧边栏 hgroup 标记定义文件中一个区块的相关信息 figure 标记定义一组媒体内容以及它们的标题 figcaption标签定义figure元素的标题。 time标记定义一个日期/时间 footer 标记定义一个页面或一个区域的底部 多媒体标签video页面中插入视频内容source可定义多个媒体资源audio页面中插入音频内容绘图标签canvas绘制图片svg矢量图特色标签 meter状态标签，温度等 progress进度条 datalist为input定义下拉列表 details定义元素的详细内容 menu mark标记定义有标记的文本 dialog标记定义一个对话框(会话框)类似微信

HTML5-语法标签01HTML5+CSS3 ①语法标签 （1）不允许写的结束符的标签：link、meta、base、br、hr、Embed、img、input、col、command、keygen、area、param、source、Track、wbr （2）可以省略结束符的标签：p、li、dt、dd、thead、tbody、tr、td、th、option、optgroup、Colgroup （3）可以完全省略的标签：html、head、body、colgroup、tbody

HTML5-新增标签01HTML5+CSS3 article 标记定义一篇文章

aside 标记定义页面内容部分的侧边栏

audio 标记定义音频内容

canvas? 标记定义图片

command 标记定义一个命令按钮

datalist 标记定义一个下拉列表

details? 标记定义一个元素的详细内容

dialog? 标记定义一个对话框(会话框)

embed? 标记定义外部的可交互的内容或插件

figure? 标记定义一组媒体内容以及它们的标题footer?标记定义一个页面或一个区域的底部

header? 标记定义一个页面或一个区域的头部

hgroup? 标记定义文件中一个区块的相关信息

keygen? 标记定义表单里一个生成的键值

mark? 标记定义有标记的文本

meter? 标记定义measurementwithinapredefinedrange

nav? 标记定义导航链接

output? 标记定义一些输出类型

progress? 标记定义任务的过程

rp? 标记是用在Rubyannotations告诉那些不支持Ruby元素的浏览器如何去显示

rt? 标记定义对rubyannotations的解释

ruby? 标记定义rubyannotations.

section? 标记定义一个区域

source? 标记定义媒体资源

time? 标记定义一个日期/时间

video? 标记定义一个视频

HTML5重新定义的元素

01HTML5+CSS3dd:可以同details与figure一同使用，定义包含文本，dialog也可用dt:可以同details与figure一同使用，汇总细节，dialog也可用hr:表示主题结束，而不是水平线，虽然显示相同menu:重新定义用户界面的菜单，配合commond或者menuitem使用small:表示小字体，例如打印注释或者法律条款strong:表示重要性而不是强调符号

HTML5废除元素01HTML5+CSS3 basefont，big，center，font,s，strike，tt，u；会产生负面影响frame，frameset，noframes；产生混淆acronym，applet，dir。

付出不亚于任何人的努力!持之以恒End