HTML5基本介绍

朴灿烈づ我的快乐病毒、 2024-04-17 23:24 76阅读 0赞

## HTML5介绍 ##

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然在技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性网站开发技术人员是必须要有所了解的。

## 兼容 ##

支持Html5的浏览器包括**Firefox**（火狐浏览器），**IE9**及其更高版本，**Chrome**（谷歌浏览器），**Safari**，**Opera**等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。  
**需要注意的是，虽然很多浏览器目前已经能够支持HTML5，但是显示效果仍旧存在差异性。这时，我们如果从样式的角度出发，可以采用下面的几种css方案。  
css reset  
Normalize.css  
CSS hack  
第三方插件**

## H5新增标签 ##

语义和结构  
HTML5提供了新的元素来创建更好的页面结构：

###### canvas ######

标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

###### 多媒体 ######

标签  
描述

*  audio  
    定义音频内容
 *  video  
    定义视频（video 或者 movie）
 *  source  
    定义多媒体资源 video 和 audio
 *  embed  
    定义嵌入的内容，比如插件。
 *  track  
    为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。

###### 表单 ######

标签描述

*  datalist  
    定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
 *  keygen  
    规定用于表单的密钥对生成器字段。
 *  output  
    定义不同类型的输出，比如脚本的输出。

###### 语义和结构 ######

HTML5提供了新的元素来创建更好的页面结构：

*  article  
    定义页面独立的内容区域。
 *  aside  
    定义页面的侧边栏内容。
 *  bdi  
    允许您设置一段文本，使其脱离其父元素的文本方向设置。
 *  command  
    定义命令按钮，比如单选按钮、复选框或按钮
 *  details  
    用于描述文档或文档某个部分的细节
 *  dialog  
    定义对话框，比如提示框
 *  summary  
    标签包含 details 元素的标题
 *  figure  
    规定独立的流内容（图像、图表、照片、代码等等）。
 *  figcaption  
    定义 figure 元素的标题
 *  footer  
    定义 section 或 document 的页脚。
 *  header  
    定义了文档的头部区域
 *  mark  
    定义带有记号的文本。
 *  meter  
    定义度量衡。仅用于已知最大和最小值的度量。
 *  nav  
    定义运行中的进度（进程）。
 *  progress  
    定义任何类型的任务的进度。
 *  ruby  
    定义 ruby 注释（中文注音或字符）。
 *  rt  
    定义字符（中文注音或字符）的解释或发音。
 *  rp  
    在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
 *  section  
    定义文档中的节（section、区段）。
 *  time  
    定义日期或时间。
 *  wbr  
    规定在文本中的何处适合添加换行符。

## 智能表单 ##

#### 控件 ####

新增控件  
datalist  
定义输入域的选项列表  
  datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输入域，需要把输入域的list属性引用datalist的id。option元素一定要设置value属性

**注意：IE9-浏览器及safari浏览器不支持**

*  keygen  
    定义密钥对生成器，用于生成密钥  
    keygen规定用于表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器
 *  output  
    用于显示计算的结果  
    这是一个语义化标签，定义不同类型的输出，比如脚本的输出

**IE不支持**

*  progress  
    progress元素用来标示任务的进度或进程(常用于表示过程)  
    注意：IE9-浏览器及safari浏览器不支持  
    相关属性
    
        max  规定任务一共需要多少工作
          			value  规定已经完成多少工作
    
    如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果  
    例如：  
    如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果

<progress></progress>
    					点击开始下载
    						<input id="btn" type="button" value="开始下载">
    下载进度：<progress id="test" value="0" max="100"></progress>

*  meter  
    meter元素用于显示剩余容量或剩余库存(常用于表示状态)  
    注意：IE浏览器及safari浏览器不支持  
    相关属性  
    form  规定meter元素所属的一个或多个表单  
    high  规定被视作高的值的范围  
    low  规定被视作低的值的范围  
    max  规定范围的最大值  
    min  规定范围的最小值  
    optimum  规定度量的最优值  
    value  规定度量的当前值(必需)  
    注意：min 小于 low 小于 high 小于 max

## 传统控件 ##

#### input ####

