Web前端之家-无忧前端交流，专注Web前端开发，了解最新前端开发动态

HTML5基础：了解语义化标签

2022年02月09日

HTML5基础：了解语义化标签。距HTML5标准规范制定完成并公开发布已经有好些年了，面试时也少不了要问对HTML5语义化得理解。但是在实际运用时，真正使用HTML5标签来开发的似乎不是很多（ps：查看了几个巨头公司网站推论），可能一部分原因是仍有部分用户使用在使用低版本浏览器。但是就我个人而言，因选取一些标签时会比较纠结，所以仍使用了div。（PS：正是因为这样，才有了这篇文章的，没错，以后要注意语义化了）什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。语义化优点：易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析，如盲人阅读器根据语义渲染网页有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。今天先介绍主体结构标签，如图所示：1、<header><header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer>或<header>元素的子元素。2、<nav><nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。在一个文档中，可定义多个<nav>元素。3、<main><main>定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。需要注意的是在一个文档中不能出现多个<main>标签。4、<article><article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。5、<aside><aside>元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。6、<footer><footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。使用footer插入联系信息时，应在footer元素内使用<address>元素。注意不能包含<footer>或者<header>7、<section><section>表示文档中的一个区域（或节），比如，内容中的一个专题组。如果元素内容可以分为几个部分的话，应该使用<article>而不是<section>。不要把<section>元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。这几个标签，比较容易混淆的是<section>、<article>，所以这里特别说明：“Authorsareencouragedtousethearticleelementinsteadofthesectionelementwhenitwouldmakesensetosyndicatethecontentsoftheelemen.”通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。...

HTML5应用：绘制一个心形应用

2021年10月13日

HTML5应用：绘制一个心形应用。直接上DEMO。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>HTML5应用：绘制一个心形应用 - Web前端之家www.jiangweishan.com</title> </head> <body>  <canvas id="cardioid" width="600" height="600" style="background: lightblue"> 您的浏览器不支持canvas！ </canvas> <script> var cr = document.getElementById("cardioid"); var W = cr.width/2, H = cr.height/3, R = 150; var c = cr.getContext("2d"); var G = 360, g = 0, T = Math.PI*2, t = T/G; c.save(); c.translate(W, H); c.rotate(-T/4); //c.fillStyle = "red"; while(g < G){ c.save();//c.translate(W, H); c.rotate(g*t); c.beginPath(); c.arc(0, -R*(1-Math.sin(++g*t)), 13, 0, 360, false); c.closePath(); c.fill(); c.restore(); } c.restore(); g = 0; (function draw(){ if(g < G){ c.save(); c.translate(W, H); c.rotate(-T/4 + g*t); c.fillStyle = "red"; c.beginPath(); c.arc(0, -R*(1-Math.sin(++g*t)), 5, 0, 360, false); c.closePath(); c.fill(); c.restore(); } setTimeout(draw, 1); })(); </script> </body></html>...

Web前端表单开发：HTML5表单和Constraint Validation完整指南

2021年08月18日

