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

内容编写者的语义 HTML5 — 基本指南

2023年03月04日

Google和Bing喜欢语义HTML5，所以它非常适合SEO！本文提供了基本语义HTML5标签的简单指南，内容作者和撰稿人应该使用这些标签来更好地与Google和Bing（以及一般的机器）进行通信。您的竞争对手甚至可能没有接近最佳实践，因此在您的...

HTML5基础：了解语义化标签

2022年02月09日

HTML5基础：了解语义化标签。距HTML5标准规范制定完成并公开发布已经有好些年了，面试时也少不了要问对HTML5语义化得理解。但是在实际运用时，真正使用HTML5标签来开发的似乎不是很多（ps：查看了几个巨头公司网站推论），可能一部分原因是仍有部分用户使用在使用低版本浏览器。但是就我个人而言，因...

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

2021年10月13日

HTML5应用：绘制一个心形应用。直接上DEMO。<!DOCTYPE html><html> <head> &...

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

2021年08月18日

在本文中，我们将研究HTML表单字段和HTML5提供的验证选项。我们还将研究如何通过使用CSS和JavaScript来增强这些功能。什么是约束验证【ConstraintValidation】？每个表单域都有一个目的。并为此经常管辖约束【Constraint】上或理事什么应该和不应该...

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

2021年08月10日

今天继续分享一个用HTML5和CSS3实现的应用：绘制小水缸，实现动画效果。之前也分享过一些了，大家可以去了解。OK，我们往下走吧，先看下效果图：一口可爱的小水缸，带着笑脸，冒着泡。首先我们需要绘制图形。HTML<label for="toggle">T...

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

2021年07月12日

好久没发布关于HTML5和CSS3动画的文章了，近期一直折腾vue和react等项目。闲余之时，突然想分享一个HTML5应用：CSS3画一个可爱动漫宠物。先看下效果图：HTML代码：<label for="toggle">Toggle body&n...

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

2021年02月19日

在本教程中，我们将深入探讨很少使用的HTML5<datalist>元素。它可以实现不需要JavaScript的轻量级，可访问的，跨浏览器的自动完成表单控件。<select><select>当您希望用户从一小部分选项中进行选择时，HTML5控件是理想的选择。在以下情...

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

2020年12月29日

文章“如何在SVG中创建复杂路径”对该<path>元素进行了研究，并展示了如何绘制一系列直线和圆弧以创建任何形状。（它通常用于复制字体，而无需下载完整的字体。）该d属性提供了一些额外的技巧来绘制平滑曲线。在本文中，我们将讨论三次贝塞尔曲线，但您也可以参考“如何在SVG图像上绘制二次贝塞尔...

理解xhtml与HTML5

2020年08月26日

