html 5教程之默认行为和拖拽思路

认行为

什么是默认行为：默认行为就是浏览器自己触发的事件。比如：a链接的跳转，form提交时的跳转，鼠标右键跳转；

oncontexmenu当点击右键菜单的时候；

return false

阻止默认行为

if(e.preventDefault) {

e.preventDefault();

}else {

window.event.returnValue = false;

}

事件移除。document.onmouseover=null;

拖拽

拖拽事件：

onmousedown onmousemove onmouseup

拖拽思路：

1.给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键

2.当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置

3.在onmousemove事件中，设定目标元素的left和top，

公式

目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）

目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）

4.当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果

在onmouseup事件中，取消document的onmousemove事件即可。

事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；

DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；

DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；

非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。

oDiv.addEventListener('click',chick,false);

oDiv.removeEventListener('click',chick ,false);

IE下：

只有冒泡阶段,所以没有第三个参数；（这里的事件名需要加on）

oDiv.attachEvent()；

oDiv.detachEvent() ;

兼容问题解决：

var EventUtil={

addHandler:function(DOM,EventType,fn){

if(DOM.addEventListener){

DOM.addEventListener(EventType,fn,false);

}else if(DOM.attachEvent){

DOM.attachEvent('on'+EventType,fn)

}else{

DOM['on'+EventType]=fn

}

removeHandler:function(DOM,EventType,fn){

if(DOM.removeEventListener){

DOM.removeEventListener(EventType,fn,false)

}else if(DOM.detachEvent){

DOM.detachEvent('on'+EventType,fn)

}else{

DOM['on'+EventType]=null;

}

写一个完美拖拽的案例：

TML 中使用 <input> 元素表示单行输入框和 <textarea> 元素表示多行文本框。

HTML中使用的 <input> 元素在 JavaScript 中对应的是 HTMLInputElement 类型。HTMLInputElement 继承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 类型有一些独有的属性和方法：

name：表示 <input> 元素的名称。
disabled：表示 <input> 元素是否禁止使用。在表单提交时不会包含被禁止的 <input> 元素。
autofocus：表示页面加载时，该元素是否会自动获得焦点。
required：表示表单提交时，该 <input>元素是否为必填。
value：表示该 <input> 元素的值。
validity：返回一个 ValidityState 对象，表示 <input> 元素的校验状态。是只读属性。
validationMessage：表示 <input> 元素校验失败时，用户看到的报错信息。如果该元素不需要校验，或者通过校验，该属性为空字符串。是只读属性。
willValidate：表示表单提交时，<input> 元素是否会被校验。是只读属性。
select()：选中 <input> 元素内部的所有文本。
click()：模拟鼠标点击当前的 <input> 元素。

而在上述介绍 HTMLInputElement 类型中的属性时，type 属性要特别关注一下，因为根据 type 属性的改变，可以改变<input>的属性。

类型	描述
text	文本输入
password	密码输入
submit	表单数据提交
button	按钮
radio	单选框
checkbox	复选框
file	文件
hidden	隐藏的字段
image	定义图像作为提交按钮
reset	重置按钮

省略 type 属性与 type="text"效果一样， <input> 元素显示为文本框。

当 type 的值为text/password/number/时，会有以下属性对 <input> 元素有效。

属性	类型	描述
autocomplete	string	字符串on或off，表示<input>元素的输入内容可以被浏览器自动补全。
maxLength	long	指定<input>元素允许的最多字符数。
size	unsigned long	表示<input>元素的宽度，这个宽度是以字符数来计量的。
pattern	string	表示<input>元素的值应该满足的正则表达式
placeholder	string	表示<input>元素的占位符，作为对元素的提示。
readOnly	boolean	表示用户是否可以修改<input>的值。
min	string	表示<input>元素的最小数值或日期。
max	string	表示<input>元素的最大数值或日期。
selectionStart	unsigned long	表示选中文本的起始位置。如果没有选中文本，返回光标在<input>元素内部的位置。
selectionEnd	unsigned long	表示选中文本的结束位置。如果没有选中文本，返回光标在<input>元素内部的位置。
selectionDirection	string	表示选中文本的方向。可能的值包括forward、backward、none。

下面创建一个 type="text" ，一次显示 25 个字符，但最多允许显示 50 个字符的文本框：

<input type="text" size="25" maxlength="50" value="initial value">

HTML 使用的 <textarea> 元素在 JavaScript 中对应的是 HTMLTextAreaElement 类型。HTMLTextAreaElement类型继承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 类型有一些独有的属性和方法：

form：只读属性，返回对父表单元素的引用。如果此元素未包含在表单元素中，则它可以是同一文档中 id 属性同 form 值的 <form> 元素，如果没有，该值为 null。
type：只读属性，返回字符串textarea。
value：string类型，返回/设置控件中包含的原始值。
textLength：只读属性，long类型，返回<textarea>元素的value值的长度。与 value.length 相同。
defaultValue：string类型，返回/设置textarea元素的默认值。
placeholder：string类型，返回/设置 textarea 元素的占位符，作为对输入内容的提示。
rows：unsigned long类型，返回/设置textarea元素的可见文本行数。
cols：unsigned long类型，返回/设置 textarea 元素的可见宽度。
autofocus：boolean类型，返回/设置textarea元素在页面加载时自动获取焦点。
name：返回/设置 textarea 元素的名称。
disabled：boolean类型，返回/设置 textarea 元素是否应当被禁用。
HTMLTextAreaElement.labels：NodeList类型，返回与此select元素关联的标签元素列表。
maxLength：long类型，返回/设置元素可以输入的最大字符数。仅在值更改时才评估此约束。
minLength：long类型，返回/设置元素可以输入的最小字符数。仅在值更改时才评估此约束。
accessKey：boolean类型，返回/设置访问 textarea 的键盘快捷键。
readOnly：boolean类型，返回/设置 textarea 元素是否为只读。
required：boolean 类型，返回/设置 textarea 元素是否为必填项。
tabIndex：long类型，返回/设置 textarea 元素的 tab 键导航顺序中元素的位置。

下面创建一个高度为 25，宽度为 5 的 <textarea> 多行文本框。它与 <input> 不同的是，初始值显示在 <textarea>...</textarea> 之间：

<textarea rows="25" cols="5">initial value</textarea>

注意：处理文本框值的时候最好不要使用 DOM 方法，而应该使用 value 属性。

选择文本

<input> 与 <textarea> 都支持 select() 方法，该方法用于选中文本框中的所有内容。该方法的语法为：

select(): void

下面看一个示例：

let textbox = document.forms[0].elements["input-box"];
textbox.select();

也可以在文本框获得焦点时，选中文本框的内容：

textbox.addEventListener("focus", (event) => {
    event.target.select();
});

select 事件

当选中文本框中的文本或使用 select() 方法时，会触发 select 事件。

let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
    console.log(`Text selected: ${textbox.value}`);
});

取得选中的文本

HTML5 对 select 事件进行了扩展，通过 selectionStart 和 selectionEnd 属性获取文本选区的起点偏移量和终点偏移量。如下所示：

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}