HTML5提供的验证选项。我们还将研究如何通过使用CSS和JavaScript来增强这些功能。什么是约束验证【ConstraintValidation】？每个表单域都有一个目的。并为此经常管辖约束【Constraint】上或理事什么应该和不应该被输入到每个表单域的规则。例如，一个email字段需要一个有效的电子邮件地址；一个password字段可能需要某些类型的字符，并且有最少数量的必需字符；并且文本字段可能对可以输入的字符数有限制。现代浏览器能够检查用户是否遵守了这些约束【Constraint】，并可以在违反这些规则时向他们发出警告。这称为约束验证【ConstraintValidation】。客户端与服务器端验证在语言早期编写的大多数JavaScript代码处理客户端表单验证。即使在今天，开发人员仍花费大量时间编写函数来检查字段值。这在现代浏览器中仍然必要吗？可能不是。在大多数情况下，这实际上取决于您要尝试做什么。但首先，这里有一个重要的警告信息：客户端验证是一项很好的功能，它可以在应用程序浪费时间和带宽将数据发送到服务器之前防止常见的数据输入错误。它不能替代服务器端验证！始终清理服务器端的数据。并非每个请求都来自浏览器。即使这样做，也不能保证浏览器验证数据。任何知道如何打开浏览器开发工具的人也可以绕过您精心制作的HTML和JavaScript。HTML5输入字段HTML提供：<textarea> 用于多行文本框<select> 用于选项的下拉列表<button> 用于……按钮但你<input>最常使用的是：<input type="text" name="username" />该type属性设置控件类型，并且有很多选项可供选择：type描述button一个没有默认行为的按钮checkbox一个复选框color颜色选择器date年、月、日的日期选择器datetime-local日期和时间选择器email电子邮件输入字段file文件选择器hidden一个隐藏的领域image显示由src属性定义的图像的按钮month月份和年份选择器number数字输入字段password带有模糊文本的密码输入字段radio一个单选按钮range滑块控件reset将所有表单输入重置为其默认值的按钮（但请避免使用它，因为它很少有用）search搜索输入字段submit一个表单提交按钮tel电话号码输入字段text文本输入字段time没有时区的时间选择器urlURL输入字段week周数和年份选择器text如果您省略该type属性或它不支持某个选项，则浏览器会回退到。现代浏览器对所有类型都有很好的支持，但旧浏览器仍会显示文本输入字段。其他有用的<input>属性包括：属性描述accept文件上传类型alt图像类型的替代文本autocomplete字段自动完成提示autofocus页面加载时的焦点字段capture媒体捕捉输入法checked复选框/收音机被选中disabled禁用控件（它不会被验证或提交其值）form与使用此ID的表单关联formaction提交和图像按钮上提交的URLinputmode数据类型提示list自动完成选项的ID<datalist>max最大值maxlength最大字符串长度min最小值minlength最小字符串长度name提交给服务器的控件名称pattern正则表达式模式，例如[A-Z]+一个或多个大写字符placeholder字段值为空时的占位符文本readonly该字段不可编辑，但仍将被验证并提交required该字段是必需的size控件的大小（通常在CSS中被覆盖）spellcheck设置true或false拼写检查src图片网址step数字和范围的增量值type字段类型（见上文）value初始值HTML输出字段除了输入类型，HTML5还提供只读输出：output:计算或用户操作的文本结果progress:带有value和max属性的进度条meter：它可以根据对设定的值绿色，琥珀色和红色之间改变规模value，min，max，low，high，和optimum属性。输入标签字段应该有一个关联的<label>，您可以将其包裹在元素周围：<label>your name <input type="text" name="name" /><label>或者id使用for属性将字段链接到标签：<label for="nameid">your name</label><input type="text" id="nameid" name="name" />标签对于可访问性很重要。您可能遇到过使用aplaceholder来节省屏幕空间的表单：<input type="text" name="name" value="" placeholder="your name" />一旦用户输入内容，占位符文本就会消失——即使是一个空格。最好显示标签而不是强迫用户记住该字段想要什么！输入行为字段类型和约束【Constraint】属性会改变浏览器的输入行为。例如，number输入显示移动设备上的数字键盘。该字段可能会显示一个微调器，键盘上/下光标按下将增加和减少值。大多数字段类型是显而易见的，但也有例外。例如，信用卡是数字，但增量/减量微调器没用，输入16位数字时很容易向上或向下按。最好使用标准text类型，但将inputmode属性设置为numeric，这会显示合适的键盘。设置autocomplete="cc-number"还建议任何预先配置或以前输入的卡号。使用正确的字段type并autocorrect提供在JavaScript中难以实现的好处。例如，一些移动浏览器可以：通过使用相机扫描卡来导入信用卡详细信息导入短信发送的一次性代码自动验证该浏览器可以确保与由定义的约束【Constraint】的输入值附着type，min，max，step，minlength，maxlength，pattern，和required属性。例如：<input type="number" min="1" max="100" required />尝试提交空值会阻止表单提交并在Chrome中显示以下消息：微调器不允许1到100范围之外的值。如果您键入的字符串不是数字，则会出现类似的验证消息。所有这些都没有一行JavaScript。您可以通过以下方式停止浏览器验证：novalidate给<form>元素添加一个属性向formnovalidate提交按钮或图像添加属性创建自定义JavaScript输入如果您正在编写一个新的基于JavaScript的日期输入组件，请停止并远离您的键盘！编写自定义输入控件很困难。您必须考虑鼠标、键盘、触摸、语音、可访问性、屏幕尺寸以及JavaScript失败时会发生什么。您也在创造不同的用户体验。也许你的控制比桌面、iOS和Android上的标准日期选择器要好，但不熟悉的UI会让一些用户感到困惑。开发人员选择创建基于JavaScript的输入有三个主要原因。1.标准控件难以设计风格CSS样式是有限的，通常需要技巧，例如用标签::before和::after伪元素覆盖输入。情况正在改善，但质疑任何将形式置于功能之上的设计。2.<input>旧浏览器不支持现代类型本质上，您正在为InternetExplorer编码。IE用户不会获得日期选择器，但仍可以按YYYY-MM-DD格式输入日期。如果您的客户坚持，则仅在IE中加载polyfill。没有必要给现代浏览器增加负担。3.您需要一种以前从未实现过的新输入类型这些情况很少见，但总是从适当的HTML5字段开始。它们很快，甚至在脚本加载之前它们就可以工作。您可以根据需要逐步增强字段。例如，少量的JavaScript可以确保日历事件的结束日期发生在开始日期之后。总之：避免重新发明HTML控件！CSS验证样式您可以将以下伪类应用于输入字段以根据当前状态对其进行样式设置：选择器描述:focus重点领域:focus-within一个元素包含一个具有焦点的字段（是的，它是一个父选择器！）:focus-visible由于键盘导航，元素具有焦点，因此需要焦点环或更明显的样式:required具有required属性的字段:optional没有required属性的字段:valid已通过验证的字段:invalid未通过验证的字段:user-valid在用户与其交互后通过验证的字段（仅限Firefox）:user-invalid用户与其交互后未通过验证的字段（仅限Firefox）:in-range该值在anumber或range输入的范围内:out-of-range该值超出了anumber或range输入的范围:disabled具有disabled属性的字段:enabled没有disabled属性的字段:read-only具有read-only属性的字段:read-write:没有read-only属性的字段:checked选中的复选框或单选按钮:indeterminate不确定的复选框或单选状态，例如取消选中所有单选按钮时:default默认提交按钮或图像您可以placeholder使用::placeholder伪元素设置输入文本的样式：/* blue placeholder on email fields */input[type="email"]::placeholder { color: blue;}上面的选择器具有相同的特性，因此顺序可能很重要。考虑这个例子：input:invalid { color: red; }input:enabled { color: black; }无效输入具有红色文本，但它仅适用于具有disabled属性的输入——因此所有启用的输入都是黑色的。浏览器在页面加载时应用验证样式。例如，在下面的代码中，每个无效字段都有一个红色边框：:invalid { border-color: #900;}用户在与表单交互之前会遇到一组令人生畏的红色框。在第一次提交后或更改值时显示验证错误将提供更好的体验。这就是JavaScript介入的地方……JavaScript和约束验证【ConstraintValidation】API该约束验证【ConstraintValidation】API提供了可增强标准的HTML现场检查表单自定义选项。你可以：停止验证，直到用户与字段交互或提交表单使用自定义样式显示错误消息提供仅在HTML中无法实现的自定义验证。当您需要比较两个输入时，这通常是必要的——例如，当您输入电子邮件地址或电话号码时，检查“新”和“确认”密码字段是否具有相同的值，或确保一个日期接一个日期。表单验证在使用API之前，您的代码应该通过将表单的noValidate属性设置为true（与添加novalidate属性相同）来禁用默认验证和错误消息：const myform = document.getElementById('myform');myform.noValidate = true;然后你可以添加事件处理程序——比如当表单提交时：myform.addEventListener('submit', validateForm);处理程序可以使用checkValidity()orreportValidity()方法检查整个表单是否有效，true当表单的所有输入都有效时返回。（不同之处在于checkValidity()检查是否有任何输入受约束验证【ConstraintValidation】。）Mozilla文档解释说：invalid每个无效字段也会触发一个事件。这不会冒泡：必须将处理程序添加到使用它的每个控件中。// validate form on submissionfunction validateForm(e) { const form = e.target; if (form.checkValidity()) { // form is valid - make further checks } else { // form is invalid - cancel submit e.preventDefault(); }};有效的表单现在可能会导致进一步的验证检查。同样，无效表单可能会突出显示无效字段。现场验证各个字段具有以下约束验证【ConstraintValidation】属性：willValidate:true如果元素是约束验证【ConstraintValidation】的候选元素，则返回。validationMessage:验证消息。如果该字段有效，这将是一个空字符串。valitity：一个ValidityState对象。当字段有效时，它有一个valid属性集true。如果是false，则以下一项或多项属性将是true：有效性状态描述.badInput浏览器无法理解输入.customError已设置自定义有效性消息.patternMismatch该值与指定的pattern属性不匹配.rangeOverflow值大于max属性.rangeUnderflow值小于min属性.stepMismatch该值不符合step属性规则.tooLong字符串长度大于maxlength属性.tooShort字符串长度小于minlength属性.typeMismatch该值不是有效的电子邮件或URL.valueMissing一个required值为空各个字段具有以下约束验证【ConstraintValidation】方法：setCustomValidity(message):为无效字段设置错误消息。当该字段有效时必须传递一个空字符串，否则该字段将永远无效。checkValidity():true当输入有效时返回。该valitity.valid属性执行相同的操作，但checkValidity()还会invalid在该字段上触发一个可能有用的事件。该validateForm()处理函数可以遍历各个领域，并应用invalid类，它的父元素在必要时：function validateForm(e) { const form = e.target; if (form.checkValidity()) { // form is valid - make further checks } else { // form is invalid - cancel submit e.preventDefault(); // apply invalid class Array.from(form.elements).forEach(i => { if (i.checkValidity()) { // field is valid - remove class i.parentElement.classList.remove('invalid'); } else { // field is invalid - add class i.parentElement.classList.add('invalid'); } }); }};假设您的HTML定义了一个电子邮件字段：<div> <label for="email">email</label> <input type="email" id="email" name="email" required /> <p class="help">Please enter a valid email address</p></div>当电子邮件未指定或无效时，脚本将invalid类应用到<div>。CSS可以在表单提交时显示或隐藏验证消息：.help { display: none; }.invalid .help { display: block; }.invalid label, .invalid input, .invalid .help { color: red; border-color: red;}创建自定义表单验证器以下演示显示了一个示例联系表单，它需要用户名和电子邮件地址、电话号码或两者：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Web前端表单开发：HTML5表单和Constraint Validation完整指南 | Web前端之家www.jiangweishan.com</title> <style> * { font-family: sans-serif; font-size: 1em;}div { width: 100%; max-width: 15em; margin: 1em auto;}label, input { display: block; width: 100%;}input { padding: 0.5em; border: 1px solid #666; border-radius: 4px;}button { display: block; margin: 0 auto;}.help { display: none; font-size: 0.8em; text-align: center; margin: 0.2em 0 1em 0; color: #c00;}.invalid .help { display: block;}.invalid label, .invalid input { color: #c00; border-color: #c00;} </style></head><body> <form id="contact" action="./" method="post"> <div> <label for="username">注册Web前端之家账号</label> <input type="text" autocomplete="username" id="username" name="username" required /> <p class="help">Please enter your username.</p> </div> <div> <label for="email">注册Web前端之家邮箱</label> <input type="email" autocomplete="email" id="email" name="email" /> <p class="help">Please enter your email or telephone.</p> </div> <div> <label for="tel">手机号码</label> <input type="tel" autocomplete="tel" id="tel" name="tel" /> <p class="help">Please enter your email or telephone.</p> </div> <div> <button type="submit">submit</button> </div> </form> <script> // custom form validation class FormValidate { constructor(form, field) { // active form this.form = form; this.form.noValidate = true; // custom validation functions this.custom = []; // validate fields on focus change? this.validate = !!field; // field focusout event this.form.addEventListener('focusout', e => this.changeHandler(e) ); // form submit event this.form.addEventListener('submit', e => this.submitHandler(e) ); } // add a custom validation function // it's passed the field and must return true (valid) or false (invalid) addCustom(field, vfunc) { // get index let c = field.CustomValidator; if (typeof c === 'undefined') { c = this.custom.length; field.CustomValidator = c; } // store function reference this.custom[c] = (this.custom[c] || []).concat(vfunc); } // validate a field when focus changes changeHandler(e) { const t = e.target; if (this.validate && t && t.checkValidity) this.validateField(t); } // validate all fields on submit submitHandler(e) { // validate all fields let first, invCount = 0; Array.from(this.form.elements).forEach(f => { if (!this.validateField(f)) { // find first visible invalid if (f.offsetHeight) first = first || (f.focus && f); invCount++; } }); // at least one field is invalid if (invCount) { // stop submission e.stopImmediatePropagation(); e.preventDefault(); // enable field focusout validation this.validate = true; // focus first invalid field if (first) { first.parentElement.scrollIntoView(true); setTimeout(() => first.focus(), 800); } } // form is valid - submit else if (this.submit) this.submit(e); } // validate a field validateField(field) { const parent = field.parentElement, c = field.CustomValidator, inv = 'invalid'; field.setCustomValidity(''); // default validation let valid = field.checkValidity(); // custom validation if (valid && typeof c !== 'undefined') { valid = !this.custom[c].some(fn => !fn(field)); } if (valid) { // field is valid parent.classList.remove(inv); return true; } else { // field is not valid field.setCustomValidity(inv); parent.classList.add(inv); return false; } } } // ___________________________________________________________________ // validate contact form const contactForm = new FormValidate(document.getElementById('contact'), false); // custom validation - email and/or telephone const email = document.getElementById('email'), tel = document.getElementById('tel'); contactForm.addCustom(email, f => f.value || tel.value); contactForm.addCustom(tel, f => f.value || email.value); // custom submit contactForm.submit = e => { e.preventDefault(); alert('Form is valid!\n(open the console)'); const fd = new FormData(e.target); for (const [name, value] of fd.entries()) { console.log(name + ': ' + value); } } </script></body></html>它是使用名为的通用表单验证类实现的FormValidate。实例化对象时传递表单元素。可以设置可选的第二个参数：true 在用户与其交互时验证每个字段false （默认）在第一次提交后验证所有字段（在此之后进行字段级验证）// validate contact formconst contactForm = new FormValidate(document.getElementById('contact'), false);一个.addCustom(field,func)方法定义了自定义验证函数。以下代码确保email或tel字段有效（都没有required属性）：// custom validation - email and/or telephoneconst email = document.getElementById('email'), tel = document.getElementById('tel'); contactForm.addCustom(email, f => f.value || tel.value); contactForm.addCustom(tel, f => f.value || email.value);一个FormValidate对象监视以下两个：focusout 事件，然后检查单个字段表单submit事件，然后检查每个字段两者都调用该.validateField(field)方法，该方法检查字段是否通过标准约束验证【ConstraintValidation】。当它这样做时，分配给该字段的任何自定义验证功能将依次执行。必须全部返回true才能使该字段有效。无效字段具有invalid应用于该字段的父元素的类，该类使用CSS显示红色帮助消息。最后，submit当整个表单有效时，对象调用自定义函数：// custom submitcontactForm.submit = e => { e.preventDefault(); alert('Form is valid!\n(open the console)'); const fd = new FormData(e.target); for (const [name, value] of fd.entries()) { console.log(name + ': ' + value); }}或者，您可以使用标准addEventListener来处理表单submit事件，因为FormValidate当表单无效时可以防止进一步的处理程序运行。形式技巧表单是所有Web应用程序的基础，开发人员花费大量时间处理用户输入。约束验证【ConstraintValidation】得到很好的支持：浏览器可以处理大多数检查并显示适当的输入选项。建议：尽可能使用标准的HTML输入类型。集min，max，step，minlength，maxlength，pattern，required，inputmode，和autocomplete属性适当。如有必要，使用一点JavaScript来启用自定义验证和消息。对于更复杂的字段，逐步增强标准输入。最后：忘记InternetExplorer！除非您的客户主要是IE用户，否则没有必要实现您自己的回退验证功能。所有HTML5输入字段都可以在IE中使用，但可能需要更多的用户努力。（例如，当您输入无效的电子邮件地址时，IE不会检测到。）您仍然需要验证服务器上的数据，因此请考虑将其用作IE错误检查的基础。...

HTML5和CSS3应用：绘制小水缸，实现动画效果

2021年08月10日

HTML5和CSS3实现的应用：绘制小水缸，实现动画效果。之前也分享过一些了，大家可以去了解。OK，我们往下走吧，先看下效果图：一口可爱的小水缸，带着笑脸，冒着泡。首先我们需要绘制图形。HTML<label for="toggle">Turn shading off</label><input id="toggle" type="checkbox"/><div class="cauldron" style="--potion-hue: 176"> <div class="cauldron__opening"> <div class="cauldron__bubble" style="--delay: 6; --scale: 1.27; --speed: 9; --x: 57"></div> <div class="cauldron__bubble" style="--delay: 5; --scale: 1; --speed: 5; --x: 67"></div> <div class="cauldron__bubble" style="--delay: 4; --scale: 0.86; --speed: 7; --x: 63"></div> <div class="cauldron__bubble" style="--delay: 0; --scale: 1.27; --speed: 9; --x: 60"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.5; --speed: 10; --x: 38"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.14; --speed: 5; --x: 66"></div> <div class="cauldron__bubble" style="--delay: 10; --scale: 0.63; --speed: 9; --x: 74"></div> <div class="cauldron__bubble" style="--delay: 5; --scale: 0.93; --speed: 5; --x: 61"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.29; --speed: 6; --x: 35"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1; --speed: 5; --x: 27"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.71; --speed: 9; --x: 39"></div> <div class="cauldron__bubble" style="--delay: 8; --scale: 1.5; --speed: 9; --x: 69"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.34; --speed: 9; --x: 63"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.88; --speed: 9; --x: 34"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.11; --speed: 6; --x: 47"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.56; --speed: 6; --x: 46"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.97; --speed: 9; --x: 39"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.69; --speed: 9; --x: 73"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.12; --speed: 6; --x: 57"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.55; --speed: 5; --x: 55"></div> <div class="cauldron__bubble" style="--delay: 7; --scale: 0.53; --speed: 5; --x: 72"></div> <div class="cauldron__bubble" style="--delay: 4; --scale: 1.04; --speed: 8; --x: 59"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.12; --speed: 5; --x: 41"></div> <div class="cauldron__bubble" style="--delay: 0; --scale: 0.71; --speed: 9; --x: 66"></div> <div class="cauldron__bubble" style="--delay: 9; --scale: 0.66; --speed: 6; --x: 47"></div> </div> <div class="cauldron__handle cauldron__handle--left"></div> <div class="cauldron__handle cauldron__handle--right"></div> <div class="cauldron__foot cauldron__foot--left"></div> <div class="cauldron__foot cauldron__foot--right"></div> <div class="cauldron__eye cauldron__eye--left"></div> <div class="cauldron__eye cauldron__eye--right"></div> <div class="cauldron__mouth"></div></div>我们分为了很多小块。最重要的还是CSS3这块的内容：* { box-sizing: border-box; transition: background 0.15s ease, box-shadow 0.15s ease;}:root { --cauldron-hue: 34; --potion-hue: 120; --size: 200; --bg: #111;}label { font-weight: bold; color: #fcfcfc; margin-bottom: 0.5rem;}[type='checkbox'] { margin-bottom: 2rem;}:checked ~ .cauldron { background: var(--cauldron-color);}:checked ~ .cauldron .cauldron__opening { background: var(--potion-color); box-shadow: none;}:checked ~ .cauldron:after,:checked ~ .cauldron:before { background: var(--potion-color); box-shadow: none;}:checked ~ .cauldron:before { background: transparent;}:checked ~ .cauldron .cauldron__handle { background: var(--rim-color);}:checked ~ .cauldron .cauldron__eye { box-shadow: none;}:checked ~ .cauldron .cauldron__mouth { box-shadow: none;}:checked ~ .cauldron .cauldron__foot { background: var(--inner-rim-color);}:checked ~ .cauldron .cauldron__bubble { background: var(--potion-color);}body { align-items: center; display: flex; justify-content: center; min-height: 100vh; background: var(--bg); flex-direction: column;}.cauldron { --rim-color: hsl(var(--cauldron-hue), 100%, 60%); --inner-rim-color: hsl(var(--cauldron-hue), 100%, 25%); --potion-color: hsl(var(--potion-hue), 100%, 50%); --cauldron-color: hsl(var(--cauldron-hue), 100%, 50%); --darkness: hsl(var(--cauldron-hue), 100%, 10%); --lightness: hsl(var(--cauldron-hue), 100%, 85%); --potion-stain-light: hsl(var(--potion-hue), 100%, 70%); --potion-stain-dark: hsl(var(--potion-hue), 100%, 30%); border-radius: 100%; height: calc(var(--size) * 1px); width: calc(var(--size) * 1px); background: radial-gradient(25% 25% at 25% 55%, var(--rim-color), transparent), radial-gradient(100% 100% at -2% 50%, transparent, transparent 92%, var(--cauldron-color)), radial-gradient(100% 100% at -5% 50%, transparent, transparent 80%, var(--darkness)), linear-gradient(310deg, var(--inner-rim-color) 25%, transparent), var(--cauldron-color); position: relative;}.cauldron__opening { width: 100%; position: absolute; top: 0; left: 0; height: 35%; background: linear-gradient(90deg, transparent, var(--potion-stain-dark)), var(--potion-color); border: calc(var(--size) * 0.05px) solid var(--rim-color); box-shadow: 0 0px calc(var(--size) * 0.05px) calc(var(--size) * 0.005px) var(--rim-color) inset, 0 calc(var(--size) * 0.025px) 0 calc(var(--size) * 0.025px) var(--inner-rim-color) inset, 0 10px 20px 0px var(--darkness), 0 10px 20px -10px var(--inner-rim-color); border-radius: 100%;}.cauldron__opening:after { content: ''; position: absolute; background: linear-gradient(90deg, transparent, var(--potion-stain-dark), transparent, var(--potion-stain-light), transparent, var(--potion-stain-dark), transparent); border-radius: 100%; top: 8px; right: 0; bottom: 4px; left: 0;}.cauldron__opening:before { content: ''; position: absolute; box-shadow: 0 0 calc(var(--size) * 0.025px) 0 var(--darkness) inset, 0 -1px calc(var(--size) * 0.015px) 0px var(--darkness) inset, 0 2px calc(var(--size) * 0.015px) 0px var(--lightness) inset, 0 0 calc(var(--size) * 0.075px) calc(var(--size) * 0.05px) var(--rim-color) inset; border-radius: 100%; top: calc(var(--size) * -0.05px); right: calc(var(--size) * -0.05px); bottom: calc(var(--size) * -0.05px); left: calc(var(--size) * -0.05px);}.cauldron__handle { height: calc(var(--size) * 0.3px); width: calc(var(--size) * 0.3px); position: absolute; background: linear-gradient(0deg, var(--darkness), transparent), radial-gradient(100% 100% at 50% 50%, var(--inner-rim-color), transparent), var(--rim-color); border-radius: 100%; top: 30%; z-index: -1;}.cauldron__handle:after { content: ''; background: var(--bg); height: 50%; width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%;}.cauldron__handle--left { left: -14%;}.cauldron__handle--right { right: -14%;}.cauldron__foot { background: var(--inner-rim-color); position: absolute; z-index: -1; height: calc(var(--size) * 0.3px); width: calc(var(--size) * 0.3px); bottom: -5%; border-radius: 200% 0 200% 50%/200% 0 200% 50%;}.cauldron__foot--left { left: 10%; background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness) 75%), var(--inner-rim-color);}.cauldron__foot--right { right: 10%; background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness)), var(--inner-rim-color); transform: rotateY(180deg);}.cauldron__bubble { height: calc(var(--size) * 0.2px); width: calc(var(--size) * 0.2px); position: absolute; border-radius: 100%; top: 0; left: calc(var(--x) * 1%); border: 1px solid var(--potion-stain-light); background: radial-gradient(100% 115% at 25% 25%, #fff, transparent 33%), radial-gradient(15% 15% at 75% 75%, var(--cauldron-color), transparent), radial-gradient(100% 100% at 50% 25%, transparent, var(--potion-color) 98%); pointer-events: none; -webkit-animation: rise calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease; animation: rise calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease;}.cauldron__mouth { position: absolute; top: 60%; left: 50%; transform: translate(-50%, 0); height: calc(var(--size) * 0.1px); width: calc(var(--size) * 0.15px); border-radius: 100%; border-bottom: 4px solid #000; box-shadow: 0px 1px 0 0 var(--lightness); -webkit-clip-path: inset(50% 0 -10% 0); clip-path: inset(50% 0 -10% 0);}.cauldron__eye { height: calc(var(--size) * 0.075px); width: calc(var(--size) * 0.075px); background: #111; border-radius: 100%; position: absolute; top: 50%; box-shadow: 1px 1px 1px 0px var(--lightness), -1px -1px 1px 0 var(--inner-rim-color); -webkit-animation: blink 4s infinite linear both; animation: blink 4s infinite linear both;}.cauldron__eye--left { left: 20%;}.cauldron__eye--right { right: 20%;}@-webkit-keyframes rise { 0% { transform: scale(0) translate(-50%, 0); } 100% { transform: scale(var(--scale)) translate(-50%, -50vh); opacity: 0; }}@keyframes rise { 0% { transform: scale(0) translate(-50%, 0); } 100% { transform: scale(var(--scale)) translate(-50%, -50vh); opacity: 0; }}@-webkit-keyframes blink { 9% { transform: scaleY(1); } 10% { transform: scaleY(0); } 11% { transform: scaleY(1); } 12% { transform: scaleY(0); } 13% { transform: scaleY(1); }}@keyframes blink { 9% { transform: scaleY(1); } 10% { transform: scaleY(0); } 11% { transform: scaleY(1); } 12% { transform: scaleY(0); } 13% { transform: scaleY(1); }}结合动画和滤镜实现。这个需要很细心的去分析图形的每个节点。最后发下完整的DEMO。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>HTML5-CSS3应用：绘制小水缸，实现动画效果 | Web前端之家www.jiangweishan.com</title> <style> * { box-sizing: border-box; transition: background 0.15s ease, box-shadow 0.15s ease; } :root { --cauldron-hue: 34; --potion-hue: 120; --size: 200; --bg: #111; } label { font-weight: bold; color: #fcfcfc; margin-bottom: 0.5rem; } [type='checkbox'] { margin-bottom: 2rem; } :checked ~ .cauldron { background: var(--cauldron-color); } :checked ~ .cauldron .cauldron__opening { background: var(--potion-color); box-shadow: none; } :checked ~ .cauldron:after, :checked ~ .cauldron:before { background: var(--potion-color); box-shadow: none; } :checked ~ .cauldron:before { background: transparent; } :checked ~ .cauldron .cauldron__handle { background: var(--rim-color); } :checked ~ .cauldron .cauldron__eye { box-shadow: none; } :checked ~ .cauldron .cauldron__mouth { box-shadow: none; } :checked ~ .cauldron .cauldron__foot { background: var(--inner-rim-color); } :checked ~ .cauldron .cauldron__bubble { background: var(--potion-color); } body { align-items: center; display: flex; justify-content: center; min-height: 100vh; background: var(--bg); flex-direction: column; } .cauldron { --rim-color: hsl(var(--cauldron-hue), 100%, 60%); --inner-rim-color: hsl(var(--cauldron-hue), 100%, 25%); --potion-color: hsl(var(--potion-hue), 100%, 50%); --cauldron-color: hsl(var(--cauldron-hue), 100%, 50%); --darkness: hsl(var(--cauldron-hue), 100%, 10%); --lightness: hsl(var(--cauldron-hue), 100%, 85%); --potion-stain-light: hsl(var(--potion-hue), 100%, 70%); --potion-stain-dark: hsl(var(--potion-hue), 100%, 30%); border-radius: 100%; height: calc(var(--size) * 1px); width: calc(var(--size) * 1px); background: radial-gradient(25% 25% at 25% 55%, var(--rim-color), transparent), radial-gradient(100% 100% at -2% 50%, transparent, transparent 92%, var(--cauldron-color)), radial-gradient(100% 100% at -5% 50%, transparent, transparent 80%, var(--darkness)), linear-gradient(310deg, var(--inner-rim-color) 25%, transparent), var(--cauldron-color); position: relative; } .cauldron__opening { width: 100%; position: absolute; top: 0; left: 0; height: 35%; background: linear-gradient(90deg, transparent, var(--potion-stain-dark)), var(--potion-color); border: calc(var(--size) * 0.05px) solid var(--rim-color); box-shadow: 0 0px calc(var(--size) * 0.05px) calc(var(--size) * 0.005px) var(--rim-color) inset, 0 calc(var(--size) * 0.025px) 0 calc(var(--size) * 0.025px) var(--inner-rim-color) inset, 0 10px 20px 0px var(--darkness), 0 10px 20px -10px var(--inner-rim-color); border-radius: 100%; } .cauldron__opening:after { content: ''; position: absolute; background: linear-gradient(90deg, transparent, var(--potion-stain-dark), transparent, var(--potion-stain-light), transparent, var(--potion-stain-dark), transparent); border-radius: 100%; top: 8px; right: 0; bottom: 4px; left: 0; } .cauldron__opening:before { content: ''; position: absolute; box-shadow: 0 0 calc(var(--size) * 0.025px) 0 var(--darkness) inset, 0 -1px calc(var(--size) * 0.015px) 0px var(--darkness) inset, 0 2px calc(var(--size) * 0.015px) 0px var(--lightness) inset, 0 0 calc(var(--size) * 0.075px) calc(var(--size) * 0.05px) var(--rim-color) inset; border-radius: 100%; top: calc(var(--size) * -0.05px); right: calc(var(--size) * -0.05px); bottom: calc(var(--size) * -0.05px); left: calc(var(--size) * -0.05px); } .cauldron__handle { height: calc(var(--size) * 0.3px); width: calc(var(--size) * 0.3px); position: absolute; background: linear-gradient(0deg, var(--darkness), transparent), radial-gradient(100% 100% at 50% 50%, var(--inner-rim-color), transparent), var(--rim-color); border-radius: 100%; top: 30%; z-index: -1; } .cauldron__handle:after { content: ''; background: var(--bg); height: 50%; width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; } .cauldron__handle--left { left: -14%; } .cauldron__handle--right { right: -14%; } .cauldron__foot { background: var(--inner-rim-color); position: absolute; z-index: -1; height: calc(var(--size) * 0.3px); width: calc(var(--size) * 0.3px); bottom: -5%; border-radius: 200% 0 200% 50%/200% 0 200% 50%; } .cauldron__foot--left { left: 10%; background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness) 75%), var(--inner-rim-color); } .cauldron__foot--right { right: 10%; background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness)), var(--inner-rim-color); transform: rotateY(180deg); } .cauldron__bubble { height: calc(var(--size) * 0.2px); width: calc(var(--size) * 0.2px); position: absolute; border-radius: 100%; top: 0; left: calc(var(--x) * 1%); border: 1px solid var(--potion-stain-light); background: radial-gradient(100% 115% at 25% 25%, #fff, transparent 33%), radial-gradient(15% 15% at 75% 75%, var(--cauldron-color), transparent), radial-gradient(100% 100% at 50% 25%, transparent, var(--potion-color) 98%); pointer-events: none; -webkit-animation: rise calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease; animation: rise calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease; } .cauldron__mouth { position: absolute; top: 60%; left: 50%; transform: translate(-50%, 0); height: calc(var(--size) * 0.1px); width: calc(var(--size) * 0.15px); border-radius: 100%; border-bottom: 4px solid #000; box-shadow: 0px 1px 0 0 var(--lightness); -webkit-clip-path: inset(50% 0 -10% 0); clip-path: inset(50% 0 -10% 0); } .cauldron__eye { height: calc(var(--size) * 0.075px); width: calc(var(--size) * 0.075px); background: #111; border-radius: 100%; position: absolute; top: 50%; box-shadow: 1px 1px 1px 0px var(--lightness), -1px -1px 1px 0 var(--inner-rim-color); -webkit-animation: blink 4s infinite linear both; animation: blink 4s infinite linear both; } .cauldron__eye--left { left: 20%; } .cauldron__eye--right { right: 20%; } @-webkit-keyframes rise { 0% { transform: scale(0) translate(-50%, 0); } 100% { transform: scale(var(--scale)) translate(-50%, -50vh); opacity: 0; } } @keyframes rise { 0% { transform: scale(0) translate(-50%, 0); } 100% { transform: scale(var(--scale)) translate(-50%, -50vh); opacity: 0; } } @-webkit-keyframes blink { 9% { transform: scaleY(1); } 10% { transform: scaleY(0); } 11% { transform: scaleY(1); } 12% { transform: scaleY(0); } 13% { transform: scaleY(1); } } @keyframes blink { 9% { transform: scaleY(1); } 10% { transform: scaleY(0); } 11% { transform: scaleY(1); } 12% { transform: scaleY(0); } 13% { transform: scaleY(1); } } </style></head><body> <label for="toggle">Turn shading off</label> <input id="toggle" type="checkbox"/> <div class="cauldron" style="--potion-hue: 176"> <div class="cauldron__opening"> <div class="cauldron__bubble" style="--delay: 6; --scale: 1.27; --speed: 9; --x: 57"></div> <div class="cauldron__bubble" style="--delay: 5; --scale: 1; --speed: 5; --x: 67"></div> <div class="cauldron__bubble" style="--delay: 4; --scale: 0.86; --speed: 7; --x: 63"></div> <div class="cauldron__bubble" style="--delay: 0; --scale: 1.27; --speed: 9; --x: 60"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.5; --speed: 10; --x: 38"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.14; --speed: 5; --x: 66"></div> <div class="cauldron__bubble" style="--delay: 10; --scale: 0.63; --speed: 9; --x: 74"></div> <div class="cauldron__bubble" style="--delay: 5; --scale: 0.93; --speed: 5; --x: 61"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.29; --speed: 6; --x: 35"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1; --speed: 5; --x: 27"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.71; --speed: 9; --x: 39"></div> <div class="cauldron__bubble" style="--delay: 8; --scale: 1.5; --speed: 9; --x: 69"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.34; --speed: 9; --x: 63"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.88; --speed: 9; --x: 34"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.11; --speed: 6; --x: 47"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.56; --speed: 6; --x: 46"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.97; --speed: 9; --x: 39"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.69; --speed: 9; --x: 73"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.12; --speed: 6; --x: 57"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.55; --speed: 5; --x: 55"></div> <div class="cauldron__bubble" style="--delay: 7; --scale: 0.53; --speed: 5; --x: 72"></div> <div class="cauldron__bubble" style="--delay: 4; --scale: 1.04; --speed: 8; --x: 59"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.12; --speed: 5; --x: 41"></div> <div class="cauldron__bubble" style="--delay: 0; --scale: 0.71; --speed: 9; --x: 66"></div> <div class="cauldron__bubble" style="--delay: 9; --scale: 0.66; --speed: 6; --x: 47"></div> </div> <div class="cauldron__handle cauldron__handle--left"></div> <div class="cauldron__handle cauldron__handle--right"></div> <div class="cauldron__foot cauldron__foot--left"></div> <div class="cauldron__foot cauldron__foot--right"></div> <div class="cauldron__eye cauldron__eye--left"></div> <div class="cauldron__eye cauldron__eye--right"></div> <div class="cauldron__mouth"></div> </div></body></html>...

HTML5：CSS3画一个可爱动漫宠物

2021年07月12日

HTML5和CSS3动画的文章了，近期一直折腾vue和react等项目。闲余之时，突然想分享一个HTML5应用：CSS3画一个可爱动漫宠物。先看下效果图：HTML代码：<label for="toggle">Toggle body overflow</label><input id="toggle" type="checkbox"/><div class="jigglypuff"> <div class="jigglypuff__left-arm"></div> <div class="jigglypuff__left-foot"></div> <div class="jigglypuff__right-foot"></div> <div class="jigglypuff__ear-left"> <div class="jigglypuff__ear-left-inner"></div> </div> <div class="jigglypuff__ear-right"> <div class="jigglypuff__ear-right-inner"></div> </div> <div class="jigglypuff__body"></div> <div class="jigglypuff__right-arm"></div> <div class="jigglypuff__mouth"></div> <div class="jigglypuff__eye-left"> <div class="jigglypuff__eye-left-pupil"></div> </div> <div class="jigglypuff__eye-right"> <div class="jigglypuff__eye-right-pupil"></div> </div> <div class="jigglypuff__tuft-container"> <div class="jigglypuff__tuft"></div> <div class="jigglypuff__tuft-line"></div> </div></div>CSS代码：*,*:after,*:before { box-sizing: border-box;}:root { --size: 50; --unit: calc((var(--size) / 853) * 1vmin); --pink: #efc7d0; --pink-dark: #daa4ae; --glare: radial-gradient(circle at center, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.15) 80%); --inner-ear: #161922; --border: #262626; --eye-light: #4c9cae; --eye-dark: #0e7486; --pupil-backdrop: #053747;}body { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; background: #b9f;}.jigglypuff { height: calc(805 * var(--unit)); width: calc(853 * var(--unit)); position: relative;}.jigglypuff * { position: absolute;}.jigglypuff__body { background: var(--pink-dark); left: 9.5%; top: 15%; height: 77.25%; width: 73%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 60% 53% 61% 58%/53% 58% 58% 61%; overflow: hidden;}.jigglypuff__body:before { content: ''; background: var(--pink); width: 239%; height: 210%; left: 57%; bottom: 20%; border-radius: 50%/0 0 100% 100%; transform: translate(-50%, 0) rotate(4deg); position: absolute; transform-origin: bottom center;}.jigglypuff__left-arm { top: 56%; left: 0.75%; height: 15%; border: calc(5 * var(--unit)) solid var(--border); width: 27%; background: var(--pink-dark); border-radius: 70% 0 0 100%/25% 0 0 75%; transform-origin: 100% 50%; transform: rotate(1deg); overflow: hidden;}.jigglypuff__left-arm:before { content: ''; position: absolute; height: 100%; width: 41%; border-radius: 0 0 60% 0/0 0 83% 0; background: radial-gradient(circle at 0 50%, var(--pink) 70%, var(--pink-dark) 90%); left: -5%; top: 50%; transform: translate(0, -50%);}.jigglypuff__left-arm:after { content: ''; top: 20%; left: 7%; height: 19%; width: 15%; background: var(--glare); position: absolute; border-radius: 50%;}.jigglypuff__right-arm { top: 77%; left: 58.5%; background: var(--pink-dark); width: 11%; border: calc(5 * var(--unit)) solid var(--border); height: 12%; transform: rotate(-10deg); border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: 0;}.jigglypuff__right-arm:before { content: ''; position: absolute; bottom: 20%; left: 50%; transform: translate(-50%, 0); background: var(--pink); height: 100%; width: 80%; border-radius: 0 0 50% 50%/0 0 100% 100%; z-index: 2;}.jigglypuff__right-arm:after { content: ''; position: absolute; background: var(--glare); height: 40%; width: 25%; border-radius: 50%; left: 21%; bottom: 57%; z-index: 3; transform: rotate(-10deg);}.jigglypuff__left-foot { height: 26%; width: 12%; background: var(--pink-dark); bottom: 0%; left: 17%; transform: rotate(70deg); border-radius: 29% 70% 50% 50%/24% 39% 67% 55%; border: calc(5 * var(--unit)) solid var(--border); overflow: hidden;}.jigglypuff__left-foot:after { content: ''; position: absolute; bottom: -7%; height: 60%; width: 150%; border-radius: 50%; background: radial-gradient(circle at 50% 75%, var(--pink) 50%, var(--pink-dark));}.jigglypuff__left-foot:before { content: ''; position: absolute; bottom: 9%; left: 20%; height: 25%; width: 30%; background: var(--glare); border-radius: 50%; transform: rotate(-10deg); z-index: 2;}.jigglypuff__right-foot { height: 25%; width: 13%; background: var(--pink-dark); border: calc(5 * var(--unit)) solid var(--border); bottom: 0; left: 61%; border-radius: 25% 39% 45% 101%/50% 64% 56% 97%; transform-origin: 0 100%; transform: rotate(-51deg) translate(0, 29%); overflow: hidden;}.jigglypuff__right-foot:before { content: ''; position: absolute; bottom: -10%; background: radial-gradient(var(--pink) 50%, var(--pink-dark)); width: 165%; height: 62%; border-radius: 50%; left: 50%; transform: translate(-50%, 0);}.jigglypuff__right-foot:after { content: ''; position: absolute; height: 15%; width: 35%; background: var(--glare); border-radius: 50%; bottom: 20%; right: 10%; transform: rotate(50deg); filter: blur(2px);}.jigglypuff__ear-left { height: 30%; width: 25%; background: var(--pink); left: 24%; top: 0%; transform-origin: 0 0; transform: rotate(19deg); border-radius: 9% 85% 25% 26%/17% 30% 0 50%; border: calc(5 * var(--unit)) solid var(--border);}.jigglypuff__ear-left:after { content: ''; height: 50%; width: 75%; background: var(--inner-ear); position: absolute; bottom: 91%; left: 8%; border: calc(5 * var(--unit)) solid var(--border); transform-origin: 0 100%; transform: rotate(28deg) translate(0, 100%); border-radius: 50%/15%; -webkit-clip-path: inset(0 0 90% 0); clip-path: inset(0 0 90% 0);}.jigglypuff__ear-left-inner { height: 80%; width: 58%; background: var(--inner-ear); left: 10%; top: 8%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 15% 0 0 44%/20% 0 0 70%; overflow: hidden; -webkit-clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%); clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%);}.jigglypuff__ear-left-inner:before { content: ''; height: 42%; width: 70%; border-radius: 50%; bottom: 0; left: -11%; position: absolute; background: var(--glare);}.jigglypuff__ear-right { height: 35%; width: 31%; border: calc(5 * var(--unit)) solid var(--border); background: var(--pink); right: 0%; top: 35%; transform-origin: 100% 0; transform: rotate(30deg); border-radius: 100% 5% 56% 0/51% 5% 65% 0;}.jigglypuff__ear-right:after { content: ''; background: var(--inner-ear); width: 61%; height: 68%; right: 4%; top: 11%; position: absolute; border-top: calc(5 * var(--unit)) solid var(--border); -webkit-clip-path: inset(0 0 97% 80%); clip-path: inset(0 0 97% 80%);}.jigglypuff__ear-right-inner { background: var(--inner-ear); width: 61%; height: 68%; right: 8%; top: 11%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 95% 5% 46% 0/76% 5% 70% 0; overflow: hidden; box-shadow: calc(15 * var(--unit)) 0 calc(2 * var(--unit)) 0 var(--pink-dark);}.jigglypuff__ear-right-inner:before { content: ''; z-index: 2; background: var(--glare); height: 50%; width: 67%; border-radius: 50%; bottom: 4%; right: -20%; position: absolute;}.jigglypuff__mouth { top: 47%; left: 33%; transform-origin: 0 50%; height: 15%; width: 18%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 50%; transform: rotate(16deg); -webkit-clip-path: polygon(50% 10%, 91% 100%, 5% 100%); clip-path: polygon(50% 10%, 91% 100%, 5% 100%);}.jigglypuff__tuft-container { top: 11%; left: 34%; height: 37%; width: 37%;}.jigglypuff__tuft-container:after { content: ''; position: absolute; bottom: 0; left: 6%; height: 50%; width: 54%; border-radius: 50%; border: calc(5 * var(--unit)) solid var(--border); background: var(--pink); -webkit-clip-path: polygon(100% 23%, 47% 100%, 100% 100%); clip-path: polygon(100% 23%, 47% 100%, 100% 100%);}.jigglypuff__tuft { background: var(--pink); height: 100%; width: 100%; border-radius: 85% 50% 50% 39%/80% 52% 50% 55%; border: calc(5 * var(--unit)) solid var(--border); -webkit-clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%);}.jigglypuff__tuft-line { height: 25%; width: 34%; top: 62%; left: 40%; border-radius: 95% 0 0 0/61% 0 0 0; border-top: calc(5 * var(--unit)) solid var(--border);}.jigglypuff__eye-left { height: 24%; width: 21%; border: calc(5 * var(--unit)) solid var(--border); background: #fff; top: 34%; left: 16%; border-radius: 55% 45% 60% 40%/58% 41% 61% 42%;}.jigglypuff__eye-left:after { content: ''; position: absolute; right: 13%; top: 41%; height: 13%; width: 14%; background: #fff; -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); -webkit-animation: twinkle 1.5s 0.75s infinite; animation: twinkle 1.5s 0.75s infinite;}.jigglypuff__eye-left-pupil { border: calc(5 * var(--unit)) solid var(--border); height: 77%; width: 78%; right: 2%; top: 10%; border-radius: 55% 45% 60% 40%/58% 41% 61% 42%; background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 85% 34%, var(--pupil-backdrop), transparent), var(--eye-dark);}.jigglypuff__eye-left-pupil:after { content: ''; position: absolute; top: 11%; right: 10%; height: 25%; width: 26%; background: radial-gradient(#fff 75%, transparent); border-radius: 50%;}.jigglypuff__eye-left-pupil:before { content: ''; height: 20%; width: 28%; bottom: 5%; left: 18%; background: var(--glare); border-radius: 50%; position: absolute; z-index: 2;}.jigglypuff__eye-right { border: calc(5 * var(--unit)) solid var(--border); top: 46%; left: 51%; height: 25%; width: 21%; border-radius: 61% 48% 56% 50%/50% 50% 58% 50%; background: #fff;}.jigglypuff__eye-right:after { content: ''; position: absolute; right: 13%; top: 41%; height: 13%; width: 14%; background: #fff; -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); -webkit-animation: twinkle 2s infinite; animation: twinkle 2s infinite;}.jigglypuff__eye-right-pupil { height: 79%; width: 81%; right: 2%; top: 10%; overflow: hidden; border: calc(5 * var(--unit)) solid var(--border); border-radius: 61% 48% 56% 50%/50% 50% 58% 50%; background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 71% 24%, var(--pupil-backdrop), transparent), var(--eye-dark);}.jigglypuff__eye-right-pupil:after { content: ''; position: absolute; top: 7%; right: 15%; height: 24%; width: 27%; border-radius: 50%; background: radial-gradient(#fff 75%, transparent);}.jigglypuff__eye-right-pupil:before { content: ''; position: absolute; bottom: 5%; left: 18%; border-radius: 50%; height: 20%; width: 37%; background: var(--glare); z-index: 2;}label { margin-bottom: 1rem; z-index: 3;}:checked { z-index: 3;}:checked ~ .jigglypuff .jigglypuff__body { overflow: visible;}@-webkit-keyframes twinkle { 0% { transform: rotate(0deg) scale(0); } 50% { transform: rotate(540deg) scale(1.2); } 100% { transform: rotate(1080deg) scale(0); }}@keyframes twinkle { 0% { transform: rotate(0deg) scale(0); } 50% { transform: rotate(540deg) scale(1.2); } 100% { transform: rotate(1080deg) scale(0); }}完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML5：CSS3画一个可爱动漫宠物 | Web前端之家www.jiangweishan.com</title> <style> *,*:after,*:before { box-sizing: border-box;}:root { --size: 50; --unit: calc((var(--size) / 853) * 1vmin); --pink: #efc7d0; --pink-dark: #daa4ae; --glare: radial-gradient(circle at center, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.15) 80%); --inner-ear: #161922; --border: #262626; --eye-light: #4c9cae; --eye-dark: #0e7486; --pupil-backdrop: #053747;}body { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; background: #b9f;}.jigglypuff { height: calc(805 * var(--unit)); width: calc(853 * var(--unit)); position: relative;}.jigglypuff * { position: absolute;}.jigglypuff__body { background: var(--pink-dark); left: 9.5%; top: 15%; height: 77.25%; width: 73%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 60% 53% 61% 58%/53% 58% 58% 61%; overflow: hidden;}.jigglypuff__body:before { content: ''; background: var(--pink); width: 239%; height: 210%; left: 57%; bottom: 20%; border-radius: 50%/0 0 100% 100%; transform: translate(-50%, 0) rotate(4deg); position: absolute; transform-origin: bottom center;}.jigglypuff__left-arm { top: 56%; left: 0.75%; height: 15%; border: calc(5 * var(--unit)) solid var(--border); width: 27%; background: var(--pink-dark); border-radius: 70% 0 0 100%/25% 0 0 75%; transform-origin: 100% 50%; transform: rotate(1deg); overflow: hidden;}.jigglypuff__left-arm:before { content: ''; position: absolute; height: 100%; width: 41%; border-radius: 0 0 60% 0/0 0 83% 0; background: radial-gradient(circle at 0 50%, var(--pink) 70%, var(--pink-dark) 90%); left: -5%; top: 50%; transform: translate(0, -50%);}.jigglypuff__left-arm:after { content: ''; top: 20%; left: 7%; height: 19%; width: 15%; background: var(--glare); position: absolute; border-radius: 50%;}.jigglypuff__right-arm { top: 77%; left: 58.5%; background: var(--pink-dark); width: 11%; border: calc(5 * var(--unit)) solid var(--border); height: 12%; transform: rotate(-10deg); border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: 0;}.jigglypuff__right-arm:before { content: ''; position: absolute; bottom: 20%; left: 50%; transform: translate(-50%, 0); background: var(--pink); height: 100%; width: 80%; border-radius: 0 0 50% 50%/0 0 100% 100%; z-index: 2;}.jigglypuff__right-arm:after { content: ''; position: absolute; background: var(--glare); height: 40%; width: 25%; border-radius: 50%; left: 21%; bottom: 57%; z-index: 3; transform: rotate(-10deg);}.jigglypuff__left-foot { height: 26%; width: 12%; background: var(--pink-dark); bottom: 0%; left: 17%; transform: rotate(70deg); border-radius: 29% 70% 50% 50%/24% 39% 67% 55%; border: calc(5 * var(--unit)) solid var(--border); overflow: hidden;}.jigglypuff__left-foot:after { content: ''; position: absolute; bottom: -7%; height: 60%; width: 150%; border-radius: 50%; background: radial-gradient(circle at 50% 75%, var(--pink) 50%, var(--pink-dark));}.jigglypuff__left-foot:before { content: ''; position: absolute; bottom: 9%; left: 20%; height: 25%; width: 30%; background: var(--glare); border-radius: 50%; transform: rotate(-10deg); z-index: 2;}.jigglypuff__right-foot { height: 25%; width: 13%; background: var(--pink-dark); border: calc(5 * var(--unit)) solid var(--border); bottom: 0; left: 61%; border-radius: 25% 39% 45% 101%/50% 64% 56% 97%; transform-origin: 0 100%; transform: rotate(-51deg) translate(0, 29%); overflow: hidden;}.jigglypuff__right-foot:before { content: ''; position: absolute; bottom: -10%; background: radial-gradient(var(--pink) 50%, var(--pink-dark)); width: 165%; height: 62%; border-radius: 50%; left: 50%; transform: translate(-50%, 0);}.jigglypuff__right-foot:after { content: ''; position: absolute; height: 15%; width: 35%; background: var(--glare); border-radius: 50%; bottom: 20%; right: 10%; transform: rotate(50deg); filter: blur(2px);}.jigglypuff__ear-left { height: 30%; width: 25%; background: var(--pink); left: 24%; top: 0%; transform-origin: 0 0; transform: rotate(19deg); border-radius: 9% 85% 25% 26%/17% 30% 0 50%; border: calc(5 * var(--unit)) solid var(--border);}.jigglypuff__ear-left:after { content: ''; height: 50%; width: 75%; background: var(--inner-ear); position: absolute; bottom: 91%; left: 8%; border: calc(5 * var(--unit)) solid var(--border); transform-origin: 0 100%; transform: rotate(28deg) translate(0, 100%); border-radius: 50%/15%; -webkit-clip-path: inset(0 0 90% 0); clip-path: inset(0 0 90% 0);}.jigglypuff__ear-left-inner { height: 80%; width: 58%; background: var(--inner-ear); left: 10%; top: 8%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 15% 0 0 44%/20% 0 0 70%; overflow: hidden; -webkit-clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%); clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%);}.jigglypuff__ear-left-inner:before { content: ''; height: 42%; width: 70%; border-radius: 50%; bottom: 0; left: -11%; position: absolute; background: var(--glare);}.jigglypuff__ear-right { height: 35%; width: 31%; border: calc(5 * var(--unit)) solid var(--border); background: var(--pink); right: 0%; top: 35%; transform-origin: 100% 0; transform: rotate(30deg); border-radius: 100% 5% 56% 0/51% 5% 65% 0;}.jigglypuff__ear-right:after { content: ''; background: var(--inner-ear); width: 61%; height: 68%; right: 4%; top: 11%; position: absolute; border-top: calc(5 * var(--unit)) solid var(--border); -webkit-clip-path: inset(0 0 97% 80%); clip-path: inset(0 0 97% 80%);}.jigglypuff__ear-right-inner { background: var(--inner-ear); width: 61%; height: 68%; right: 8%; top: 11%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 95% 5% 46% 0/76% 5% 70% 0; overflow: hidden; box-shadow: calc(15 * var(--unit)) 0 calc(2 * var(--unit)) 0 var(--pink-dark);}.jigglypuff__ear-right-inner:before { content: ''; z-index: 2; background: var(--glare); height: 50%; width: 67%; border-radius: 50%; bottom: 4%; right: -20%; position: absolute;}.jigglypuff__mouth { top: 47%; left: 33%; transform-origin: 0 50%; height: 15%; width: 18%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 50%; transform: rotate(16deg); -webkit-clip-path: polygon(50% 10%, 91% 100%, 5% 100%); clip-path: polygon(50% 10%, 91% 100%, 5% 100%);}.jigglypuff__tuft-container { top: 11%; left: 34%; height: 37%; width: 37%;}.jigglypuff__tuft-container:after { content: ''; position: absolute; bottom: 0; left: 6%; height: 50%; width: 54%; border-radius: 50%; border: calc(5 * var(--unit)) solid var(--border); background: var(--pink); -webkit-clip-path: polygon(100% 23%, 47% 100%, 100% 100%); clip-path: polygon(100% 23%, 47% 100%, 100% 100%);}.jigglypuff__tuft { background: var(--pink); height: 100%; width: 100%; border-radius: 85% 50% 50% 39%/80% 52% 50% 55%; border: calc(5 * var(--unit)) solid var(--border); -webkit-clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%);}.jigglypuff__tuft-line { height: 25%; width: 34%; top: 62%; left: 40%; border-radius: 95% 0 0 0/61% 0 0 0; border-top: calc(5 * var(--unit)) solid var(--border);}.jigglypuff__eye-left { height: 24%; width: 21%; border: calc(5 * var(--unit)) solid var(--border); background: #fff; top: 34%; left: 16%; border-radius: 55% 45% 60% 40%/58% 41% 61% 42%;}.jigglypuff__eye-left:after { content: ''; position: absolute; right: 13%; top: 41%; height: 13%; width: 14%; background: #fff; -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); -webkit-animation: twinkle 1.5s 0.75s infinite; animation: twinkle 1.5s 0.75s infinite;}.jigglypuff__eye-left-pupil { border: calc(5 * var(--unit)) solid var(--border); height: 77%; width: 78%; right: 2%; top: 10%; border-radius: 55% 45% 60% 40%/58% 41% 61% 42%; background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 85% 34%, var(--pupil-backdrop), transparent), var(--eye-dark);}.jigglypuff__eye-left-pupil:after { content: ''; position: absolute; top: 11%; right: 10%; height: 25%; width: 26%; background: radial-gradient(#fff 75%, transparent); border-radius: 50%;}.jigglypuff__eye-left-pupil:before { content: ''; height: 20%; width: 28%; bottom: 5%; left: 18%; background: var(--glare); border-radius: 50%; position: absolute; z-index: 2;}.jigglypuff__eye-right { border: calc(5 * var(--unit)) solid var(--border); top: 46%; left: 51%; height: 25%; width: 21%; border-radius: 61% 48% 56% 50%/50% 50% 58% 50%; background: #fff;}.jigglypuff__eye-right:after { content: ''; position: absolute; right: 13%; top: 41%; height: 13%; width: 14%; background: #fff; -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); -webkit-animation: twinkle 2s infinite; animation: twinkle 2s infinite;}.jigglypuff__eye-right-pupil { height: 79%; width: 81%; right: 2%; top: 10%; overflow: hidden; border: calc(5 * var(--unit)) solid var(--border); border-radius: 61% 48% 56% 50%/50% 50% 58% 50%; background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 71% 24%, var(--pupil-backdrop), transparent), var(--eye-dark);}.jigglypuff__eye-right-pupil:after { content: ''; position: absolute; top: 7%; right: 15%; height: 24%; width: 27%; border-radius: 50%; background: radial-gradient(#fff 75%, transparent);}.jigglypuff__eye-right-pupil:before { content: ''; position: absolute; bottom: 5%; left: 18%; border-radius: 50%; height: 20%; width: 37%; background: var(--glare); z-index: 2;}label { margin-bottom: 1rem; z-index: 3;}:checked { z-index: 3;}:checked ~ .jigglypuff .jigglypuff__body { overflow: visible;}@-webkit-keyframes twinkle { 0% { transform: rotate(0deg) scale(0); } 50% { transform: rotate(540deg) scale(1.2); } 100% { transform: rotate(1080deg) scale(0); }}@keyframes twinkle { 0% { transform: rotate(0deg) scale(0); } 50% { transform: rotate(540deg) scale(1.2); } 100% { transform: rotate(1080deg) scale(0); }} </style></head><body> <label for="toggle">Toggle body overflow</label><input id="toggle" type="checkbox"/><div class="jigglypuff"> <div class="jigglypuff__left-arm"></div> <div class="jigglypuff__left-foot"></div> <div class="jigglypuff__right-foot"></div> <div class="jigglypuff__ear-left"> <div class="jigglypuff__ear-left-inner"></div> </div> <div class="jigglypuff__ear-right"> <div class="jigglypuff__ear-right-inner"></div> </div> <div class="jigglypuff__body"></div> <div class="jigglypuff__right-arm"></div> <div class="jigglypuff__mouth"></div> <div class="jigglypuff__eye-left"> <div class="jigglypuff__eye-left-pupil"></div> </div> <div class="jigglypuff__eye-right"> <div class="jigglypuff__eye-right-pupil"></div> </div> <div class="jigglypuff__tuft-container"> <div class="jigglypuff__tuft"></div> <div class="jigglypuff__tuft-line"></div> </div></div></body></html>...

HTML5数据列表：轻量级自动完成控件

2021年02月19日

HTML5<datalist>元素。它可以实现不需要JavaScript的轻量级，可访问的，跨浏览器的自动完成表单控件。<select><select>当您希望用户从一小部分选项中进行选择时，HTML5控件是理想的选择。在以下情况下，它们不太实用：有很多选择，例如国家或职位用户想要输入不在列表中的自己的选项显而易见的解决方案是自动完成控件。这允许用户输入一些字符，这限制了可用于更快选择的选项。<select>在您开始输入时会跳到正确的位置，但这并不总是显而易见的。它无法在所有设备（例如触摸屏）上正常工作，并且会在一两秒钟内重置。开发人员通常会使用许多 JavaScript驱动的解决方案之一，但是自定义自动完成控件并非总是必需的。HTML5<datalist>元素是轻量级的，可访问的并且没有JavaScript依赖性。您可能听说过越野车或缺乏支持。2021年并非如此，但存在浏览器不一致和警告。<datalist> 快速开始从包含200多个选项的列表中选择您的国家/地区是自动完成控件的理想选择。直接在HTML页面中为每个国家/地区定义一个<datalist>带有子<option>元素的元素：<datalist id="countrydata"> <option>Afghanistan</option> <option>Åland Islands</option> <option>Albania</option> <option>Algeria</option> <option>American Samoa</option> <option>Andorra</option> <option>Angola</option> <option>Anguilla</option> <option>Antarctica</option> ...etc...</datalist>id然后可以list在任何<input>字段中的属性引用数据列表：<label for="country">country</label><input type="text" list="countrydata" id="country" name="country" size="50" autocomplete="off" />令人困惑的是，最好进行设置autocomplete="off"。这样可确保在用户<datalist>先前在浏览器中输入的值中显示用户的值，但不会显示该值。结果：这是MicrosoftEdge中的默认渲染。其他应用程序实现了类似的功能，但外观在平台和浏览器上有所不同。<option> 选项<option>通常将标签用作的文本子代：<datalist id="mylist"> <option>label one</option> <option>label two</option> <option>label three</option></datalist>使用value属性会产生相同的结果：<datalist id="mylist"> <option value="label one" /> <option value="label two" /> <option value="label three" /></datalist>注意：/>在HTML5中，斜杠是可选的，尽管它可以帮助防止编码错误。您还可以使用以下两种格式之一根据所选标签设置值。选项1：<datalist id="mylist"> <option value="1">label one</option> <option value="2">label two</option> <option value="3">label three</option></datalist>选项2：<datalist id="mylist"> <option value="1" label="label one" /> <option value="2" label="label two" /> <option value="3" label="label three" /></datalist>在这两种情况下，输入字段都设置为1，2或者3选择了有效选项后，但是用户界面在不同的浏览器中会有所不同：Chrome会显示一个同时包含值和标签的列表。一旦选择一个选项，则仅保留该值。Firefox仅显示带有标签的列表。一旦选择一个选项，它将切换到该值。边缘仅显示值。以下CodePen示例显示了所有变体：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5数据列表的轻量级自动完成控件 - Web前端之家www.jiangweishan.com</title> <style> body { font-family: sans-serif; font-size: 100%; color: #222; background-color: #fafafe; margin: 1em; } label, button { display: block; margin-top: 1em; } </style></head><body> <h1>Lightweight HTML5 auto-complete</h1> <form id="autoform"> <label for="country1">country 1 (datalist uses <code><option>value</option></code>):</label> <input list="countrydata1" id="country1" name="country1" size="50" autocomplete="off" /> <label for="country2">country 2 (datalist uses <code><option value="value" /></code>):</label> <input list="countrydata2" id="country2" name="country2" size="50" autocomplete="off" /> <label for="country3">country 3 (datalist uses <code><option value="value">name</option></code>):</label> <input list="countrydata3" id="country3" name="country3" size="50" autocomplete="off" /> <label for="country4">country 4 (datalist uses <code><option value="value" label="name" /></code>):</label> <input list="countrydata3" id="country3" name="country3" size="50" autocomplete="off" /> <button type="submit">submit</button> </form><datalist id="countrydata1"> <option>Afghanistan</option> <option>Åland Islands</option> <option>Albania</option> <option>Algeria</option> <option>American Samoa</option> <option>Andorra</option> <option>Angola</option> <option>Anguilla</option> <option>Antarctica</option> <option>Antigua and Barbuda</option> <option>Argentina</option> <option>Armenia</option> <option>Aruba</option> <option>Australia</option> <option>Austria</option> <option>Azerbaijan</option> <option>Bahamas</option> <option>Bahrain</option> <option>Bangladesh</option> <option>Barbados</option> <option>Belarus</option> <option>Belgium</option> <option>Belize</option> <option>Benin</option> <option>Bermuda</option> <option>Bhutan</option> <option>Bolivia (Plurinational State of)</option> <option>Bonaire, Sint Eustatius and Saba</option> <option>Bosnia and Herzegovina</option> <option>Botswana</option> <option>Bouvet Island</option> <option>Brazil</option> <option>British Indian Ocean Territory</option> <option>Brunei Darussalam</option> <option>Bulgaria</option> <option>Burkina Faso</option> <option>Burundi</option> <option>Cabo Verde</option> <option>Cambodia</option> <option>Cameroon</option> <option>Canada</option> <option>Cayman Islands</option> <option>Central African Republic</option> <option>Chad</option> <option>Chile</option> <option>China</option> <option>Christmas Island</option> <option>Cocos (Keeling) Islands</option> <option>Colombia</option> <option>Comoros</option> <option>Congo</option> <option>Congo, Democratic Republic of the</option> <option>Cook Islands</option> <option>Costa Rica</option> <option>Côte d'Ivoire</option> <option>Croatia</option> <option>Cuba</option> <option>Curaçao</option> <option>Cyprus</option> <option>Czechia</option> <option>Denmark</option> <option>Djibouti</option> <option>Dominica</option> <option>Dominican Republic</option> <option>Ecuador</option> <option>Egypt</option> <option>El Salvador</option> <option>Equatorial Guinea</option> <option>Eritrea</option> <option>Estonia</option> <option>Eswatini</option> <option>Ethiopia</option> <option>Falkland Islands (Malvinas)</option> <option>Faroe Islands</option> <option>Fiji</option> <option>Finland</option> <option>France</option> <option>French Guiana</option> <option>French Polynesia</option> <option>French Southern Territories</option> <option>Gabon</option> <option>Gambia</option> <option>Georgia</option> <option>Germany</option> <option>Ghana</option> <option>Gibraltar</option> <option>Greece</option> <option>Greenland</option> <option>Grenada</option> <option>Guadeloupe</option> <option>Guam</option> <option>Guatemala</option> <option>Guernsey</option> <option>Guinea</option> <option>Guinea-Bissau</option> <option>Guyana</option> <option>Haiti</option> <option>Heard Island and McDonald Islands</option> <option>Holy See</option> <option>Honduras</option> <option>Hong Kong</option> <option>Hungary</option> <option>Iceland</option> <option>India</option> <option>Indonesia</option> <option>Iran (Islamic Republic of)</option> <option>Iraq</option> <option>Ireland</option> <option>Isle of Man</option> <option>Israel</option> <option>Italy</option> <option>Jamaica</option> <option>Japan</option> <option>Jersey</option> <option>Jordan</option> <option>Kazakhstan</option> <option>Kenya</option> <option>Kiribati</option> <option>Korea (Democratic People's Republic of)</option> <option>Korea, Republic of</option> <option>Kuwait</option> <option>Kyrgyzstan</option> <option>Lao People's Democratic Republic</option> <option>Latvia</option> <option>Lebanon</option> <option>Lesotho</option> <option>Liberia</option> <option>Libya</option> <option>Liechtenstein</option> <option>Lithuania</option> <option>Luxembourg</option> <option>Macao</option> <option>Madagascar</option> <option>Malawi</option> <option>Malaysia</option> <option>Maldives</option> <option>Mali</option> <option>Malta</option> <option>Marshall Islands</option> <option>Martinique</option> <option>Mauritania</option> <option>Mauritius</option> <option>Mayotte</option> <option>Mexico</option> <option>Micronesia (Federated States of)</option> <option>Moldova, Republic of</option> <option>Monaco</option> <option>Mongolia</option> <option>Montenegro</option> <option>Montserrat</option> <option>Morocco</option> <option>Mozambique</option> <option>Myanmar</option> <option>Namibia</option> <option>Nauru</option> <option>Nepal</option> <option>Netherlands</option> <option>New Caledonia</option> <option>New Zealand</option> <option>Nicaragua</option> <option>Niger</option> <option>Nigeria</option> <option>Niue</option> <option>Norfolk Island</option> <option>North Macedonia</option> <option>Northern Mariana Islands</option> <option>Norway</option> <option>Oman</option> <option>Pakistan</option> <option>Palau</option> <option>Palestine, State of</option> <option>Panama</option> <option>Papua New Guinea</option> <option>Paraguay</option> <option>Peru</option> <option>Philippines</option> <option>Pitcairn</option> <option>Poland</option> <option>Portugal</option> <option>Puerto Rico</option> <option>Qatar</option> <option>Réunion</option> <option>Romania</option> <option>Russian Federation</option> <option>Rwanda</option> <option>Saint Barthélemy</option> <option>Saint Helena, Ascension and Tristan da Cunha</option> <option>Saint Kitts and Nevis</option> <option>Saint Lucia</option> <option>Saint Martin (French part)</option> <option>Saint Pierre and Miquelon</option> <option>Saint Vincent and the Grenadines</option> <option>Samoa</option> <option>San Marino</option> <option>Sao Tome and Principe</option> <option>Saudi Arabia</option> <option>Senegal</option> <option>Serbia</option> <option>Seychelles</option> <option>Sierra Leone</option> <option>Singapore</option> <option>Sint Maarten (Dutch part)</option> <option>Slovakia</option> <option>Slovenia</option> <option>Solomon Islands</option> <option>Somalia</option> <option>South Africa</option> <option>South Georgia and the South Sandwich Islands</option> <option>South Sudan</option> <option>Spain</option> <option>Sri Lanka</option> <option>Sudan</option> <option>Suriname</option> <option>Svalbard and Jan Mayen</option> <option>Sweden</option> <option>Switzerland</option> <option>Syrian Arab Republic</option> <option>Taiwan, Province of China</option> <option>Tajikistan</option> <option>Tanzania, United Republic of</option> <option>Thailand</option> <option>Timor-Leste</option> <option>Togo</option> <option>Tokelau</option> <option>Tonga</option> <option>Trinidad and Tobago</option> <option>Tunisia</option> <option>Turkey</option> <option>Turkmenistan</option> <option>Turks and Caicos Islands</option> <option>Tuvalu</option> <option>Uganda</option> <option>Ukraine</option> <option>United Arab Emirates</option> <option>United Kingdom of Great Britain and Northern Ireland</option> <option>United States Minor Outlying Islands</option> <option>United States of America</option> <option>Uruguay</option> <option>Uzbekistan</option> <option>Vanuatu</option> <option>Venezuela (Bolivarian Republic of)</option> <option>Viet Nam</option> <option>Virgin Islands (British)</option> <option>Virgin Islands (U.S.)</option> <option>Wallis and Futuna</option> <option>Western Sahara</option> <option>Yemen</option> <option>Zambia</option> <option>Zimbabwe</option></datalist><datalist id="countrydata2"> <option value="Afghanistan" /> <option value="Åland Islands" /> <option value="Albania" /> <option value="Algeria" /> <option value="American Samoa" /> <option value="Andorra" /> <option value="Angola" /> <option value="Anguilla" /> <option value="Antarctica" /> <option value="Antigua and Barbuda" /> <option value="Argentina" /> <option value="Armenia" /> <option value="Aruba" /> <option value="Australia" /> <option value="Austria" /> <option value="Azerbaijan" /> <option value="Bahamas" /> <option value="Bahrain" /> <option value="Bangladesh" /> <option value="Barbados" /> <option value="Belarus" /> <option value="Belgium" /> <option value="Belize" /> <option value="Benin" /> <option value="Bermuda" /> <option value="Bhutan" /> <option value="Bolivia (Plurinational State of)" /> <option value="Bonaire, Sint Eustatius and Saba" /> <option value="Bosnia and Herzegovina" /> <option value="Botswana" /> <option value="Bouvet Island" /> <option value="Brazil" /> <option value="British Indian Ocean Territory" /> <option value="Brunei Darussalam" /> <option value="Bulgaria" /> <option value="Burkina Faso" /> <option value="Burundi" /> <option value="Cabo Verde" /> <option value="Cambodia" /> <option value="Cameroon" /> <option value="Canada" /> <option value="Cayman Islands" /> <option value="Central African Republic" /> <option value="Chad" /> <option value="Chile" /> <option value="China" /> <option value="Christmas Island" /> <option value="Cocos (Keeling) Islands" /> <option value="Colombia" /> <option value="Comoros" /> <option value="Congo" /> <option value="Congo, Democratic Republic of the" /> <option value="Cook Islands" /> <option value="Costa Rica" /> <option value="Côte d'Ivoire" /> <option value="Croatia" /> <option value="Cuba" /> <option value="Curaçao" /> <option value="Cyprus" /> <option value="Czechia" /> <option value="Denmark" /> <option value="Djibouti" /> <option value="Dominica" /> <option value="Dominican Republic" /> <option value="Ecuador" /> <option value="Egypt" /> <option value="El Salvador" /> <option value="Equatorial Guinea" /> <option value="Eritrea" /> <option value="Estonia" /> <option value="Eswatini" /> <option value="Ethiopia" /> <option value="Falkland Islands (Malvinas)" /> <option value="Faroe Islands" /> <option value="Fiji" /> <option value="Finland" /> <option value="France" /> <option value="French Guiana" /> <option value="French Polynesia" /> <option value="French Southern Territories" /> <option value="Gabon" /> <option value="Gambia" /> <option value="Georgia" /> <option value="Germany" /> <option value="Ghana" /> <option value="Gibraltar" /> <option value="Greece" /> <option value="Greenland" /> <option value="Grenada" /> <option value="Guadeloupe" /> <option value="Guam" /> <option value="Guatemala" /> <option value="Guernsey" /> <option value="Guinea" /> <option value="Guinea-Bissau" /> <option value="Guyana" /> <option value="Haiti" /> <option value="Heard Island and McDonald Islands" /> <option value="Holy See" /> <option value="Honduras" /> <option value="Hong Kong" /> <option value="Hungary" /> <option value="Iceland" /> <option value="India" /> <option value="Indonesia" /> <option value="Iran (Islamic Republic of)" /> <option value="Iraq" /> <option value="Ireland" /> <option value="Isle of Man" /> <option value="Israel" /> <option value="Italy" /> <option value="Jamaica" /> <option value="Japan" /> <option value="Jersey" /> <option value="Jordan" /> <option value="Kazakhstan" /> <option value="Kenya" /> <option value="Kiribati" /> <option value="Korea (Democratic People's Republic of)" /> <option value="Korea, Republic of" /> <option value="Kuwait" /> <option value="Kyrgyzstan" /> <option value="Lao People's Democratic Republic" /> <option value="Latvia" /> <option value="Lebanon" /> <option value="Lesotho" /> <option value="Liberia" /> <option value="Libya" /> <option value="Liechtenstein" /> <option value="Lithuania" /> <option value="Luxembourg" /> <option value="Macao" /> <option value="Madagascar" /> <option value="Malawi" /> <option value="Malaysia" /> <option value="Maldives" /> <option value="Mali" /> <option value="Malta" /> <option value="Marshall Islands" /> <option value="Martinique" /> <option value="Mauritania" /> <option value="Mauritius" /> <option value="Mayotte" /> <option value="Mexico" /> <option value="Micronesia (Federated States of)" /> <option value="Moldova, Republic of" /> <option value="Monaco" /> <option value="Mongolia" /> <option value="Montenegro" /> <option value="Montserrat" /> <option value="Morocco" /> <option value="Mozambique" /> <option value="Myanmar" /> <option value="Namibia" /> <option value="Nauru" /> <option value="Nepal" /> <option value="Netherlands" /> <option value="New Caledonia" /> <option value="New Zealand" /> <option value="Nicaragua" /> <option value="Niger" /> <option value="Nigeria" /> <option value="Niue" /> <option value="Norfolk Island" /> <option value="North Macedonia" /> <option value="Northern Mariana Islands" /> <option value="Norway" /> <option value="Oman" /> <option value="Pakistan" /> <option value="Palau" /> <option value="Palestine, State of" /> <option value="Panama" /> <option value="Papua New Guinea" /> <option value="Paraguay" /> <option value="Peru" /> <option value="Philippines" /> <option value="Pitcairn" /> <option value="Poland" /> <option value="Portugal" /> <option value="Puerto Rico" /> <option value="Qatar" /> <option value="Réunion" /> <option value="Romania" /> <option value="Russian Federation" /> <option value="Rwanda" /> <option value="Saint Barthélemy" /> <option value="Saint Helena, Ascension and Tristan da Cunha" /> <option value="Saint Kitts and Nevis" /> <option value="Saint Lucia" /> <option value="Saint Martin (French part)" /> <option value="Saint Pierre and Miquelon" /> <option value="Saint Vincent and the Grenadines" /> <option value="Samoa" /> <option value="San Marino" /> <option value="Sao Tome and Principe" /> <option value="Saudi Arabia" /> <option value="Senegal" /> <option value="Serbia" /> <option value="Seychelles" /> <option value="Sierra Leone" /> <option value="Singapore" /> <option value="Sint Maarten (Dutch part)" /> <option value="Slovakia" /> <option value="Slovenia" /> <option value="Solomon Islands" /> <option value="Somalia" /> <option value="South Africa" /> <option value="South Georgia and the South Sandwich Islands" /> <option value="South Sudan" /> <option value="Spain" /> <option value="Sri Lanka" /> <option value="Sudan" /> <option value="Suriname" /> <option value="Svalbard and Jan Mayen" /> <option value="Sweden" /> <option value="Switzerland" /> <option value="Syrian Arab Republic" /> <option value="Taiwan, Province of China" /> <option value="Tajikistan" /> <option value="Tanzania, United Republic of" /> <option value="Thailand" /> <option value="Timor-Leste" /> <option value="Togo" /> <option value="Tokelau" /> <option value="Tonga" /> <option value="Trinidad and Tobago" /> <option value="Tunisia" /> <option value="Turkey" /> <option value="Turkmenistan" /> <option value="Turks and Caicos Islands" /> <option value="Tuvalu" /> <option value="Uganda" /> <option value="Ukraine" /> <option value="United Arab Emirates" /> <option value="United Kingdom of Great Britain and Northern Ireland" /> <option value="United States Minor Outlying Islands" /> <option value="United States of America" /> <option value="Uruguay" /> <option value="Uzbekistan" /> <option value="Vanuatu" /> <option value="Venezuela (Bolivarian Republic of)" /> <option value="Viet Nam" /> <option value="Virgin Islands (British)" /> <option value="Virgin Islands (U.S.)" /> <option value="Wallis and Futuna" /> <option value="Western Sahara" /> <option value="Yemen" /> <option value="Zambia" /> <option value="Zimbabwe" /></datalist><datalist id="countrydata3"> <option value="AF">Afghanistan</option> <option value="AX">Åland Islands</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AS">American Samoa</option> <option value="AD">Andorra</option> <option value="AO">Angola</option> <option value="AI">Anguilla</option> <option value="AQ">Antarctica</option> <option value="AG">Antigua and Barbuda</option> <option value="AR">Argentina</option> <option value="AM">Armenia</option> <option value="AW">Aruba</option> <option value="AU">Australia</option> <option value="AT">Austria</option> <option value="AZ">Azerbaijan</option> <option value="BS">Bahamas</option> <option value="BH">Bahrain</option> <option value="BD">Bangladesh</option> <option value="BB">Barbados</option> <option value="BY">Belarus</option> <option value="BE">Belgium</option> <option value="BZ">Belize</option> <option value="BJ">Benin</option> <option value="BM">Bermuda</option> <option value="BT">Bhutan</option> <option value="BO">Bolivia (Plurinational State of)</option> <option value="BQ">Bonaire, Sint Eustatius and Saba</option> <option value="BA">Bosnia and Herzegovina</option> <option value="BW">Botswana</option> <option value="BV">Bouvet Island</option> <option value="BR">Brazil</option> <option value="IO">British Indian Ocean Territory</option> <option value="BN">Brunei Darussalam</option> <option value="BG">Bulgaria</option> <option value="BF">Burkina Faso</option> <option value="BI">Burundi</option> <option value="CV">Cabo Verde</option> <option value="KH">Cambodia</option> <option value="CM">Cameroon</option> <option value="CA">Canada</option> <option value="KY">Cayman Islands</option> <option value="CF">Central African Republic</option> <option value="TD">Chad</option> <option value="CL">Chile</option> <option value="CN">China</option> <option value="CX">Christmas Island</option> <option value="CC">Cocos (Keeling) Islands</option> <option value="CO">Colombia</option> <option value="KM">Comoros</option> <option value="CG">Congo</option> <option value="CD">Congo, Democratic Republic of the</option> <option value="CK">Cook Islands</option> <option value="CR">Costa Rica</option> <option value="CI">Côte d'Ivoire</option> <option value="HR">Croatia</option> <option value="CU">Cuba</option> <option value="CW">Curaçao</option> <option value="CY">Cyprus</option> <option value="CZ">Czechia</option> <option value="DK">Denmark</option> <option value="DJ">Djibouti</option> <option value="DM">Dominica</option> <option value="DO">Dominican Republic</option> <option value="EC">Ecuador</option> <option value="EG">Egypt</option> <option value="SV">El Salvador</option> <option value="GQ">Equatorial Guinea</option> <option value="ER">Eritrea</option> <option value="EE">Estonia</option> <option value="SZ">Eswatini</option> <option value="ET">Ethiopia</option> <option value="FK">Falkland Islands (Malvinas)</option> <option value="FO">Faroe Islands</option> <option value="FJ">Fiji</option> <option value="FI">Finland</option> <option value="FR">France</option> <option value="GF">French Guiana</option> <option value="PF">French Polynesia</option> <option value="TF">French Southern Territories</option> <option value="GA">Gabon</option> <option value="GM">Gambia</option> <option value="GE">Georgia</option> <option value="DE">Germany</option> <option value="GH">Ghana</option> <option value="GI">Gibraltar</option> <option value="GR">Greece</option> <option value="GL">Greenland</option> <option value="GD">Grenada</option> <option value="GP">Guadeloupe</option> <option value="GU">Guam</option> <option value="GT">Guatemala</option> <option value="GG">Guernsey</option> <option value="GN">Guinea</option> <option value="GW">Guinea-Bissau</option> <option value="GY">Guyana</option> <option value="HT">Haiti</option> <option value="HM">Heard Island and McDonald Islands</option> <option value="VA">Holy See</option> <option value="HN">Honduras</option> <option value="HK">Hong Kong</option> <option value="HU">Hungary</option> <option value="IS">Iceland</option> <option value="IN">India</option> <option value="ID">Indonesia</option> <option value="IR">Iran (Islamic Republic of)</option> <option value="IQ">Iraq</option> <option value="IE">Ireland</option> <option value="IM">Isle of Man</option> <option value="IL">Israel</option> <option value="IT">Italy</option> <option value="JM">Jamaica</option> <option value="JP">Japan</option> <option value="JE">Jersey</option> <option value="JO">Jordan</option> <option value="KZ">Kazakhstan</option> <option value="KE">Kenya</option> <option value="KI">Kiribati</option> <option value="KP">Korea (Democratic People's Republic of)</option> <option value="KR">Korea, Republic of</option> <option value="KW">Kuwait</option> <option value="KG">Kyrgyzstan</option> <option value="LA">Lao People's Democratic Republic</option> <option value="LV">Latvia</option> <option value="LB">Lebanon</option> <option value="LS">Lesotho</option> <option value="LR">Liberia</option> <option value="LY">Libya</option> <option value="LI">Liechtenstein</option> <option value="LT">Lithuania</option> <option value="LU">Luxembourg</option> <option value="MO">Macao</option> <option value="MG">Madagascar</option> <option value="MW">Malawi</option> <option value="MY">Malaysia</option> <option value="MV">Maldives</option> <option value="ML">Mali</option> <option value="MT">Malta</option> <option value="MH">Marshall Islands</option> <option value="MQ">Martinique</option> <option value="MR">Mauritania</option> <option value="MU">Mauritius</option> <option value="YT">Mayotte</option> <option value="MX">Mexico</option> <option value="FM">Micronesia (Federated States of)</option> <option value="MD">Moldova, Republic of</option> <option value="MC">Monaco</option> <option value="MN">Mongolia</option> <option value="ME">Montenegro</option> <option value="MS">Montserrat</option> <option value="MA">Morocco</option> <option value="MZ">Mozambique</option> <option value="MM">Myanmar</option> <option value="NA">Namibia</option> <option value="NR">Nauru</option> <option value="NP">Nepal</option> <option value="NL">Netherlands</option> <option value="NC">New Caledonia</option> <option value="NZ">New Zealand</option> <option value="NI">Nicaragua</option> <option value="NE">Niger</option> <option value="NG">Nigeria</option> <option value="NU">Niue</option> <option value="NF">Norfolk Island</option> <option value="MK">North Macedonia</option> <option value="MP">Northern Mariana Islands</option> <option value="NO">Norway</option> <option value="OM">Oman</option> <option value="PK">Pakistan</option> <option value="PW">Palau</option> <option value="PS">Palestine, State of</option> <option value="PA">Panama</option> <option value="PG">Papua New Guinea</option> <option value="PY">Paraguay</option> <option value="PE">Peru</option> <option value="PH">Philippines</option> <option value="PN">Pitcairn</option> <option value="PL">Poland</option> <option value="PT">Portugal</option> <option value="PR">Puerto Rico</option> <option value="QA">Qatar</option> <option value="RE">Réunion</option> <option value="RO">Romania</option> <option value="RU">Russian Federation</option> <option value="RW">Rwanda</option> <option value="BL">Saint Barthélemy</option> <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option> <option value="KN">Saint Kitts and Nevis</option> <option value="LC">Saint Lucia</option> <option value="MF">Saint Martin (French part)</option> <option value="PM">Saint Pierre and Miquelon</option> <option value="VC">Saint Vincent and the Grenadines</option> <option value="WS">Samoa</option> <option value="SM">San Marino</option> <option value="ST">Sao Tome and Principe</option> <option value="SA">Saudi Arabia</option> <option value="SN">Senegal</option> <option value="RS">Serbia</option> <option value="SC">Seychelles</option> <option value="SL">Sierra Leone</option> <option value="SG">Singapore</option> <option value="SX">Sint Maarten (Dutch part)</option> <option value="SK">Slovakia</option> <option value="SI">Slovenia</option> <option value="SB">Solomon Islands</option> <option value="SO">Somalia</option> <option value="ZA">South Africa</option> <option value="GS">South Georgia and the South Sandwich Islands</option> <option value="SS">South Sudan</option> <option value="ES">Spain</option> <option value="LK">Sri Lanka</option> <option value="SD">Sudan</option> <option value="SR">Suriname</option> <option value="SJ">Svalbard and Jan Mayen</option> <option value="SE">Sweden</option> <option value="CH">Switzerland</option> <option value="SY">Syrian Arab Republic</option> <option value="TW">Taiwan, Province of China</option> <option value="TJ">Tajikistan</option> <option value="TZ">Tanzania, United Republic of</option> <option value="TH">Thailand</option> <option value="TL">Timor-Leste</option> <option value="TG">Togo</option> <option value="TK">Tokelau</option> <option value="TO">Tonga</option> <option value="TT">Trinidad and Tobago</option> <option value="TN">Tunisia</option> <option value="TR">Turkey</option> <option value="TM">Turkmenistan</option> <option value="TC">Turks and Caicos Islands</option> <option value="TV">Tuvalu</option> <option value="UG">Uganda</option> <option value="UA">Ukraine</option> <option value="AE">United Arab Emirates</option> <option value="GB">United Kingdom of Great Britain and Northern Ireland</option> <option value="UM">United States Minor Outlying Islands</option> <option value="US">United States of America</option> <option value="UY">Uruguay</option> <option value="UZ">Uzbekistan</option> <option value="VU">Vanuatu</option> <option value="VE">Venezuela (Bolivarian Republic of)</option> <option value="VN">Viet Nam</option> <option value="VG">Virgin Islands (British)</option> <option value="VI">Virgin Islands (U.S.)</option> <option value="WF">Wallis and Futuna</option> <option value="EH">Western Sahara</option> <option value="YE">Yemen</option> <option value="ZM">Zambia</option> <option value="ZW">Zimbabwe</option></datalist><datalist id="countrydata4"> <option value="AF" label="Afghanistan" /> <option value="AX" label="Åland Islands" /> <option value="AL" label="Albania" /> <option value="DZ" label="Algeria" /> <option value="AS" label="American Samoa" /> <option value="AD" label="Andorra" /> <option value="AO" label="Angola" /> <option value="AI" label="Anguilla" /> <option value="AQ" label="Antarctica" /> <option value="AG" label="Antigua and Barbuda" /> <option value="AR" label="Argentina" /> <option value="AM" label="Armenia" /> <option value="AW" label="Aruba" /> <option value="AU" label="Australia" /> <option value="AT" label="Austria" /> <option value="AZ" label="Azerbaijan" /> <option value="BS" label="Bahamas" /> <option value="BH" label="Bahrain" /> <option value="BD" label="Bangladesh" /> <option value="BB" label="Barbados" /> <option value="BY" label="Belarus" /> <option value="BE" label="Belgium" /> <option value="BZ" label="Belize" /> <option value="BJ" label="Benin" /> <option value="BM" label="Bermuda" /> <option value="BT" label="Bhutan" /> <option value="BO" label="Bolivia (Plurinational State of)" /> <option value="BQ" label="Bonaire, Sint Eustatius and Saba" /> <option value="BA" label="Bosnia and Herzegovina" /> <option value="BW" label="Botswana" /> <option value="BV" label="Bouvet Island" /> <option value="BR" label="Brazil" /> <option value="IO" label="British Indian Ocean Territory" /> <option value="BN" label="Brunei Darussalam" /> <option value="BG" label="Bulgaria" /> <option value="BF" label="Burkina Faso" /> <option value="BI" label="Burundi" /> <option value="CV" label="Cabo Verde" /> <option value="KH" label="Cambodia" /> <option value="CM" label="Cameroon" /> <option value="CA" label="Canada" /> <option value="KY" label="Cayman Islands" /> <option value="CF" label="Central African Republic" /> <option value="TD" label="Chad" /> <option value="CL" label="Chile" /> <option value="CN" label="China" /> <option value="CX" label="Christmas Island" /> <option value="CC" label="Cocos (Keeling) Islands" /> <option value="CO" label="Colombia" /> <option value="KM" label="Comoros" /> <option value="CG" label="Congo" /> <option value="CD" label="Congo, Democratic Republic of the" /> <option value="CK" label="Cook Islands" /> <option value="CR" label="Costa Rica" /> <option value="CI" label="Côte d'Ivoire" /> <option value="HR" label="Croatia" /> <option value="CU" label="Cuba" /> <option value="CW" label="Curaçao" /> <option value="CY" label="Cyprus" /> <option value="CZ" label="Czechia" /> <option value="DK" label="Denmark" /> <option value="DJ" label="Djibouti" /> <option value="DM" label="Dominica" /> <option value="DO" label="Dominican Republic" /> <option value="EC" label="Ecuador" /> <option value="EG" label="Egypt" /> <option value="SV" label="El Salvador" /> <option value="GQ" label="Equatorial Guinea" /> <option value="ER" label="Eritrea" /> <option value="EE" label="Estonia" /> <option value="SZ" label="Eswatini" /> <option value="ET" label="Ethiopia" /> <option value="FK" label="Falkland Islands (Malvinas)" /> <option value="FO" label="Faroe Islands" /> <option value="FJ" label="Fiji" /> <option value="FI" label="Finland" /> <option value="FR" label="France" /> <option value="GF" label="French Guiana" /> <option value="PF" label="French Polynesia" /> <option value="TF" label="French Southern Territories" /> <option value="GA" label="Gabon" /> <option value="GM" label="Gambia" /> <option value="GE" label="Georgia" /> <option value="DE" label="Germany" /> <option value="GH" label="Ghana" /> <option value="GI" label="Gibraltar" /> <option value="GR" label="Greece" /> <option value="GL" label="Greenland" /> <option value="GD" label="Grenada" /> <option value="GP" label="Guadeloupe" /> <option value="GU" label="Guam" /> <option value="GT" label="Guatemala" /> <option value="GG" label="Guernsey" /> <option value="GN" label="Guinea" /> <option value="GW" label="Guinea-Bissau" /> <option value="GY" label="Guyana" /> <option value="HT" label="Haiti" /> <option value="HM" label="Heard Island and McDonald Islands" /> <option value="VA" label="Holy See" /> <option value="HN" label="Honduras" /> <option value="HK" label="Hong Kong" /> <option value="HU" label="Hungary" /> <option value="IS" label="Iceland" /> <option value="IN" label="India" /> <option value="ID" label="Indonesia" /> <option value="IR" label="Iran (Islamic Republic of)" /> <option value="IQ" label="Iraq" /> <option value="IE" label="Ireland" /> <option value="IM" label="Isle of Man" /> <option value="IL" label="Israel" /> <option value="IT" label="Italy" /> <option value="JM" label="Jamaica" /> <option value="JP" label="Japan" /> <option value="JE" label="Jersey" /> <option value="JO" label="Jordan" /> <option value="KZ" label="Kazakhstan" /> <option value="KE" label="Kenya" /> <option value="KI" label="Kiribati" /> <option value="KP" label="Korea (Democratic People's Republic of)" /> <option value="KR" label="Korea, Republic of" /> <option value="KW" label="Kuwait" /> <option value="KG" label="Kyrgyzstan" /> <option value="LA" label="Lao People's Democratic Republic" /> <option value="LV" label="Latvia" /> <option value="LB" label="Lebanon" /> <option value="LS" label="Lesotho" /> <option value="LR" label="Liberia" /> <option value="LY" label="Libya" /> <option value="LI" label="Liechtenstein" /> <option value="LT" label="Lithuania" /> <option value="LU" label="Luxembourg" /> <option value="MO" label="Macao" /> <option value="MG" label="Madagascar" /> <option value="MW" label="Malawi" /> <option value="MY" label="Malaysia" /> <option value="MV" label="Maldives" /> <option value="ML" label="Mali" /> <option value="MT" label="Malta" /> <option value="MH" label="Marshall Islands" /> <option value="MQ" label="Martinique" /> <option value="MR" label="Mauritania" /> <option value="MU" label="Mauritius" /> <option value="YT" label="Mayotte" /> <option value="MX" label="Mexico" /> <option value="FM" label="Micronesia (Federated States of)" /> <option value="MD" label="Moldova, Republic of" /> <option value="MC" label="Monaco" /> <option value="MN" label="Mongolia" /> <option value="ME" label="Montenegro" /> <option value="MS" label="Montserrat" /> <option value="MA" label="Morocco" /> <option value="MZ" label="Mozambique" /> <option value="MM" label="Myanmar" /> <option value="NA" label="Namibia" /> <option value="NR" label="Nauru" /> <option value="NP" label="Nepal" /> <option value="NL" label="Netherlands" /> <option value="NC" label="New Caledonia" /> <option value="NZ" label="New Zealand" /> <option value="NI" label="Nicaragua" /> <option value="NE" label="Niger" /> <option value="NG" label="Nigeria" /> <option value="NU" label="Niue" /> <option value="NF" label="Norfolk Island" /> <option value="MK" label="North Macedonia" /> <option value="MP" label="Northern Mariana Islands" /> <option value="NO" label="Norway" /> <option value="OM" label="Oman" /> <option value="PK" label="Pakistan" /> <option value="PW" label="Palau" /> <option value="PS" label="Palestine, State of" /> <option value="PA" label="Panama" /> <option value="PG" label="Papua New Guinea" /> <option value="PY" label="Paraguay" /> <option value="PE" label="Peru" /> <option value="PH" label="Philippines" /> <option value="PN" label="Pitcairn" /> <option value="PL" label="Poland" /> <option value="PT" label="Portugal" /> <option value="PR" label="Puerto Rico" /> <option value="QA" label="Qatar" /> <option value="RE" label="Réunion" /> <option value="RO" label="Romania" /> <option value="RU" label="Russian Federation" /> <option value="RW" label="Rwanda" /> <option value="BL" label="Saint Barthélemy" /> <option value="SH" label="Saint Helena, Ascension and Tristan da Cunha" /> <option value="KN" label="Saint Kitts and Nevis" /> <option value="LC" label="Saint Lucia" /> <option value="MF" label="Saint Martin (French part)" /> <option value="PM" label="Saint Pierre and Miquelon" /> <option value="VC" label="Saint Vincent and the Grenadines" /> <option value="WS" label="Samoa" /> <option value="SM" label="San Marino" /> <option value="ST" label="Sao Tome and Principe" /> <option value="SA" label="Saudi Arabia" /> <option value="SN" label="Senegal" /> <option value="RS" label="Serbia" /> <option value="SC" label="Seychelles" /> <option value="SL" label="Sierra Leone" /> <option value="SG" label="Singapore" /> <option value="SX" label="Sint Maarten (Dutch part)" /> <option value="SK" label="Slovakia" /> <option value="SI" label="Slovenia" /> <option value="SB" label="Solomon Islands" /> <option value="SO" label="Somalia" /> <option value="ZA" label="South Africa" /> <option value="GS" label="South Georgia and the South Sandwich Islands" /> <option value="SS" label="South Sudan" /> <option value="ES" label="Spain" /> <option value="LK" label="Sri Lanka" /> <option value="SD" label="Sudan" /> <option value="SR" label="Suriname" /> <option value="SJ" label="Svalbard and Jan Mayen" /> <option value="SE" label="Sweden" /> <option value="CH" label="Switzerland" /> <option value="SY" label="Syrian Arab Republic" /> <option value="TW" label="Taiwan, Province of China" /> <option value="TJ" label="Tajikistan" /> <option value="TZ" label="Tanzania, United Republic of" /> <option value="TH" label="Thailand" /> <option value="TL" label="Timor-Leste" /> <option value="TG" label="Togo" /> <option value="TK" label="Tokelau" /> <option value="TO" label="Tonga" /> <option value="TT" label="Trinidad and Tobago" /> <option value="TN" label="Tunisia" /> <option value="TR" label="Turkey" /> <option value="TM" label="Turkmenistan" /> <option value="TC" label="Turks and Caicos Islands" /> <option value="TV" label="Tuvalu" /> <option value="UG" label="Uganda" /> <option value="UA" label="Ukraine" /> <option value="AE" label="United Arab Emirates" /> <option value="GB" label="United Kingdom of Great Britain and Northern Ireland" /> <option value="UM" label="United States Minor Outlying Islands" /> <option value="US" label="United States of America" /> <option value="UY" label="Uruguay" /> <option value="UZ" label="Uzbekistan" /> <option value="VU" label="Vanuatu" /> <option value="VE" label="Venezuela (Bolivarian Republic of)" /> <option value="VN" label="Viet Nam" /> <option value="VG" label="Virgin Islands (British)" /> <option value="VI" label="Virgin Islands (U.S.)" /> <option value="WF" label="Wallis and Futuna" /> <option value="EH" label="Western Sahara" /> <option value="YE" label="Yemen" /> <option value="ZM" label="Zambia" /> <option value="ZW" label="Zimbabwe" /></datalist> <script> (() => { // stop form submission and output field names/values to console const form = document.getElementById('autoform'); form.addEventListener('submit', e => { e.preventDefault(); console.clear(); console.log('Submit disabled. Data:'); const data = new FormData(form); for (let nv of data.entries()) { console.log(` ${ nv[0] }: ${ nv[1] }`); } }); })(); </script></body></html>实现会不断发展，但就目前而言，我建议您不要使用值和标签，因为它可能会使用户感到困惑。<datalist> 浏览器支持和后备<datalist>现代浏览器以及InternetExplorer10和11都很好地支持该元素：有几个实现说明，但是它们不会影响大多数使用情况。可能发生的最坏情况是字段恢复为标准文本输入。如果您绝对必须支持IE9及以下版本，则有一个后备模式，该模式<select>在<datalist>失败时将标准与文本输入结合使用。改写国家示例：<label for="country">country</label><datalist id="countrydata"> <select name="countryselect"> <option></option> <option>Afghanistan</option> <option>Åland Islands</option> <option>Albania</option> <option>Algeria</option> <option>American Samoa</option> <option>Andorra</option> <option>Angola</option> <option>Anguilla</option> <option>Antarctica</option> ...etc... </select> <label for="country">or other</label></datalist><input type="text" id="country" name="country" size="50" list="countrydata" autocomplete="off" />看下DEMO:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5数据列表的轻量级自动完成控件 - Web前端之家www.jiangweishan.com</title> <style> body { font-family: sans-serif; font-size: 100%; color: #222; background-color: #fafafe; margin: 1em; } label, button { display: block; margin-top: 1em; } </style></head><body> <h1>Lightweight HTML5 datalist fallback</h1><p>Works in all browsers including IE9 and below which do not support datalist elements.</p><form id="autoform"> <label for="country">country</label> <datalist id="countrydata"> <select name="countryselect"> <option></option> <option>Afghanistan</option> <option>Åland Islands</option> <option>Albania</option> <option>Algeria</option> <option>American Samoa</option> <option>Andorra</option> <option>Angola</option> <option>Anguilla</option> <option>Antarctica</option> <option>Antigua and Barbuda</option> <option>Argentina</option> <option>Armenia</option> <option>Aruba</option> <option>Australia</option> <option>Austria</option> <option>Azerbaijan</option> <option>Bahamas</option> <option>Bahrain</option> <option>Bangladesh</option> <option>Barbados</option> <option>Belarus</option> <option>Belgium</option> <option>Belize</option> <option>Benin</option> <option>Bermuda</option> <option>Bhutan</option> <option>Bolivia (Plurinational State of)</option> <option>Bonaire, Sint Eustatius and Saba</option> <option>Bosnia and Herzegovina</option> <option>Botswana</option> <option>Bouvet Island</option> <option>Brazil</option> <option>British Indian Ocean Territory</option> <option>Brunei Darussalam</option> <option>Bulgaria</option> <option>Burkina Faso</option> <option>Burundi</option> <option>Cabo Verde</option> <option>Cambodia</option> <option>Cameroon</option> <option>Canada</option> <option>Cayman Islands</option> <option>Central African Republic</option> <option>Chad</option> <option>Chile</option> <option>China</option> <option>Christmas Island</option> <option>Cocos (Keeling) Islands</option> <option>Colombia</option> <option>Comoros</option> <option>Congo</option> <option>Congo, Democratic Republic of the</option> <option>Cook Islands</option> <option>Costa Rica</option> <option>Côte d'Ivoire</option> <option>Croatia</option> <option>Cuba</option> <option>Curaçao</option> <option>Cyprus</option> <option>Czechia</option> <option>Denmark</option> <option>Djibouti</option> <option>Dominica</option> <option>Dominican Republic</option> <option>Ecuador</option> <option>Egypt</option> <option>El Salvador</option> <option>Equatorial Guinea</option> <option>Eritrea</option> <option>Estonia</option> <option>Eswatini</option> <option>Ethiopia</option> <option>Falkland Islands (Malvinas)</option> <option>Faroe Islands</option> <option>Fiji</option> <option>Finland</option> <option>France</option> <option>French Guiana</option> <option>French Polynesia</option> <option>French Southern Territories</option> <option>Gabon</option> <option>Gambia</option> <option>Georgia</option> <option>Germany</option> <option>Ghana</option> <option>Gibraltar</option> <option>Greece</option> <option>Greenland</option> <option>Grenada</option> <option>Guadeloupe</option> <option>Guam</option> <option>Guatemala</option> <option>Guernsey</option> <option>Guinea</option> <option>Guinea-Bissau</option> <option>Guyana</option> <option>Haiti</option> <option>Heard Island and McDonald Islands</option> <option>Holy See</option> <option>Honduras</option> <option>Hong Kong</option> <option>Hungary</option> <option>Iceland</option> <option>India</option> <option>Indonesia</option> <option>Iran (Islamic Republic of)</option> <option>Iraq</option> <option>Ireland</option> <option>Isle of Man</option> <option>Israel</option> <option>Italy</option> <option>Jamaica</option> <option>Japan</option> <option>Jersey</option> <option>Jordan</option> <option>Kazakhstan</option> <option>Kenya</option> <option>Kiribati</option> <option>Korea (Democratic People's Republic of)</option> <option>Korea, Republic of</option> <option>Kuwait</option> <option>Kyrgyzstan</option> <option>Lao People's Democratic Republic</option> <option>Latvia</option> <option>Lebanon</option> <option>Lesotho</option> <option>Liberia</option> <option>Libya</option> <option>Liechtenstein</option> <option>Lithuania</option> <option>Luxembourg</option> <option>Macao</option> <option>Madagascar</option> <option>Malawi</option> <option>Malaysia</option> <option>Maldives</option> <option>Mali</option> <option>Malta</option> <option>Marshall Islands</option> <option>Martinique</option> <option>Mauritania</option> <option>Mauritius</option> <option>Mayotte</option> <option>Mexico</option> <option>Micronesia (Federated States of)</option> <option>Moldova, Republic of</option> <option>Monaco</option> <option>Mongolia</option> <option>Montenegro</option> <option>Montserrat</option> <option>Morocco</option> <option>Mozambique</option> <option>Myanmar</option> <option>Namibia</option> <option>Nauru</option> <option>Nepal</option> <option>Netherlands</option> <option>New Caledonia</option> <option>New Zealand</option> <option>Nicaragua</option> <option>Niger</option> <option>Nigeria</option> <option>Niue</option> <option>Norfolk Island</option> <option>North Macedonia</option> <option>Northern Mariana Islands</option> <option>Norway</option> <option>Oman</option> <option>Pakistan</option> <option>Palau</option> <option>Palestine, State of</option> <option>Panama</option> <option>Papua New Guinea</option> <option>Paraguay</option> <option>Peru</option> <option>Philippines</option> <option>Pitcairn</option> <option>Poland</option> <option>Portugal</option> <option>Puerto Rico</option> <option>Qatar</option> <option>Réunion</option> <option>Romania</option> <option>Russian Federation</option> <option>Rwanda</option> <option>Saint Barthélemy</option> <option>Saint Helena, Ascension and Tristan da Cunha</option> <option>Saint Kitts and Nevis</option> <option>Saint Lucia</option> <option>Saint Martin (French part)</option> <option>Saint Pierre and Miquelon</option> <option>Saint Vincent and the Grenadines</option> <option>Samoa</option> <option>San Marino</option> <option>Sao Tome and Principe</option> <option>Saudi Arabia</option> <option>Senegal</option> <option>Serbia</option> <option>Seychelles</option> <option>Sierra Leone</option> <option>Singapore</option> <option>Sint Maarten (Dutch part)</option> <option>Slovakia</option> <option>Slovenia</option> <option>Solomon Islands</option> <option>Somalia</option> <option>South Africa</option> <option>South Georgia and the South Sandwich Islands</option> <option>South Sudan</option> <option>Spain</option> <option>Sri Lanka</option> <option>Sudan</option> <option>Suriname</option> <option>Svalbard and Jan Mayen</option> <option>Sweden</option> <option>Switzerland</option> <option>Syrian Arab Republic</option> <option>Taiwan, Province of China</option> <option>Tajikistan</option> <option>Tanzania, United Republic of</option> <option>Thailand</option> <option>Timor-Leste</option> <option>Togo</option> <option>Tokelau</option> <option>Tonga</option> <option>Trinidad and Tobago</option> <option>Tunisia</option> <option>Turkey</option> <option>Turkmenistan</option> <option>Turks and Caicos Islands</option> <option>Tuvalu</option> <option>Uganda</option> <option>Ukraine</option> <option>United Arab Emirates</option> <option>United Kingdom of Great Britain and Northern Ireland</option> <option>United States Minor Outlying Islands</option> <option>United States of America</option> <option>Uruguay</option> <option>Uzbekistan</option> <option>Vanuatu</option> <option>Venezuela (Bolivarian Republic of)</option> <option>Viet Nam</option> <option>Virgin Islands (British)</option> <option>Virgin Islands (U.S.)</option> <option>Wallis and Futuna</option> <option>Western Sahara</option> <option>Yemen</option> <option>Zambia</option> <option>Zimbabwe</option> </select> <label for="country">or other:</label> </datalist> <input list="countrydata" id="country" name="country" size="50" autocomplete="off" /> <button type="submit">submit</button></form> <script> (() => { // stop form submission and output field names/values to console const form = document.getElementById('autoform'); form.addEventListener('submit', e => { e.preventDefault(); console.clear(); console.log('Submit disabled. Data:'); const data = new FormData(form); for (let nv of data.entries()) { console.log(` ${ nv[0] }: ${ nv[1] }`); } }); })(); </script></body></html>在现代浏览器中，<option>元素成为的一部分，<datalist>并且未显示“或其他”标签。它看起来与上面的示例相同，但是countryselect表单值将设置为空字符串。在IE9及以下版本中，（很长）<select>和文本输入字段均处于活动状态：这两个值都可以在旧的IE中输入。您的应用程序必须：决定哪个最有效，或者使用小的JavaScript函数在另一个更改时重置一个使用<datalist>非文本控件基于Chrome的浏览器还可将<datalist>值应用于：类型为的输入"date"。用户可以从定义为YYYY-MM-DD值但以其区域设置格式显示的一系列选项中进行选择。类型为的输入"color"。用户可以从定义为六位十六进制值（三位数值无效）的颜色选项中进行选择。类型为的输入"range"。滑块显示刻度线，尽管这并不限制可以输入哪个值。<datalist> CSS样式如果您在设计<select>包装盒时遇到困难，……就很简单！一个<input>可以作为样式正常，但一个链接<datalist>和其子<option>元素不能在CSS定义样式。列表呈现完全由平台和浏览器确定。我希望这种情况有所改善，但目前，MDN提出了一种解决方案，该解决方案是：覆盖默认的浏览器行为有效地对待<datalist>a，<div>因此可以在CSS中设置样式复制JavaScript中的所有自动完成功能我已经对其进行了进一步的增强，并且代码可以在GitHub上找到。要使用它，请将脚本作为ES6模块加载到HTML页面中的任何位置。该jsDelivr CDNURL，可以用：<script src="https://cdn.jsdelivr.net/npm/datalist-css/dist/datalist-css.min.js"></script>或者，npm如果您使用捆绑器，则可以将其安装：npm install datalist-css您的<datalist>元素必须使用<option>value</option>格式。例如：<datalist id="mylist"> <option>label one</option> <option>label two</option> <option>label three</option></datalist>注意：<optionvalue="value"/>不能使用，因为它会导致无法设置样式的空元素！然后可以添加CSS来为部分或全部<datalist>和<option>元素设置样式。例如：datalist { position: absolute; max-height: 20em; border: 0 none; overflow-x: hidden; overflow-y: auto;}datalist option { font-size: 0.8em; padding: 0.3em 1em; background-color: #ccc; cursor: pointer;}/* active option styling */datalist option:hover, datalist option:focus { color: #fff; background-color: #036; outline: 0 none;}样式有效，但是值得付出努力吗？我怀疑不是……很难以合理的可访问性重新实现浏览器的标准键盘，鼠标和触摸控件。该MDN例如不支持键盘事件，而我试图在某些设备上对其进行改进，难免会出现问题。您依靠200行JavaScript来解决CSS问题。它最小化为1.5kB，但是如果您<datalist>在同一页面上需要许多长元素，则可能会导致性能问题。如果需要JavaScript，是否最好使用更漂亮，更一致，经过考验的JavaScript组件？<datalist>当JavaScript失败时，控件会退回到标准HTML5而不设置样式，但这是次要的好处。创建增强的Ajax <datalist>假设您的设计师乐于接受浏览器样式上的差异，则可以<datalist>使用JavaScript增强标准功能。例如：实现可选验证，该验证仅接受中的已知值<datalist>。<option>从Ajax调用返回的数据中设置元素以搜索API。选择一个选项时，设置其他字段值。例如，选择“美国”会在隐藏的输入中设置“美国”。<option>尽管有一些编码注意事项，但是代码主要需要重新定义元素：输入最少字符数后，才应发出AjaxAPI请求。键入事件应予以消除。也就是说，仅在用户停止键入至少半秒钟后才触发Ajax调用。查询结果应该被缓存，因此没有必要重复或解析相同的调用。应避免不必要的查询。例如，输入“un”将返回12个国家。有没有必要做进一步的Ajax调用“单位”或“联合”，因为所有结果选项都包含在最初的12个结果。我已经为此创建了一个标准的Web组件，并且代码可以在GitHub上找到。下面的CodePen示例允许您输入至少两个字符后选择有效的国家/地区。然后，音乐艺术家自动完成功能会返回来自该国家/地区且名称与搜索字符串匹配的艺术家：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5数据列表的轻量级自动完成控件 - Web前端之家www.jiangweishan.com</title> <style> *, *::before, *::after { box-sizing: border-box;}body { font-family: sans-serif; font-size: 100%; color: #222; background-color: #fafafe; margin: 1em;}label, button { display: block; margin-top: 1em;} </style></head><body> <h1>HTML5 Ajax auto-complete datalist demonstration</h1><form id="autoform"> <label for="country">country lookup:</label> <auto-complete api="https://restcountries.eu/rest/v2/name/${country}?fields=name;alpha2Code;region" resultname="name" querymin="2" optionmax="50" valid="please select a valid country" > <input type="text" id="country" name="country" size="50" required /> </auto-complete> <label for="region">country region:</label> <input type="text" id="region" name="region" size="10" data-autofill="region" readonly /> <label for="countrycode">country code:</label> <input type="text" id="countrycode" name="countrycode" data-autofill="alpha2Code" size="2" readonly /> <label for="artist">music artist lookup:</label> <auto-complete api="https://musicbrainz.org/ws/2/artist?query=artist:${artist}%20AND%20country:${countrycode}&limit=21&fmt=json" resultdata="artists" resultname="name" querymin="1" optionmax="100" > <input type="text" id="artist" name="artist" size="50" required /> </auto-complete> <label for="artisttype">artist type:</label> <input type="text" id="artisttype" name="artisttype" data-autofill="type" size="10" readonly /> <button type="submit">submit</button></form> <script> (() => {// stop form submission and output field names/values to consoleconst form = document.getElementById('autoform');form.addEventListener('submit', e => { e.preventDefault(); console.clear(); console.log('Submit disabled. Data:'); const data = new FormData(form); for (let nv of data.entries()) { console.log(` ${ nv[0] }: ${ nv[1] }`); }});})(); </script></body></html>要在您自己的应用程序中使用它，请将脚本作为ES6模块加载到HTML页面中的任何位置。该jsDelivr CDNURL，可以用：<script src="https://cdn.jsdelivr.net/npm/datalist-ajax/dist/datalist-ajax.min.js"></script>或者，npm如果您使用捆绑器，则可以将其安装：npm install datalist-ajax创建一个<auto-complete>带有子元素的元素，<input>以用作数据输入字段。例如，国家/地区查询使用以下代码：<label for="country">country lookup:</label><auto-complete api="https://restcountries.eu/rest/v2/name/${country}?fields=name;alpha2Code;region" resultname="name" querymin="2" optionmax="50" valid="please select a valid country"> <input type="text" id="country" name="country" size="50" required /></auto-complete><auto-complete> 元素属性：属性描述apiRESTAPIURL（必需）resultdata在返回的APIJSON中包含对象结果数组的属性的名称（如果仅返回结果，则不需要）resultname每个结果对象中与搜索输入匹配的属性名称，用于数据列表<option>元素（必需）querymin触发搜索之前输入的最少字符数（默认值：1）inputdelay搜索之前在两次按键之间等待的最短时间（以毫秒为单位）（默认的反跳：300）optionmax显示的自动完成选项的最大数量（默认值：20）valid如果设置，则选择无效值时将显示此错误消息其余URL必须包含至少一个${id}标识符，它是通过在设定的值取代<input>与id。在上面的示例${country}中，apiURL引用了child中的值<input>，其id值为"country"。该URL通常将使用子输入，但是可以引用页面上的任何其他字段。所述restcountries.eu API返回单个对象或包含国家数据对象的数组。例如：[ { "name": "Cyprus", "alpha2Code": "CY", "region": "Europe" }, { "name": "Sao Tome and Principe", "alpha2Code": "ST", "region": "Africa" }, { "name": "Andorra", "alpha2Code": "AD", "region": "Europe" }]resultdata不需要设置该属性，因为这是唯一返回的数据（没有包装对象）。该resultname属性必须设置为，"name"因为该属性用于填充数据列表<option>元素。选择选项后，其他字段可以自动填写。以下输入接收到"alpha2Code"和"region"属性数据，因为data-autofill已经设置了属性：<input data-autofill="alpha2Code" type="text" id="countrycode" name="countrycode" readonly /><input data-autofill="region" type="text" id="region" name="region" readonly />datalist-ajax如何工作如果您不想阅读230行代码并保持魔力，则可以跳过本节。该代码首先创建一个新的<datalist>内<auto-complete>，它重视孩子<input>使用list属性。一个input事件处理程序监控<input>和调用runQuery()时已经输入的字符的最小数目，并且用户仍然不打字功能。runQuery()根据表单中的数据构建APIURL，并使用FetchAPI进行Ajax调用。解析返回的JSON，然后<option>构造一个包含元素的可重用DOM片段并将其放入缓存。datalistUpdate()调用一个函数，该函数<datalist>使用适当的缓存DOM片段更新。runQuery()如果查询已经被缓存或可以使用先前的查询，则可以进行进一步的调用以避免Ajax调用。甲change事件处理程序还监控<input>，其中，当焦点被从场移动，且值已被修改时被触发。该函数检查该值是否与已知选项匹配，并在必要时使用约束验证API来显示valid属性中提供的错误消息。假设已选择一个有效选项，那么更改处理程序功能将使用匹配的data-autofill属性填充所有字段。保留了对自动填充字段的引用，因此，如果随后输入了无效的选项，可以将其重置。请注意，未使用影子DOM 。这样可以确保自动完成元素<input>（和<datalist>）可以由CSS设置样式，并在需要时由其他脚本访问。<datalist>HTML5<datalist>有局限性，但是如果您需要一个与框架无关的简单自动完成字段，则它是理想的选择。缺乏CSS支持是一个遗憾，但是浏览器供应商最终可能会解决这种疏忽。本教程中显示的任何代码和示例都可以用于您自己的项目。...

如何在HTML5 SVG上绘制三次贝塞尔曲线

2020年12月29日

文章“如何在SVG中创建复杂路径”对该<path>元素进行了研究，并展示了如何绘制一系列直线和圆弧以创建任何形状。（它通常用于复制字体，而无需下载完整的字体。）该d属性提供了一些额外的技巧来绘制平滑曲线。在本文中，我们将讨论三次贝塞尔曲线，但您也可以参考“如何在SVG图像上绘制二次贝塞尔曲线”中的一个简单选项。什么是三次贝塞尔曲线？您可能在桌面发布和图形包中遇到了三次贝塞尔曲线。它们定义了起点（P0）和终点（P3）。但是，虽然二次曲线使用一个控制点，三次贝塞尔曲线却具有两个：曲线的每一端（P1和P2）一条。路径难题三次贝塞尔曲线是使用C路径d属性中的指令定义的：<path d="M100,250 C100,100 400,100 400,250" />初始M指令将笔移动到第一点（100,250）。三个坐标遵循C：第一个控制点（100,100），第二个控制点（400,100）和最终终点（400,250）。您也可以使用小写字母c表示相对坐标，而不是绝对坐标。以下曲线将是相同的，并且可能更容易编写：<path d="M100,250 c0,-150 300,-150 300,0" />最后，还有速记S和s指令（通常，小写选项表示相对坐标，而不是绝对坐标）。它们通过设置另一个终点及其关联的控制点，接受另外两个坐标以将多条曲线串在一起。假定起点控制点与上一条曲线上的终点控制点相同。例如，采用以下路径：<path d="M100,250 C100,100 400,100 400,250 S700,400 700,250" />如上所述，它绘制了从100,250（控制点的100,100）到400,250（控制点的400,100）的曲线。然后从400,250（控制点在不变400,100）到700,250（控制点在700,400）绘制另一条曲线：三次贝塞尔曲线可能很难编码和可视化，因此此快速生成工具将为您生成<path>代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /><meta name="apple-mobile-web-app-title" content="CodePen"><link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /><link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <meta charset="utf-8"> <meta name='viewport' content='width=device-width, initial-scale=1'> <title>CodePen - SVG cubic bézier curve path creation tool</title> <link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/fullpage/fullpage-4de243a40619a967c0bf13b95e1ac6f8de89d943b7fc8710de33f681fe287604.css" /> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic,900,900italic&display=swap" rel="stylesheet" /> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /><meta name="apple-mobile-web-app-title" content="CodePen"><link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /><link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - SVG cubic bézier curve path creation tool</title> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); }</script></head><body class=""> <div id="result-iframe-wrap" role="main"> <iframe id="result" srcdoc="<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /><meta name="apple-mobile-web-app-title" content="CodePen"><link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /><link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - SVG cubic bézier curve path creation tool</title> <style>*, *:before, *:after { box-sizing: border-box; padding: 0; margin: 0;}html { height: 100%;}body { height: 100%; font-family: Lato, helvetica, sans-serif; font-size: 100%; padding: 0; margin: 0; color: #333; background-color: #fff; overflow: hidden;}#mysvg { display: block; width: auto; height: 100%; margin: 0; background: radial-gradient(ellipse at center, #fefefe 0%, #cbeeff 100%); border: 5px solid #333; touch-action: none;}@media (max-aspect-ratio: 1/1) { #mysvg { width: 100%; height: auto; }}#mysvg path { stroke-width: 10; stroke: #000; stroke-linecap: round; fill: none;}#mysvg path.fill { fill: #3ff;}#mysvg .control { stroke-width: 3; stroke: #c00; fill: #fff;}#mysvg .control:hover, #mysvg .control.drag{ fill: #c00; cursor: move;}#mysvg line{ stroke-width: 2; stroke: #999; stroke-linecap: round; stroke-dasharray: 5,5;}#output { position: fixed; bottom: 10px; right: 10px; padding: 0.2em; background-color: rgba(255,255,255,0.9); border-radius: 5px;}h1 { font-size: 1.2em;}#path { font-family: monospace; font-size: 1em; padding: 0.3em; border: 1px solid #999; user-select: all;}</style> <script> window.console = window.console || function(t) {};</script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); }</script></head><body translate="no" > <svg xmlns="http://www.w3.org/2000/svg" id="mysvg" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet"> <title>SVG curve</title> <desc>example curves in SVG</desc> <circle id="p1" cx="100" cy="250" r="30" class="control" /> <circle id="p2" cx="400" cy="250" r="30" class="control" /> <circle id="c1" cx="100" cy="100" r="20" class="control" /> <circle id="c2" cx="400" cy="100" r="20" class="control" /> <line id="l1" x1="100" y1="250" x2="100" y2="100" /> <line id="l2" x1="400" y1="250" x2="400" y2="100" /> <path id="curve" d="M100,250 C100,100 400,100 400,250" /></svg><div id="output"> <h1>SVG Quadratic B&eacute;zier Curve</h1> <p id="path"></p></div> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script> <script id="rendered-js" >// initializeconstsvg = document.getElementById('mysvg'),NS = svg.getAttribute('xmlns'),vb = svg.getAttribute('viewBox').split(' ').map(v => +v),box = { xMin: vb[0], xMax: vb[0] + vb[2] - 1, yMin: vb[1], yMax: vb[1] + vb[3] - 1 };node = {};'p1,p2,c1,c2,l1,l2,curve,path'.split(',').map(s => { node[s] = document.getElementById(s);});// eventssvg.addEventListener('pointerdown', dragHandler);document.addEventListener('pointermove', dragHandler);document.addEventListener('pointerup', dragHandler);drawCurve();// drag handlerlet drag;function dragHandler(event) { event.preventDefault(); const target = event.target, type = event.type, svgP = svgPoint(svg, event.clientX, event.clientY); // fill toggle if (!drag && type === 'pointerdown' && target === node.curve) { node.curve.classList.toggle('fill'); drawCurve(); } // start drag if (!drag && type === 'pointerdown' && target.classList.contains('control')) { drag = { node: target, start: getControlPoint(target), cursor: svgP }; drag.node.classList.add('drag'); } // move element if (drag && type === 'pointermove') { updateElement( drag.node, { cx: Math.max(box.xMin, Math.min(drag.start.x + svgP.x - drag.cursor.x, box.xMax)), cy: Math.max(box.yMin, Math.min(drag.start.y + svgP.y - drag.cursor.y, box.yMax)) }); drawCurve(); } // stop drag if (drag && type === 'pointerup') { drag.node.classList.remove('drag'); drag = null; }}// translate page to SVG co-ordinatefunction svgPoint(element, x, y) { var pt = svg.createSVGPoint(); pt.x = x; pt.y = y; return pt.matrixTransform(element.getScreenCTM().inverse());}// update elementfunction updateElement(element, attr) { for (a in attr) { let v = attr[a]; element.setAttribute(a, isNaN(v) ? v : Math.round(v)); }}// get control point locationfunction getControlPoint(circle) { return { x: Math.round(+circle.getAttribute('cx')), y: Math.round(+circle.getAttribute('cy')) };}// update curvefunction drawCurve() { const p1 = getControlPoint(node.p1), p2 = getControlPoint(node.p2), c1 = getControlPoint(node.c1); c2 = getControlPoint(node.c2); // control line 1 updateElement( node.l1, { x1: p1.x, y1: p1.y, x2: c1.x, y2: c1.y }); // control line 2 updateElement( node.l2, { x1: p2.x, y1: p2.y, x2: c2.x, y2: c2.y }); // curve const d = `M${p1.x},${p1.y} C${c1.x},${c1.y} ${c2.x},${c2.y} ${p2.x},${p2.y}` + ( node.curve.classList.contains('fill') ? ' Z' : ''); updateElement(node.curve, { d }); node.path.textContent = `<path d="${d}" />`;}//# sourceURL=pen.js </script> </body></html> " sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-top-navigation-by-user-activation" allow="accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi" allowTransparency="true" allowpaymentrequest="true" allowfullscreen="true" class="result-iframe"> </iframe> </div></body></html>相应地将控制点拖到曲线的两端。单击曲线本身可切换填充效果，以添加结束Z指令。请注意，此工具必须将DOM页面坐标转换为SVG坐标，以确保它可以在所有屏幕尺寸下使用。这可能比您预期的要复杂一些，因此请参阅“如何从DOM转换为SVG坐标并再次返回”。如果您想要一个更简单的选项，请尝试在SVG图像上创建二次Bézier曲线。...

理解xhtml与HTML5

2020年08月26日

HTML5。html：超文本标记语言(HyperTextMarkupLanguage)。【推荐：html文档】xhtml：可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。h5：更先由WHATWG(Web超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在更新一代的超文本标记语言。可以简单点理解成：h5≈html+CSS3+js+API。html特性：标识文本。例如：定义标题文本、段落文本、列表文本、预定义文本。建立超链接，便于页面链接的跳转。创建列表，把信息有序组织在一起以方便浏览。在网页中显示图像、声音、视频、动画等多媒体信息，把网页设计得更富冲击力。可以制作表格，以便显示大量数据。可以制作表单，允许在网页内输入文本信息，执行其他用户操作，方便信息互动。h5的认识：新特性应该基于HTML、CSS、DOM以及JavaScript。减少对外部插件的需求（比如Flash）更优秀的错误处理更多取代脚本的标记HTML5应该独立于设备开发进程应对公众透明h5新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search文档类型声明方式：html:过渡型：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">严格型：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">框架型：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">xml：过渡型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">严格型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">框架型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">HTML5：<!DOCTYPE html>语义：html：没有体现结构语义化的标签，我们通常都是这样来命名的<divid="header"></div>.这样表示网站的头部。HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>提供了语义化标签可以更好地支持搜索引擎的读取便于seo的蜘蛛的爬行。HTML5和XHTML在语法上的区别：1、XHTML要求正确嵌套 2、XHTML所有元素必须关闭 3、XHTML区分大小写 4、XHTML属性值要用双引号；HTML5属性值加单引号、双引号还是不加，全看程序员的喜好。5、XHTML用id属性代替name属性 6、XHTML特殊字符的处理7、HTML5新增了canvas绘画元素8、HTML5新增了用于绘媒介回放的video和audio元素9、HTML5更具语义化的标签，便于浏览器识别10、HTML5对本地离线存储有更好的支持，可通过ofline实现11、HTML5添加了新的表单控件：calendar、date、time、email、url、searchHTML5的优势目前主要是体现在终端上，跨平台、跨分辨率、版本控制简单，它包含的很多新特性，都是针对终端设备，为的就是在以后在终端设备上有更好的体验和交互。HTML5也有不少缺点，更典型的就是性能和体验达不到NativeApp的水准。...

HTML5里的pushstate与监听浏览器返回解决的问题

2020年08月12日

实际开发我们在A页面调用组件，在组件里面填好内容之后，发现想退出不想填了，因为组件与A页面此时在同一页面，点击返回时候给人感觉是返回上上个页面，但之前A页面填写的东西都没有了，这很影响体验。因此可以使用pushstate方法，不刷新浏览器改变url当你再返回时候就会返回到这个A页面而不是上上个页面。但此时还需要监听返回的按钮，进而控制组件的显示与隐藏。这点也至关重要。不然组件不隐藏，也就相当于没效果。pushState使用方法（一般情况）function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); }参数说明：pushState()带有三个参数：state是js对象，title是个标题（现在被忽略了），以及一个可选的URL地址。关于pushstate的说明浏览器不会向服务端请求数据，直接改变url地址，可以类似的理解为变相版的hash；但不像hash一样，浏览器会记录pushState的历史记录，可以使用浏览器的前进、后退功能作用。监听浏览器返回按钮window.addEventListener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);...