###### 传统类型10个 ######

*  button  
    定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）  
    type="button"的input输入类型定义可点击的按钮，但没有任何行为
 *  checkbox  
    定义复选框  
    允许用户在给定数目的选择中选择一个或多个选项。同一组的按钮，name取值一定要一致  
    \[注意\]**checkbox类型的input元素无法设置padding和border(除IE10-浏览器以外**)
 *  file  
    定义输入字段和 "浏览"按钮，供文件上传
 *  hidden  
    定义隐藏的输入字段  
    定义隐藏输入类型用于在表单中增加对用户不可见，但需要提交的额外数据  
    \[注意\]disabled属性无法与type="hidden"的input元素一起使用
 *  image  
    定义图像形式的提交按钮  
    type="image"的input输入类型定义图像形式的提交按钮，该类型可以设置width、height、src、alt这四个属性  
    用图片作为提交按钮会一起发送点击在图片上的x和y坐标，这样可以与服务器端图片地图结合使用，如果图片有name属性，也会随坐标发送
 *  password  
    密码输入框  
    它与文本输入框几乎一模一样，功能上唯一的不同的字母输入后会被隐藏，一般是一连串的点  
    Tip:显示密码和隐藏密码可以通过更改type值来实现
 *  radio  
    定义单选按钮  
    允许用户从给定数目的选择中选一个选项。同一组按钮，name值一定要一致  
    \[注意\]radio类型的input元素无法设置padding和border(除IE10-浏览器以外)
 *  reset  
    定义重置按钮。重置按钮会清除表单中的所有数据
 *  submit  
    定义提交按钮。提交按钮会把表单数据发送到服务器
 *  text  
    定义单行的输入字段，用户可在其中输入文本  
    默认的输入控件，一个单行的输入框  
    相关属性  
    传统属性
 *  alt  
    alt属性为图像输入规定替代文本，功能类似于image元素的alt属性，为用户由于某些原因无法查看图像时提供备选信息  
    　\[注意\]alt属性只能与type="image"的input元素配合使用
 *  size  
    size属性对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度  
    \[注意\]由于size属性是一个可视化的设计属性，推荐使用CSS来代替它
 *  src  
    src属性作为提交按钮显示的图像的URL  
    \[注意\]src属性只能且必须与type="image"的input元素配合使用
 *  checked  
    支持标签:  
    input type类型为radio  
    input type类型为checkbox  
    　　checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置
 *  name  
    name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据  
    \[注意\]只有设置了name属性的表单元素才能在提交表单时传递它们的值  
    所有的表单控件都具有name属性
 *  type  
    用来规定input元素的类型  
    \[注意\]如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type=“text”
 *  disabled  
    disabled属性规定应该禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本  
    　\[注意1\]disabled属性无法与type="hidden"的input元素一起使用  
    　\[注意2\]对于IE7-浏览器必须设置为disabled=“disabled”，而不可以直接设置disabled，否则使用javascript控制时将失效
 *  readonly  
    　readonly属性规定输入字段为只读。只读字段是不能修改的，但用户仍然可以使用tab按键切换到该字段，还可以选中或拷贝其文本  
    readonly属性可与type="text"或"password"的input元素配合使用  
    \[注意\]IE7-浏览器不支持使用javascript控制readonly属性
 *  maxlength  
    maxlength属性规定输入字段的最大长度，以字符个数计  
    　\[注意\]该属性只能与type="text"或type="password"的input元素配合使用
 *  value  
    value属性为input元素设定值。对于不同的输入类型，value属性的用法也不同：
    
        type="button"、"reset"、"submit"用于定义按钮上的显示的文本
        						type="text"、"password"、"hidden"用于定义输入字段的初始值
        						type="checkbox"、"radio"、"image"用于定义与输入相关联的值
        
        					　[注意1]type="checkbox"或"radio"必须设置value属性
        					[注意2]value属性无法与type="file"的input元素一起使用

#### 新增属性 ####

