html5 基础入门

html5 基础入门

前言介绍

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML工作团队。

如果从狭义的角度来讲，HTML5就是HTML4的新一代产品。

而如果从广义的角度来讲，则是新一代的富客户端解决方案。

What is Rich Client[富客户端]?

指具有很强交互性和体验的客户端程序.

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 兼容性

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

需要注意的是，虽然很多浏览器目前已经能够支持HTML5，但是显示效果仍旧存在差异性。这时，我们如果从样式的角度出发，可以采用下面的几种css方案。

**CSS Reset **

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。

CSS Reset 下载地址: https://meyerweb.com/eric/tools/css/reset/

Normalize (号称是CSS reset的替代方案，保留了一些内置的样式，并不是清除所有)。

下载地址:https://necolas.github.io/normalize.css/

CSS Hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

分类:

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

关于IE的条件注释可以参考https://www.cnblogs.com/liujunhang/articles/10667109.html.

CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。

属性前缀法:

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS hack 对照表

hack	写法	实例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
*	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
+	+color	绿色	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	黄色	Y	Y	N	N	N	N	N	N	N	N
_	_color	蓝色	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y
\0	color:red\0	红色	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	粉色	N	N	N	N	N	N	Y	N	Y	N
!important	color:blue !important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

说明：在标准模式中

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

选择器前缀法:

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

等等

CSS Hack利弊：

一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。

优雅降级和渐进增强:

html5 基础入门

由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

第三方插件:

关于兼容性问题，除了上述的解决方案外，还可以通过使用第三方的插件来解决兼容性问题。

DTD

DTD可以理解为文档声明头，在HTML5中的文档声明头，不同于之前的HTML4，变成了<!doctype html>。

智能表单

表单在Html5之前就已经存在很久，但是在Html5阶段进行了很多程度的增强。

input type 类型整理总结

文本类:

Text，文本

Url，网络地址

Password，密码

Email，邮箱地址

操作类:

Color：颜色选取

Checkbox ，复选框

Radio，单选框

File，上传文件

Number，数值

Range，百分百滑动条

功能类：

Button，按钮

Image，图片提交按钮

Submit，文字提交按钮

Reset，重置表单

Date类：

Date，年月日控件

Month，年月控件

Week，年周控件

Time，时间控件

Datetime，年月日+时间控件

Datetime-local，本地年月日+时间控件

特殊类：

Hidden，隐藏信息

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Form</title>

    <style>

        form {

            width: 670px;

            margin: 0 auto;

        }

        td {

            background-color: #ffffff;

        }

        td, input {

            font-size: 20px;

        }

        th {

            font-size: 26px;

            background-color: #22ccff;

            letter-spacing: 2px;

        }

        #sub {

            float: right;

            margin-left: 10px;

            position: relative;

            top: 50px;

            left: 0px;

            -webkit-transition: all 0.5s ease-in-out 0.0s;

            -moz-transition: all 0.5s ease-in-out 0.0s;

            -ms-transition: all 0.5s ease-in-out 0.0s;

            -o-transition: all 0.5s ease-in-out 0.0s;

            transition: all 0.5s ease-in-out 0.0s;

        }

    </style>

</head>

<body>

