HTML5元素和语义化标签

摘要：站点前端开发文档原文元素原文语义化标签元素元素分类块级元素自身属性为的元素，通常使用块级元素进行布局结构的搭建。可以和，，等其他标签结合使用，表示文档结构。表示标签内容之外的，与标签内容相关的辅助信息，元素被用于无关内容。

站点：前端开发文档
原文：HTML元素
原文：语义化标签

块级元素： div、h1-h6、hr、menu、ol、ul、li、dl、dt、dd、table、p、form

自身属性为display: block;的元素，通常使用块级元素进行布局（结构）的搭建。

块级元素的特点

独占一行

从上到下依次排列

直接控制宽度、高度以及盒子模型的相关CSS属性

不设置宽度，块级元素的宽度是它的父元素内容的宽度，高度是自身内容的高度

可以嵌套行内元素

ul/ol下面只能是li，dl下面只能是dt dd；p不能包含其他块级元素包括自身

内联元素：span、a、strong、i、em，s、u，textarea、input、select，label、img、sup，sub

自身属性为display: inline;的元素，通常使用行内元素进行文字、小图标（小结构）的搭建。

内联元素的特点

不独占一行，和其他内联元素从左到右在一行显示

不能直接控制宽度、高度以及盒子模型的相关CSS属性，可以直接设置内外边距的左右值

宽高由自身内容的大小决定（文字、图片等）

只能容纳文本或其他内联元素（不能在内联元素中嵌套块级元素）

CSS外链引入方式

link是html标签，@import是css提供的方式，写在css文件或style标签中。

加载顺序有区别，当一个页面被加载时，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完成后再加载。

使用js控制DOM改变CSS样式，只能使用link标签，因为import不能被DOM控制。

CSS命名规范

头部：header

内容：content/container

尾部：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登陆条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

投票：vote

合作伙伴：partner

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：register

状态：status

尽量减少使用无意义标签，如span和div

尽量不使用标签本身的CSS属性，如b、font、s

需要强调的部分，使用strong、em

表格搭建时，使用表格头部、表格主体、表格尾部

列表搭建时，使用

无序列表

有序列表

定义列表

section：划分网页，表示页面中的一个内容区块，比如章节、页眉、页脚或页面其它部分。可以和h1，h2，h3...等其他标签结合使用，表示文档结构。

hgroup：对整个页面/页面中的一个内容区块的标题进行组合。

header：一个内容区块或整个页面的头部部分。

footer：整个页面或页面区块的尾部。

nav：页面中导航连接的部分。

article：独立于内容其余部分的完整独立内容块。article元素专门为摘要设计。

aside：表示article标签内容之外的，与article标签内容相关的辅助信息，aside元素被用于无关内容。

应该与主内容分开的内容

aside元素中的内容可以被独立开来而不会影响文档或section中主内容的含义

可以用在主要内容相关的引用，如侧边栏、广告、nav元素组等

aside的内容如果被删除，剩下的内容仍然很合理

figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元（figure元素经常用于图片）

figcaption：

一个图例的说明

figure元素的一个标题或相关解释

使用figcaption时，最好是figure块的第一个或最后一个元素

新增标签的兼容问题

HTML5语义化标签在IE6-8下，默认当成行内元素展示。

通过引入js解决IE9以下新增标签的兼容问题

Forms

新增input元素的种类：

search：搜索输入框

tel：电话号码输入框

url：输入URL地址

email：邮件输入框

number：数字输入框

rang：特定范围内的数值选择器

color：颜色选择器 只在Opera和Blackberry浏览器

datetime：显示完整日期和时间 UTC标准时间

datetime-local：显示完整日期和时间

time：显示时间

month：显示月份

week：显示周

表单新特性：

placeholder：输入框占位符，用作输入提示

autocomplete：是否保存用户输入值，默认为on，关闭为off

autofocus：自动聚焦

required：此项必填，不能为空

pattern：正则验证 pattern="d{1,5}"

form：加上form属性，表单元素可以放在页面的任意位置

formnovalidate/novalidate：

表示不需要验证表单，直接提交（novalidate用户form标签）

formnovalidate用于submit类型的提交按钮

表单验证

validity对象，通过下面的valid可以查看验证是否通过

oText.addEventListener("invalid"fn1,false);

valid：验证不通过时返回false

valueMissing：输入值为空时

typeMismatch：控件值与预期类型不匹配

patternMismatch：输入值不满足pattern正则

customError：不符合自定义验证

setCustomValidity();自定义验证