随笔2、HTML5基础

「爱情、让人受尽委屈。」 2024-04-17 17:24 57阅读 0赞

### 1、介绍 ###

> HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML工作团队。  
> **定义：**  
> 广义上讲，是新一代的富客服端解决方案  
> 狭义上讲，是html4的新一代产品

### 2、HTML5基础 ###

> ##### 2.1、语义化结构标签 #####
> 
> 1.  section：表示页面中一个内容区域
> 2.  article：表示一块与上下文无关的独立的内容
> 3.  aside：辅助article区域内的内容
> 4.  header：表示页面中一个内容区块或整个页面的标题
> 5.  footer：表示页面中一个内容区块或整个页面的脚注
> 6.  nav：表示页面中导航栏部分
> 7.  figure：表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）
> 8.  main：表示页面中的主要的内容(id不兼容)

> ##### 2.2、表单-控件 #####
> 
> ###### 新增控件 ######
> 
>  *  **datalist**：  
>     定义输入域的选项列表；  
>     datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输入域，需要把输入域的list属性引用datalist的id。option元素一定要设置value属性。  
>     【注：ie与Safar浏览器不支持】
>  *  **keygen：**  
>     定义密钥对生成器，用于生成密钥；  
>     keygen规定用于表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器
>  *  **output：**  
>     用于计算显示结果；  
>     这是一个语义化标签，定义不同类型的输出，比如脚本的输出；  
>     【注：ie不支持】  
>     例：`<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">`  
>     `0<input type="range" id="a" value="50">100`  
>     `+<input type="number" id="b" value="50">`  
>     `=<output name="x" for="a b"></output>`  
>     `</form>`
>  *  **progress：**  
>     用于标示任务的进度或进程(常用于表示过程)；  
>     相关属性(若不设置属性，则会有进度条左右往返效果)：
> 
> 1.  max：规定任务一共需要多少工作
> 2.  value：规定已经完成多少工作  
>     【注：ie与Safar浏览器不支持】  
>     例：`<input id="btn" type="button" value="开始下载">`  
>     `下载进度：<progress id="test" value="0" max="100"></progress>`  
>     `<script>`  
>     `var oTimer;`  
>     `btn.onclick = function(){`  
>     `if(oTimer){`  
>     `return;`  
>     `}`  
>     `oTimer = setInterval(function(){`  
>     `test.value++;`  
>     `if(test.value >= test.max){`  
>     `clearInterval(oTimer);`  
>     `}`  
>     `},50);`  
>     `}`  
>     `</script>`
> 
>  *  **meter：**  
>     用于显示剩余容量或剩余库存，通常表示状态  
>     【注：ie与Safar浏览器不支持】  
>     相关属性
> 
> 1.  form：规定meter元素所属的一个或多个表单
> 2.  high：规定被视作高的值的范围
> 3.  low：规定被视作低的值的范围
> 4.  max：规定范围的最大值
> 5.  min：规定范围的最小值
> 6.  optimum：规定度量的最优值
> 7.  规定度量的当前值(必写)  
>     \[注意\]：min 小于 low 小于 high 小于 max
> 
> #  #
> 
> ###### 传统控件 ######
> 
> ###### **input** `<input type="">` ######
> 
>  *  **传统类型**
> 
> 1.  button：定义可点击按钮，单默认下不具有任何行为
> 2.  checkbox：定义复选框  
>     允许用户在给定数目的选择中选择一个或多个选项，同一组的按钮，name值一直  
>     【注：checkbox类型的input元素无法设置padding和border(ie10-除外)】
> 3.  file：定义输入字段和“浏览”按钮，供文件上传
> 4.  hidden：定义输入隐藏类型用于在表单中增加对用户不可见，但需要提交的额外数据  
>     【注：disabled属性无法与type为hidden的input元素一起使用】
> 5.  image：定义图像形式和按钮  
>     可设置width、height、src、alt属性
> 6.  password：密码输入框  
>     字母输入后会被隐藏，一般是一连串的点
> 7.  radio：定义单选按钮  
>     允许用户从给定数目的选择中选一个选项，同一组按钮，name值一致  
>     【注：radio类型的input元素无法设置padding和border(ie10-浏览器除外)】
> 8.  reset：定义重置按钮,重置按钮会清空表单中所有的数据
> 9.  submit：定义提交按钮，把表单数据发送到服务器
> 10. text：定义单行的输入字段，用户可在其中输入文本
> 
> #  #
> 
>  *  **新增类型**
> 
> 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不支持该类型】  
>     相关属性  
>     a、max允许最大值  
>     b、min允许最小值  
>     c、step规定合法的数字间隔  
>     d、value默认值
> 8.  range：定义包含一定范围内数字值的输入域  
>     type="range"的input输入类型用于处理包含在一定范围内的数字输入，类似于type="number"的input类型  
>     【注意：IE9-不支持该类型】  
>     相关属性  
>     a、max规定允许的最大值  
>     b、min规定允许的最小值  
>     c、step规定合法的数字间隔  
>     d、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：定义选取周、年的输入域
> 
> #  #
> 
>  *  **传统属性**
> 
> 1.  alt：alt属性为图像输入规定替代文本，功能类似于image元素的alt属性，为用户由于某些原因无法查看图像时提供备选信息  
>     【注意：alt属性只能与type="image"的input元素配合使用】
> 2.  size：size属性对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度  
>     【注意由于size属性是一个可视化的设计属性，推荐使用CSS来代替它】
> 3.  src：src属性作为提交按钮显示的图像的URL  
>     【注意src属性只能且必须与type="image"的input元素配合使用】
> 4.  checked：支持标签  
>     input type类型为radio  
>     input type类型为checkbox  
>     checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置
> 5.  name：name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据  
>     【注意只有设置了name属性的表单元素才能在提交表单时传递它们的值  
>     所有的表单控件都具有name属性】
> 6.  type：用来规定input元素的类型  
>     【注意如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type=“text”】
> 7.  disabled：disabled属性规定应该禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本  
>     【注意1：disabled属性无法与type="hidden"的input元素一起使用】  
>     【注意2：对于IE7-浏览器必须设置为disabled=“disabled”，而不可以直接设置disabled，否则使用javascript控制时将失效】
> 8.  readonly：readonly属性规定输入字段为只读。只读字段是不能修改的，但用户仍然可以使用tab按键切换到该字段，还可以选中或拷贝其文本  
>     readonly属性可与type="text"或"password"的input元素配合使用  
>     【注意：IE7-浏览器不支持使用javascript控制readonly属性】
> 9.  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元素一起使用】
> 
> #  #
> 
>  *  **新增属性**
> 
> 1.  autocomplete：autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。  
>     当用户在字段开始键入时，浏览器基于之前键入过的值，显示出在字段中填写的选项  
>     autocomplete属性适用form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color  
>     【注意：IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效】
> 2.  autofocus：autofocus属性规定在页面加载时，域自动地获得焦点  
>     autofous属性适用于button、input、keygen、select和textarea元素
> 3.  novalidate：novalidate属性规定在提交表单时不验证form或input域  
>     novalidate属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color  
>     【注意：IE9-浏览器不支持】
> 4.  height  
>     height属性用于规定image类型的input标签的图像高度  
>     height属性用于规定image类型的input标签的图像高度
> 5.  width  
>     width属性用于规定image类型的input标签的图像宽度  
>     【注意：该属性只适用于image类型的input标签】
> 6.  min：最小值
> 7.  max：最大值
> 8.  step：数字间隔
> 9.  multiple：multiple属性规定按住ctrl按键，输入字段可以选择多个值  
>     该属性适用于type="email"和"file"的input元素  
>     【注意：该属性IE9-浏览器不支持】
> 10. pattern  
>     规定用于验证input域的模式  
>     模型pattern是正则表达式  
>     pattern属性适用于以下类型的input元素：text、search、url、tel、email、password  
>     【注意：IE9-浏览器及safari浏览器不支持】  
>     `<form action="#">`  
>     `<input pattern="\d{3}">`  
>     `<input type="submit">`  
>     `</form>`
> 11. placeholder  
>     placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在>输入域为空时显示出现，在输入域获得焦点时消失  
>     placeholder属性适用于以下类型的input元素:text、search、url、tel、>email、password  
>     【注意：IE9-浏览器不支持】  
>     　要修改placeholder的颜色需要使用::placeholder  
>     例：::placeholder\{color:green;\}
> 12. required  
>     required属性规定必须在提交之前填写输入域(不能为空)  
>     required属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file  
>     【注意：IE9-浏览器及safari浏览器不支持】
> 13. form  
>     form属性规定输入域所属的一个或多个表单，form属性必须和所属表单的id  
>     form属性适用于所有input标签的类型，若需要引用一个以上的表单时，用空格分隔  
>     【注意：IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效】  
>     `<form id="form" action="#">`  
>     `<input type="submit">`  
>     `</form>`  
>     `<input name="test" form="form">`
> 14. 表单重写属性：表单重写属性允许重写form元素的某些属性设定。其中，formnovalidate适用于button或input元素，而其他属性适用于submit或reset的button或input元素  
>     a、formaction：重写表单的action属性  
>     b、formenctype：：重写表单的enctype属性，绝对大数情况下并不需要设置  
>     c、formmethod：重写表单的method属性  
>     d、formnovalidate：重写表单的novalidate属性  
>     e、formtarget：重写表单的target属性
> 
> #  #
> 
> ###### **select** ######
> 
> select元素用来定义一个下拉列表，包含任意数量的option和optgroup元>素  
>  可以使用的属性：  
>   1. autofocus>   规定在页面加载后文本区域自动获得焦点  
>   2. disabled   规定禁用该下拉列表  
>   3. form     规定文本区域所属的一个或多个表单  
>   4. multiple   规定可选择多个选项  
>   5. name    规定下拉列表的名称  
>   6. size     规定下拉列表中可见选项的数目  
>    >【注意：size不可为0，默认为1】  
>   7. 【注意：safari浏览器无法设置高度】
> 
> ###### **option** ######
> 
> 1.  option元素定义下拉列表中的一个选项
> 2.  option元素有两种应用场景，除了用于下拉列表select外，还可以用于选项列表datalist中
> 3.  支持属性  
>     disabled：规定此选项应在首次加载时被禁用  
>     label：定义当使用optgroup时所使用的标注，替代option元素内容  
>     【注意：firefox不支持label属性】  
>     selected：规定选项在首次显示在列表中时表现为选中状态  
>     value：定义送往服务器的选项值  
>     【注意：当设置value值时，服务器提交的是value的值；否则提交给服务器的是option的元素内容】
> 4.  【注意：option无法设置margin、padding、border等盒模型样式】
> 
> #  #
> 
> ###### **optgroup** ######
> 
> optgroup元素定义选项组，用于组合选项  
> 【注意：optgroup无法设置margin、padding、border等盒模型样式】  
> 相关属性  
> label：为选项组规定描述(必须)  
> disabled：规定禁用该选项组(可选)
> 
> #  #
> 
> ###### **button** ######
> 
> 定义按钮
> 
> 1.  button元素内部可以放置文本或图像或其他多媒体内容
> 2.  禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为
> 3.  始终具有type属性  
>     IE7-浏览器的默认类型是button------IE7-提交button元素之间的文本  
>     而其他浏览器的默认类型是submit------而其他浏览器则会提交value属性的内容
> 
> ###### **label** ######
> 
> 1.  label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上
> 2.  label元素有两种用法：一种是使用for属性，另一种是将表单控件嵌套到label内部。但IE6浏览器只识别使用for属性的方法  
>     相关属性  
>     for：规定label绑定到哪个表单元素  
>     form：规定label字段所属的一个或多个表单  
>     【注意：label标签的for属性要与相关元素的id属性相同】
> 
> #  #
> 
> ###### **textareal** ######
> 
> textarea定义多行的文本输入控件，文本区可容纳无限数量的文本  
> 【注意：浏览器不允许textarea嵌套textarea】  
> 【注意：IE8-浏览器宽高设置不包含滚动条；其他浏览器宽高设置包含滚动条】  
> 相关属性
> 
> 1.  name：规定文本区的名称
> 2.  value：表示文本区的值
> 3.  disabled：规定禁用该文本区  
>     IE7-浏览器不支持通过setAttribute(‘disabled’,’’)的写法，必须设置为setAttribute(‘disabled’,‘disabled’)
> 4.  readonly：规定文本区为只读  
>     【注意：IE7-浏览器不支持通过javascript设置readonly属性】
> 5.  autofous：规定在页面加载后文本区域自动获得焦点  
>     【注意：IE9-浏览器不支持该属性】
> 6.  required：规定文本区域是必填的  
>     【注意：IE9-浏览器和safari浏览器不支持该属性】
> 7.  placeholder：规定描述文本区域预期值的简短提示  
>     【注意：IE9-浏览器不支持该属性】
> 8.  maxlength：规定文本区域的最大字符数  
>     【注意：IE9-浏览器不支持该属性】
> 9.  cols：规定文本区内的可见列数
> 10. rows：规定文本区内的可见行数  
>     【注意：可以用cols和rows来规定textarea的尺寸，但更好的办法是使用CSS的height和width属性】
> 11. wrap：规定当在表单中提交时，文本区域中折行如何处理  
>     当wrap=“soft”，表示表单提交时，虽然文字在屏幕上折行，但提交的数据里不会有换行符(默认值)；而当wrap=“hard”，表示表单提交时，提交的数据包含文本换行符%0D%0A
> 
> ###### **fieldsetl** ######
> 
> 1fieldset元素用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示fieldset  
> 相关属性
> 
> 1.  disabled：禁用fieldset
> 2.  form：规定fieldset所属的一个或多个表单
> 3.  name：规定fieldset的名称
> 
> ###### **legend** ######
> 
> legend元素用于定义fieldset元素的标题  
> `<fieldset>`  
> `<legend>健康信息</legend>`  
> `身高：<input type="text" />`  
> `体重：<input type="text" />`  
> `</fieldset>`