<form target="_blank" action="URL">

    <!-- 额外的提交按钮 -->

    <input type="submit" value="提交" id="sub"/>

    <table bgcolor="#000" cellpadding="10" align="center">

        <!-- 文本类 -->

        <tr>

            <th colspan="2">文本类</th>

        </tr>

        <tr>

            <td>text</td>

            <td><input type="text" value="attribute:value" pattern="[A-Z,a-z]{1}[a-z,0-9]{3,10}"/></td>

        </tr>

        <tr>

            <td>url</td>

            <td>

                <input type="url" placeholder="attribute:placeholder" value="a:b"/>

            </td>

        </tr>

        <tr>

            <td>password</td>

            <td>

                <input type="password" maxlength="8" placeholder="请输入密码" autofocus required/>

            </td>

        </tr>

        <tr>

            <td>email</td>

            <td>

                <input type="email" value="1@2.3"/>

            </td>

        </tr>

        <tr>

            <td>tel</td>

            <td><input type="tel"></td>

        </tr>

        <tr>

            <td>search</td>

            <td><input type="search"/></td>

        </tr>

        <tr>

            <td colspan="2">

                <p>“placeholder”：占位符；</p>

                <p>“autofocus”：焦点获取；</p>

                <p>“required”；表单必填项；</p>

                <p>“pattern”；输入规范，该值为一个正则表达式；</p>

                <p>在H5中，URL和email类型在提交表单时，会检测是否符合格式。</p>

            </td>

        </tr>

        <!-- 文本类 end -->

        <!-- 操作类 -->

        <tr>

            <th colspan="2">操作类</th>

        </tr>

        <tr>

            <td>checkbox</td>

            <td>

                <label><input type="checkbox" name="ch_box"/>box_1</label>

                <label><input type="checkbox" name="ch_box"/>box_2</label>

                <label><input type="checkbox" name="ch_box"/>box_3</label>

                <input type="checkbox" id="ch_box4"/>

                <label for="ch_box4">box_4</label>

            </td>

        </tr>

        <tr>

            <td>radio</td>

            <td>

                <label><input type="radio" name="radio"/>ra_1</label>

                <label><input type="radio" name="radio"/>ra_2</label>

                <label><input type="radio" name="radio"/>ra_3</label>

                <label><input type="radio" name="radio"/>ra_4</label>

            </td>

        </tr>

        <tr>

            <td colspan="2">

                label:<br/>

                非跨度：&lt;label&gt;&lt;input&gt;&lt;/input&gt;&lt;/label&gt;<br/>

                跨&emsp;度：&lt;label for="input_id"&gt;&lt;/label&gt;<br/>

                &emsp;&emsp;&emsp;&emsp;&lt;input id="input_id"&gt;&lt;/input&gt;

            </td>

        </tr>

        <tr>

            <td>file</td>

            <td>

                <input type="file" multiple="multiple"/>

                <p>multiple="multiple"：允许添加多个值；</p>

                <p>accept="MIME_type";指定上传文件的类型；</p>

                <p>如：accept="image/jpg,image/gif"</p>

                <p><a href="http://www.w3school.com.cn/media/media_mimeref.asp" target="_blank">MIME_type 附录表</a></p>

            </td>

        </tr>

        <tr>

            <td>number</td>

            <td><input type="number" max="100" min="90" step="2"/>

                <p>只允许输入数字；"e":自然常数;</p></td>

        </tr>

        <tr>

            <td>range</td>

            <td>

                <input type="range" max="100" min="0" step="20"/>

                <p>“value”，默认为50，范围0~100；</p>

            </td>

        </tr>

        <tr>

            <td colspan="2">max：最多值；min：最小值；step：步长；</td>

        </tr>

        <tr>

            <td>color</td>

            <td><input type="color" value="#00ff00"/> 数值型：#ffffff；</td>

        </tr>

        <!-- 操作类 end -->

        <!-- 表单功能 -->

        <tr>

            <th colspan="2">功能类</th>

        </tr>

        <tr>

            <td>button</td>

            <td>

                <input type="button" value="button"/>

                <button>This is a button.<img src="btn_03.png" width="52"/></button>

                <p>“button”允许嵌入其他元素；</p>

            </td>

        </tr>

        <tr>

            <td>image</td>

            <td><input type="image" src="btn_03.png" width="32"

                       height="26"/><span>&emsp;H5中使用“width”“height”修改图片大小；</span></td>

        </tr>

        <tr>

            <td>submit</td>

            <td>

                <input type="submit"/>

                <p>get:在url地址上传送参数到服务器;<br/>post:在后台传送参数到服务器; </p>

            </td>

        </tr>

        <tr>

            <td>reset</td>

            <td><input type="reset"/></td>

        </tr>

        <!-- 表单功能 end -->

        <!-- 日期类型 -->

        <tr>

            <th colspan="2">Date 类</th>

        </tr>

        <tr>

            <td>date</td>

            <td><input type="date"/></td>

        </tr>

        <tr>

            <td>month</td>

            <td><input type="month"/></td>

        </tr>

        <tr>

            <td>week</td>

            <td><input type="week"/></td>

        </tr>

        <tr>

            <td>time</td>

            <td><input type="time"/></td>

        </tr>

        <tr>

            <td>datetime</td>

            <td><input type="datetime" value="2016-08-02T08:32Z"/></td>

        </tr>

        <tr>

            <td>datetime-local</td>

            <td><input type="datetime-local"/></td>

        </tr>

        <!-- 日期类型 end -->

        <!-- 特殊类 -->

        <tr>

            <th colspan="2">特殊类</th>

        </tr>

        <tr>

            <td>hidden</td>

            <td><input type="hidden"/>

                <p>可用于记录一些表单状态信息<br/>（例如使用value的值标记可选项为非空值的个数），<br/>或者其他自定义信息；</p></td>

        </tr>

    </table>

