html5 基础入门

时间 2019-11-17

标签 html5 html 基础入门栏目 HTML5 繁體版

原文原文链接

目录javascript

html5 基础入门

html5 基础入门

前言介绍

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

若是从狭义的角度来说，HTML5就是HTML4的新一代产品。html

而若是从广义的角度来说，则是新一代的富客户端解决方案。html5

What is Rich Client[富客户端]?java

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

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`也进行了改进，性能获得进一步提高。git

目前在开发的领域，你们说的H5开发其实指的是HTML5 + CSS3 + JavaScript等技术。程序员

在目前的软件开发生态链中，H5的技术充斥着不少的领域。不管是网站开发、移动端开发、软件开发、游戏等等。github

HTML5 兼容性

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

须要注意的是，虽然不少浏览器目前已经可以支持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文档混乱不堪，增长管理和维护的负担。

优雅降级和渐进加强:

因为低级浏览器不支持 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、.mp三、.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新增了两个与媒体相关的标签，让开发人员没必要依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是

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

视频 [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>

1. HTML5入门—DAY1：HTML基础
2. HTML5基础入门学习
3. html5基础入门知识（干货）
4. WEB前端入门-HTML5基础概述
5. HTML5基础入门一天学完
6. HTML5基础之代码入门
7. JSP入门基础
8. HTML 基础入门
9. HTML5基础入门之常见的HTML5框架有哪些?
10. javaWEB入门基础
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Kotlin 基础语法 - Kotlin 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用