> ##### 2.3、多媒体标签 #####
> 
> ###### **audio** ######
> 
>  *  音频播放
>  *  相关属性  
>     autoplay：自动播放  
>     controls：显示控件  
>     loop：循环播放  
>     preload：音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)  
>     src：要播放的音频url  
>     【注意：元素不支持播放wma格式的文件】
> 
> ###### **video** ######
> 
>  *  视频播放
>  *  相关属性  
>     autoplay：自动播放  
>     controls：显示控件  
>     height：播放器高度  
>     width：播放器宽度  
>     loop：循环播放  
>     preload：视频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)  
>     src：要播放视频的url  
>     poster：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像  
>     例如  
>     `<video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>`
> 
> ###### **source** ######
> 
>  *  为video和audio提供媒介资源  
>     media：规定媒体资源的类型(没有浏览器支持)  
>     src：规定媒体文件的url  
>     type：规定媒体资源的MIME类型
>  *  常用类型  
>     音频  
>     `audio/ogg`  
>     `audio/mpeg`  
>     视频  
>     `video/ogg`  
>     `video/mp4`  
>     `video/webm`  
>     例如
> 
> 1.  `<audio> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mp3"> audio player not available. </audio>`
> 2.  `<video> <source src="video.webm" type="video/webm; codecs='vp8,vorbis'"> <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'"> <source src="video.mp4"> video player not available. </video>`  
>     Tip：使用多媒体标签应该在标签中间包含一定的提示内容，这样当用户浏览器不支持的时候可以显示