</form>

</body>

<script type="text/javascript">

    function sub_move() {

        var s = document.getElementById("sub");

        window.onscroll = function _scroll() {

            var top = document.documentElement.scrollTop || document.body.scrollTop;

            s.style.top = top + 50 + "px";

        }

    }

</script>

<script type="text/javascript">

    window.onload = function main() {

        sub_move();

    }

</script>

</html>

input 元素属性总结

form元素只是一个数据获取元素的容器，而容器内的元素称为表单控件。最常用的表单控件是input元素

accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性

传统属性:

name 属性

name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据

注意：只有设置了name属性的表单元素才能在提交表单时传递它们的值

type属性

type属性用来规定input元素的类型

注意：如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type="text"

accept 属性

accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型，然而它只是建设性的，并很可能被忽略，它接受逗号分隔的MIME类型

注意：该属性只能与type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt属性

alt属性为图像输入规定替代文本，功能类似于image元素的alt属性，为用户由于某些原因无法查看图像时提供备选信息

注意：alt属性只能与type="image"的input元素配合使用

<input type="image" src="#" alt="测试图片">

checked属性

checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置

注意：checked属性只能与type="radio"或type="checkbox"的input元素配合使用

<input type="radio" name="radio" value="1" checked>

<input type="radio" name="radio" value="2">

<input type="checkbox" name="checkbox" value="1">

<input type="checkbox" name="checkbox" value="2">

disabled属性

disabled属性规定应该禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本

[注意1]disabled属性无法与type="hidden"的input元素一起使用

[注意2]对于IE7-浏览器必须设置为disabled="disabled"，而不可以直接设置disabled，否则使用javascript控制时将失效

<button id="btn1">输入域可用</button>

<button id="btn2">输入域不可用</button>

<input id="test" disabled value="内容">

<script>

btn1.onclick = function(){

    test.removeAttribute('disabled');

}

btn2.onclick = function(){

    test.setAttribute('disabled','disabled');

}

</script>

readonly属性

readonly属性规定输入字段为只读。只读字段是不能修改的，但用户仍然可以使用tab按键切换到该字段，还可以选中或拷贝其文本

readonly属性可与type="text"或"password"的input元素配合使用

注意：IE7-浏览器不支持使用javascript控制readonly属性

<button id="btn1">输入域只读</button>

<button id="btn2">输入域可读写</button>

<input id="test" value="内容" readonly>

<script>

btn1.onclick = function(){

    test.setAttribute('readonly','readonly');

}

btn2.onclick = function(){

    test.removeAttribute('readonly');

}

</script>

maxlength属性

maxlength属性规定输入字段的最大长度，以字符个数计

注意：该属性只能与type="text"或type="password"的input元素配合使用

<input maxlength="6">

<input type="password" maxlength="6">

size属性

size属性对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度

注意：由于size属性是一个可视化的设计属性，推荐使用CSS来代替它

<input size="1">

<input type="password" size="2">

src属性

src属性作为提交按钮显示的图像的URL

注意：src属性只能且必须与type="image"的input元素配合使用

<form action="#">

    <input name="test">

    <input type="image" src="1.jpg" width="99" height="99" alt="测试图片">

</form>

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属性，该属性才有效

<input name="test1" autocomplete="on">

<input name="test2" autocomplete="off">

autofocus属性

autofocus属性规定在页面加载时，域自动地获得焦点

autofous属性适用于button、input、keygen、select和textarea元素

<input name="test1">

<input name="test2" autofocus>

novalidate属性

novalidate属性规定在提交表单时不验证form或input域

novalidate属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color