注意：在 IE8 及更早版本不支持这两个属性。

选中部分文本

HTML5 提供了 setSelectionRange() 方法用于选中部分文本：

setSelectionRange(start, end, direction): void;

start：被选中的第一个字符的位置索引，从 0 开始。如果这个值比元素的 value 长度还大，则会被看做 value 最后一个位置的索引。
end：被选中的最后一个字符的下一个位置索引。如果这个值比元素的 value 长度还大，则会被看做 value 最后一个位置的索引。
direction：该参数是可选的字符串类型，表示选择方向，可以传入 “forward”/“backward”/“none” 三个值。

下面看一个例子：

<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">选中部分文本</button>
<script>
    function selectText() {
        let input = document.getElementById("text-sample");
        input.focus();
        input.setSelectionRange(4, 8);    // o Wo
    }
</script>

如果想要看到选中效果，必须让文本框获得焦点。

输入过滤

不同文本框经常需要保证输入特定类型或格式的数据，或许数据需要包含特定字符或必须匹配某个特定模式。而文本框并未提供验证功能，因此要配合 JavaScript 脚本实现输入过滤功能。

屏蔽字符

有些输入框需要出现或不出现特定字符。如果想要将输入框变成只读的，只需要使用 preventDefault()方法将按键都屏蔽：

input.addEventListener("keypress", (event) => {
    event.preventDefault();
});

而要屏蔽特定字符，就需要检查事件的 charCode 属性。如下所示，使用正则表达式实现只允许输入数字的输入框：

input.addEventListener("keypress", (event) => {
    if (!/\d/.test(event.key)) {
        event.preventDefault();
    }
});

还有一个问题需要处理：复制、粘贴及涉及Ctrl 键的其他功能。在除IE 外的所有浏览器中，前面代码会屏蔽快捷键Ctrl+C、Ctrl+V 及其他使用Ctrl 的组合键。因此，最后一项检测是确保没有按下Ctrl键，如下面的例子所示：

textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});

最后这个改动可以确保所有默认的文本框行为不受影响。这个技术可以用来自定义是否允许在文本框中输入某些字符。

处理剪贴板

IE 是第一个实现了剪切板相关的事件以及通过JavaScript访问剪切板数据的浏览器，其它浏览器在后来也都支持了相同的事件和剪切板的访问，后来 HTML5 将其纳入了规范。以下是与剪切板相关的 6 个事件：

beforecopy：发生复制操作前触发。
copy：发生复制操作时触发。
beforecut：发生剪切操作前触发。
cut：发生剪切操作时触发。
beforepaste：发生粘贴操作前触发。
paste：发生粘贴操作时触发。

剪切板事件的行为及相关对象会因浏览器而异。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只会在显示文本框的上下文菜单时触发，但 IE 不仅在这种情况下触发，也会在 copy、cut 和 paste 事件在所有浏览器中都会按预期触发。