ie-css3.htc在HTML5中的使用方法

2020年07月20日

HTML5中的使用方法。css带来的便利是很容易感受的到的，但恶心的是它在ie下的不兼容，所以某位牛人现身写了个ie-css3.htc，允许你在ie下去使用css3的部分东西。ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。ie-css3的使用方法很简单。先下载它并放到你的项目目录中在你需要使用css3的样式里加入behavior:url(js/ie-css3.htc);就可以了（括号里是ie-css3.htc的地址）用法大致如下：.box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */}最近用到了这个东西，发现动态改变div的内容之后，这段脚本生成的vml会出现变形。。所以加了一个手动刷新的函数，通过innerHTML赋值之后调用一下就可以了el.innerHTML = '....';if(window.update_css3_fix) update_css3_fix(el);如果使用jquery就不用这么麻烦，在你的框架里加一段：(function(){ if (!jQuery.browser.msie) return; jQuery.fn.__ohtml__ = jQuery.fn.html; jQuery.fn.html = function(value) { jQuery(this).__ohtml__(value); this.each(function() { update_css3_fix(this); }); return this; };})();...

一种现代且支持HTML5的CSS重置替代品：Normalize.css

2020年05月20日

HTML5的版本，可替代传统的CSS重置。TwitterBootstrap，HTML5Boilerplate，GOV.UK，Rdio，CSSTricks和许多其他框架，工具包和网站目前以某种形式使用Normalize.css。应用Normalize.css是CSS重置的替代方法。该项目是@necolas 和@jon_neal对默认浏览器样式之间的差异进行100个小时的广泛研究的产物。normalize.css的目的如下：保留有用的浏览器默认值，而不是擦除它们。标准化各种HTML元素的样式。更正错误和常见的浏览器不一致。通过微妙的改进来提高可用性。使用注释和详细文档解释代码。它支持广泛的浏览器（包括移动浏览器），并且包括CSS，这些CSS规范了HTML5元素，排版，列表，嵌入式内容，表单和表格。尽管该项目基于规范化原则，但在更可取的情况下仍使用务实的默认值。归一化与重置值得更详细地了解normalize.css与传统CSS重置有何不同。Normalize.css保留有用的默认值重置通过展平几乎所有元素的默认样式来施加同质的视觉样式。相反，normalize.css保留了许多有用的默认浏览器样式。这意味着您不必为所有常见的印刷元素重新声明样式。当元素在不同的浏览器中具有不同的默认样式时，normalize.css旨在使这些样式保持一致并尽可能与现代标准保持一致。Normalize.css更正了常见的错误它修复了超出重置范围的常见台式机和移动浏览器错误。这包括HTML5元素的显示设置，纠正 font-size预格式化的文本，IE9中的SVG溢出以及跨浏览器和操作系统的许多与表单相关的错误。例如，这就是normalize.css如何使新的HTML5 search输入类型跨浏览器保持一致和可样式化：/** * 1. Addresses appearance set to searchfield in S5, Chrome * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box;}/** * Removes inner padding and search cancel button in S5, Chrome on OS X */input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none;}重置通常无法使浏览器达到如何呈现元素的水平。表单尤其如此-normalize.css可以在其中提供一些重要帮助。Normalize.css不会使您的调试工具混乱使用重置时，常见的困扰是浏览器CSS调试工具中显示的较大的继承链。使用CSS重置时浏览器调试工具中的常见现象由于目标样式和规则集中多个选择器的保守使用，normalize.css不会出现此问题。Normalize.css是模块化的该项目分为相对独立的部分，使您可以轻松准确地了解哪些元素需要特定的样式。此外，如果您知道您的网站将不再需要这些部分，则可以删除这些部分（例如，表单规范化）。Normalize.css拥有大量文档normalize.css代码基于详细的跨浏览器研究和系统的测试。该文件已大量内联记录，并在GitHubWiki上进行了进一步扩展。这意味着您可以找出每行代码的作用，包含代码的原因，浏览器之间的区别以及更轻松地运行自己的测试。该项目旨在帮助人们了解浏览器默认情况下如何呈现元素，并使他们更容易参与提交改进。如何使用normalize.css首先，从GitHub 安装或下载normalize.css。然后有2种主要方法可以利用它。方法1：使用normalize.css作为您自己项目的基础CSS的起点，自定义值以符合设计要求。方法2：包括未修改的normalize.css并在其上构建，如有必要，稍后在CSS中覆盖默认值。扩展的细节和已知问题normalize.css的深奥部分的其他详细信息和说明。pre,code,kbd,samp该font-family:monospace,monospacehack修复了预格式化文本的字体大小的继承和缩放。重复monospace是有意的。sub,sup通常，在所有浏览器中使用sub或sup影响文本的行框高度。select默认情况下，select除非设置了border属性，否则OSX上的Chrome和OSX上的Safari的样式非常有限。optgroup 无法在OSX的Chrome和OSX的Safari中安全更改元素的默认字体粗细。[type="checkbox"]建议您不要设置复选框和单选输入的样式，因为Firefox的实现不考虑框大小，填充或宽度。[type="number"]应用于数字输入的某些字体大小值会导致减量按钮的光标样式从default变为text。[type="search"]默认情况下，搜索输入不是完全可样式的。在Chrome和Safari浏览器上OSX/iOS版，你无法控制font，padding，border，或background。在Windows上的Chrome和Safari中，您无法border正确控制。它会应用， border-width但只会显示该边框的外部1像素的边框颜色（无法控制）。申请-webkit-appearance:textfield 解决了这些问题，而没有消除搜索输入的好处（例如，显示过去的搜索）。兼容性ChromeEdgeFirefoxESR+InternetExplorer10+Safari8+Opera总结Normalize.css在范围和执行方面与CSS重置有很大不同。值得尝试一下，看看它是否适合您的开发方法和偏好。该项目在GitHub上公开开发。任何人都可以报告问题并提交补丁。任何人都可以查看该项目的完整历史记录，所有更改的上下文和原因都可以在提交消息和发布线程中找到。官方地址：http://necolas.github.io/normalize.css/...