注意：IE9-浏览器不支持

height属性

height属性用于规定image类型的input标签的图像高度

注意：该属性只适用于image类型的input标签

width属性

width属性用于规定image类型的input标签的图像宽度

注意：该属性只适用于image类型的input标签

<form action="#">

    <input name="test">

    <input type="image" src="submit.jpg" width="99" height="99">

</form>

list属性

大多数输入类型包含一个属性list，它和一个新元素datalist结合使用，这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示，而是为其他元素的list属性提供数据

list属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color

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

min属性

min属性规定输入域所允许的最小值

max属性

max属性规定输入域所允许的最大值

step属性

step属性为输入域规定合法的数字间隔

min、max、step属性适用于以下类型的input元素:date pickers、number、range

multiple属性

multiple属性规定按住ctrl按键，输入字段可以选择多个值

该属性适用于type="email"和"file"的input元素

注意：该属性IE9-浏览器不支持

<input id="test" type="file" multiple>

pattern属性

pattern属性规定用于验证input域的模式。模型pattern是正则表达式

pattern属性适用于以下类型的input元素：text、search、url、tel、email、password

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

<form action="#">

    <input pattern="\d{3}">

    <input type="submit">

</form>

placeholder属性

placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失

placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password

注意：IE9-浏览器不支持

<form action="#">

    <input type="tel" placeholder="请输入数字" pattern="\d{11}">

    <input type="submit">

</form>

要修改placeholder的颜色需要使用::placeholder

required属性

required属性规定必须在提交之前填写输入域(不能为空)

required属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file

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

<form action="#">

    <input required>

    <input type="submit">

</form>

form属性

form属性规定输入域所属的一个或多个表单，form属性必须和所属表单的id

form属性适用于所有input标签的类型，若需要引用一个以上的表单时，用空格分隔

注意：IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效

<form id="form" action="#">

    <input type="submit">

</form>

<input name="test" form="form">

formaction属性

重写表单的action属性.

<form action="#" >

First name: <input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

<input type="submit" value="提交" /><br />

<input type="submit" formaction="#" value="以管理员身份提交" />

</form>

formmethod属性

重写表单的method属性.

<form action="#" method="get">

  First name: <input type="text" name="fname" /><br />

  Last name: <input type="text" name="lname" /><br />

<input type="submit" value="提交" />

<input type="submit" formmethod="post" formaction="#" value="使用POST提交" />

</form>

formtarget属性

　重写表单的target属性.

<form action="#">

  First name: <input type="text" name="fname" /><br />

  Last name: <input type="text" name="lname" /><br />

<input type="submit" value="提交" />

<input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" />

</form>

form表单控件总结

input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件。

传统控件:

button 定义一个按钮
select 定义一个下拉列表
option 定义下拉列表中的一个选项
optgroup 定义选项组，用于组合选项
textarea 定义多行的文本输入控件
fieldset 分组表单内的相关元素
legend 定义fieldset元素的标题
label 定义input元素的标注

button

button元素用来定义一个按钮，button元素内部可以放置文本或图像或其他多媒体内容。但唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为

始终为button元素设置type属性，IE7-浏览器的默认类型是button，而其他浏览器的默认类型是submit

IE7-提交button元素之间的文本，而其他浏览器则会提交value属性的内容

<button>元素比<input>元素更易样式化。可以添加内联HTML内容（如<em>，<strong>甚至<img>），并使用:after和:before伪元素实现复杂的渲染，而<input>只有文本值属性
```
//IE7-浏览器:按下提交按钮时，URL添加?btn=1

//其他浏览器:按下button按钮时，URL添加?btn=2

<form action="#" >

<button value="2" name="btn">1</button>

<input type="submit">

</form>
```
属性：

autofocus 规定当页面加载时按钮自动获得焦点

disabled 规定应该禁用该按钮

form 规定按钮属性一个或多个表单

formaction 覆盖form元素的action属性

formenctype 覆盖form元素的enctype属性

formmethod 覆盖form元素的method属性

formnovaliadate 覆盖form元素的novalidate属性

formtarget 覆盖form元素的target属性

name 规定按钮的名称

type 规定按钮的类型

value 规定按钮的初始值
select