*  autocomplete  
    autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。  
    当用户在字段开始键入时，浏览器基于之前键入过的值，显示出在字段中填写的选项  
    autocomplete属性适用form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color  
    \[注意\]IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效
 *  autofocus  
    autofocus属性规定在页面加载时，域自动地获得焦点  
    autofous属性适用于button、input、keygen、select和textarea元素
 *  novalidate  
    novalidate属性规定在提交表单时不验证form或input域  
    novalidate属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color  
    \[注意\]I**E9-浏览器不支持**
 *  height  
    height属性用于规定image类型的input标签的图像高度  
    height属性用于规定image类型的input标签的图像高度
 *  width  
    width属性用于规定image类型的input标签的图像宽度  
    \[注意\]该属性只适用于image类型的input标签
 *  min  
    最小值
 *  max  
    最大值
 *  step  
    数字间隔
 *  multiple  
    multiple属性规定按住ctrl按键，输入字段可以选择多个值  
    该属性适用于type="email"和"file"的input元素  
    \[注意\] **该属性IE9-浏览器不支持**
 *  pattern  
    规定用于验证input域的模式  
    模型pattern是正则表达式  
    pattern属性适用于以下类型的input元素：text、search、url、tel、email、password  
    \[注意\]**IE9-浏览器及safari浏览器不支持**

*  **placeholder**  
    placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失  
    placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password  
    \[注意\]IE9-浏览器不支持  
    　要修改placeholder的颜色需要使用::placeholder  
    ::placeholder\{color:green;\}
 *  required  
    　required属性规定必须在提交之前填写输入域(不能为空)  
    required属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file  
    \[注意\]IE9-浏览器及safari浏览器不支持
 *  form  
    form属性规定输入域所属的一个或多个表单，form属性必须和所属表单的id  
    form属性适用于所有input标签的类型，若需要引用一个以上的表单时，用空格分隔  
    　\[注意\]**IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效**

*  表单重写属性  
    表单重写属性允许重写form元素的某些属性设定。其中，formnovalidate适用于button或input元素，而其他属性适用于submit或reset的button或input元素
    
     *  formaction  
        重写表单的action属性
     *  formenctype  
        重写表单的enctype属性  
        绝对大数情况下并不需要设置
     *  formmethod  
        重写表单的method属性
     *  formnovalidate  
        重写表单的novalidate属性
     *  formtarget  
        重写表单的target属性

###### 新增类型13个 ######

1.  color  
    定义调色板  
    type="color"的input输入类型会创建一个调色板用来选择颜色，颜色值以URL编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是\#的URL编码  
    \[注意\]safari和IE不支持该类型
2.  date  
    定义选取日、月、年的输入域
3.  datetime  
    定义选取时间、日 月、年的输入域(UTC时间)
4.  datetime-local  
    定义选取时间、日 月、年的输入域(本地时间)
5.  email  
    定义包含email地址的输入域  
    type="email"的input输入类型用于表示语义上的e-mail地址输入域，会自动验证email域的值，外观上与type="text"的input输入类型没有差异，在手机端会唤出英文键盘  
    email类型的input元素支持multiple属性  
    \[注意\]IE9-浏览器及safari浏览器不支持
6.  month  
    定义选取月、年的输入域
7.  number  
    定义包含数值的输入域  
    　type="number"的input输入类型用于处理数字输入，在手机端会唤出数字键盘  
    \[注意\]**IE不支持该类型**  
    **相关属性**  
    max允许最大值  
    min允许最小值  
    step规定合法的数字间隔  
    value默认值
8.  range  
    定义包含一定范围内数字值的输入域  
    type="range"的input输入类型用于处理包含在一定范围内的数字输入，类似于type="number"的input类型  
    \[注意\]IE9-不支持该类型  
    相关属性  
    max规定允许的最大值  
    min规定允许的最小值  
    step规定合法的数字间隔  
    value规定默认值  
    Tip  
    如果不设置min和max，那么默认值为0 和100
9.  search  
    定义搜索域  
    　type="search"的input输入类型用于表示语义上的搜索框，外观上与type="text"的input输入类型没有差异
10. tel  
    定义包含电话号码的输入域  
    type="tel"的input输入类型用于表示语义上的电话输入域，外观上与type="text"的input输入类型没有差异，在手机端会唤出数字键盘