HTML5+CSS3:模拟太阳系行星运转动画

2020年02月09日

HTML5+css模拟太阳系行星运转动画，废话不多说直接上DEMO，如下：<html><head> <style> .solarsys{ width: 800px; height: 800px;; position: relative; margin: 0 auto; background-color: #000000; padding: 0; transform: scale(1); } /*太阳*/ .sun { left:357px; top:357px; height: 90px; width: 90px; background-color: rgb(248,107,35); border-radius: 50%; box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35); position: absolute; margin: 0; } /*水星*/ .mercury { left:337.5px; top:395px; height: 10px; width: 10px; background-color: rgb(166,138,56); border-radius: 50%; position: absolute; transform-origin: 62.5px 5px; animation: rotate 1.5s infinite linear; } /*水星轨道*/ .mercuryOrbit { left:342.5px; top:342.5px; height: 115px; width: 115px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } /*金星*/ .venus { left:309px; top:389px; height: 22px; width: 22px; background-color: rgb(246,157,97); border-radius: 50%; position: absolute; transform-origin: 91px 11px; animation: rotate 3.84s infinite linear; } /*金星轨道*/ .venusOrbit { left:320px; top:320px; height: 160px; width: 160px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*地球*/ .earth { left:266.5px; top:391px; height: 18px; width: 18px; background-color: rgb(115,114,174); border-radius: 50%; position: absolute; transform-origin: 134px 9px; animation: rotate 6.25s infinite linear; } /*地球轨道*/ .earthOrbit { left:275px; top:275px; height: 250px; width: 250px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*火星*/ .mars { left:222.5px; top:392.5px; height: 15px; width: 15px; background-color: rgb(140,119,63); border-radius: 50%; position: absolute; transform-origin: 177.5px 7.5px; animation: rotate 11.75s infinite linear; } /*火星轨道*/ .marsOrbit { left:230px; top:230px; height: 340px; width: 340px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*木星*/ .jupiter { left:134px; top:379px; height: 42px; width: 42px; background-color: rgb(156,164,143); border-radius: 50%; position: absolute; transform-origin: 266px 21px; animation: rotate 74.04s infinite linear; } /*木星轨道*/ .jupiterOrbit { left:155px; top:155px; height: 490px; width: 490px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*土星*/ .saturn { left:92px; top:387px; height: 26px; width: 26px; background-color: rgb(215,171,68); border-radius: 50%; position: absolute; transform-origin: 308px 13px; animation: rotate 183.92s infinite linear; } /*土星轨道*/ .saturnOrbit { left:105px; top:105px; height: 590px; width: 590px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*天王星*/ .uranus { left:41.5px; top:386.5px; height: 27px; width: 27px; background-color: rgb(164,192,206); border-radius: 50%; position: absolute; transform-origin: 358.5px 13.5px; animation: rotate 524.46s infinite linear; } /*天王星轨道*/ .uranusOrbit { left:55px; top:55px; height: 690px; width: 690px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*海王星*/ .neptune { left:10px; top:390px; height: 20px; width: 20px; background-color: rgb(133,136,180); border-radius: 50%; position: absolute; transform-origin: 390px 10px; animation: rotate 1028.76s infinite linear; } /*海王星轨道*/ .neptuneOrbit { left:20px; top:20px; height: 760px; width: 760px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } @keyframes rotate { 100% { transform: rotate(-360deg); } } </style></head><body> <div class="solarsys">  <div class='sun'></div>  <div class='mercuryOrbit'></div>  <div class='mercury'></div>  <div class='venusOrbit'></div>  <div class='venus'></div>  <div class='earthOrbit'></div>  <div class='earth'></div>  <div class='marsOrbit'></div>  <div class='mars'></div>  <div class='jupiterOrbit'></div>  <div class='jupiter'></div>  <div class='saturnOrbit'></div>  <div class='saturn'></div>  <div class='uranusOrbit'></div>  <div class='uranus'></div>  <div class='neptuneOrbit'></div>  <div class='neptune'></div> </div></body></html>...

回忆HTML和HTML5之间的区别

2019年08月20日

HTML5之间的区别有：HTML的文档类型声明太长而且复杂，而HTML5的文档声明相对来说更为简便，有利于程序员快速阅读和开发。相对于HTML，HTML5中新增和修改了一些元素。下面本篇文章就来给大家介绍和对比一下HTML和HTML5，让大家了解HTML和HTML5之间的一些区别，希望对大家有所帮助。什么是HTML和HTML5？HTML代表超文本标记语言，用于使用标记语言设计网页。HTML是超文本和标记语言的组合，超文本定义了网页之间的链接；标记语言用于定义标记内的文本文档，该文档定义网页的结构。此语言用于注释（在计算机注释中）文本，以便机器可以理解它并相应地操作文本。大多数标记（例如HTML）语言都是人类可读的。该语言使用标签来定义必须对文本进行哪些操作。它用于在网页上构造和呈现内容。HTML5是HTML的第五个版本，HTML5中删除或修改了许多元素。HTML和HTML5之间的区别是什么？1、文档类型声明(Doctype声明)HTML文档的类型声明为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">//或<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">HTML5文档的类型声明为：<!DOCTYPE html>可以看出：HTML的文档类型声明太长而且复杂，而HTML5的文档声明相对来说更为简便，有利于程序员快速阅读和开发。2、音频和视频的支持HTML如果不使用Flash播放器支持，它不支持音频和视频。HTML5使用<audio>和<video>标签来支持音频和视频控制。存储数据HTML使用cookie来存储临时数据。HTML5使用SQL数据库和应用程序缓存来存储脱机数据。3、矢量图形的使用对于HTML，矢量图形可以在HTML中借助各种技术实现，如vml、银光、flash等。对于HTML5，矢量图形是HTML5的一个组成部分，如SVG和Canvas。4、拖放效果和绘图HTML不允许拖放效果，无法绘制复杂图形，例：圆形，矩形，三角形等形状。HTML5允许拖放效果，允许绘制圆形，矩形，三角形等形状。5、语法的处理HTML无法处理不准确的语法；HTML5能够处理不准确的语法。6、元素和属性HTML中不存在charset，async和ping等属性；但charset，async和ping的属性是HTML5的一部分。HTML5中有许多HTML元素已被修改或删除。其中一些列表如下：HTML5中添加了许多新元素，如：nav,audio,figcaption,progress,command,time,datalist,video,figure,meter,data,section,time,aside,canvas,summary,rp,rt,details,wbr,header,footer,keygen,embed,article,hgroup,bdi,mark,output,source,track,section,ruby等等。...

HTML5中meta标签的属性有哪些呢

2019年07月05日

HTML5中meta标签的属性有哪些呢？meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。<meta charset=‘utf-8‘><meta http-equiv="X-UA-Compatible" content="IE=edge" /> 指示IE以目前可用的最高模式显示内容<meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" />指示IE使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以IE7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。<meta name="description" content="不超过150个字符" />页面描述<meta name="keywords" content="HTML5, css3, 关键字"/>页面关键词<meta name="author" content="魔法小栈" />定义网页作者<meta name="robots" content="index,follow" />定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"><meta name="apple-mobile-web-app-title" content="标题">添加到主屏后的标题（iOS 6 新增）<meta name="apple-mobile-web-app-capable" content="yes" />是否启用 WebApp 全屏模式<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />设置状态栏的背景颜色 <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />iPhone 和 iTouch，默认 57x57 像素，必须有<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />iPad，72x72 像素，可以没有，但推荐有<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />Retina iPad，144x144 像素，可以没有，推荐大家使用<meta name="apple-mobile-web-app-title" content="标题">title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS 6 新增）<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />iPad 竖屏 1536x2008（Retina）<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />iPad 横屏 1024x748（标准分辨率）<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />iPad 横屏 2048x1496（Retina）<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />iPhone/iPod Touch 竖屏 640x960 (Retina)<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /><link rel="apple-touch-startup-image" href="Startup.png" /> 当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好<meta name="msapplication-TileColor" content="#000"/> Windows 8 磁贴颜色<meta name="msapplication-TileImage" content="icon.png"/>Windows 8 磁贴图标<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />添加 RSS 订阅<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />添加 favicon icon<meta name="format-detection" content="telephone=no" />禁止数字识自动别为电话号码<meta name="format-detection" content="email=no" />不让android识别邮箱<meta name="renderer" content="webkit">启用360浏览器的极速模式(webkit)<meta http-equiv="X-UA-Compatible" content="IE=edge">避免IE使用兼容模式<meta name="HandheldFriendly" content="true">针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓<meta name="MobileOptimized" content="320">微软的老式浏览器<meta name="x5-orientation" content="portrait">QQ强制竖屏<meta name="full-screen" content="yes">UC强制全屏<meta name="x5-fullscreen" content="true">QQ强制全屏<meta name="browsermode" content="application">UC应用模式<meta name="x5-page-mode" content="app">QQ应用模式<meta http-equiv="Cache-Control" content="no-siteapp" />禁止百度转码<meta name="msapplication-tap-highlight" content="no">windows phone 点击无高光<meta name="keywords" content="" /> 关键字<meta name="description" content="" /> 描述<meta name="title" content="" /> 标题<meta name="author" content="-06" /> 作者<meta name="Copyright" content="" /> 公司<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 让IE浏览器用最高级内核渲染页面还有用 Chrome 框架的页面用webkit 内核 <meta name="apple-mobile-web-app-capable" content="yes"> IOS6全屏<meta name="mobile-web-app-capable" content="yes"> Chrome高版本全屏<meta name="renderer" content="webkit"> 让360双核浏览器用webkit内核渲染页面<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）<meta property="og:type" content="类型" /><meta property="og:url" content="URL地址" /><meta property="og:title" content="标题" /><meta property="og:image" content="图片" /><meta property="og:description" content="描述" />   <html>  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />...

HTML5有哪些新特性和如何区分 HTML 和 HTML5？

2019年06月03日

HTML5有哪些新特性和如何区分HTML和HTML5？实现上：h5不再是SGML的子集。新特性：主要是关于图像，位置，存储，多任务等功能的增加。如：绘画canvas用于媒介回放的video和audio元素本地离线存储localStorage，长期存储，浏览器关闭之后数据不丢失sessionStorage的数据在浏览器关闭后自动删除语意化更好的内容元素，比如article、footer、header、nav、section表单控件，calendar、date、time、email、url、search;新的技术webworker,websocket,Geolocation;移除的元素：纯表现的元素：basefont，big，center，font,s，strike，tt，u;对可用性产生负面影响的元素：frame，frameset，noframes；处理兼容性：IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。也可以使用HTML5shim，可以让IE9或更低版本能支持HTML5<script src="http://HTML5shim.googlecode.com/svn/trunk/HTML5.js"></script>如何区分HTML5：DOCTYPE声明\新增的结构元素\功能元素。...

简述HTML5是什么

2018年11月14日

HTML5开发技术还是参加HTML5培训的小伙伴都不在少数，本篇文章扣丁学堂小编和读者们分享一下HTML5是什么，对HTML5开发感兴趣的小伙伴就一起来了解一下吧。　　一、HTML5是什么　　HTML5isthelatestversionofHypertextMarkupLanguage,thecodethatdescribeswebpages.It'sactuallythreekindsofcode:HTML,whichprovidesthestructure;CascadingStyleSheets(CSS),whichtakecareofpresentation;andJavaScript,whichmakesthingshappen.　　先引用GaryMarshall的一段话，他说HTML5是HTML（HypertextMarkupLanguage）的最新修订版本，如果把HTML当成一个APP的话，HTML5表示这个APP的第5个主版本。HTML5包含3个部分：HTML，CSS，JavaScript，从这句话的描述应该可以大概看出HTML5与HTML之前版本的不一样了。　　可是，为什么说HTML5包含3个编码部分呢？　　首先，包含HTML这个毋庸置疑，HTML5拥有大部分HTML的基本标签元素，如：<div>,<p>等等；　　包含CSS编码？原来HTML5中增加了类似,等这样带有特定样式，表示特定内容的标签；　　包含JS编码？HTML5新增了类似，等这样的多媒体标签，自身可以通过属性设定相关动作；　　二、为什么要提出HTML5　　让我们从乔布斯拒绝在苹果机器上支持Flash开始说起，乔布斯觉得HTML5完全可以取代FLASH。　　WhenSteveJobsrefusedtoallowFlashoniOSdevices,hearguedthatHTML5coulddoeverythingFlashdid.　　我们知道，现在很多多媒体信息需要浏览器安装相应的插件才能浏览，这些插件包括Adobe的Flash，MicroSoft的SilverLight等，由于这些插件都有专利权，各大浏览器制造商如果使用这些插件需要支付相应的专利税费，部分浏览器制造商不愿意被插件制造商绑架，则无法浏览多媒体信息或者采用其他的方式来支持多媒体信息，这就造成了不同的浏览器对多媒体的不同支持方式，同一个多媒体信息在不同的浏览器展示的效果不一样，甚至无法展示。　　HTML5就是来解决这个问题的，统一所有终端（PC，手机，平板等），统一所有操作系统（Android，ios，windows等）。HTML5能够使你的网站在不同的终端，不同的操作系统上得到完美展示。　　HTML5的使命就是使Web实现大一统。　　三、HTML5的特点　　HTML5怎么完成自己的使命呢？换句话说，HTML5到底有什么能耐呢？　　1、浏览器自带多媒体标签,等，可以抛弃Flash，SilverLight等浏览器插件。这样解决了使用插件带来的兼容问题，同时还省了一笔专利使用税费；　　2、HTML5简化了基础标签，支持更多的浏览器，进一步加强了兼容性，为实现Web大一统打好了基础；　　3、HTML5还带了更多好玩的东西，如：canvas，本地存储，定位功能等等，这些特性展现了HTML5将有一个广阔的未来。更多特性请参考使用HTML5的十大原因。　　四、HTML5的现状　　你知道HTML5现在面临的最大问题是什么吗？　　HTML5技术目前最大的困境莫过于各浏览器缺乏统一的扩展标准，在不同手机操作系统上性能表现不一致以及缺乏优质中文技术文档。HTML5技术最大的问题在于：浏览器兼容性较差。　　以上就是扣丁学堂HTML5在线学习小编给大家分享的HTML5是什么，希望对小伙伴们有所帮助，想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。想要学好HTML5开发小编给大家推荐口碑良好的扣丁学堂，扣丁学堂有专业老师制定的HTML5学习路线图辅助学员学习，此外还有与时俱进的HTML5视频直播课供大家学习，想要学好HTML5开发技术的小伙伴快快行动吧。扣丁学堂H5技术交流群：559883758。...

HTML5有什么语义化可言？

2018年10月09日

HTML5有什么语义化可言呢，大家都知道HTML5增加了不少的标签，相对于HTML4.1版本，标签选择更多了。那么语义化怎么去解决呢？真正使用HTML5标签来开发的似乎不是很多（ps：查看了几个巨头公司网站推论），可能一部分原因是仍有部分用户使用在使用低版本浏览器。但是就我个人而言，因选取一些标签时会比较纠结，所以仍使用了div。（PS：正是因为这样，才有了这篇文章的，没错，以后要注意语义化了）什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。语义化优点：易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析，如盲人阅读器根据语义渲染网页有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。今天先介绍主体结构标签，如图所示：1、<header><header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer>或<header>元素的子元素。2、<nav><nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。在一个文档中，可定义多个<nav>元素。3、<main><main>定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。需要注意的是在一个文档中不能出现多个<main>标签。4、<article><article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。5、<aside><aside>元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。6、<footer><footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。使用footer插入联系信息时，应在footer元素内使用<address>元素。注意不能包含<footer>或者<header>7、<section><section>表示文档中的一个区域（或节），比如，内容中的一个专题组。如果元素内容可以分为几个部分的话，应该使用<article>而不是<section>。不要把<section>元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。这几个标签，比较容易混淆的是<section>、<article>，所以这里特别说明：“Authorsareencouragedtousethearticleelementinsteadofthesectionelementwhenitwouldmakesensetosyndicatethecontentsoftheelemen.”通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。...

关于HTML5中Ajax异步请求的基础流程分享

2018年07月16日

HTML5提供的方法，对跨域访问提供了很好的支持，并且还有一些新的功能。*IE10以下的版本都不支持*只需要在服务器端头部加上下面两句代码：header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-Methods:POST,GET");解决方式二JSONP(JSONwithPadding)是一个非官方的协议，它允许在服务器端集成Scripttags返回至客户端，通过javascriptcallback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。...

HTML5实现动态添加和删除元素

2018年07月02日

HTML5实现动态添加和删除元素，其中最主要的是进行ID的赋值操作，每次添加相对应的ID需要进行加1，在删除时，通过ID除过来相关的ID进行删除；还有就是删除最后一个添加的元素时，再次追加时的ID判断，这里使用的方式如下：在删除元素之后，查询DIV下追加的共同元素的个数，然后取最后一个ID，在其后进行追加相关的元素，具体实现如下：<div class="systemList"> <ul id="system_ul"> <li id="system_ul_li1" class="system_li_num"> <div class="delete" id="del_system_button1" onclick="delete_system(1)"> 删除 </div> </li> </ul></div>在ul下增加li控件，点击添加按钮。var id = 2;function add_system(){//获取所有class的数据 var all_inner_div = $(".system_li_num"); //获取最后一个元素的ID，注意对象的转换不能直接使用,因为$和dom对象使用不同，这个需要注意 //all_inner_div[all_inner_div.length - 1].attr("id");会报错找不到 var last_id = $(all_inner_div[all_inner_div.length - 1]).attr("id"); $("#"+last_id+"").after("<li class='system_li_num' id='system_ul_li"+id+"'><div class='delete' id='del_system_button1' onclick='delete_system"+id+"'</li>") //ID自增 id++;}删除方法：通过传过来的ID，进行移除：function delete_system(flag){//根元素不删除 if(flag == 1){ alert("cancel"); }else{ document.getElementById("system_ul_li" + flag + "").remove(); }}完成，基本的增加删除就可以实现了。...

学习HTML5中的input的属性

2018年07月02日

HTML5中的input的属性HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括：color点击时弹出颜色选择器，可以选择任意颜色number输入范围内的数字，可以手动输入超出范围的数字，但不能提交tel输入电话号码，只有safari支持email自带检测功能，提交时会检测是否包含@符，并且@符前后是否有字符rangeurl输入的网址必须是http://开头，并且后面必须有字符，否则不能提交date可以手动选择日期time可以手动选择时间datetime选择带有时区的日期和时间，ie，firfox和chrome都不支持datetime-local选择日期和时间，没有时区month和date类型一样，只不过只能选择到月份week只能选择到第几周，这种日期方式国内基本很少用新增的一些常用属性：autocomplete可选值on/off，表示基于之前用户输入的内容浏览器自动填写/不允许自动填写autofocus页面加载时input自动获取焦点disabled输入被禁用，选框变灰，禁用的元素不会提交form规定form之外的input属于一个或多个表单，form属性指向归属表单的id值，如果属于多个表单，id之间加空格listlist指向引用的datalist（功能和select一样，但是不在网页中显示）预定义的可选项，例如<form><input list="mylist"/><datalist id="mylist"> <option>张三</option> <option>李四</option> <option>王五</option></datalist></form>12345678而页面中的表现则是（点击右侧展开时可选项才会展开）：-min规定输入的最小值，适用于number、range、date、datetime、datetime-local、month、time-max规定输入的最大值，同样适用于number、range、date、datetime、datetime-local、month、time-maxlength即输入的最大字符数，超过后不能输入-multiple允许多多个值，用“,”隔开-required必须填写项，即不能为空，为空不提交-pattern定义验证相关的正则，注意格式不需要加“/ /”-placeholder定义在用户输入之前显示在输入框中的提示性内容，一般是浅灰色-readonly该字段只读，不能修改-step定义数字变化的步长，即每次变动的单位，比如step=”5”,如果输入不是5的整数倍则会在提交时提示格式不正确...

2018世界杯，用HTML5+CSS3来画个足球场

2018年06月28日

HTML5+CSS3来画个足球场。<!DOCTYPE html><html><head> <style> body, html { position: relative; margin: 0; padding: 0; background: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #c26649), color-stop(100%, #6b220b)); background: -webkit-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); background: -moz-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); background: radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); text-align: center; vertical-align: middle; height: 100%; } .centrar { margin: 0; padding: 0; display: inline-block; height: 100%; width: 0; margin: 0; padding: 0; vertical-align: middle; } .campo { position: relative; display: inline-block; vertical-align: middle; width: 90%; height: 0; margin: 10px auto; padding: 0 0 60% 0; background: green; } .interior, .divisoria, .semi1, .semi2, .corner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 94%; height: 90%; margin: auto; border: 2px solid #eee; } .divisoria:after, .divisoria:before { content: ""; position: absolute; left: 50%; display: block; width: 0; height: 100%; margin-left: .5px; border: 1px solid #eee; } .divisoria:before { top: 50%; width: 16%; height: 0; margin: -8% 0 0 -8%; margin-top: calc(-8% - 4px); margin-left: calc(-8% - .5px); padding-bottom: 16%; border-radius: 50%; border: 2px solid #eee; } .campo:before, .campo:after { content: ""; position: absolute; top: 50%; left: 3%; margin: -8% 0 0 -2px; display: block; width: 6%; height: 24%; border: 2px solid #eee; z-index: 2; } .campo:after { left: auto; right: 3%; margin-right: -2px; } .interior:before, .interior:after { content: ""; position: absolute; top: 50%; left: 0; margin: -16% 0 0 -2px; display: block; width: 16%; height: 50%; background: green; border: 2px solid #eee; } .interior:after { left: auto; right: 0; margin: -16% -2px 0 0; } .semi1:before, .semi2:before { content: ""; position: absolute; top: 50%; left: 12%; display: block; width: 1%; height: 1.5%; margin: -.75% 0 0 0; background: #eee; border-radius: 50%; z-index: 2; } .semi2:before { left: auto; right: 12%; } .semi1:after, .semi2:after { content: ""; position: absolute; top: 50%; left: 5%; width: 16%; height: 0; margin: -8% 0 0 0; padding-bottom: 16%; border: 2px solid #eee; border-radius: 50%; } .semi2:after { left: auto; right: 5%; } .corner { overflow: hidden; } .corner1:before, .corner2:before, .corner1:after, .corner2:after { content: ""; position: absolute; top: -6%; left: -4%; width: 6%; height: 0; margin: 0 0 0 0; padding-bottom: 6%; border: 2px solid #eee; border-radius: 50%; } .corner1:after { left: auto; right: -4%; } .corner2:before { top: auto; bottom: -6%; } .corner2:after { top: auto; bottom: -6%; left: auto; right: -4%; }</style> </head> <body> <div class="centrar"></div> <div class="campo"> <div class="corner"> <div class="corner1"></div> <div class="corner2"></div> </div> <div class="semi1"></div> <div class="semi2"></div> <div class="divisoria"></div> <div class="interior"></div> <div class="penalty"></div> </div> </body></html>...

HTML5移动应用研发与产业化的设计规划

2018年04月09日

HTML5App应用的容器产品和开发工具。研发应用展现、应用安全、本地能力适配、主流操作系统兼容、系统硬件加速技术等领域的关键技术，实现跨平台移动应用（App）的开发运行引擎的自主可控，为基于HTML5的Web应用系统提供一个安全、高效、易用的跨平台支撑环境。提供HTML5Web应用的开发工具、开发框架、应用集成框架和开发者社区，降低应用开发门槛，提高开发效率提供HTML5应用发布及运营管理功能，促进从“应用开发者—Web应用商店—用户”完整产业生态环境的形成和发展。实现跨平台移动应用（APP）的开发运行引擎与安全可控移动智能终端操作系统及硬件的深度集成与性能优化。HTML5发展趋势移动优先游戏开发者领衔“主演”响应式设计&自动变化的屏幕尺寸设备访问离线缓存开发工具逐步的成熟背景与存在的问题背景主流移动操作系统更新换代频率高目前市场已形成Android、iOS以及WindowsPhone三足鼎立之势谁能达到在移动端对HTML5更好的支持，谁就能在以后的移动应用领域占据更多的市场HTML5的出现让移动平台的竞争由系统平台转向了浏览器，基于HTML5移动应用引擎的研发与产业化具有非常重要的意义Appstore的商业模式的出现颠覆了传统的性价比为核心的商业模式存在的问题多平台的用户使用习惯不一致移动设备系统自带浏览器的引擎对HTML5的支持不足开发者常常为平台适配问题花费大量精力市场极度缺乏开源的HTML5开发工具建设内容与建设目标建设目标实现跨平台移动应用开发工具与运行引擎的自主可控为基于HTML5的Web应用系统提供一个安全、高效、易用的跨平台支撑环境聚集移动应用产业，形成以HTML5应用开发为核心，辐射影响到移动互联网及周边产业的应用的发展建设内容解决HTML5应用渲染、应用安全、本地能力适配、主流操作系统兼容、系统硬件加速技术等领域的关键技术，重点解决应用安全和本地能力适配的问题研发并开放HTML5Web应用的开发工具、云编译服务、开发规范建设提供技术支持的开放式开发者社区技术创新与商业模式创新技术创新点开发工具支持可视化HTML5移动应用开发（热插拔组件库）HTML5渲染引擎跨平台（至少支持Android/IOS/WP三个主流平台）云编译（支持移动编程、编译；支持自动发布到主流appstore平台；支持云存储）商业模式创新核心产品自主研发，采用自用与开源相结合的方式，与开发者共同维护完善产品，使其满足广大开发者的核心需求，并联合合作伙伴为行业客户提供商业服务，使产品的商业价值最大化收益方式：与AP/SP/CP分成；以企业为主体，为行业客户提供技术服务开源、开放、共赢的开放式商业模式实现可视化的HTML5应用开发现有IDE分析（以IBMMaqetta为例）只支持一种开发模式（WEB)专注移动应用，支持三种开发模式（WEB、本地、混合模式）提供常用组件（JS库、Widget库）组件更丰富，支持包括安全组件、IM、流媒体等及常用组件本地编译本地编译+云编译支持只支持前端开发支持客户端+服务器端开发平台提供页面Editor基于Eclipse平台的开发工具开源开源可视化开发与拖曳式设计可视化开发与拖曳式设计移动控件库支持移动控件库支持对CSS样式的深度支持对CSS样式的深度支持HTML5引擎架构云编译平台整体架构市场定位平台环绕应用开发的生态链闭环建设和运营SAAS平台及服务（移动应用部分）助力移动应用，让移动应用的开发过程更简单助力开发者，让开发者更专注优秀创意的实现...

W3C官方去年年底推出HTML5.2

2018年02月27日

HTML5.2规范还增加了allowpresentation属性，该属性允许iframe可以访问演示API来让页面嵌入可以访问投影仪、监控器或网络连接电视等设备的第三方演示。演示API还只是一个W3C候选建议，目前只在Chrome上可用。在新规范中也越来越重视安全性。其中集成了来自内容安全策略3级草案中的多项建议。link标签正式支持nonce属性、内容安全策略可以事先阻止style和script标签的内联行为。这些工具使开发者能够更灵活地控制其Web应用程序允许加载的资源，从而减少跨站脚本攻击可能带来的破坏。开发人员可以通过MDM上的指南和文档了解如何使用内容安全策略来保护自己的应用程序。该版本的HTML规范还提供了对ES6JavaScript模块的官方支持。大多数浏览器已经实现了这一功能。从Safari10.1、Chrome61、Edge16开始都已提供支持，Firefox则需要打开特定的功能开关。HTML5.2是对HTML5规范的第二次重大修订，它遵循了2014年W3C承诺的大致每年发布一次规范修订。本次修订中还包括大量的清理和错误修复、主要的安全更新、其他委员会的进展整合以及其他用以保持规范符合最新网络广泛使用方式的更新。开发人员可以查阅规范发布中的变更日志来了解详细变更。感兴趣的开发者可以在官方HTML5.2建议中了解所有变更的内容。同时委员会已经开始了HTML5.3的制定，并伴随HTML5.2发布了一份工作草案。...

了解下HTML5的内嵌媒体

2017年11月07日

视频已经在Web上广泛流行了，但是其格式几乎都是专有的。YouTube使用Flash，Microsoft使用WindowsMedia®，Apple使用QuickTime。在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。因此，WhatWG提议引入一个新的video元素，用来嵌入任意视频格式。例如，可以用以下代码嵌入我的QuickTime电影“aSorainProspectPark”：<videosrc="http://www.cafeaulait.org/birds/sora.mov"/> 对于以哪种格式和解码器作为首选，仍然有争议。可能会强力推荐或要求使用OggTheora。还可以可选地支持QuickTime等专有格式和MPEG-4等受专利限制的格式。实际使用的格式很可能由市场决定，就像是GIF、JPEG和PNG格式那样（这些格式通过市场竞争压倒了BMP、X-Bitmap和JPEG2000等竞争者，成为img元素的首选格式）。还提议引入audio元素。例如，可以使用以下代码给Web页面加上背景音乐：<audiosrc="spacemusic.mp3"autoplay="autoplay"loop="20000"/> autoplay属性指示浏览器在装载页面后立即开始播放，而不等待明确的用户请求。音频循环播放20,000次，然后停止（或者在用户关闭窗口或转到另一个页面时停止）。当然，浏览器可以（而且应该）允许用户关闭内嵌的媒体，不应该只按页面作者的要求去做。浏览器必须支持WAV格式，还可以支持MP3等其他格式。因为老式浏览器不支持这些元素，而且它们对于盲人和聋人用户来说没有意义，所以audio和video元素可以包含额外的标记，用来描述音频和视频的内容。这对搜索引擎也有帮助。在理想情况下，这些标记是音频和视频内容的完整文字版本。例如，代码8显示用HTML5编写的JohnF.Kennedy的就职演说。<audio src="kennedyinauguraladdrees.mp3"> <p> Vice President Johnson, Mr. Speaker, Mr. Chief Justice, President Eisenhower, Vice President Nixon, President Truman, Reverend Clergy, fellow citizens: </p> <p> We observe today not a victory of party, but a celebration of freedom -- symbolizing an end, as well as a beginning -- signifying renewal, as well as change. For I have sworn before you and Almighty God the same solemn oath our forebears prescribed nearly a century and three-quarters ago. </p> <p> The world is very different now. For man holds in his mortal hands the power to abolish all forms of human poverty and all forms of human life. And yet the same revolutionary beliefs for which our forebears fought are still at issue around the globe -- the belief that the rights of man come not from the generosity of the state, but from the hand of God. </p> <p> ... </p> </audio>...

HTML5中对dir属性

2017年11月07日

HTML5标准更鼓励大家通过设置dir属性来达到排版效果（例如搜索引擎可能不会抓取css文件）。 ...

了解HTML5之contenteditable属性

2017年10月14日

contenteditable属性规定是否可编辑元素的内容。contenteditable是一个枚举类型的属性，可供选择的值有空字符串、true、false或inherit（默认）。当为空字符串时，效果和true一致。当一个元素的contenteditable状态为ture（contenteditable属性为空字符串，或为true，或为inherit且其父元素状态为true）时，意味着该元素是可编辑的。否则，该元素不可编辑。实例：<pcontenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>语法：<elementcontenteditable="value">属性值：值描述true规定可以编辑元素内容。false规定无法编辑元素内容。classname继承父元素的contenteditable属性。...

HTML5 Canvas颜色选择器

2017年10月14日

HTML5来创建一个网页颜色选择器。首先在Canvas画一幅图，然后添加鼠标事件“鼠标移动”，“鼠标点击”。在鼠标移动的时候，显示当前划过的颜色预览，在鼠标点击的时候，选中当前颜色，显示颜色的细节。<!DOCTYPE html><html lang="en" > <head> <meta charset="utf-8" /> <title><A title=HTML5 href="http://www.xyHTML5.com/">HTML5</A> canvas - Image color picker | Script Tutorials</title> <link href="<A title=css href="http://www.xyHTML5.com/css3">css</A>/main.<A title=css href="http://www.xyHTML5.com/css3">css</A>" rel="stylesheet" type="text/css" /> <script type="text/<A title=javascript href="http://www.xyHTML5.com/javascript">javascript</A>" src="js/jquery-1.5.2.min.js"></script> <script type="text/<A title=javascript href="http://www.xyHTML5.com/javascript">javascript</A>" src="js/script.js"></script> </head> <body> <div class="container"> <div class="column1"> <canvas id="panel" width="500" height="333"></canvas> </div> <div class="column2"> <div><input type="button" value="Next image" id="swImage" /></div> <div>Preview:</div> <div id="preview"></div> <div>Color:</div> <div>R: <input type="text" id="rVal" /></div> <div>G: <input type="text" id="gVal" /></div> <div>B: <input type="text" id="bVal" /></div> <div>RGB: <input type="text" id="rgbVal" /></div> <div>RGBA: <input type="text" id="rgbaVal" /></div> <div>HEX: <input type="text" id="hexVal" /></div> <hr /> </div> <div style="clear:both;"></div> </div> <footer> <h2>HTML5 canvas - Image color picker</h2> <a href="http://www.script-tutorials.com/HTML5-canvas-image-color-picker/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </footer> </body></html>[CSS]代码:*{ margin:0; padding:0;} body { background-color:#bababa; color:#fff; font:14px/1.3 Arial,sans-serif; } footer { background-color:#212121; bottom:0; box-shadow: 0 -1px 2px #111111; display:block; height:70px; left:0; position:fixed; width:100%; z-index:100;} footer h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px;} footer a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0;} footer .stuts span { font-size:22px; font-weight:bold; margin-left:5px;} .container { color:#000; margin:20px auto; position:relative; width:730px;} .column1 { float:left; width:500px;} .column2 { float:left; padding-left:20px; width:170px;} #panel { border:1px #000 solid; box-shadow:4px 6px 6px #444444; cursor:crosshair;} .column2 > div { margin-bottom:10px;} #swImage { border:1px #000 solid; box-shadow:2px 3px 3px #444444; cursor:pointer; height:25px; line-height:25px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;} #swImage:hover { margin-left:2px;} #preview { border:1px #000 solid; box-shadow:2px 3px 3px #444444; height:80px; width:80px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;} .column2 input[type=text] { float:right; width:110px;}[JavaScript]代码:var canvas;var ctx; var images = [ // predefined array of used images 'images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg', 'images/pic5.jpg', 'images/pic6.jpg', 'images/pic7.jpg', 'images/pic8.jpg', 'images/pic9.jpg', 'images/pic10.jpg'];var iActiveImage = 0; $(function(){ // drawing active image var image = new Image(); image.onload = function () { ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas } image.src = images[iActiveImage]; // creating canvas object canvas = document.getElementById('panel'); ctx = canvas.getContext('2d'); $('#panel').mousemove(function(e) { // mouse move handler var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")"; $('#preview').css('backgroundColor', pixelColor); }); $('#panel').click(function(e) { // mouse click handler var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; $('#rVal').val(pixel[0]); $('#gVal').val(pixel[1]); $('#bVal').val(pixel[2]); $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]); $('#rgbaVal').val(pixel[0]+','+pixel[1]+','+pixel[2]+','+pixel[3]); var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0]; $('#hexVal').val( '#' + dColor.toString(16) ); }); $('#swImage').click(function(e) { // switching images iActiveImage++; if (iActiveImage >= 10) iActiveImage = 0; image.src = images[iActiveImage]; });});...

HTML5中的FileReader、拖拽和canvas教程

2017年02月13日

HTML5话题的时代，好像不懂点HTML5都有点落伍。那我也跟上潮流一把吧，今天给大家分享的是基于HTML5的自助切图。在组里经常会被某设计师叫切板仔，确实重构很大一部分工作都花在切图上，而如何提高切图效率或者让切图自助化也是我们重构师的追求。基于这个前提我自己抱着研究的心态，使用HTML5大致实现了一下。一开始觉得HTML5是个很神秘很高深的东西，其实当你去了解他，你会发现他是很空虚，且很容易上…………….手的。这里使用到的HTML5技术包括：本地预览（FileReader）拖拽（drag&drop）切图（canvas）拖拽：拖拽基本事件如下：DataTransfer对象退拽对象用来传递的媒介，使用一般为Event.dataTransfer。draggable属性就是标签元素要设置draggable=true，否则不会有效果，例如：<divtitle=”拖拽我”draggable=”true”&rt;列表1</div:rt;</td&rt;ondragstart事件当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上ondragenter事件当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上ondragover事件拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上ondrop事件被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上ondragend事件当拖拽完成后触发的事件，此事件作用在被拖曳元素上drageleave事件当拖拽离开此处时触发，只在离开这个对象时触发一次，此事件作用在目标元素上Event.preventDefault()方法阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。Event.effectAllowed属性就是拖拽的效果。介绍完拖拽基本事件后，再来看下页面是如何通过拖拽将本地图片通过拖拽的方式拖到页面指定区域使用图片上传，这也是拖拽现在比较常用到的功能。给document增加拖拽事件，当拖拽元素进入页面时改变目标元素样式提示用户目标元素位置，当拖拽元素离开页面后还原样式。代码如下：document.ondragleave = function(e){e.preventDefault();var el = document.getElementById('target_box');el.className = el.className.replace(/over/g,'');}document.ondrop = function(e){e.preventDefault();}document.ondragenter = function(e){e.preventDefault();var el = document.getElementById('target_box');el.className = el.className + ' over';}document.ondragover = function(e){e.preventDefault();var el = document.getElementById('target_box');el.className = el.className + ' over';}当图片被拖到上传区域后通过FileReader方法读取本地文件，然后将图片通过canvas来绘制，如果图片的宽度是大于画布1000px将水平居中处理，这里因为切图的时候需要将图片完整切出来，所以在设置canvas宽度时需要显示成图片的大小，所以这里使用了负marginLeft（这里将图片宽度减1000得出超出1000的区域，然后再除于2得出marginLeft的值）外面套一层1000px的方式来实现水平居中。代码如下：var box = document.getElementById('target_box');box.ondrop = function(e){e.preventDefault();//获取文件列表var fileList = e.dataTransfer.files;var reader = new FileReader();reader.onload = function(e){var img = new Image();img.src = this.result;img.onload = function(){ if(this.width>1000){canvas.style.marginLeft = ((this.width - 1000)/2) * -1 + 'px'; }canvas.width = this.width;canvas.height = this.height;ctx.drawImage(this,0,0);} }reader.readAsDataURL(fileList[0]); document.getElementById('target_box').style.display = 'none'; document.getElementById('doc').style.display = 'display';};本地预览（FileReader）FileReader接口的方法readAsBinaryString(file)将文件读取二进制码通常我们将它传送到后端，后端可以通过这段字符串存储文件readAsText(file,[encoding])将文件读取文本第二个参数是文本的编码方式，默认UTF-8readAsDataURL(file)将文件读取为DataURL将文件读取为一串DataURL字符串，将小文件以一种特殊格式的URL地址直接读入页面。小文件指图像与html等格式的文件。FileReader接口的事件onabort数据读取中断时触发onerror数据读取出错时触发onloadstart数据读取开始时触发onprocess数据读取中onload数据读取成功完成时触发onloadend数据读取完成时触发，无论成功失败这里因为标尺不需要做任何事情处理只需要拖拽效果，所以只需要增加draggable属性就可以。然后给目标元素增加Drop事件，当拖拽的标尺在目标元素上放开时新建一个参考线并通过offsetY来获取鼠标释放时的Y坐标，然后再将这个Y坐标存到数组里。//增加标尺目标事件document.getElementById('cvs').ondrop = function(ev){ var div = document.createElement('div'); div.style.width = '100%'div.style.height = '1px';div.style.background = '#4affff'; div.style.position = 'absolute'div.style.top = ev.offsetY + 18 + 'px';document.getElementById('screen').appendChild(div); rulerTop.push(ev.offsetY); return false;}Canvas：这里先介绍下canvas的drawImage方法，切图的核心方法就是这个，我们先来看看官方给出的使用方法与解释：drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)image所要绘制的图像。这必须是表示标记或者屏幕外图像的Image对象，或者是Canvas元素。sourceX,sourceY图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。sourceWidth,sourceHeight图像所要绘制区域的大小，用图像像素表示。destX,destY所要绘制的图像区域的左上角的画布坐标。destWidth,destHeight图像区域所要绘制的画布大小。了解了drawImage方法后我们来看下，如何通过drawImage达到切图效果,其实这里的切图，只是通过drawImage加上高宽和偏移量来实现所谓的切图效果，代码如下：//绘制图片function scaleCanvas (canvas, width, height, destX, destY){ var w = canvas.width,h = canvas.height;var cutCanvas = document.createElement('canvas'); var cutCtx = cutCanvas.getContext('2d'); cutCanvas.width = width;cutCanvas.height = height;cutCtx.drawImage(canvas, 0, 0, w, h, destX, destY, w, h); return cutCanvas;}//获取图片URLfunction getDataURL (canvas, width, height, destX, destY) { canvas = scaleCanvas(canvas, width, height, destX, destY); return canvas.toDataURL('image/jpeg');}//将conver转成IMG格式var convertToImage = function (canvas, width, height, destX, destY) { var strData = getDataURL(canvas, width, height, destX, destY); return encodeURIComponent(strData);}这里先说下大致实现的原理，首先先创建一个新的canvas然后设置好宽高，而这个宽高就是参考线分隔的每一块宽高，然后过通drawImage将原图上某块局域复制一份出来，再通过toDataURL转成base64编码方便本地显示。所在在这个Demo中image就是我们刚上传的那个图片,sourceX、sourceY和destWidth、destHeight取图片的原始高宽，而我们要复制的局域也是从新的canvas上的左上角开始，所以这里的sourceX、sourceY为0，0。这里最主要的就是destX、destY，就是他们来控制复制局域的起始坐标，因为新图片是需要从最左边开始复制，所以destX为0，而destY将根据参考线的纵坐标来定值。这里要注意一下，因为域的问题，所以如果页面不是放到服务器上运行而是本地运行的话会出现权限报错情况最后附上Demo一枚，欢迎大家尽情的暴、使劲暴。(Demo只支持chrome浏览器，其他浏览器会有不良反应，请见谅)好了，整个HTML5自助化切图的主要代码就这些，这里第一次尝试用HTML5去做一些实实在在的东西，可能代码并不是最优，还能继续优化，大家如果对于文章有什么建议或不明白的地方欢迎讨论。在旧版的切图工具里，我们的做法是将图片上传到服务器，然后通过服务器端把图片切好后把对应的地址返回，前端再把页面显示出来。这样的做法会导致在网络慢时出现长时间的等待，而如果页面放弃这里的操作，还需要将图片从服务器端删除掉。在拖拽参考线时也只能通过大量的代码去实现，还需要编写一些服务器端代码。HTML5版相对有响应速度快（本地读取）、拖拽功能简单、前端切图不需要依赖服务器，减少开发成本。反正HTML5是个上流、好玩、有趣、简单的好东西，值得你一生拥有。写完文章已经凌晨两点半，根据官方和非官方统计，这个时间段被坑机率是平时的0.000001%，实践是检验真理的唯一标准。而为了检验这个标准我带着疲惫的身躯，打开客户端进入匹配模式。裸多兰一级升E下路孤独神级大嘴再次上路，德玛西亚。。。...

HTML5的自定义data-*属性和jquery的data()方法的使用示例

2017年02月11日

HTML5规范里增加了一个自定义data属性，你可以拿它做很多有用的事情。你可以去读一下HTML5的详细规范，但这个自定义data属性的用法非常的简单，就是你可以往HTML标签上添加任意以"data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。下面的一个代码片段是一个有效的HTML5标记：复制代码代码如下:<divid="awesome"data-myid="3e4ae6c4e">Someawesomedata</div>可是，怎么来读取这些数据呢？你当然可以遍历页面元素来读取你想要的属性，但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*"属性。其中一个方法就是.data(obj)，这个方法是在jQuery1.4.3版本后出现的，它能返回相应的data属性。举个例子，你可以用下面的写法读取data-myid属性值：复制代码代码如下:varmyid=jQuery("#awesome").data('myid');console.log(myid);你还可以在"data-*"属性里使用json语法，例如，如果你写出下面的html：复制代码代码如下:<divid="awesome-json"data-awesome='{"game":"on"}'></div>你可以通过js直接访问这个数据，通过json的key值，你能得到相应的value：复制代码代码如下:vargameStatus=jQuery("#awesome-json").data('awesome').game;console.log(gameStatus);你也可以通过.data(key,value)方法直接给"data-*"属性赋值。一个重要的你要注意的事情是，这些"data-*"属性应该和它所在的元素有一定的关联，不要把它当成存放任意东西的存储工具。补充：尽管"data-*"是HTML5才出现的属性，但jquery是通用的，所以，在非HTML5的页面或浏览器里，你仍然可以使用.data(obj)方法来操作"data-*"数据...

HTML5 Canvas的文本设置字体和大小

2017年02月08日

HTML5Canvas的文本设置字体和大小，我们可以使用的字体在画布范围内的属性。下面我们就做一个简单的实例为大家讲解下，基本语法：context.font=[value];HTML5 Canvas Text Font & Size 例子<!DOCTYPE HTML> <html> <head> <title>HTML5_canvas_text_size</title><style> body {margin: 0px;padding: 0px;}#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}</style> <script> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = 150; var y = 100; context.font = "40pt Calibri"; context.fillText("Hello WEBJX!", x, y); };</script> </head> <body> <canvas id="myCanvas" width="578" height="200"> </canvas> </body> </html>...

初学者对于HTML5的一些误解

2017年02月08日

HTML5的时候，经常会质疑一些问题，正如Opera的布道者BruceLawson讲的那样，“每个人都在谈论HTML5”，它被传的很神，很玄。事实上有很多人所说的HTML5实际上只是古老的DHTML或者Ajax。把所有的信息混在一起就是一堆错误信息。HTML5简单的说就是一组新的标准、语法和规则用来创建网页，可以利用一些新的浏览器的“本地”功能，例如离线存储，多媒体播放和其他的交互等等。我们所看到的很多很酷的HTML5网站实际上跟HTML5无关，而是由CSS3和jQuery生成的。CSS3和jQuery是和HTML5一样的新技术，它们和HTML5是平行的概念。这篇文章讲了关于HTML5的7个传说，也就是误解。传说#1：因为苹果不支持Flash，所以人们发明了HTML5树大招风，苹果似乎经常受到各种指责。虽然HTML5可以为移动设备提供一些非常有用的功能，但是它不是为了这个需求而被创造的。事实上，早在2004年，Opera和Mozilla为了解决乱糟糟的网页标准定义了一些好的设计的标准。他们的目的很简单，就是向W3C提交这些标准，从而创建一个更好用，更快速的HTML标准。这个标准直到2006年才被接受。而在短短的三年内，人们又起草了一个新的标准，审议通过并开始使用。传说#2：HTML5要到2022年才会成熟我不知道这句话是谁传出来的。我们知道HTML5的起草文件已经在2009年审议通过，也就是没有新的内容可以被添加，也不会有显著的改动。你现在就可以使用HTML5了，并且不用担心向下兼容问题。你可以通过一些轻量级的JavaScript来让老版本的浏览器支持复杂的Canvas。所有新版本的浏览器支持HTML5。你需要担心的不是HTML标签，而是CSS。很多老版本的浏览器对CSS3的支持很差。传说#3：HTML5需要CSS3支持虽然CSS3能为HTML5增色不少，例如语义class名字，但这决不是必须的。HTML5只是标记语言，你当然可以使用HTML5+CSS2，只不过没有那么优雅。由于HTML5移除了属性和标签，所以你需要为每一个元素指定全部的样式。例如，在HTML5中，为了让浏览器正确的渲染页面，你需要为每一个页面元素设置“display:block”声明。简而言之，HTML5需要样式来让也页面更好看，但不必须是CSS3。传说#4：HTML5破坏了可访问性（Accessibility）相反，HTML5从设计之初就考虑到了可访问性。每一个元素都支持WIAARIA标志角色。这些角色可以让屏幕阅读器这类设备更好的理解页面的内容。传说#5：HTML5是Flash杀手Flash依然被无数的网站和开发者使用。关于Flash和HTML5之间的误解来源于Adobe和Apple之间的争执以及HTML5音频和视频应用的迅速普及。虽然HTML5可以很好的支持少量的视频播放，但是HTML5比Flash需要更多的编码资源，而且缺少那些浏览器插件提供的技术。目前类似Vimeo和YouTube大量的使用HTML5技术是为了推广这项技术，他们短期内不会彻底放弃Flash。开发者VikiHoo关于Flash仍然会广泛的被使用有一些令人信服的观点。但是从页面设计的角度来看，我们希望尽快的从FLash中解脱出来。HTML5学起来用起来都更容易。它不需要插件，装载快速，并且对移动设备很友好。所以不是HTML5干掉了Flash，准确的说是HTML5将统治移动设计和开发市场。传说#6：只要在我的网站上添加了HTML5doctype，它就是HTML5网站了从浏览器的角度来说，是的，添加了HTML5doctype的网站都会被认为是HTML5网站。但是HTML5不仅仅是一个doctype。它是一套完整的最佳实践、语义标签、排版元素例如等等。这些元素能让你的网站利用浏览器的新功能，才能称得上是HTML5。同时你也要注意那些在HTML5中被弃用的元素和属性，以保证兼容性。传说#7：使用HTML5会让我获得更多的妹子/工作/金钱/尊重……熟练的掌握HTML5并不会让你看起来更性感，除非你是BruceLawson。它也不会让你找到梦想的工作。你的实力还是需要通过设计能力，编码能力来体现。当然，学习新技术的热情和毅力是值得欣赏的。你有可能获得同事的尊重，如果你用你的所学帮助他们的话。...

CSS3,HTML5和jQuery搜索框集锦

2017年02月06日

HTML5/CSS3的搜索输入字段在本教程中我们使用两种不同的方法来构建一个扩大搜索字段。花式搜索框这是一个奇特的搜索框，非常有意思！搜索栏动画CriteriaSearchBox一种提示选择搜索，像商店类别的搜索框。jQuery和CSS3的"下一步级别"动画搜索表单基本的jQuery搜索/过滤器灵活的搜索框一个灵活的搜索输入和内部固定宽度的提交按钮来固定边界的宽度。...

jQuery(非HTML5)可编辑表格实现代码

2017年02月05日

功能：单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。主要实现思路：选中，移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时，在单元格上面添加个input输入域，动态的更新数据源代码：HTML代码：复制代码代码如下:<tableclass="editableTable"><thead><tr><th>Item1</th><th>Item2</th><th>Item3</th></tr></thead><tbody><tr><tdclass="editablesimpleInput">arthinking</td><tdclass="editablesimpleInput">Jason</td><tdclass="editablesimpleInput">itzhai</td></tr><tr><tdclass="editablesimpleInput">arthinking</td><tdclass="editablesimpleInput">Jason</td><tdclass="editablesimpleInput">itzhai</td></tr><tr><tdclass="editablesimpleInput">arthinking</td><tdclass="editablesimpleInput">Jason</td><tdclass="editablesimpleInput">itzhai</td></tr></tbody></table>CSS代码：复制代码代码如下:body{text-shadow:#FFFFFF1px1px1px;}.editableTable{width:220px;padding:10px;background-color:#DDEEF6;border:1pxsolid#DDEEF6;-webkit-border-radius:6px;-moz-border-radius:6px;}.editableTablethead{background:#FFFFCC;}td{background:#66CCFF;cursor:pointer;}.selectCell{background:#6699FF;}JS代码：复制代码代码如下:varEdTable=function(){//给单元格绑定事件functioninitBindGridEvent(){$("td.editable").unbind();//添加单元格点击事件addGridClickEvent();//添加单元格双击事件addGridDbClickEvent();//添加键盘事件addGridKeyPressEvent();}//给单元格添加单击事件functionaddGridClickEvent(){$("td.simpleInput").bind("click",function(){$('.simpleInput').each(function(){$(this).removeClass("selectCell");});//给选中的元素添加选中样式$(this).addClass("selectCell");});}//给单元格添加双击事件functionaddGridDbClickEvent(){$("td.simpleInput").bind("dblclick",function(){$('.simpleInput').each(function(){$(this).removeClass("selectCell");});varval=$(this).html();varwidth=$(this).css("width");varheight=$(this).css("height");$(this).html("<inputtype='text'onblur='EdTable.saveEdit(this)'style='width:"+width+";height:"+height+";padding:0px;margin:0px;'value='"+val+"'>");$(this).children("input").select();});}//给单元格添加键盘事件functionaddGridKeyPressEvent(){$(document).keyup(function(event){if(event.keyCode==37){//左箭头varselectCell=$(".selectCell").prev()[0];if(selectCell!=undefined){$(".selectCell").removeClass("selectCell").prev().addClass("selectCell");}}elseif(event.keyCode==38){//上箭头varcol=$(".selectCell").prevAll().length;vartopCell=$(".selectCell").parent("tr").prev().children()[col];if(topCell!=undefined){$(".selectCell").removeClass("selectCell");$(topCell).addClass("selectCell");}}elseif(event.keyCode==39){//右箭头varselectCell=$(".selectCell").next()[0];if(selectCell!=undefined){$(".selectCell").removeClass("selectCell").next().addClass("selectCell");}}elseif(event.keyCode==40){//下箭头varcol=$(".selectCell").prevAll().length;vartopCell=$(".selectCell").parent("tr").next().children()[col];if(topCell!=undefined){$(".selectCell").removeClass("selectCell");$(topCell).addClass("selectCell");}}elseif(event.keyCode==13){//回车键varselectCell=$(".selectCell")[0];if(selectCell!=undefined){$(selectCell).dblclick();}}});}//单元格失去焦点后保存表格信息functionsaveEdit(gridCell){varpnt=$(gridCell).parent();$(pnt).html($(gridCell).attr("value"));$(gridCell).remove();}return{initBindGridEvent:initBindGridEvent,saveEdit:saveEdit}}();源代码下载：EditableTable.rar...

jQuery中使用data()方法读取HTML5自定义属性data-*实例

2017年02月04日

HTML5的api不同的是，jQuery会尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。如果这样做不会改变数值的表示，那么该值将转换为一个数字（number）。例如，“1E02”和“100.000”是等同于数字（数字值100），但将转换它们会改变他们的表示，所以他们被保留为字符串。字符串值“100”被转换为数字100。如果数据(data)属性是一个对象（以“{”开始）或数组（以'[‘开始），可以用jQuery.parseJSON将其解析成字符串；它必须遵循有效的JSON的语法，包括带双引号的属性名称。如果该值不能解析为一个JavaScript值，它将被保留为字符串。如果想将取出的属性值直接当作字符串的话，请使用attr()方法。data-属性是在第一次使用这个数据属性后不再存取或改变（所有的数据值都在jQuery内部存储）。调用.data()时如果不带参数，将会以JavaScript对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的.data(obj)操作，将不会再影响这个对象。另外，直接操作这个对象会比每次调用.data()来设置或获取值要快一些。...

用HTML5实现一个twitch3D游戏

2017年02月02日

HTML5.html这篇文章国内有些机器译的版本，但实在太难阅读，这里试译了下。由于译者水平有限，可能会有不少错漏之处，一些不明确是否译准的地方附了原文。此文涉及挺多框架/库，在翻译过程中ip收获还是挺多的，建议大家在阅读时可以同时去了解下文中所提到的相关技术。【提示：此文不是”跟我学做HTML5游戏”之类的教程文章】—————————————–译文分隔线————————————-六周前我们想试下用HTML5实现一个twitch3D游戏是否可行。最终我们完成了几个游戏且很意外我们所达成的效果。你可以试下其中一个游戏：AirHockey图形目前多数浏览器对WebGL的支持已经很好，three.js是对使用WebGL很有用的库。它提供了简洁的API，内建的实用功能，通信模块等，其缺点是…文档很少。不过你可以通过很多现存例子来学习如何实现你所需要的功能。一些例子使用了state.js和dat.GUI来监控频帧和修改设置，这两个库都是非常有用的。dat.GUI可用于微调延迟补偿算法及游戏外观，如光强，材料属性等。我们从TurboSquid买了游戏中所需的3D模型(airhockey,malletandpuck)，感谢three.js的Blender导出插件，依靠这个插件我们可以轻易地把Blender的场景(使用了买来的模型)转为json格式以用于浏览器。在分离模型，调整材料和减少多边形的数量的过程中，我们磨练了Blender使用技巧以优化文件大小。Blender界面如果你是刚接触3D,WebGL和three.js将会显得比较艰涩，因为这里面会有很多陌生的术语和概念。由于我们都不熟悉3D，所以在光线和材质的调整上花费了不少时间。我们反复尝试了各种调整，反复地刷新，体验效果。当看到Mr.doob在RO.ME项目上的演讲(需翻墙)时，才想到有个更好的办法，那就是在合成最终效果前把各个部件先分离成单独的小demo以便于调节效果。网络通信我们想试下创建一个能及时响应低延时，挑战玩家反应的游戏是否可行，airhockey看起来很合适。移动冰槌和冰球需要良好的网络性能。而只要网络稍有延时，这个游戏的可玩性就大大降低。幸好，WebSocket提供了很好的性能。我们的网络方案相对简单，但这已经路以证明我们的观点：用HTML5来实现互动(twitch，不知怎么翻译)游戏是可行的！，网络方案如下：客户端发送玩家的冰槌位置给服务端.服务端基于之前的位置，计算两玩家的冰槌的速度，然后计算是否有碰撞、冰球新的速度及位置。服务器发送最新的冰球及冰槌位置给两个客户端,客户端更新界面。当然，延时会使这个处理过程变得复杂。如果从服务端到客户端的数据包需要50毫秒，那么玩家最终看到的界面就是50毫秒前的，这使得玩家很难击中冰球。针对此问题我们的解决方法是：客户端计算自己与服务器之前的延时时长，比如50毫秒。当客户端从服务器接收到冰球的位置和速度时，使用与服务器相同的计算方法算出冰球50毫秒后的位置与速度。然后客户端把冰球显示到预算出来的位置如此，玩家就不需要自己计算延时所导致的位置误差来击中冰球了。还有很多流行的以验证有效的滞后补偿技术可以提高游戏的可玩性。不过我们的demo里仅使用上述方法–90年代的游戏联网技术，因为这已经足以让我们创建一个有趣的、实时的、浏览器上的多玩家游戏了。另外，值得一提的是，一切应该以服务端数据为准，所有的实时多人游戏里都是如此防范作弊的。JavaScript我们认为以HTML5为前端+Node.js为后端这样的形式进行开发，可以减少开发时间，因为这样客户端和服务端可以复用代码。特别是在实时游戏里，因为这种情况下，前后端需要相同的模拟计算逻辑。与之前的项目相比，把客户端和服务端中相同逻辑复用的方式，为我们节省了约30%的时间。我们尝试使用RequireJS编写客户端代码，但是用AMD（Modules/AsynchronousDefinition）的方式来封装我们所有的代码的话，那会让人随时受不了的！幸好我们发现了Browserify这一神器，它提供了很多Node标准库的实现封装。这样的代码events=require‘events’、classGameextendsevent.EventEmitter可以同时在服务端和客户端运行。可惜的是Browserify不能兼容Backbone.js，为此，我们写了50行CoffeeScript来替换Backbone.js中我们所需要的功能。选择CoffeeScript而非直接写JavaScript是因为这样可以精简代码量，而且所有的Node管理工具（如nodemon,forever）似乎都支持CoffeeScript。一开始我们担心用CoffeeScript写的代码难以调试，但事实证明，CoffeeScript生成的js代码极具可读性。Browserify使用了新的代码映射标准，这有助于使用Chrome开发者工具游览代码，相信不需要多久我们就可以在游览器上直接调试CoffeeScript了。（译注：chrome上已经可以直接调试CoffeeScript，相关链接http://ryanflorence.com/2012/coffeescript-source-maps/）性能与优化上文已经提到，我们用Node.js来当服务端，除了Node.js，我们觉得没别的方案可以实现我们让服务端和客户端跑相同代码的需求了。目前为止，我们对Node的性能相当满意，在我们的负载测试中，512M的RackspaceVM机可以同时良好地支撑100左右个游戏进行。因为性能如此良好，我们几乎没花时间进行优化。关于HTML5的性能讨论，无可避免地涉及到GC(GarbageCollection),而在最初，我们发现GC的暂停可能会导致游戏出现明显停顿(andwewereinitiallyconcernedthatGCpausesmightcausenoticeablepausesingameplay)，Chrome无此问题，只有FireFox在跑AirHockey时才会出现明显的光滑度光点(therearenoticeableblipsinsmoothness)，我们认为这和GC有关。不过，我们并没在这上面花工夫去减少GC出现的数量，当然，我们认为，如果在代码写得更小心些以减少垃圾，在Firefox可能会获得更好的性能。收获游览器上的游戏开发，最大的障碍是工具的缺乏。我们看到有很多游戏框架，但要么对游戏的开发方式有限定，要么就是他们被收购了又或者是没有发布(译注：这句看得莫名其妙，原文:Weseealotofframeworks,buttheyeitherconstrainyouintomakingyourgameacertainway,ortheygetacquiredandareneverreleased.)关于游戏开发的优秀的库和组件很多，但开发者需要自己去把他们组合起来。Flash和Unity已经建立了一个良好的开发环境，iOS和XboxLiveArcade平台，也提供了终端到终端的解决方案以创建和发布游戏。但浏览器平台还是太新，写HTML5游戏就像写汇编代码一样麻烦。在我们的开发过过程中，我们找不到一个滚动条来调节冰球的颜色或者光线的强弱。要得到效果我们就必须跑起来又或者在从一个很复杂的软件里得到字面上的代码。(ifwewantedanyofthatwe’dhavetobuilditorbuyin(literally)toaheavierframework.)我们非常高兴能看到浏览器上实现一个接近手抦控制的同步多人游戏的可能性。作为StarCraft和Halo的粉丝，我们已经准备好看到这两者在浏览器上的出现，同时我们也希望能激起你对它们在浏览器上出现的期望。在这里可以获取我们的游戏及游戏开发工具的早期版本：http://artillerygames.com。相关阅读WhateveryprogrammerneedstoknowaboutgamenetworkingLatencyCompensatingMethodsinClient/ServerIn-gameProtocolDesignandOptimizationAStream-basedTimeSynchronizationTechniqueForNetworkedComputerGames...

HTML5基础教程:video视频标签详解

2017年02月02日

HTML5中，就能完全脱离Flash或其他的插件来播放视频了。video标签：IE9FireFox5.0Safari5.5Chrome12Opera11.5Mpeg4√×√√×Ogg×√×√√WebM×√×√√Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件MPEG4：带有H.264视频编码和AAC音频编码的MPEG4文件WebM：带有VP8视频编码和Vorbis音频编码的WebM文件video标签的属性有：属性值(可省略)描述srcurl要播放的视频的URL，路径可为网络路径或相对路径。controlscontrols向用户显示控件，比如播放按钮。looploop每当视频结束时重新开始播放。preloadpreload视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。autoplayautoplay则视频在就绪后马上播放。widthautoplay则视频的宽度。heightautoplay则视频的高度。注：video的属性与audio的属性基本一致，只不过多出了Width和height属性。source子标签此标签是用来指定视频的路径，一般存在此子标签的时候则不能再video中出现src属性，在不同的浏览器下对video标签有不同的视频支持，那么我们为了让其能够在不同的浏览器下播放，可以有多种视频格式，那么我们只需要加入此标签，来指定视频即可，浏览器则会是video播放所支持的视频格式。Source有两个属性，分别是：属性描述src要播放的视频的URL，路径可为网络路径或相对路径。type视频类型<h1>请看视频，视频来自搜狗浏览器首页的实验室：</h1> <videowidth="600"height="400"controls="controls"autoplay="true"> <sourcesrc="http://ie.sogou.com/lab/inc/BigBuckBunny.mp4"type="video/mp4"/> <sourcesrc="http://ie.sogou.com/lab/inc/BigBuckBunny.ogv"type="video/ogg"/> </video>...

使用jquery读取HTML5 localstorage的值的方法

2017年02月02日

HTML5LocalStorageExample</title><linkhref="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css"rel="stylesheet"></head><body><divclass="container"><h1>HTML5LocalStorageExample</h1><formmethod="post"class="form-horizontal"><fieldset><legend>EnquiryForm</legend><divclass="control-group"><labelclass="control-label"for="type">Typeofenquiry</label><divclass="controls"><selectname="type"id="type"><optionvalue="">Pleaseselect</option><optionvalue="general">General</option><optionvalue="sales">Sales</option><optionvalue="support">Support</option></select></div></div><divclass="control-group"><labelclass="control-label"for="name">Name</label><divclass="controls"><inputclass="input-xlarge"type="text"name="name"id="name"value=""maxlength="50"></div></div><divclass="control-group"><labelclass="control-label"for="email">EmailAddress</label><divclass="controls"><inputclass="input-xlarge"type="text"name="email"id="email"value=""maxlength="150"></div></div><divclass="control-group"><labelclass="control-label"for="message">Message</label><divclass="controls"><textareaclass="input-xlarge"name="message"id="message"></textarea></div></div><divclass="control-group"><divclass="controls"><labelclass="checkbox"><inputname="subscribe"id="subscribe"type="checkbox">Subscribetoournewsletter</label></div></div></fieldset><divclass="form-actions"><inputtype="submit"name="submit"id="submit"value="Send"class="btnbtn-primary"></div></form></div>然后是js部分代码：复制代码代码如下:<scriptsrc="//code.jquery.com/jquery-latest.js"></script><script>$(document).ready(function(){/**判断是否支持localstorage*/if(localStorage){/**读出localstorage中的值*/if(localStorage.type){$("#type").find("option[value="+localStorage.type+"]").attr("selected",true);}if(localStorage.name){$("#name").val(localStorage.name);}if(localStorage.email){$("#email").val(localStorage.email);}if(localStorage.message){$("#message").val(localStorage.message);}if(localStorage.subscribe==="checked"){$("#subscribe").attr("checked","checked");}/**当表单中的值改变时,localstorage的值也改变*/$("input[type=text],select,textarea").change(function(){$this=$(this);localStorage[$this.attr("name")]=$this.val();});$("input[type=checkbox]").change(function(){$this=$(this);localStorage[$this.attr("name")]=$this.attr("checked");});$("form")/**如果表单提交，则调用clear方法*/.submit(function(){localStorage.clear();}).change(function(){console.log(localStorage);});}});...

jQuery+HTML5美女瀑布流布局实现方法

2017年01月25日

HTML5美女瀑布流布局实现方法。分享给大家供大家参考。具体如下：这是一款JavaScript与HTML5实现美女瀑布流布局，本方法是把图片的路径写在了JS的数组里，不过重点好像不是在这里，而是在图片如何自动排列的问题，你可以运行本实例后，点击“加载瀑布流布局”按钮，即可看到图片的瀑布流排列效果，现在很流行这个，希望您从本代码中能找到一些灵感。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/js-HTML5-mn-pb-style-codes/具体代码如下：<!DOCTYPEHTML><html><head><title>美女瀑布流</title><styletype="text/css">*{margin:0;padding:0}div.section{overflow:hidden}div.aside{width:225px;float:left;display:inline}div.asidediv.content{margin:5px;background:#666}div.asidediv.contentimg{width:205px;margin:5px;}div.asidediv.contentdiv.imgcaption{margin:05px;line-height:20px}</style></head><body><divclass="section"><divclass="aside"></div><divclass="aside"></div><divclass="aside"></div><divclass="aside"></div></div><button>加载瀑布流布局</button></body><scripttype="text/javascript"src="jquery-1.6.2.min.js"></script><scripttype="text/javascript">varjson=[{"text":"1","src":"images/1.jpg","height":"273"},{"text":"2","src":"images/2.jpg","height":"273"},{"text":"3","src":"images/3.jpg","height":"306"},{"text":"4","src":"images/4.jpg","height":"270"},{"text":"5","src":"images/5.jpg","height":"273"},{"text":"6","src":"images/6.jpg","height":"307"},{"text":"7","src":"images/7.jpg","height":"272"},{"text":"8","src":"images/8.jpg","height":"285"},{"text":"9","src":"images/9.jpg","height":"303"},{"text":"10","src":"images/10.jpg","height":"272"},{"text":"11","src":"images/5.jpg","height":"273"},{"text":"12","src":"images/7.jpg","height":"273"},{"text":"13","src":"images/3.jpg","height":"280"}]functiongetSmallDiv(wrap,oD){varlen=oD.length;varh=Infinity;vargetD;for(vari=0;i<len;i++){if(oD.eq(i).height()<h){h=oD.eq(i).height();getD=oD.eq(i);}}returngetD;}$("button").click(function(){for(vari=0;i<json.length;i++){varstr;str="<divclass=\"content\">";str+="<imgsrc="+json[i].src+"height="+json[i].height+"alt=\"\"/>";str+="<divclass=\"imgcaption\">"+json[i].text+"</div>";str+="</div>";getSmallDiv($(".section"),$(".aside")).append(str);}});</script></html>希望本文所述对大家的jQuery程序设计有所帮助。...

HTML5中的标记方法

2017年01月18日

HTML5中的语法变化的变化，正是因为在HTML5之前几乎没有符合标准规范的Web浏览器。接下来让我们看一下，HTML5中的标记方法。内容类型（ContentType）DOCTYPE声明是HTML文件中必不可少的，它位于文件的第一行。在HTML4中，它的声明方法如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在HTML5中，不需要使用版本声明，一份文档将会适用与所有的HTML版本。HTML5中的DOCTYPE声明方法（不区分大小写）如下：什么是DOCTYPE<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">在上面的声明中，声明了文档的根元素是html，它在公共标识符被定义为“-//W3C//DTDXHTML1.0Strict//EN”的DTD中进行了定义。浏览器将明白如何寻找匹配此公共标识符的DTD。如果找不到，浏览器将使用公共标识符后面的URL作为寻找DTD的位置。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。HTML4.01严格版本<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML4.01过渡版本<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML4.01基于框架版本<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><!DOCTYPE html>另外，当使用工具时，也可以在DOCTYPE声明方式中加入STSTEM识别符，声明方法如下面的代码所示：<DOCTYPE HTML SYSTEM "about:legacy-compat">在HTML5中，像这样的DOCTYPE声明方法是允许的（不区分大小写，引号不区分是单引号还是双引号）。指定字符编码在HTML4中使用meta元素的形式指定文件中的字符编码，如下所示：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />在HTML5中可以使用<mate>元素直接追加charset属性的方式来指定字符编码，如下所示：<meta charset="UTF-8">两种方法都有效，可以继续使用前面的一种方法，但是不能同时混合使用两。...

HTML5之视频知识介绍和技术规范

2017年01月05日

HTML5的一个愿景就是脱离浏览器插件,微软真是让人觉得悲剧)。苹果决定不支持VP8,乔布斯认为VP8在质量或效率方面不如H.264,不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题(如果真的侵犯专利的话,Opera和Firefox估计马上会无视VP8的)。说了这么多,其实说到底就是,现在如果要在页面中使用<video>标签,需要考虑三种情况,支持OggTheora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面来认识HTML5的视频,包括<video>标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件。2Video标签的使用Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性,以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外,还可以包含当指定的视频都不能播放时,返回的内容。2.1src属性和poster属性你能想象src属性是用来干啥的。跟<img>标签的一样,这个属性用于指定视频的地址。而poster属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。2.2preload属性这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等)。Auto:全部预加载。2.3autoplay属性又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉是表示不自动播放。注意,HTML中布尔属性的值不是true和false。正确的用法是,在标签中使用此属性表示true,此时属性要么没有值,要么其值恒等于他的名字(此处,自动播放为<videoautoplay/>或者<videoautoplay=”autoplay”/>);而在标签中不使用此属性表示false(此处不进行自动播放为<video/>)。2.4loop属性一目了然,loop属性用于指定视频是否循环播放,同样是一个布尔属性。2.5controls属性Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器启用本身的播放控制栏。控制栏须包括播放暂停控制,播放进度控制,音量控制等等。...

HTML5实例教程:article标签使用实例

2017年01月05日

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章、一片论坛帖子、一段用户评论,或其它任何独立的内容。除了内容部分,一个article元素通常用作它自己的标题,有时还有它自己脚注。下面是一段关于article元素的实例：<article> <header> <h1>标题</h1> <p>发表日期:<time pubdate="pubdate">2011年7月10号</time></p> </header> <footer> <p>w3cmm 版权所有</p> </footer></article>article元素是可以嵌套的,内层的内容原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式,用来呈现评论的article元素被包含在表示整体内容的article元素里面。下面是一个关于article元素的代码实例：<article> <header> <h1>标题</h1> <p>发表日期:<time pubdate="pubdate">2011年7月10号</time></p> </header> <section> <h2>评论</h2> <article> <header> <h3>张三的评论</h3> <p>12分钟前</p> </header> <p>……</p> </article> <article> <header> <h3>李四的评论</h3> <p>15分钟前</p> </header> <p>……</p> </article> </section> </article></article>...

【每日一学】整理下HTML5页面的头部内容

2016年12月22日

HTML5页面的头部内容，你肯定不能错过。<!DOCTYPEhtml><html><head>  <metacharset='utf-8'>  <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>  <metaname="description"content="不超过150个字符"/>  <metaname="keywords"content=""/>  <metaname="author"content="name,email@gmail.com"/>  <metaname="robots"content="index,follow"/>  <metaname="viewport"content="initial-scale=1,maximum-scale=3,minimum-scale=1,user-scalable=no">   <metaname="apple-mobile-web-app-title"content="标题">  <metaname="apple-mobile-web-app-capable"content="yes"/>  <metaname="apple-itunes-app"content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL">  <metaname="apple-mobile-web-app-status-bar-style"content="black"/>  <metaname="format-detection"content="telphone=no,email=no"/>   <metaname="renderer"content="webkit">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metahttp-equiv="Cache-Control"content="no-siteapp"/>  <metaname="HandheldFriendly"content="true">  <metaname="MobileOptimized"content="320">  <metaname="screen-orientation"content="portrait">  <metaname="x5-orientation"content="portrait">  <metaname="full-screen"content="yes">  <metaname="x5-fullscreen"content="true">  <metaname="browsermode"content="application">  <metaname="x5-page-mode"content="app">  <metaname="msapplication-tap-highlight"content="no">  <linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/>  <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>  <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>    <linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/>  <linkrel="apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/>  <linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/>  <linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/>  <linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/>  <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/>  <linkrel="apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/>    <metaname="msapplication-TileColor"content="#000"/>  <metaname="msapplication-TileImage"content="icon.png"/>  <linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/>  <linkrel="shortcuticon"type="image/ico"href="/favicon.ico"/>    <metaproperty="og:type"content="类型"/> <metaproperty="og:url"content="URL地址"/> <metaproperty="og:title"content="标题"/> <metaproperty="og:image"content="图片"/> <metaproperty="og:description"content="描述"/>  <title>标题</title></head>...

HTML5语义化标签和基于HTML5的Web App

2016年12月20日

HTML5的WebApp，目前主流操作系统iOS、Android以及WindowsPhone的浏览器都对于HTML5大部分特性的支持也更加突显HTML5在未来移动设备端的地位。那么HTML5有何前景呢，接下来我们一起来讨论HTML5和WebApp：谈到WebApp，我们就不得不先想到NativeApp，目前我们在AppStore上下载的ipa以及我们在Googleplaystore或其他网站下载的apk都是属于NativeApp，那么这种App有什么优势和劣势呢？NativeApp的优势：1、优秀的用户体验和华丽的交互操作，能够针对不同平台提供不同用户体验；2、可不受网络速度限制，节省带宽成本；3、可访问本地硬件设备和资源；4、盈利模式明朗。NativeApp的劣势：1、不同平台之间的移植麻烦；2、维持多个版本的成本比较高；3、需要通过第三方审核；4、盈利需要与第三方分成。针对NativeApp的不足，WebApp很好了弥补了这些劣势，开发商只需了解HTML5、CSS3、js以及DeviceAPI即可完成应用在多终端设备和平台的运行，很好的保证了应用跨平台的一致性，相对于NativeApp开发成本更低，同时更新维护更容易，用户几乎没有安装成本，也更加自由和开放。但任何新技术总是有利有弊，WebApp其自身也会遇到在用户体验、UI效果及调用本地设备和资源的相关问题。虽然2种模式各有优缺，但随着移动设备及HTML5的迅猛发展，让微软和乔布斯也意识到：只有HTML5才是web未来。从著名移动云平台公司Appcelerator发布的调查报告可以看到HTML5MobileWeb已经上升为第4位。众所周知，HTML5不仅仅给我们带来了更多语义化的标签，还有canvas绘图、音频视频、本地存储、离线应用、地理位置定位等新特性。...

Modernizr为HTML5和CSS3而生

2016年12月17日

HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。可以看到，右下角绿色按钮上面有Modernizr的链接。Modernizr的功能modernizr的功能其实很简单，就是用js检测浏览器对HTML5/CSS3的特性支持情况，支持某个属性，就在页面的<html>标签上添加一个相应的class，不支持的话就添加一个no-前缀的class，比如，如果检测的浏览器支持video标签，modernizr就会在<html>标签上添加video类，否则，添加no-video类。查看FindMeByIP的源码或者用firebug之类的工具查看页面代码，就可以看到<HTML>标签中的class。另外，modernizr也提供了另外一种用法，就是单独的检测浏览器对某个特性的支持情况，例如：if (Modernizr.video) {}通过类似的接口检测浏览器对HTML5的支持情况，是比较安全的。浏览器检测：UAVS特性其实大家通常都会用UA去检测一个浏览器，当然ua也提供了更丰富的信息，UA不是万能的，它也有一些弱点，比如，用户浏览器的UA伪装，某些落后浏览器提供的UA信息太少，这些都会影响到对浏览器信息的判断。更重要的是，对于HTML5特性来说，用UA去判断一个浏览器是否支持某个特性，实现太复杂而且不靠谱。当然，关于UA和特性检测的争论一直都有，我这里想说的是，具体问题具体分析，在网站中使用HTML5来检测特性支持要比UA更靠谱、更方便～～使用Modernizrmodernizr的用法很简单，仅仅在页面中引入库的js文件即可：<script type="text/javascript" src="modernizr-1.5.js"></script>Modernizr是开源的，但是由于某种原因，它被G-FW给封掉了。Modernizr@gitmodernizr项目托管在git，你可以通过以下地址获取它：http://github.com/Modernizr/Modernizr作者还在git提供了一个简单的输出页：http://modernizr.github.com/Modernizr/output.html和一个详细测试页面：http://modernizr.github.com/Modernizr/test/index.html扩展阅读：detactingHTML5featuresSafelyDeployHTML5andCSS3withModernizr...

分享几款不错的HTML5 Canvas和JavaScript动画

2016年12月09日

HTML5Canvas和JavaScript动画，见多了，但是今天分享的确也是我先前没见过的，基于HTML5Canvas和JavaScript的动画，这些令人难以置信的效果将使你对HTML5彻底折服。需要指出的是，这些都是浏览器的原生动画，无需任何插件。HTML5的Canvas对象将改变JavaScript的使命，使之成为HTML5下强大的动画脚本编写工具。本文介绍了8个你从未见过的，基于HTML5Canvas和JavaScript的动画，这些令人难以置信的效果将使你对HTML5彻底折服。需要指出的是，这些都是浏览器的原生动画，无需任何插件。Tunnelers纯JavaScript+HTML5Canvas生成的交互动画，难以置信。TheMesmerizer在格子中移动鼠标，颜色随着改变并扩散到周围的格子，很迷幻。用鼠标点四角的格子，或按键盘，可以看到更奇妙的效果。Burn在页面上移动鼠标，或按下鼠标，这样的效果，很难相信是浏览器原生的。CheloniidaeLive也是基于纯粹的JavaScript，不过使用了一个JavaScript库。很有趣，你可以通过修改其JavaScript代码实现自己的效果（可惜被墙了）。Canvas3Dengine一个基于Canvas的3D引擎。目前只支持预设的图形，纹理及基本交互功能。Bomomo很值得一试。DDD这个交互动画也很有趣。PlasmaTree非常阿凡达。...

【HTML5每日一练】Canvas标签绘制径向渐变图形

2016年11月30日

HTML5每日一练之Canvas标签的应用-绘制径向渐变图形</title><script type="text/javascript">window.onload = function(){var canvas = document.getElementById("W3Cfuns_canvas");var context = canvas.getContext("2d");var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);g1.addColorStop(0.1, "rgb(255, 255, 0)");g1.addColorStop(0.3, "rgb(255, 0, 255)");g1.addColorStop(1, "rgb(0, 255, 255)");context.fillStyle = g1;context.fillRect(0, 0, 400, 300);var n = 0;var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);g2.addColorStop(0.1, "rgba(255, 0, 0, 0.5)");g2.addColorStop(0.7, "rgba(255, 255, 0, 0.5)");g2.addColorStop(1, "rgba(0, 0, 255, 0.5)");for(var i = 0; i < 10; i++){context.beginPath();context.fillStyle = g2;context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);context.closePath();context.fill();}}</script></head><body><canvas id="W3Cfuns_canvas" width="600" height="400"></canvas></body></html>...

【HTML5每日一练】Canvas标签绘制线性渐变图形

2016年11月30日

HTML5每日一练之Canvas标签的应用-绘制线性渐变图形</title><script type="text/javascript">window.onload = function(){var canvas = document.getElementById("W3Cfuns_canvas");var context = canvas.getContext("2d");var g1 = context.createLinearGradient(0, 0, 0, 300);g1.addColorStop(0, "rgb(255, 255, 0)");g1.addColorStop(1, "rgb(0, 255, 255)");context.fillStyle = g1;context.fillRect(0, 0, 400, 300);var n = 0;var g2 = context.createLinearGradient(0, 0, 300, 0);g2.addColorStop(0, "rgba(0, 0, 255, 0.5)");g2.addColorStop(1, "rgba(0, 255, 0, 0.5)");for(var i = 0; i < 10; i++){context.beginPath();context.fillStyle = g2;context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);context.closePath();context.fill();}}</script></head><body><canvas id="W3Cfuns_canvas" width="600" height="400"></canvas></body></html>...