select元素用来定义一个下拉列表，包含任意数量的option和optgroup元素。

属性：

autofocus 规定在页面加载后文本区域自动获得焦点

disabled 规定禁用该下拉列表

form 规定文本区域所属的一个或多个表单

multiple 规定可选择多个选项

name 规定下拉列表的名称

size 规定下拉列表中可见选项的数目

注意：size不可为0，默认为1

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 id="btn1a" type="button">启用</button>

<button id="btn1b" type="button">禁用</button>

<button id="btn2a" type="button">可多选</button>

<button id="btn2b" type="button">不可多选</button>

<button id="btn3a" type="button">size=1</button>

<button id="btn3b" type="button">size=2</button>

<button id="btn3c" type="button">size=3</button>

<button id="btn3d" type="button">不设置size</button>

<form action="#">

    <br><br>

    <select name="test" id="select">

        <optgroup label="num">

            <option value="11" disabled>1</option>

            <option value="22" selected>2</option>

            <option value="33">3</option>

            <option value="44" label="word">4</option>

        </optgroup>

        <optgroup  label="word">

            <option>a</option>

            <option>b</option>

            <option>c</option>

            <option>d</option>

        </optgroup>

        <optgroup  label="汉字" disabled>

            <option value="一个">一</option>

            <option value="二个">二</option>

            <option value="三个">三</option>

            <option value="四个">四</option>

        </optgroup>

    </select>

    <input type="submit">

</form>

textarea

textarea定义多行的文本输入控件，文本区可容纳无限数量的文本

注意：浏览器不允许textarea嵌套textarea

注意：IE8-浏览器宽高设置不包含滚动条；其他浏览器宽高设置包含滚动条

【属性】

name 规定文本区的名称

value 表示文本区的值

disabled 规定禁用该文本区

注意：IE7-浏览器不支持通过setAttribute('disabled','')的写法，必须设置为setAttribute('disabled','disabled')

readonly 规定文本区为只读

注意：IE7-浏览器不支持通过javascript设置readonly属性

form 规定文本区域所属的一个或多个表单

注意：IE浏览器不支持该属性

autofous 规定在页面加载后文本区域自动获得焦点

注意：IE9-浏览器不支持该属性

required 规定文本区域是必填的

注意：IE9-浏览器和safari浏览器不支持该属性

placeholder 规定描述文本区域预期值的简短提示

注意：IE9-浏览器不支持该属性

maxlength 规定文本区域的最大字符数

cols 规定文本区内的可见列数

rows 规定文本区内的可见行数

注意：可以用cols和rows来规定textarea的尺寸，但更好的办法是使用CSS的height和width属性

wrap 规定当在表单中提交时，文本区域中折行如何处理

当wrap="soft"，表示表单提交时，虽然文字在屏幕上折行，但提交的数据里不会有换行符(默认值)；而当 wrap="hard"，表示表单提交时，提交的数据包含文本换行符

<textarea id="test">测试内容</textarea>

fieldset

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

【属性】

disabled 禁用fieldset

form 规定fieldset所属的一个或多个表单

name 规定fieldset的名称

legend

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

<fieldset>

    <legend>健康信息</legend>

    身高：<input type="text" />

    体重：<input type="text" />

</fieldset>

label

label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上

label元素有两种用法：一种是使用for属性，另一种是将表单控件嵌套到label内部。但IE6浏览器只识别使用for属性的方法

【属性】

for 规定label绑定到哪个表单元素

form 规定label字段所属的一个或多个表单

注意：label标签的for属性要与相关元素的id属性相同

<h4>使用for方法</h4>

<label for="male">Male</label>

<input type="radio" name="sex1" id="male" />

<br />

<label for="female">Female</label>

<input type="radio" name="sex1" id="female" />

<h4>使用嵌套方法</h4>

<label>Male<input type="radio" name="sex2" /></label>

<br />

<label>Female<input type="radio" name="sex2"  /></label>

新增控件

datalist 定义输入域的选项列表

keygen 定义密钥对生成器，用于生成密钥

output 用于显示计算的结果

progress 用于显示进度(前进量)

meter 用于显示度量(剩余量)

datalist

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