11. time  
    定义选取月、年的输入域
12. url  
    定义包含URL地址的输入域  
    type="url"的input输入类型用于表示语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异  
    　\[注意\]IE9-浏览器及safari浏览器不支持
13. week  
    定义选取周、年的输入域

#### select ####

select元素用来定义一个下拉列表，包含任意数量的option和optgroup元素
    			可以使用的属性
    				autofocus  规定在页面加载后文本区域自动获得焦点
    				disabled  规定禁用该下拉列表
    				form  规定文本区域所属的一个或多个表单
    				multiple  规定可选择多个选项
    				name  规定下拉列表的名称
    				size  规定下拉列表中可见选项的数目
    					注意：size不可为0，默认为1
    			注意：safari浏览器无法设置高度

#### option ####

option元素定义下拉列表中的一个选项
    			 option元素有两种应用场景，除了用于下拉列表select外，还可以用于选项列表datalist中
    			支持属性
    				disabled  规定此选项应在首次加载时被禁用
    				label  定义当使用optgroup时所使用的标注，替代option元素内容
    					注意：firefox不支持label属性
    				selected  规定选项在首次显示在列表中时表现为选中状态
    				value  定义送往服务器的选项值
    					注意：当设置value值时，服务器提交的是value的值；否则提交给服务器的是option的元素内容
    			注意：option无法设置margin、padding、border等盒模型样式

#### optgroup ####

optgroup元素定义选项组，用于组合选项
    			注意：optgroup无法设置margin、padding、border等盒模型样式
    			相关属性
    				label  为选项组规定描述(必须)
    				disabled  规定禁用该选项组(可选)

#### button ####

定义按钮
    			button元素内部可以放置文本或图像或其他多媒体内容
    			禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为
    			始终具有type属性
    				IE7-浏览器的默认类型是button
    					IE7-提交button元素之间的文本
    				而其他浏览器的默认类型是submit
    					而其他浏览器则会提交value属性的内容

#### label ####

label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上
    			label元素有两种用法：一种是使用for属性，另一种是将表单控件嵌套到label内部。但IE6浏览器只识别使用for属性的方法
    			相关属性
    				for  规定label绑定到哪个表单元素
    				form  规定label字段所属的一个或多个表单
    				注意：label标签的for属性要与相关元素的id属性相同

#### textarea ####

textarea定义多行的文本输入控件，文本区可容纳无限数量的文本  
注意：浏览器不允许textarea嵌套textarea  
注意：IE8-浏览器宽高设置不包含滚动条；其他浏览器宽高设置包含滚动条

**相关属性**
    				name  规定文本区的名称
    				value  表示文本区的值
    				disabled  规定禁用该文本区    
    					IE7-浏览器不支持通过setAttribute('disabled','')的写法，必须设置为setAttribute('disabled','disabled')
    				readonly  规定文本区为只读 
    					注意：**IE7-浏览器不支持通过javascript设置readonly属性**
    				autofous  规定在页面加载后文本区域自动获得焦点
    					注意：**IE9-浏览器不支持该属性**
    				required  规定文本区域是必填的
    					注意：**IE9-浏览器和safari浏览器不支持该属性**
    				placeholder  规定描述文本区域预期值的简短提示
    					注意：I**E9-浏览器不支持该属性**
    				maxlength  规定文本区域的最大字符数
    					注意：**IE9-浏览器不支持该属性**
    		 cols  规定文本区内的可见列数
    		 rows  规定文本区内的可见行数
    					注意：可以用cols和rows来规定textarea的尺寸，但更好的办法是使用CSS的height和width属性
    	 wrap  规定当在表单中提交时，文本区域中折行如何处理
    					 当wrap="soft"，表示表单提交时，虽然文字在屏幕上折行，但提交的数据里不会有换行符(默认值)；而当wrap="hard"，表示表单提交时，提交的数据包含文本换行符%0D%0A

#### fieldset ####

fieldset元素用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示fieldset

相关属性
    				disabled  禁用fieldset
    				form  规定fieldset所属的一个或多个表单  
    				name  规定fieldset的名称

#### legend ####

legend元素用于定义fieldset元素的标题