HTML5中figure和figcaption标签用法

2016年11月24日

HTML5中figure和figcaption标签一般都是配套使用的，先了解下两者的基本定义，然后结合实例来说明两者的用法。<figure><figure>标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。它是一种元素的组合，可带有标题（可选）。figure标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure有一个子标签：figcaption。<figcaption><figcaption>标签定义figure元素的标题（caption）。"figcaption"元素应该被置于"figure"元素的第一个或最后一个子元素的位置。OK，关于figure和figcaption标签就介绍完了，接下用几个实例来应用它们。如下：案例1：不带有标题的figure元素：<figure> <img alt="Web前端之家" src="logo.png"/></figure>案例2：带有标题的figure元素：<figure> <img alt="Web前端之家" src="logo.png"/> <figcaption>Web前端之家，专注Web前端，HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台</figcaption></figure>案例3：多个图片，同一个标题的figure元素：<figure> <img alt="Web前端之家1" src="logo1.png"/> <img alt="Web前端之家2" src="logo2.png"/> <img alt="Web前端之家3" src="logo3.png"/> <figcaption>Web前端之家，专注Web前端，HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台</figcaption></figure>总结了解完了上面的内容，相信大伙对于HTML5中的figure和figcaption标签应用很清晰了。如果你深入学习，请加入我们web前端群：295431592，一起探讨。...