理解xhtml与html5。html：超文本标记语言(HyperTextMarkupLanguage)。【推荐：html文档】xhtml：可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。h5：更先由WHATWG(Web超文本应用技术工作组...

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

2020年08月12日

实际开发我们在A页面调用组件，在组件里面填好内容之后，发现想退出不想填了，因为组件与A页面此时在同一页面，点击返回时候给人感觉是返回上上个页面，但之前A页面填写的东西都没有了，这很影响体验。因此可以使用pushstate方法，不刷新浏览器改变url当你再返回时候就会返回到这个A页面而不是上上个...

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

2020年07月20日

学习下ie-css3.htc在html5中的使用方法。css带来的便利是很容易感受的到的，但恶心的是它在ie下的不兼容，所以某位牛人现身写了个ie-css3.htc，允许你在ie下去使用css3的部分东西。ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-s...

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

2020年05月20日

Normalize.css是一个小的CSS文件，可在HTML元素的默认样式中提供更好的跨浏览器一致性。这是一种现代的，支持HTML5的版本，可替代传统的CSS重置。TwitterBootstrap，HTML5Boilerplate，GOV.UK，Rdio，CSSTricks和许多其他框架，工...

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

2020年02月09日

用html5+css模拟太阳系行星运转动画，废话不多说直接上DEMO，如下：<html><head> <style> &nb...

回忆HTML和HTML5之间的区别

2019年08月20日

HTML和HTML5之间的区别有：HTML的文档类型声明太长而且复杂，而HTML5的文档声明相对来说更为简便，有利于程序员快速阅读和开发。相对于HTML，HTML5中新增和修改了一些元素。下面本篇文章就来给大家介绍和对比一下HTML和HTML5，让大家了解HTML和HTML5之间的一些区别，希望对大...

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

2019年07月05日

HTML5中meta标签的属性有哪些呢？meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。<!-- 1、声明文档使用的字符...

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

2019年06月03日

html5有哪些新特性和如何区分HTML和HTML5？实现上：h5不再是SGML的子集。新特性：主要是关于图像，位置，存储，多任务等功能的增加。如：绘画canvas用于媒介回放的video和audio元素本地离线存储localStorage，长期存储，浏览器关闭之后数据不丢失sessionSt...

简述HTML5是什么

2018年11月14日

　　如今不论是自学HTML5开发技术还是参加HTML5培训的小伙伴都不在少数，本篇文章扣丁学堂小编和读者们分享一下HTML5是什么，对HTML5开发感兴趣的小伙伴就一起来了解一下吧。　　一、HTML5是什么　　HTML5isthelatestversionofHypertextMar...

HTML5有什么语义化可言？

2018年10月09日

HTML5有什么语义化可言呢，大家都知道HTML5增加了不少的标签，相对于HTML4.1版本，标签选择更多了。那么语义化怎么去解决呢？真正使用HTML5标签来开发的似乎不是很多（ps：查看了几个巨头公司网站推论），可能一部分原因是仍有部分用户使用在使用低版本浏览器。但是就我个人而言，因选取一些标签时...

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

2018年07月16日

ajax的全称是AsynchronousJavaScriptandXML（异步的JavaScript和XML）。ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。ajax是一种在无需重新加载整个网页的情况...

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

2018年07月02日

HTML5实现动态添加和删除元素，其中最主要的是进行ID的赋值操作，每次添加相对应的ID需要进行加1，在删除时，通过ID除过来相关的ID进行删除；还有就是删除最后一个添加的元素时，再次追加时的ID判断，这里使用的方式如下：在删除元素之后，查询DIV下追加的共同元素的个数，然后取最后一个ID，在其后...

学习HTML5中的input的属性

2018年07月02日

学习HTML5中的input的属性HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括：color点击时弹出颜色选择器，可以选择任意颜色number输...

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

2018年06月28日

2018世界杯，用HTML5+CSS3来画个足球场。<!DOCTYPE html><html><head> <style> body,...

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

2018年04月09日

针对市场上迅速发展的移动多媒体应用、游戏、社交、行业应用等需求，研发HTML5App应用的容器产品和开发工具。研发应用展现、应用安全、本地能力适配、主流操作系统兼容、系统硬件加速技术等领域的关键技术，实现跨平台移动应用（App）的开发运行引擎的自主可控，为基于HTML5的Web应用系统提供一个...

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

2018年02月27日

W3C于2017年12月14日发布了HTML规范5.2更新版本，并官方建议用户使用。此次更新增加了dialog标签等新功能、弃用了HTML插件系统等原有功能，并整合了其他W3C委员会的进展，如对支付请求API（PaymentRequestAPI）和演示API（PresentationAPI）的...

了解下HTML5的内嵌媒体

2017年11月07日

视频已经在Web上广泛流行了，但是其格式几乎都是专有的。YouTube使用Flash，Microsoft使用WindowsMedia®，Apple使用QuickTime。在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。因此，WhatWG提议引入一个新的vi...

HTML5中对dir属性

2017年11月07日

ltr：从左到有。rtl：从右到左。auto：根据文本内容自动决定，不准确，不建议使用，除非万不得已。元素的dir属性用于定义元素的文字排版方向。可设置如下几个值：bdi元素没有设置dir属性时，和设置auto效果一致。根元素没有设置dir属性时，和设置成ltr效果一致。元素没有设置dir属性，而其...

了解HTML5之contenteditable属性

2017年10月14日

contenteditable属性规定是否可编辑元素的内容。contenteditable是一个枚举类型的属性，可供选择的值有空字符串、true、false或inherit（默认）。当为空字符串时，效果和true一致。当一个元素的contented...

HTML5 Canvas颜色选择器

2017年10月14日

这段代码是用HTML5来创建一个网页颜色选择器。首先在Canvas画一幅图，然后添加鼠标事件“鼠标移动”，“鼠标点击”。在鼠标移动的时候，显示当前划过的颜色预览，在鼠标点击的时候，选中当前颜色，显示颜色的细节。<!DOCTYPE html><html la...

HTML5中的FileReader、拖拽和canvas教程

2017年02月13日

在现在这个到处是HTML5话题的时代，好像不懂点HTML5都有点落伍。那我也跟上潮流一把吧，今天给大家分享的是基于HTML5的自助切图。在组里经常会被某设计师叫切板仔，确实重构很大一部分工作都花在切图上，而如何提高切图效率或者让切图自助化也是我们重构师的追求。基于这个前提我自己抱着研究的心态，使用H...

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

2017年02月11日

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是，你不知道将来会不会有其它脚本把你的自定义属性给重置掉，此外，你这样做也会导致html语法上不符合Html规范，以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性，你可以拿它做很多有用的事情。...

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

2017年02月08日

HTML5Canvas的文本设置字体和大小，我们可以使用的字体在画布范围内的属性。下面我们就做一个简单的实例为大家讲解下，基本语法：context.font=[value];HTML5 Canvas Text Font & Size&nbs...

初学者对于HTML5的一些误解

2017年02月08日

想当初刚接触HTML5的时候，经常会质疑一些问题，正如Opera的布道者BruceLawson讲的那样，“每个人都在谈论HTML5”，它被传的很神，很玄。事实上有很多人所说的HTML5实际上只是古老的DHTML或者Ajax。把所有的信息混在一起就是一堆错误信息。HTML5简单的说就是一组新的标准...

CSS3,HTML5和jQuery搜索框集锦

2017年02月06日

添加搜素框或网站搜索功能是为了方便用户能够轻松、快捷地找到自己需要的信息。因此，在网站中添加一个搜索框已经成为网页设计的主流元素之一。添加一个搜索框到网站会使得用户界面更加友好，也能帮助用户轻松愉快地浏览。脉动的CSS3输入搜索框输入搜索框带有边框和类似脉冲的阴影跳动。纯CSS...

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

2017年02月05日

功能：单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。主要实现思路：选中，移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时，在单元格上面添加个input...

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

2017年02月04日

主要的方法如下：复制代码代码如下:.data(key,value).data(obj).data(key).data()从jQuery1.4.3起，HTML5data-属性将自动被引用到jQuery的数据对象中。例如HTML：复制代码代码如下:<divdat...

用HTML5实现一个twitch3D游戏

2017年02月02日

原文：http://blog.artillery.com/2012/05/realtime-multiplayer-3d-gaming-html5.html这篇文章国内有些机器译的版本，但实在太难阅读，这里试译了下。由于译者水平有限，可能会有不少错漏之处，一些不明确是...

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

2017年02月02日

与音频一样，在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了。video标签：...

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

2017年02月02日

在HTML5中，localstorage是个不错的东西，在支持localstorage的浏览器中，能持久化用户表单的输入，即使关掉浏览器，下次重新打开浏览器访问，也能读出其值，下面给出的例子是使用jquery在每次表单加载的时候，读localstorage的值，而在表单每次提交时则清楚其...

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

2017年01月25日

本文实例讲述了jQuery+HTML5美女瀑布流布局实现方法。分享给大家供大家参考。具体如下：这是一款JavaScript与HTML5实现美女瀑布流布局，本方法是把图片的路径写在了JS的数组里，不过重点好像不是在这里，而是在图片如何自动排列的问题，你可以运行本实例后，点击“加载瀑布流布局”按...

HTML5中的标记方法

2017年01月18日

HTML5中的语法变化的变化，正是因为在HTML5之前几乎没有符合标准规范的Web浏览器。接下来让我们看一下，HTML5中的标记方法。内容类型（ContentType）DOCTYPE声明是HTML文件中必不可少的，它位于文件的第一行。在HTML4中，它的声明方法如下：<!DOCTYPE...

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

2017年01月05日

当今,在网页上嵌入视频且所有用户不管使用任何浏览器或者操作系统都能看到的唯一可靠方法是使用Flash。这需要AdobeFlash插件,并且结合<object>和<embed>标签。大多数用户已经安装了Flash插件(事实上,大概95%的上网用户都装有Flash的某个版本),...

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

2017年01月05日

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章、一片论坛帖子、一段用户评论,或其它任何独立的内容。除了内容部分,一个article元素通常用作它自己的标题,有时还有它自己脚注。下面是一段关于article元素的实例：<ar...

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

2016年12月22日

整理下HTML5页面的头部内容，你肯定不能错过。<!DOCTYPEhtml><html><...

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

2016年12月20日

伴随着移动设备的快速崛起，App市场的发展也日渐迅猛，目前iOS和Android平台的App数量总和也达到100万款之多，据AAWP报道，WindowsPhone的应用市场数量已突破8万，晋升成为第三大应用平台。移动数据分析公司Flurry在近些年App趋势报告中显示，人们花费在App上的时间...

Modernizr为HTML5和CSS3而生

2016年12月17日

modernizr就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。可以看到，右下角绿色按钮上面有Modernizr的链接。Modernizr的功能modernizr的功能其实很简单...

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

2016年12月09日

说到HTML5Canvas和JavaScript动画，见多了，但是今天分享的确也是我先前没见过的，基于HTML5Canvas和JavaScript的动画，这些令人难以置信的效果将使你对HTML5彻底折服。需要指出的是，这些都是浏览器的原生动画，无需任何插件。HTML5的Canva...

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

2016年11月30日

我们学习了如何使用Canvas绘制线性渐变图形，今天我们来学习一下如何绘制径向渐变图形。我们知道绘制线性渐变图形用到了一个非常重要的函数——createLinearGradiend();如果我们要绘制径向渐变我们也有类似的方法，如下：context.createRadialGradient(xSta...

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

2016年11月30日

今天将介绍其他比较高级的绘制知识之一：线性渐变。绘制线性渐变时，我们需要使用到一个新的对象——LinearGradient对象，使用图形上下文对象的createLinearGradiend方法来创建该对象，该方法的定义如下：context.createLinearGradient(xStart,...

快捷导航

HTML

Javascript

前端工具

前端教程

前端API文档

2023年03月04日

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

2022年02月09日

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

2021年10月13日

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

2021年08月18日

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

2021年08月10日

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

2021年07月12日

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

2021年02月19日

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

2020年12月29日

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

2020年08月26日

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

2020年08月12日

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

2020年07月20日

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

2020年05月20日

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

2020年02月09日

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

2019年08月20日

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

2019年07月05日

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

2019年06月03日

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

2018年11月14日

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

2018年10月09日

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

2018年07月16日

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

2018年07月02日

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

2018年07月02日

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

2018年06月28日

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

2018年04月09日

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

2018年03月29日

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

2018年02月27日

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

2017年11月07日

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

2017年11月07日

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

2017年10月14日

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

2017年10月14日

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

2017年02月13日

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

2017年02月11日

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

2017年02月08日

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

2017年02月08日

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

2017年02月06日

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

2017年02月05日

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

2017年02月04日

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