上课学习作业练习html5css3二

HTML5+CSS3(二)本章内容文档结构元素分组元素嵌入元素html5新属性语义化标签音译：semantization词语的意思意义语义化标签的好处统一了开发者之间的规范，便于开发者写出结构优美的代码，且团队协作时在没有写注释的情况方便团队开发者阅读和理解浏览器或网络爬虫能更好更快的解析，并分析出其中的内容更棒的搜索引擎优化(SEO的目的是：为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌排名收益)文档结构元素汇总header定义页面或内容区域的头部信息。article用于表示页面中一块与上下文不相关的独立内容，比如一个帖子、一篇博客文章、一个可交互的widgetsection用于对页面的某块内容进行分块，如将该快内容进一步分成章节的标题、内容和页脚等几部分nav定义页面上的各种导航条，一个页面可以拥有多个nav元素，作为整个页面或不同部分内容的导航aside用于定义当前页面或当前文章的辅助信息,主要内容相关的引用、侧边栏、广告、导航条、一个可交互的widget等,通常作为侧边栏内容footer为页面或某个文章定义脚注内容，包括文章的版权信息、作者联系方式等内容分组元素汇总<div><figure>标签规定独立的流内容（图像、图表、照片、代码等等）</figure><figcaption>标签定义

figure

元素的标题（zaption)</figcaption><hgroup>被用来对标题元素进行分组</hgroup>

嵌入元素汇总img

嵌入图片iframe

嵌入一个html文档map

定义客户端分区响应图像映射area

表示一个用户客户端分区响应图的区域embed

用插件在HTML中嵌入内容客户端图像映射Mapmap的两个属性：id,namearea元素可定义图像映射中的区域，它对应的属性：shape表示点击热点区域的形状，支持矩形rect，圆形circle以及多边形poly。coords表示点击热点区域形状的坐标。坐标点0,0表示图片的左上角。其中矩形rect支持4个数值，2个坐标，分别是矩形左上角坐标和矩形右下角坐标。例如，coords="20,20,80,80"生成的就是一个左上角坐标20,20宽高都是60px的矩形区域。圆形circle支持3个数值，前2个值为圆心坐标，第3个值为圆的半径大小。多边形poly就更简单了，每两个数值组合表示一个坐标点，依次连线形成的区域就是最终的热点区域href和<a>元素的href是一样的东西，直接跳转地址，或者锚点等。也同样支持target属性。也就是说<area>可以看成是半个<a>元素alt同<img>元素的alt，表示热点区域图片的描述信息。嵌入内容embed<embedheight=“”width=“”type=“”src=“”/>heightpixels设置嵌入内容的高度。srcurl嵌入内容的URL。可以是图片或文件的相对/绝对路径，也可以网址typetypeMIME_type,定义嵌入内容的类型。widthpixels设置嵌入内容的宽度。autostartboolean只针对视频及音频格式有效，是否自动播放，True、false(在IE上才有效果)loopBoolean、number只针对视频及音频格式有效，是否循环播放，正整数、true、false(在IE上才有效果)hiddenboolean只针对视频及音频格式有效，是否隐藏面板，True、false

<embedwidth="300"height="200"src="./files/xjc.swf"type="application/x-shockwave-flash"play="false"flashvars="autoplay=false&play=false"loop="false"/>html5新属性Aria:AccessibleRichInternetApplication(可读的富互联网应用程序)使用role属性，aria-*属性设置比如：NVDA屏幕阅读器