本站推荐

前端必备工具

2022年02月09日

作者:abc123 | 分类:HTML/CSS | 浏览:3357 | 评论:0

2021年10月13日

作者:andy001 | 分类:HTML/CSS | 浏览:5230 | 评论:0

2021年08月18日

作者:Terry | 分类:Html5 | 浏览:3099 | 评论:0

2021年08月10日

作者:Terry | 分类:Html5 | 浏览:3936 | 评论:0

2021年07月12日

作者:Terry | 分类:Html5 | 浏览:2915 | 评论:0

2021年02月19日

作者:Terry | 分类:Html5 | 浏览:3238 | 评论:0

2020年12月29日

作者:Terry | 分类:SVG教程 | 浏览:4165 | 评论:0

2020年08月26日

作者:天空 | 分类:HTML/CSS | 浏览:4856 | 评论:0

2020年08月12日

作者:andy001 | 分类:Js&JQuery | 浏览:4693 | 评论:0

2020年07月20日

作者:天空 | 分类:Js&JQuery | 浏览:5603 | 评论:0

2020年05月20日

作者:Terry | 分类:HTML | 浏览:6604 | 评论:0

2020年02月09日

作者:andy001 | 分类:移动开发 | 浏览:8642 | 评论:0

2019年08月20日

作者:jiang | 分类:HTML/CSS | 浏览:8459 | 评论:0

