HTML5元素与语义标签

站点：前端开发文档原文：HTML元素原文：语义标签HTML元素元素分类块级元素：div,h1-h6,hr,menu,ol,ul,li,dl、dt、dd、table、p、form等属性为display:block的元素；通常使用块级元素进行布局（结构）构建。块级元素的特点自上而下单行排列直接控制盒模型的宽高及相关CSS属性不设置宽度，块级元素的宽度为其父元素内容的宽度,height为自身内容的高度。嵌套内联元素ul/ol只能是li，dl只能是dtdd；p不能包含其他块级元素，包括自身的行内元素：span、a、strong、i、em、s、u、textarea、input、select、label、img、sup，以及属性为display:inline的sub元素；通常使用行内元素来构造文本和小图标（小结构）。行内元素的特点是不占一行。它们与其他内联元素一起从左到右显示在一行中。您不能直接控制盒子模型的宽度、高度和相关的CSS属性。可以直接设置内外边距的左右值。宽度和高度由它们自己的内容决定。大小决定（文本、图片等）只能容纳文本或其他行内元素（块级元素不能嵌套在行内元素中）。CSS外部链接导入方法link是html标签，@import是css提供的方法，写在css文件或style标签中。加载顺序不同。加载页面时，链接引用的css文件会同时加载，而@import引入的css文件要等到页面下载完成后才会加载。使用js控制DOM改变CSS样式，只能使用link标签，因为import不能被DOM控制。CSS命名规范Head:headerContent:content/containerTail:footerNavigation:navSidebar:sidebarColumn:column页面外围控件整体布局宽度：wrapperLeft和rightcenter：leftrightcenter登录栏：loginbarLogo：logo广告：bannerpage正文：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：搜索链接：friendlinkFooter：footerCopyright：copyright投票：votePartner：合作伙伴Scroll：scrollContent：contentTabpage：tab文章列表：list提示信息：msgTips：tips栏目标题：title加入：joinus指南：guildservice：serviceRegistration：registerStatus：status语义标签尽量少用无意义的标签，比如span、divDo不使用标签本身的CSS属性，如b、font、s等需要强调的属性。使用strong和em建表时，使用表头，表体，<构建tfoot>表尾列表时，使用

无序列表

,

orderedlist

,

definitionlist

section：划分网页，表示页面上的一块内容，例如章节、页眉、页脚或其他部分页面的。它可以与其他标签如h1、h2、h3……结合使用来表示文档结构。hgroup：对整个页面/页面中的一个内容块的标题进行分组。header：内容块或整个页面的标题部分。页脚：整个页面或页面块的页脚。nav：页面中导航链接的部分。文章：独立于其余内容的完整、自包含的内容块。article元素是专门为摘要设计的。aside：表示文章标签内容以外的与文章标签内容相关的辅助信息。aside元素用于不相关的内容。应该与主要内容分开的内容aside元素中的内容可以分开而不影响文档或部分中主要内容的含义可以用在与主要内容相关的引用中，例如侧边栏、广告、nav元素groups等内容如果删掉，剩下的内容还是合理的。figure：表示一个独立的流内容，一般表示文档正文流内容中的一个独立单元（figure元素常用于图片）figcaption：figure元素的图例描述当使用figcaption作为标题或相关说明时，最好是图形块的第一个或最后一个元素新标签的兼容性问题HTML5语义标签在IE6-8下默认显示为内联元素。通过引入js解决IE9以下新标签的兼容性问题Forms中新输入元素的类型：search：搜索输入框tel：电话号码输入框url：输入网址地址email：邮件输入框number：号码输入框rang：特定范围颜色内的值选择器：仅在Opera和黑莓浏览器中的颜色选择器datetime：显示完整的日期和时间UTC标准时间datetime-local：显示完整的日期和时间时间：显示时间月：显示月周：显示周形式新功能：占位符：输入框占位符，用作输入提示autocomplete：是否保存用户输入的值，默认开启，off为关闭autofocus：autofocusrequired：此项为必填项，不能为空pattern：regularvalidationpattern="\d{1,5}"form：有了form属性，可以将form元素放在页面的任意位置提交类型的按钮表单验证对象的有效性，可以通过下面的validoText.addEventListener("invalid"fn1,false);验证是否通过。valid：验证失败时返回falsevalueMissing：输入值为空时typeMismatch：控件值不符合预期类型patternMismatch：输入值不符合patternregularcustomError：不符合自定义验证setCustomValidity();自定义验证