在实际的事件发生之前，通过beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发送或从中检索数据前修改数据。不过，取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作，必须取消 copy、cut和 paste 事件。

剪贴板的数据通过 clipboardData 对象来获取，且clipboardData 对象提供 3 个操作数据的方法：

getData(format)：从剪贴板获取指定格式的数据，接收的参数为指定获取的数据格式，如果没有指定数据格式或指定数据格式不存在，则此方法返回一个空字符串。
setData(format, data)：给剪贴板赋予指定格式的数据，第一个参数指定数据格式，第二个参数为第一个参数赋予数据。如果指定数据格式不存在，则将其添加到数据存储的末尾；如果指定数据格式存在，则将数据替换在指定数据格式的位置。
clearData(format)：删除指定格式的数据，接收的参数为指定要删除的数据格式，如果指定格式不存在，则此方法不执行任何操作；如果此参数为空字符串或未提供，则将删除所有格式的数据。

而 clipboardData 对象在 IE 中使用 window 获取，在 Firefox、Safari 和 Chrome 中使用 event 获取。为防止未经授权访问剪贴板，只能在剪贴板事件期间访问 clipboardData 对象；IE 会在任何时候都暴露 clipboardData 对象。因此，要兼容两者，最好在剪贴板事件期间使用该对象。

function getClipboardText(event){
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
}
function setClipboardText (event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
}

如果文本框只有数字，那剪贴时，就需要使用paste事件检查剪贴板上的文本是否无效。如果无效，可以取消默认行为：

input.addEventListener("paste", (event) => {
    let text = getClipboardText(event);
    if (!/^\d*$/.test(text)){
        event.preventDefault();
    }
});

注意：Firefox、Safari和Chrome只允许在onpaste事件中访问getData()方法。

自动切换

在 JavaScript 中，可以用在当前字段完成时自动切换到下一个字段的方式来增强表单字段的易用性。比如，常用手机号分为国家好加手机号。因此，我们设置 2 个文本框：

<form>
    <input type="text" name="phone1" id="phone-id-1" maxlength="4">
    <input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>

当文本框输入到最大允许字符数后，就把焦点移到下一个文本框，这样可以增加表单的易用性并加速数据输入。如下所示：