2019年07月05日

作者:ceshi | 分类:HTML/CSS | 浏览:8066 | 评论:0

2019年06月03日

作者:天空 | 分类:HTML/CSS | 浏览:7814 | 评论:0

2018年11月14日

作者:扣丁学堂 | 分类:HTML/CSS | 浏览:11051 | 评论:0

2018年10月09日

作者:andy001 | 分类:HTML/CSS | 浏览:10272 | 评论:0

2018年07月16日

作者:abc123 | 分类:Html5 | 浏览:12275 | 评论:0

2018年07月02日

作者:天空 | 分类:Js&JQuery | 浏览:25127 | 评论:0

2018年07月02日

作者:ceshi | 分类:HTML/CSS | 浏览:11996 | 评论:0

2018年06月28日

作者:天空 | 分类:HTML/CSS | 浏览:16047 | 评论:0

2018年04月09日

作者:andy001 | 分类:移动开发 | 浏览:14003 | 评论:0

2018年03月29日

作者:abc123 | 分类:HTML/CSS | 浏览:27464 | 评论:0

2018年02月27日

作者:cidy2017 | 分类:移动开发 | 浏览:8809 | 评论:0

2017年11月07日

作者:cidy2017 | 分类:移动开发 | 浏览:10872 | 评论:0

2017年11月07日

作者:qilongzhu | 分类:移动开发 | 浏览:12072 | 评论:0

2017年10月14日

作者:jiang | 分类:移动开发 | 浏览:9911 | 评论:0

2017年10月14日

作者:jiang | 分类:移动开发 | 浏览:15153 | 评论:0

2017年02月13日

作者:Terry | 分类:Html5 | 浏览:13168 | 评论:0

2017年02月11日

作者:Terry | 分类:综合 | 浏览:10341 | 评论:0

2017年02月08日

作者:web176 | 分类:移动开发 | 浏览:58101 | 评论:2

2017年02月08日

作者:Terry | 分类:Html5 | 浏览:10799 | 评论:0

2017年02月06日

作者:Terry | 分类:综合 | 浏览:13986 | 评论:0

2017年02月05日

作者:Terry | 分类:综合 | 浏览:10497 | 评论:0

2017年02月04日

作者:Terry | 分类:综合 | 浏览:10466 | 评论:0

2017年02月02日

作者:web176 | 分类:移动开发 | 浏览:11235 | 评论:0

2017年02月02日