标签语义化讲述.pptx

 标签语义化 班级：112班 姓名：耿瑜 标签语义化含义 含义：语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 标签语义化的目的 主要目的：就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用， 很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。strong,em用来区别于其他文字， 起到了强调的作用。 最终目的：是为了使我们的网站更好的被有哪些信誉好的足球投注网站引擎抓取收录，更自然的获得更高的流量。 标签语义化的分类 分类：A单纯语义化，无功能B语义化且有功能 一.无功能，语义化标签 1header头部标签，一般用与网站的头部内容/header 2.footer一般用于网站的底部/footer 3.nav导航标签，/nav 4.hgroup主题加描述/hgroup 5.section用于划分页面不同的区域/section 标签语义化的分类 6.aslde主题的附属信息(用途很广，主要就是一个附属内容)， 如果article里面为一篇文章的话， 那么文章的作者以及信息内容就是这篇文章的附属内容了/aslde 7 figure/figure SM:媒体元素，比如一些视频，图片啊等等 img / //图片 figcaption我是图片的说明描述/figcaption //图片说明 8 time/time SM:专门为时间而出的标签，以往我们时间标签很多，比如span,i,b等等 time标签有个属性datetime= //没实际功能，便于查找 标签语义化的分类 二：有功能语义化标签 .1 datalist/datalist SM:选项列表，与input元素配合使用，来定义input可能的值 input type=text list=valList //要在input标签中添加一个新的list属性，属性值为datalist的ID~ datalist id=valList option value=javascriptjavascript/option option value=htmlhtml/option option value=csscss/option /datalist 标签语义化的分类 HTML5语义化标签 当我在输入框中输入一个j的时候，里面相关的javascript就会显示出来~~ 2.2 details/details SM:用于描述文档或者文档某个部分的细节~ 默认属性为open~ ps:配合summary一起使用 details summary芝麻开门/summary pBOOM!!!!!!!!!!!!/p /details HTML5语义化标签 //没有点击时候的页面显示 HTML5语义化标签 //点击之后的内容显示 2.3 progress/progress SM:用于制作进度条，里面有2个属性，1：max 总的进度 2：value 现在的进度 progress max=200 value=100 // max:总共为200，当前为100，就是说进度条只到的50% span20/span% //用于兼容不支持此属性的浏览器 /progress 标签语义化的分类 HTML5语义化标签 三：关于兼容 毫无疑问，H5标签肯定是有兼容问题的， 低版本的IE是不认识这些语义化标签的，一般有2种办法可以解决这个问题 NO.1 自己写javascript代码， 因为IE不认识这些标签，所以我们只需要在js中创建这些标签就好 script type=text/javascript document.createElement(header); //创建一个header元素 /script 这样我们就创建出来了一个header头部元素，现在我们就可以HTML和样式中写入这个标签 ps:因为创建出来的标签是没有任何默认属性的，所以我们要给创建出来的标签创建一个CSS属性display：block ; 标签语义化HTML结构的好处 a为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看； b用户体验：例如title、alt用于解释名词或解释