<script>
    function tabForward(event){
        let target = event.target;
        if (target.value.length == target.maxLength){
            let form = target.form;
            for (let i = 0, len = form.elements.length; i < len; i++) {
                if (form.elements[i] == target) {
                    if (form.elements[i+1]) {
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    let inputIds = ["phone-id-1", "phone-id-2"];
    for (let id of inputIds) {
        let textbox = document.getElementById(id);
        textbox.addEventListener("keyup", tabForward);
    }
</script>

这里，tabForward() 函数通过比较用户输入文本的长度与 maxLength 属性的值来检测输入是否达到了最大长度。如果两者相等，就通过循环表中的元素集合找到当前文本框，并把焦点设置到下一个元素。

注意：上面的代码只适用于之前既定的标记，没有考虑可能存在的隐藏字段。

HTML5

HTML5 新增了一些表单提交前，浏览器会基于指定的规则进行验证，并在出错时显示适当的错误信息。而验证会基于某些条件应用到表单字段中。

必填字段

表单字段中添加 required 属性，用于标注该字段是必填项，不填则无法提交。该属性适用于<input>、<textarea>和<select>。如下所示：

<input type="text" name="account" required>

也可以通过 JavaScript 检测对应元素的 required 属性来判断表单字段是否为必填项：

let isRequired = document.forms[0].elements["account"].required;

也可以检测浏览器是否支持 required 属性：

let isRequiredSupported = "required" in document.createElement("input");

注意：不同浏览器处理必填字段的机制不同。Firefox、Chrome、IE 和Opera 会阻止表单提交并在相应字段下面显示有帮助信息的弹框，而Safari 什么也不做，也不会阻止提交表单。

数值范围

而上面介绍的几个如 number/range/datetime/datetime-local/date/month/week/time 几个填写数字的类型，都可以指定 min/max/step 等几个与数值有关的属性。step 属性用于规定合法数字间隔，如 step="2"，则合法数字应该为 0、2、4、6，依次类推。如下所示：

<input type="number" min="0" max="100" step="5" name="count">

上面的例子是<input>中只能输入从 0 到 100 中 5 的倍数。

也可以使用 stepUp() 和 stepDown() 方法对 <input> 元素中的值进行加减，它俩会接收一个可选参数，用于表示加减的数值。如下所示：

input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 减1
input.stepDown(10); // 减10

输入模式

HTML5 还为文本添加了 pattern 属性，用于指定一个正则表达式。这样就可以自己设置 <input> 元素的输入模式了。如下所示：

<input type="text" pattern="\d+" name="count">

注意模式的开头和末尾分别假设有^和$。这意味着输入内容必须从头到尾都严格与模式匹配。

与新增的输入类型一样，指定 pattern 属性也不会阻止用户输入无效内容。模式会应用到值，然后浏览器会知道值是否有效。通过访问 pattern 属性可以读取模式：

let pattern = document.forms[0].elements["count"].pattern;

使用如下代码可以检测浏览器是否支持pattern 属性：

let isPatternSupported = "pattern" in document.createElement("input");

检测有效性

HTML5 新增了 checkValidity() 方法，用来检测表单中任意给定字段是否有效。而判断的条件是约束条件，因此必填字段如果没有值会被视为无效，字段值不匹配 pattern 属性也会被视为无效。如下所示：

if (document.forms[0].elements[0].checkValidity()){
    // 字段有效，继续
} else {
    // 字段无效
}

要检查整个表单是否有效，可以直接在表单上调用checkValidity()方法。这个方法会在所有字段都有效时返回true，有一个字段无效就会返回false：

if(document.forms[0].checkValidity()){
    // 表单有效，继续
} else {
    // 表单无效
}

validity 属性会返回一个ValidityState 对象，表示 <input> 元素的校验状态。返回的对象包含一些列的布尔值的属性：

customError：如果设置了 setCustomValidity() 就返回 true，否则返回false。
patternMismatch：如果字段值不匹配指定的 pattern 属性则返回true。
rangeOverflow：如果字段值大于 max 的值则返回true。
rangeUnderflow：如果字段值小于 min 的值则返回true。
stepMisMatch：如果字段值与 min、max 和 step 的值不相符则返回true。
tooLong：如果字段值的长度超过了 maxlength 属性指定的值则返回true。
typeMismatch：如果字段值不是 "email" 或"url" 要求的格式则返回true。
valid：如果其他所有属性的值都为false 则返回true。与checkValidity()的条件一致。
valueMissing：如果字段是必填的但没有值则返回true。

因此，通过 validity 属性可以检查表单字段的有效性，从而获取更具体的信息，如下所示：

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        console.log("请指定值.")
    } else if (input.validity.typeMismatch){
        console.log("请指定电子邮件地址.");
    } else {
        console.log("值无效.");
    }
}

禁用验证

通过指定 novalidate 属性可以禁止对表单进行任何验证：

<form method="post" action="/signup" novalidate>
    <!-- 表单元素 -->
</form>

也可以在 JavaScript 通过 noValidate 属性设置，为 true 表示属性存在，为 false 表示属性不存在：

document.forms[0].noValidate = true; // 关闭验证

如果一个表单中有多个提交按钮，那么可以给特定的提交按钮添加formnovalidate 属性，指定通过该按钮无需验证即可提交表单：

<form method="post" action="/foo">
    <!-- 表单元素 -->
    <input type="submit" value="注册提交">
    <input type="submit" formnovalidate name="btnNoValidate"
value="没有验证的提交按钮">
</form>

也可以使用 JavaScript 设置 formNoValidate 属性：

// 关闭验证
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

总结

以上总结了 <input> 和 <textarea> 两个元素的一些功能，主要是 <input> 元素可以通过设置 type 属性获取不同类型的输入框，可以通过监听键盘事件并检测要插入的字符来控制文本框的内容。

还有一些与剪贴板相关的事件，并对剪贴的内容进行检测。还介绍了一些 HTML5 新增的属性和方法和新增的更多的 <input> 元素的类型，和一些与验证相关的属性和方法。

文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。

历史

W3C制作的早期HTML标志

发展

蒂姆·伯纳斯-李

1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统。他规定HTML并在1990年底写出浏览器和服务器软件。同年，伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助，但未被CERN正式批准。在他的个人笔记中伯纳斯-李列举“一些使用超文本的领域”，并把百科全书列为首位。

HTML的首个公开描述出现于一个名为“HTML标签”的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言（SGML）为基础的文件格式SGMLguid的影响。这些元素在HTML 4中仍有11个存在。

伯纳斯-李认为HTML是SGML的一个应用程序。1993年中期互联网工程任务组（IETF）发布首个HTML规范的提案：“超文本标记语言（HTML）”互联网草案，由伯纳斯-李与丹·康纳利（英语：Dan Connolly (computer scientist)）撰写。其中包括一个SGML文档类型定义来定义语法。草案于6个月后过期，不过值得注意的是其对NCSA Mosaic浏览器自定义标签从而将在线图像嵌入的行为的认可，这反映IETF把标准立足于成功原型的理念。同样，戴夫·拉格特（英语：Dave Raggett）在1993年末提出的与之竞争的互联网草案“HTML+（超文本标记格式）”建议规范已经实现的功能，如表格与填写表单。

在HTML和HTML+的草案于1994年初到期后，IETF创建一个HTML工作组，并在1995年完成"HTML 2.0"，这是第一个旨在成为对其后续实现标准的依据的HTML规范。

在IETF的主持下，HTML标准的进一步发展因竞争利益而遭受停滞。自1996年起，HTML规范一直由万维网联盟（W3C）维护，并由商业软件厂商出资。不过在2000年，HTML也成为国际标准（ISO/ IEC15445：2000）。HTML 4.01于1999年末发布，进一步的勘误版本于2001年发布。2004年，网页超文本应用技术工作小组（WHATWG）开始开发HTML5，并在2008年与W3C共同交付，2014年10月28日完成标准化。

版本时间线

1995年11月24日

HTML 2.0作为IETF RFC 1866发布。追加RFC的附加功能：

1995年11月25日：RFC 1867（基于表单的文件上传）

1996年5月：RFC 1942（表格）

1996年8月：RFC 1980（客户端图像映射）

1997年1月：RFC 2070（国际化）

1997年1月14日

HTML 3.2作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本，因IETF于1996年9月12日关闭它的HTML工作组。

最初代号为“威尔伯”（Wilbur），HTML 3.2完全去除数学公式，协调各种专有扩展，并采用网景设计的大多数视觉标记标签。由于两家公司达成了协议，网景的闪烁元素（英语：blink element）和微软的滚动元素（英语：marquee element）被移除。HTML对数学公式的支持最后成为另外一种被称为MathML的标准。

1997年12月18日

HTML 4.0作为W3C推荐标准发布。它提供三种变化：

严格，过时的元素被禁止。

过渡，过时的元素被允许。

框架集，大多只与框架相关的元素被允许。

最初代号“美洲狮”（Cougar）， HTML 4.0采用许多特定浏览器的元素类型和属性，并试图淘汰网景的视觉标记功能，将其标记为不赞成使用。HTML 4是遵循ISO 8879 - SGML的SGML应用程序。

1998年4月24日

HTML 4.0进行微调，不增加版本号。

1999年12月24日

HTML 4.01作为W3C推荐标准发布。它同样提供三种变化，最终勘误版于2001年5月12日发布。

2000年5月

ISO/IEC 15445:2000（"ISO HTML"，基于HTML 4.01严格版）作为ISO/IEC国际标准发布。在ISO中这一标准位于ISO/IEC JTC 1/SC 34（英语：ISO/IEC JTC 1/SC 34）域（ISO/IEC联合技术委员会1、小组委员会34 – 文档描述与处理语言）。

2014年10月28日

HTML 5作为W3C推荐标准发布。

草案时间线

HTML5的Logo

1991年10月

HTML标签，一个非正式CERN文件首次公开18个HTML标签。

1992年6月

HTML DTD的首个非正式草案，后续有七个修订版（7月15日，8月6日，8月18日，11月17日，11月19日，11月20日，11月22日）。

1992年11月

HTML DTD 1.1（首个版本号，基于RCS修订版，版本号从1.1开始而非1.0），非正式草案。

1993年6月

超文本标记语言由IETF IIIR工作小组作为互联网草案（一个粗略的建议标准）。在被第二版代一个月后，IETF又发布6个草案，最终在RFC1866中发布HTML 2.0。

1993年11月

HTML+由IETF作为互联网草案发布，是超文本标记语言草案的一个竞争性提案。它于1994年5月到期。

1995年4月（1995年3月编写）

HTML 3.0[33]被提议作为IETF的标准，但直到提案在五个月过期后（1995年9月28日）仍没有进一步的行动。它包含许多拉格特HTML+提案的功能，如对表格的支持、围绕数据的文本流和复杂的数学公式的显示。W3C开始开发自己的Arena浏览器作为HTML 3和层叠样式表的试验台（英语：Test bed），但HTML 3.0并没有获得成功。浏览器厂商，包括微软和网景，选择实现HTML3草案功能的不同子集并引入它们自己的插件（见浏览器大战）。

2008年1月

HTML5由W3C作为工作草案（链接）发布。虽然HTML5的语法非常类似于SGML，但它已经放弃任何成为SGML应用程序的尝试，除了一种替代的基于XML的HTML5序列，它已明确定义自己的“HTML”序列。

2011年 HTML5 – 最终征求

2011年5月，工作小组将HTML5推进至“最终征求”（Last Call）阶段，邀请W3C社区内外人士以确认本规范的技术可靠性。W3C开发一套综合性测试套件来实现完整规范的广泛交互操作性，完整规范的目标日期为2014年。2011年1月，WHATWG将其“HTML5”活动标准重命名为“HTML”。W3C仍然继续其发布HTML5的项目。

2012年 HTML5 – 候选推荐

2012年7月，WHATWG和W3C的工作产生一定程度的分离。W3C继续HTML5规范工作，重点放在单一明确的标准上，这被WHATWG称为“快照”。WHATWG组织则将HTML5作为一个“活动标准”（Living Standard）。活动标准的概念是从未完成但永远保持更新与改进，可以添加新特性，但功能点不会被删除。

2012年12月，W3C指定HTML5作为候选推荐阶段。该阶段的标准为“两个100％完成，完全实现交互操作”。

2014年 HTML5 – 提案推荐与推荐

2014年9月，HTML5进入提案推荐阶段。

2014年10月28日，HTML5作为稳定W3C推荐标准发布，这意味着HTML5的标准化已经完成。

XHTML版本

XHTML是使用XML 1.0改写自HTML 4.01的独立语言。它不再被作为单独标准开发。

XHTML 1.0， 2000年1月26日作为W3C推荐标准发布。修订版于2002年8月1日发布，它提供与HTML 4.0和4.01相同的三个变化，这些变化被重新在XML中制定。

XHTML 1.1，基于XHTML 1.0 严格版，2001年5月31日作为W3C推荐标准发布。修订版可使用模块化XHTML的模块，2001年4月10日作为W3C推荐标准发布。

XHTML 2.0为工作草案，但为支持HTML5与XHTML5的工作，此草案被放弃。 XHTML 2.0与XHTML 1.x不兼容，因此更确切的说这是一个XHTML风格的新语言而不是XHTML 1.x的更新。

在HTML5草案中规定一个XHTML语法，称为“XHTML5.1”。

标记

HTML标记包含标签（及其属性）、基于字符的数据类型、字符引用和实体引用等几个关键部分。HTML标签是最常见的，通常成对出现，比如<h1>与</h1>。这些成对出现的标签中，第一个标签是开始标签，第二个标签是结束标签。两个标签之间为元素的内容，有些标签没有内容，为空元素，如<img>。

HTML另一个重要组成部分为文档类型声明（英语：document type declaration），这会触发标准模式渲染。

以下是一个经典的Hello World程序的例子：

<!DOCTYPE html>

<html>

<head>

<title>This is a title</title>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

<html>和</html>之间的文本描述网页，<body>和</body>之间的文本为可视页面内容。标记文本<title>This is a title</title>定义了浏览器的页面标题。

文档标记类型<!DOCTYPE html>用于HTML5。如果未进行声明，浏览器会使用“怪异模式”进行渲染。

元素

HTML文档由嵌套的HTML元素构成。它们用HTML标签表示，包含于尖括号中，如<p>

在一般情况下，一个元素由一对标签表示：“开始标签”<p>与“结束标签”</p>。元素如果含有文本内容，就被放置在这些标签之间。

在开始与结束标签之间也可以封装另外的标签，包括标签与文本的混合。这些嵌套元素是父元素的子元素。

开始标签也可包含标签属性。这些属性有诸如标识文档区段、将样式信息绑定到文档演示和为一些如<img>等的标签嵌入图像、引用图像来源等作用。

一些元素如换行符<br>，不允许嵌入任何内容，无论是文字或其他标签。这些元素只需一个单一的空标签（类似于一个开始标签），无需结束标签。

许多标签是可选的，尤其是那些很常用的段落元素<p>的闭合端标签。HTML浏览器或其他媒介可以从上下文识别出元素的闭合端以及由HTML标准所定义的结构规则。这些规则非常复杂，不是大多数HTML编码人员可以完全理解的。

因此，一个HTML元素的一般形式为：<tag attribute1="value1" attribute2="value2">''content''</tag>。一些HTML元素被定义为空元素，其形式为<tag attribute1="value1" attribute2="value2">。空元素不能封装任何内容。例如<br>标签或内联标签<img>。一个HTML元素的名称即为标签使用的名称。注意，结束标签的名称前面有一个斜杠“/”，空元素不需要也不允许结束标签。如果元素属性未标明，则使用其默认值。

例子

HTML文档的页眉：<head>...</head>。标题被包含在头部，例如：

<head>

<title>The Title</title>

</head>

标题：HTML标题由<h1>到<h6>六个标签构成，字体由大到小递减：

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

段落：

换行：<br>。<br>与<p>之间的差异是br换行但不改变页面的语义结构，而p部分的页面成段。

链接：使用<a>标签来创建链接。href属性包含链接的URL地址。

<a href="https://zh.wikipedia.org/">中文維基百科的連結！</a>

注释：

注释有助于理解标记，但它不会在网页上显示。

HTML中存在以下几种类型的标记元素：

用于文本的结构式标记

例如，<h2>羽毛球</h2>将“羽毛球”定义为二级标题。结构式标记不指示任何特定的渲染，但大多数网页浏览器都会采用元素格式的默认样式。要在内容上实现进一步的风格可以使用层叠样式表（CSS）。

用于文本外观的表现式标记，不论其目的

例如，<b>粗体</b>表示视觉输出设备应将文本“粗体”加粗，但如果设备无法做到这一点（如朗读文本的听觉设备），就不会发生什么现象。在这种情况下，<b>粗体</b>与''斜体''也可能有相同的视觉效果，但在本质上它们更加语义化。如同<strong>加强文字</strong>与<em>强调文字</em>的区别。为支持CSS的使用，大多数表现式标记在HTML 4.0规范中不再被推荐使用。

超文本标记使文档的一部分链接到其他文档

锚元素在文档中创建超链接，其href属性设置链接的目标URL。例如：HTML标记<a href="https://zh.wikipedia.org/">中文维基百科</a>会将文字"中文维基百科"渲染为超链接。要将图片渲染为超链接，img元素要作为内容插入到a元素中：<a href="https://example.org"><img src="image.gif" alt="说明文字" width="50" height="50" border="0"></a>。

属性

大多数元素的属性以“名称-值”的形式成对出现，由“=”分离并写在开始标签元素名之后。值一般由单引号或双引号包围，有些值的内容包含特定字符，在HTML中可以去掉引号（XHTML不行）。不加引号的属性值被认为是不安全的[58]。有些属性无需成对出现，仅存在于开始标签中即可影响元素[6]，如img 元素的ismap 属性。

许多元素存在一些共通的属性：

id属性为元素提供了在全文档内的唯一标识。它用于识别元素，以便样式表可以改变其表现属性，脚本可以改变、显示或删除其内容或格式化。对于添加到页面的URL，它为元素提供了一个全局唯一标识，通常为页面的子章节。例如，ID "属性"对于https://zh.wikipedia.org/wiki/HTML#属性

class属性提供一种将类似元素分类的方式。常被用于语义化或格式化。例如，一个HTML文档可指定类<class="标记">来表明所有具有这一类值的元素都从属于文档的主文本。格式化后，这样的元素可能会聚集在一起，并作为页面脚注而不会出现在HTML代码中。类属性也被用于微格式的语义化。类值也可进行多声明。如<class="标记重要">将元素同时放入標記与重要两类中。

style属性可以将表现性质赋予一个特定元素。比起使用id或class 属性从样式表中选择元素，“style”被认为是一个更好的做法，尽管有时这对一个简单、专用或特别的样式显得太繁琐。

title属性用于给元素一个附加的说明。大多数浏览器中这一属性显示为工具提示（英语：Tooltip）。

lang属性用于识别元素内容的语言，它可能与文档的主要语言不同。例如，在中文文档中：

<p>法语<span lang="fr">c'est la vie</span>在法国的应用很普遍，意为“这就是生活” 。<p>

缩写元素abbr可用于说明一些属性：

这个例子显示为HTML；在大多数浏览器中，光标指向缩写时会显示标题文字“超文本标记语言”。

大多数元素采用与语言相关的属性dir 来指定文字方向，如 "rtl"采用从右到左的文本，比如阿拉伯语、波斯语以及希伯来语。

字符与实体引用

参见：XML与HTML字符实体引用列表和Unicode与HTML

在4.0版本中，HTML定义了一系列共252个字符实体引用和1,114,050个字元值参考。二者都支持单个字符通过简单的标记写入。文字字符与其对应的标记渲染的效果相同。

用这种方式“转义”字符的能力允许字符<与&（当分别被写作<和&时）被理解为字符数据而不是标记。例如<通常为标签的开头，&通常为字符实体引用与数字字符引用的开头；&或&或&将&作为元素的内容或属性的值。双引号字符"在不被用于属性值的标示时必须转义为"或"或"；相等地，当于单引号字符'不被用于属性值的标示时，也必须转义为'或'（或HTML5与XHTML文档中的'）。

如果文档作者忽略了转义这样的字符，一些浏览器会尝试通过上下文猜测他们的意图。如果结果仍为无效标记，这会使其他浏览器或用户代理难以访问到该文档，并使它们尝试使用搜索和索引来解析该文档。

那些难以输入或不在该文档字符编码中的字符也可通过转义来实现。例如通常只在西欧或南美的键盘出现的重音符e（é），可以在HTML文档中用作实体引用é 或数字引用é或é。诸如UTF-8的Unicode字符编码与所有的现代浏览器兼容并允许直接访问全球书写系统几乎所有的字符。

数据类型

HTML为元素内容定义了多种数据类型，如脚本数据、样式表数据以及许多属性值的类型，包括ID、名称、URI、数字长度单位、语言、媒体描述符颜色、字符编码、日期和时间等等。所有这些数据类型都是字符数据的特殊化。

文档类型声明

HTML文档需要以文档类型声明（英语：document type declaration）（英语非正式说法“doctype”）开头。在浏览器中，文档类型声明有助于确定渲染模式——特别是是否使用怪异模式。

文档类型声明的初衷是通过基于文档类型定义（DTD）的SGML工具来解析并验证HTML文档。

HTML5未定义DTD，所以在HTML5中文档类型声明更为简短：

<!DOCTYPE html>

HTML 4文档类型声明举例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

该声明引用HTML 4.01“严格”版的DTD。基于SGML的验证器可读取DTD，正确解析这些文档并执行验证。在现代浏览器中，一个有效的文档类型激活标准模式有别于怪异模式。

另外，HTML 4.01提供过渡型与框架集型的DTD。过渡型涵盖最广，它可整合当前以及老旧或“过时”的标签，而严格型DTD排除了过时的标签。框架集拥有所有构建框架所需的标签以及过渡型的标签。

语义化HTML

语义化HTML是一种编写HTML的方式，它强调编码信息的含义在其格式（样子）之上。HTML从创立之初就包括语义化标记，但也包括标识性标记如<font>、<i>和<center>标签。也存在一些语义上中立的span与div标签。自1990年代末层叠样式表开始应用于大多数浏览器，网页制作者就被鼓励使用CSS以便呈现与内容分离。

在2001年一次对语义网的讨论中，蒂姆·伯纳斯-李等人给出了一种的方法，使智能软件“代理人”可能有一天会自动抓取网页进行查找、过滤并将之前不相关的联系起来。这种代理甚至在现在也不普遍，但一些Web 2.0、混搭和价格比较网站的想法可能会结束。这些网页应用程序的混合与伯纳斯-李的语义代理人的之间主要区别基于以下事实：当前的聚合与信息混合通常由网页开发者设计，他们早已知道网络位置和他们希望混搭、比较与结合的特定数据的API语义。

网页代理的一个重要类型是网络爬虫或搜索引擎蜘蛛。这些软件代理依赖于它们发现的网页的语义清晰度，因为它们一天要使用各种技术与算法来读取和索引数百万个网页并给网页用户提供搜索工具，没有这些万维网的有效性就会大大降低。

为使搜索引擎蜘蛛评估它们在HTML文档中发现的文本片段的重要性，也为那些创建标记等混合的人与更多的自动化代理工具，HTML中的语义结构需要广泛一致地应用从而将文本的含义呈现给浏览者。

表示性标记在当前的HTML和XHTML推荐中不被鼓励使用，HTML5中则被视为非法。

好的语义化HTML也改善了网页文档的可访问性。例如，当屏幕阅读器或音频浏览器可以正确判定一个文档的结构时，视觉障碍用户不会再因阅读重复或无关的信息而浪费时间。

分发

HTML文档分发的方法和其他计算机文件相同。不过，它们最常通过网页服务器的超文本传输协议或电子邮件传输。

HTTP

万维网主要由从服务器通过HTTP协议向浏览器发送的HTML文档组成。但是，HTTP也可以被用于传输HTML之外的数据，例如图像、声音和其他内容。为使浏览器了解如何处理接收到的文档，在传输文档时必须同时传递文件类型。这种元数据包含MIME类型（对于HTML 4.01或更早版本是text/html，而对于XHTML 1.0或之后的版本是application/xhtml+xml），以及字符编码（参见HTML字符编码方式）。

在现在的浏览器中，和HTML文档一起发送的MIME类型影响文档的解读方式。和XHTML MIME类型一起发送的文档被认为是良构的XML，而语法错误会导致浏览器无法呈现文档。完全相同的文档如果和HTML MIME类型一起发送，则可能被正常显示，因为浏览器对HTML的语法检查更加松懈些。

W3C的推荐指出，遵循规定的推荐指引的XHTML 1.0文档可标记二者任一的MIME类型。XHTML 1.1还指出，XHTML 1.1文档应标有两种MIME类型。

HTML邮件

大多数图形电子邮件客户端允许使用HTML的子集（经常界限不清）提供格式化和无法使用纯文本的语义标记。这可能包括印刷信息，如彩色标题、强调和引用文本、内嵌图片和图表等。许多这样的客户包含一个编写HTML电子邮件消息的图形用户界面编辑器和一个用于显示的渲染引擎。在邮件中使用HTML受到了一些兼容性的批评，由于一些盲人或具有视觉障碍的人的访问问题，这种方式有利于伪装的钓鱼攻击。因其消息大小超过明文，所以它可混淆垃圾邮件过滤器。

命名规则

最常用的计算机文件扩展名为.html，通用缩写为.htm。它起源于某些早期操作系统与文件系统，如DOS以及FAT数据结构的局限性，它将文件扩展名限制为3个字母。

HTML应用程序

HTML应用程序（HTA；文件扩展名".hta"）是一个Microsoft Windows应用程序，它在浏览器中使用HTML和动态HTML提供应用程序图形界面。正规HTML文件被限制在浏览器的安全模型中，只能分别通过网页服务器和网页对象与站点Cookie进行通信和操作。HTA作为完全受信任的应用程序运行，因此拥有更多的权限，如创建/编辑/删除文件与注册表项。因为它们在浏览器安全模式之外操作，所以HTA不能通过HTTP执行，必须下载（就像EXE文件）并在本地文件系统执行。

所见即所得编辑器

所见即所得编辑器使用图形用户界面（GUI）显示HTML文档，常常类似于文字处理器，所以用户可以设计一切。编者面对的是文档，而不是代码，所以作者并不需要太多的HTML知识。这种所见即所得的编辑模式一直受到诟病，主要因为它生成的代码质量不高；也有人主张将其改变至WYSIWYM模型（所见即所指）。

在线咨询

上一篇：学习网页制作并不难，HTML菜鸟教程，从这里开始第一课学习
下一篇：前端进阶：Css必知的几个底层知识和技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

类型	描述
number	数字值的输入
date	日期输入
color	颜色输入
range	一定范围内的值的输入
month	允许用户选择月份和年份
week	允许用户选择周和年份
time	允许用户选择时间（无时区）
datetime	允许用户选择日期和时间（有时区）
datetime-local	允许用户选择日期和时间（无时区）
email	电子邮件地址的输入
search	搜索（表现类似常规文本）
tel	电话号码的输入
url	URL地址的输入

整合营销服务商