02 html5 基础
html5基础
前言介绍
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML工作团队。
定义
如果从狭义的角度来讲，HTML5就是HTML4的新一代产品。
而如果从广义的角度来讲，则是新一代的富客户端解决方案
发展史
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。
2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg`也进行了改进，性能得到进一步提升。
目前在开发的领域，大家说的H5开发其实指的是HTML5 + CSS3 + JavaScript等技术。
在目前的软件开发生态链中，H5的技术充斥着很多的领域。无论是网站开发、移动端开发、软件开发、游戏等等。
兼容
支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
需要注意的是，虽然很多浏览器目前已经能够支持HTML5，但是显示效果仍旧存在差异性。这时，我们如果从样式的角度出发，可以采用下面的几种css方案。
css reset
Normalize.css
CSS hack
第三方插件
语义化结构标签
section元素 表示页面中的一个内容区块
article元素 表示一块与上下文无关的独立的内容
aside元素是辅助 article 区域的内容。也可以理解为整个网页的 辅助区域
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容(ie不兼容)
智能表单
控件
新增控件
datalist
定义输入域的选项列表
datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输入域，需要把输入域的list属性引用datalist的id。option元素一定要设置value属性
注意：IE9-浏览器及safari浏览器不支持 keygen 定义密钥对生成器，用于生成密钥 keygen规定用于表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器 output 用于显示计算的结果 这是一个语义化标签，定义不同类型的输出，比如脚本的输出 0100 + = IE不支持 progress progress元素用来标示任务的进度或进程(常用于表示过程) 注意：IE9-浏览器及safari浏览器不支持 相关属性 max 规定任务一共需要多少工作 value 规定已经完成多少工作 如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果 例如： 如果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 [注意]IE9-浏览器不支持 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个 color 定义调色板 type="color"的input输入类型会创建一个调色板用来选择颜色，颜色值以URL编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是#的URL编码 [注意]safari和IE不支持该类型 date 定义选取日、月、年的输入域 datetime 定义选取时间、日 月、年的输入域(UTC时间) datetime-local 定义选取时间、日 月、年的输入域(本地时间) email 定义包含email地址的输入域 type="email"的input输入类型用于表示语义上的e-mail地址输入域，会自动验证email域的值，外观上与type="text"的input输入类型没有差异，在手机端会唤出英文键盘 email类型的input元素支持multiple属性 [注意]IE9-浏览器及safari浏览器不支持 month 定义选取月、年的输入域 number 定义包含数值的输入域 type="number"的input输入类型用于处理数字输入，在手机端会唤出数字键盘 [注意]IE不支持该类型 相关属性 max允许最大值 min允许最小值 step规定合法的数字间隔 value默认值 range 定义包含一定范围内数字值的输入域 type="range"的input输入类型用于处理包含在一定范围内的数字输入，类似于type="number"的input类型 [注意]IE9-不支持该类型 相关属性 max规定允许的最大值 min规定允许的最小值 step规定合法的数字间隔 value规定默认值 Tip 如果不设置min和max，那么默认值为0 和100 search 定义搜索域 type="search"的input输入类型用于表示语义上的搜索框，外观上与type="text"的input输入类型没有差异 tel 定义包含电话号码的输入域 type="tel"的input输入类型用于表示语义上的电话输入域，外观上与type="text"的input输入类型没有差异，在手机端会唤出数字键盘 time 定义选取月、年的输入域 url 定义包含URL地址的输入域 type="url"的input输入类型用于表示语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异 [注意]IE9-浏览器及safari浏览器不支持 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 规定描述文本区域预期值的简短提示 注意：IE9-浏览器不支持该属性 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元素的标题 健康信息 身高： 体重： 多媒体标签 audio 音频播放 相关属性 autoplay 自动播放 controls 显示控件 loop 循环播放 preload 音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性) src 要播放的音频url 注意：元素不支持播放wma格式的文件 video 视频播放 相关属性 autoplay 自动播放 controls 显示控件 height 播放器高度 width 播放器宽度 loop 循环播放 preload 视频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性) src 要播放视频的url poster 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 例如 source 为video和audio提供媒介资源 media 规定媒体资源的类型(没有浏览器支持) src 规定媒体文件的url type 规定媒体资源的MIME类型 常用类型 音频 audio/ogg audio/mpeg 视频 video/ogg video/mp4 video/webm 例如 audio player not available. video player not available. Tip 使用多媒体标签应该在标签中间包含一定的提示内容，这样当用户浏览器不支持的时候可以显示
02 html5 基础相关推荐
- HTML html5基础详细笔记 第一个模块
第01章-前端核心技术-HTML5基础 学习目标 了解什么是HTML 掌握HTML标签.元素的概念 重点 掌握HTML常用头部元素的使用 重点 掌握HTML标题.段落.文本.图片等排版 重点 难点 掌 ...
- html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1. 声明的变化 2. 指定字符编码的变化,html5中建议使用utf-8 3. Html5中允许 没有 ...
- 深入浅出Pytorch：02 PyTorch基础知识
深入浅出Pytorch 02 PyTorch基础知识 内容属性:深度学习(实践)专题 航路开辟者:李嘉骐.牛志康.刘洋.陈安东 领航员:叶志雄 航海士:李嘉骐.牛志康.刘洋.陈安东 开源内容:http ...
- html5基础知识文档,HTML5基础知识（1）
原标题:HTML5基础知识(1) html5是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力, ...
- html5实践开发教程,HTML5基础与实践教程
HTML5基础与实践教程 语音 编辑 锁定 讨论 上传视频 <HTML5基础与实践教程>是2010年4月机械工业出版社出版的图书,作者是云翔,刘猛猛,欧阳植昊. 书 名 HTML5基 ...
- Maven-学习笔记02【基础-Maven的安装和仓库种类】
Java后端 学习路线 笔记汇总表[黑马程序员] 黑马程序员(腾讯微云)Maven基础讲义.pdf Maven-学习笔记01[基础-Maven基本概念] Maven-学习笔记02[基础-Maven的安 ...
- JQuery-学习笔记02【基础——JQuery选择器】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- html5语言基础教程,HTML5基础教程，从入门到精通，零基础学HTML5
随着互联网的快速发展,对前端开发方面的人才需求越来越大,其中Web前端领域的HTML5也受到许多人追捧 HTML5是构建Web内容的一种语言描述方式.HTML5是互联网的下一代标准,是构建以及呈现互联 ...
最新文章
- vs2010 静态使用 opencv 2.46 库
- 数字图像处理及MATLAB实现实验五——图像增强
- 数据库设计中的五个范式
- 射频篇（一） 模拟、射频器件学习(1) —— 晶振（OSC）
- 提高ipad浏览器下大尺寸xml文件解析的性能
- 如何利用华为交换机配置SSH登录
- 不小心发现谷歌 Firebase 消息服务的漏洞，获奖3万+美元
- EMNLP'21 | 检索式对话情感回复
- 15-struct(构造函数，重载)
- 怎样理解电脑评分_电脑可以理解我们的情绪吗？
- 几何画板椭圆九种画法_详解椭圆的五种画法，很全面！！！
- java 避免gc_减少JAVA GC
- 淘宝购物车测试用例+流程图
- 《机器学习》学习笔记
- 为知笔记的快捷键整理
- NNS域名系统之域名竞拍
- Steam游戏—底特律：化身成人，回家章节中女主角上二楼打扫卫生，按L Shift开窗按不动怎么办
- 赵小楼《天道》《遥远的救世主》深度解析（41）芮小丹的恋爱观背后的文化属性
- 三元一次方程组例题_三元一次方程组习题及解答
- win10计算机ip如何更改,Win10本地连接ip怎么更改_Win10怎么更改ip地址？-192路由网...