注意：IE9-浏览器及safari浏览器不支持
```
<form action="#">

    <input list="list" name="input">

    <datalist id="list">

        <option value="1">

        <option value="2">

        <option value="3">

    </datalist>

</form>
```

keygen

keygen规定用于表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器

注意：safari和IE不支持该属性，chrome部分支持该属性

【属性】

autofocus 使用keygen字段在页面加载时获得焦点

challenge 如果使用，则将keygen的值设置为在提交时询问

disabled 禁用keygen字段

form 定义该keygen字段所属的一个或多个表单

keytype 定义keytype，rsa生成RSA密钥(默认)

name 定义keygen元素的唯一名称

//firefox: 1->usr_name=1&security=MIIBOjCBpDCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA1HUwmm%2B75QTnuDXC%0D%0AnUsL8cD8KkncFnA6TRaJttYss0Oi6dVzOPOtdK0O7wxD4%2BIhjSMZRD%2FddKFciZw0%0D%0AURyAimXxe%2FlDKmR3Nb1SzmqA7RJnns%2FA%2BduiYeeIIiMSL2ydUOvQvVFYMtaDkWra%0D%0AtpQfeWv1Hjz9hb7HlGzOUbtGrAECAwEAARYAMA0GCSqGSIb3DQEBBAUAA4GBAJ0I%0D%0ATWv7CdcNzqkaq5OpN6GHWtrlIpD5UAL%2FOiFDICb%2F8PFgV7FQk0MaGwj5XzQfEu4B%0D%0A6YlAbyz2l91I9%2FJW6Oerru5wL646OpvnTvD2U%2FzByU%2FHWp0BRNeDqntMAsGvzl6D%0D%0AoNsHTwLjDUGYVILge4syfcQVRpFRZiyVRaNlIJT9#

<form action="#">

    Username: <input type="text" name="usr_name" />

    Encryption: <keygen name="security"  />

    <input type="submit" />

</form>

output

output元素用于显示计算的结果，这是一个语义化标签，定义不同类型的输出，比如脚本的输出

注意：IE浏览器不支持该属性

【属性】

for 定义输出域相关的一个或多个元素

form 定义输入字段所属的一个或多个元素

name 定义对象的唯一名称
```
<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

progress元素用来标示任务的进度或进程(常用于表示过程)

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

【属性】

max 规定任务一共需要多少工作

value 规定已经完成多少工作

如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果

<progress></progress>

如果结合上js，可以做到如下的效果:

<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

meter元素用于显示剩余容量或剩余库存(常用于表示状态)

注意：IE浏览器及safari浏览器不支持

【属性】

form 规定meter元素所属的一个或多个表单

high 规定被视作高的值的范围

low 规定被视作低的值的范围

max 规定范围的最大值

min 规定范围的最小值

optimum 规定度量的最优值

value 规定度量的当前值(必需)

注意：min 小于 low 小于 high 小于 max

示例：
```
<input id="btn" type="button" value="增加库存">

库存量：<meter id="test" value="10" min="0" low="30" optimum="60" high="80" max="100" ></meter>

<script>

var oTimer;

btn.onclick = function(){

    if(oTimer){

        return;

    }

    oTimer = setInterval(function(){

        test.value++;

        if(test.value >= test.max){

            clearInterval(oTimer);

        }

    },50);

};

</script>
```

新增结构标签

在HTML5中，还新增了很多用于开发的结构标签。

section元素表示页面中的一个内容区块

article元素表示一块与上下文无关的独立的内容

aside元素是辅助 article 区域的内容。也可以理解为整个网页的辅助区域

header元素表示页面中一个内容区块或整个页面的标题

footer元素表示页面中一个内容区块或整个页面的脚注

nav元素表示页面中导航链接部分

figure元素表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

main元素表示页面中的主要的内容(ie不兼容)

hgroup标题的一个分组

mark:标签定义带有记号的文本,在需要突出显示文本时使用

下面是使用新结构标签的一个示例:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>结构化标签</title>

	<style>

		/*通用注释*/

		body {

			width: 1024px;

			background-color: #ccc;

			margin:0 auto;

			padding:0;

		}

		a :link,

		a:visited {

			color:#3e3e3e;

			text-decoration: none;

		}

		a:hover {

			text-decoration: underline;

			color: green;

		}

		a:active {

			color: lightblue;

		}

		/*头部*/

		header {

			padding:20px 30px;

		}

		/*导航*/

		nav > ul {

			list-style: none;

			margin:0 auto;

			position: relative;

			height: 42px;

			padding:0 5px;

			border-radius: 5px;

			background-color: #c0c0c0;

		}

		nav > ul > li {

			float: left;

			height: 100%;

		}

		nav > ul > li > a {

			background: #c0c0c0;

			font-family: "kaiTi";

			font-size: 16px;

			font-weight: normal;

			line-height: 18px;

			display: block;

			padding:12px 20px;

			color: white;

			text-decoration: none;

		}

		nav > ul > li > a:hover {

			background-color: #e0e0e0;

			font-weight: bold;

		}

		/*main*/

		main {

			position: relative;

		}

		main > section {

			margin-right: 220px;

			padding:15px;

			padding-right: 20px;

		}

		main > section > article {

			border-bottom: 1px solid #e0e0e0;

			margin-bottom: 20px;

		}

		main > aside {

			width: 220px;

			position: absolute;

			top: 0;

			right: 0;

		}

		/*footer*/

		footer {

			border-top: 1px solid #d1d7dc;

			margin:0 auto;

			padding:0 10px;

			position: relative;

			height: 80px;

			color: #b0b0b0;

			font:12px/1.5 tahoma,arial,宋体;

			text-align: left !important;

		}

		.links {

			list-style: none;

			border-bottom: 1px solid #e0e0e0;

			margin:20px 90px 5px 0;

			padding:0;

			padding-bottom: 8px;

			height: 18px;

		}

		.links > li {

			display: inline-block;

		}

	</style>

</head>

<body>

	<!-- header -->

	<header>

		<h1>网页标题</h1>

	</header>

	<!-- /header -->

	<!-- nav -->

	<nav>

		<ul>

			<li><a href="#">文档</a></li>

			<li><a href="#">编辑</a></li>

			<li><a href="#">可视化</a></li>

			<li><a href="#">项目目录</a></li>

			<li><a href="#">生成代码</a></li>

			<li><a href="#">调试</a></li>

			<li><a href="#">团队介绍</a></li>

		</ul>

	</nav>

	<!-- /nav -->

	<!-- main -->

	<main>

		<section>

			<article>

				<h3>爱在黎明破晓前</h3>

				<p>

					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat beatae dolor atque dicta iusto recusandae hic earum quidem excepturi. Soluta, tempore accusamus minima ratione facilis officia ipsam repudiandae est impedit quia reprehenderit a neque nemo perspiciatis, mollitia dignissimos ipsum! Assumenda hic aspernatur consequatur adipisci magni minus delectus, excepturi quam illo?

				</p>

			</article>

			<article>

				<h3>张三和金莲的故事</h3>

				<p>

					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat beatae dolor atque dicta iusto recusandae hic earum quidem excepturi. Soluta, tempore accusamus minima ratione facilis officia ipsam repudiandae est impedit quia reprehenderit a neque nemo perspiciatis, mollitia dignissimos ipsum! Assumenda hic aspernatur consequatur adipisci magni minus delectus, excepturi quam illo?

				</p>

			</article>

			<article>

				<h3>李四和武二的故事</h3>

				<p>

					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat beatae dolor atque dicta iusto recusandae hic earum quidem excepturi. Soluta, tempore accusamus minima ratione facilis officia ipsam repudiandae est impedit quia reprehenderit a neque nemo perspiciatis, mollitia dignissimos ipsum! Assumenda hic aspernatur consequatur adipisci magni minus delectus, excepturi quam illo?

				</p>

			</article>

			<article>

				<h3>航哥跑到沙特阿拉伯的故事</h3>

				<p>

					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat beatae dolor atque dicta iusto recusandae hic earum quidem excepturi. Soluta, tempore accusamus minima ratione facilis officia ipsam repudiandae est impedit quia reprehenderit a neque nemo perspiciatis, mollitia dignissimos ipsum! Assumenda hic aspernatur consequatur adipisci magni minus delectus, excepturi quam illo?

				</p>

			</article>

		</section>

		<aside>

			<section class="widght">

				<h4>最近文章</h4>

				<ul>

					<li>JavaScript从入门到放弃</li>

					<li>H5颈椎病的治愈与康复</li>

					<li>论程序员如何防脱发</li>

					<li>程序员鼓励师的重要性</li>

				</ul>

			</section>

			<section class="widght">

				<h4>文章归档</h4>

				<ul>

					<li>2019-03-18</li>

					<li>2019-03-17</li>

					<li>2019-02-19</li>

					<li>2019-02-10</li>

				</ul>

			</section>

		</aside>

	</main>

	<!-- /main -->

	<!-- footer -->

	<footer>

		<ul class="links">

			<li><a href="javascript:;">关于我们</a></li>

			<li><a href="javascript:;">服务条款</a></li>

			<li><a href="javascript:;">会员服务</a></li>

			<li><a href="javascript:;">法律声明</a></li>

			<li><a href="javascript:;">隐私声明</a></li>

			<li><a href="javascript:;">广告服务</a></li>

			<li><a href="javascript:;">联系我们</a></li>

			<li><a href="javascript:;">站点地图</a></li>

			<li><a href="javascript:;">信息举报</a></li>

			<li><a href="javascript:;">广告服务</a></li>

			<li><a href="javascript:;">联系我们</a></li>

		</ul>

		<div class="copyright">

			<i>京ICP备XXXXXXXX号</i>

			<span>Copyright © 2015 Itcast.cn 版权所有。</span>

		</div>

	</footer>

	<!-- /footer -->

</body>

</html>

新增多媒体标签

在H5中，另外一个强大的功能是新增的多媒体标签，例如通过多媒体标签，我们可以实现在网页中播放音频和视频等等。

多媒体元素(比如视频和音频)存储于媒体文件中，确定媒体类型的最常用的方法是查看文件扩展名。如.swf、.wmv、.mp3、.mp4。

媒体格式：

音频格式

.mid/.midi

MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。大多数流行的网络浏览器都支持 MIDI

.rm/.ram

RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低

.wav

Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它

.wma

WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用

.mp3/.mpga

MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式

视频格式

.avi

AVI (Audio Video Interleave) 格式是由微软开发的。所有运行Windows的计算机都支持AVI格式

.wmv

Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外组件，就无法播放 Windows Media 电影

.mpg/.mpeg

MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持

.mov

QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是QuickTime 电影不能在没有安装额组件的Windows计算机上播放

.rm/.ram

RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低

.swf/.flv

Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放

.mp4

Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。越来越多的视频发布者将其作为 Flash 播放器和 HTML5 的因特网共享格式

多媒体标签:

HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是和，且不被IE8-浏览器支持

这两个标签支持的类型为：

视频 [1]video/ogg [2]video/mp4 [3]video/webm

音频 [1]audio/ogg [2]audio/mpeg

音频播放:

在HTML中播放音频的方法有很多种

【1】<embed>

<embed  height="80" width="300" src="song.mp3" />

【2】<object>

<object height="80" width="300" data="song.mp3"></object>

【3】<audio>

<audio controls="controls">

  <source src="song.mp3" type="audio/mp3" />

</audio>

【4】<a>

<a href="song.mp3">Play the sound</a>

【5】更好的解决办法

<audio controls="controls" height="100" width="100">

    <source src="song.mp3" type="audio/mp3" />

    <embed height="100" width="100" src="song.mp3" />

</audio>

视频播放:

在HTML中播放视频的方法也有好多种

【1】<embed>

<embed  height="240" width="320" src="movie.mp4" />

【2】<object>

<object height="240" width="320" data="movie.mp4"></object>

【3】<video>

<video controls="controls">

  <source src="movie.mp4" type="video/mp4" />

</video>

【4】<a>

<a href="movie.mp4">Play the video</a>

【5】更好的解决办法

<video width="320" height="240" controls="controls">

  <source src="movie.mp4" type="video/mp4" />

  <object data="movie.mp4" width="320" height="240">

    <embed src="movie.mp4" width="320" height="240" />

  </object>

</video>

秒客网

html5 基础入门

html5 基础入门

前言介绍

HTML5 兼容性

DTD

智能表单

input type 类型整理总结

input 元素属性总结

form表单控件总结

新增结构标签

新增多媒体标签

相关文章