xgqfrms / html5

HTML 5 :heart: :rocket: 🎅 ❄ 🎄 🎁 🔀 ⛄ 🔔

HTML♥5

---

---

html5 code hunt

Bootstrap 101 Template

This is a file without a header

Entity Conversion Calculator

Custom CSS

Star Ratings With Very Little CSS

Javascript and CSS Entity Conversion Calculator

content:'\2606'; === ☆ === ☆;
content:'\2606'; === ★ === ★;
content:'\2665'; === ♥ === ♥;

## li:before {content:'\2665';}
CSS Value (Hex): content:'\2665';
JS Value (Hex): \u2666
HTML entity: ♥
character: ♥

First 5800 Numeric HTML Character Entities

Copy Paste Character

html5's Issues

input & invalid

input invalid css disabled sibling

https://stackoverflow.com/questions/49194701/applying-css-to-element-when-sibling-input-is-disabled

requestAnimationFrame & setTimeout

requestAnimationFrame & setTimeout

https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=requestAnimationFrame

picture

picture

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

https://www.w3schools.com/tags/tag_picture.asp

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

调整浏览器大小，以查看在不同视口大小下加载的图片的不同版本。 浏览器将查找媒体查询与用户当前视口宽度匹配的第一个source元素，并获取srcset属性中指定的图像。

img元素是图片声明块的最后一个子标签。 img元素用于为不支持picture元素的浏览器或没有匹配的源标签提供向后兼容性。

html5 download

html5 download & js

https://www.w3schools.com/TAGS/att_a_download.asp

<a href="/images/myw3schoolsimage.jpg" download="w3logo">

https://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file

https://developers.google.com/web/updates/2011/08/Downloading-resources-in-HTML5-a-download

template & slot

template & slot

Web Components All In One

Web Components All In One

HTML Template
Custom Element
Shadow DOM

https://www.cnblogs.com/xgqfrms/p/13606586.html

Layout & flexbox & grid

Layout & flexbox & grid

https://www.w3schools.com/html/html_layout.asp

https://www.w3schools.com/css/css3_flexbox.asp

demo

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2

media query

@media

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

components demo

demo

components demo

0. live example
1. HTML
2. CSS
3. JS

https://www.pluralsight.com/courses/html-fundamentals
https://www.codecademy.com/courses/html-one-o-one/0/1
https://www.pluralsight.com/courses/html5-fundamentals-2e
https://developers.google.com/web/fundamentals/
https://github.com/xgqfrms/WebFundamentals

HTML5 Drag and Drop

https://codepen.io/xgqfrms/pen/dVzMmm

mobile touch & js touch events

mobile touch & js touch events

https://cdn.xgqfrms.xyz/touch/hammer.js

https://cdn.xgqfrms.xyz/touch/hammer.min.js

xgqfrms/xgqfrms#30 (comment)

HTML5 custom element tag

HTML5 custom element tag

https://developers.google.com/web/fundamentals/web-components/customelements

https://www.html5rocks.com/en/tutorials/webcomponents/customelements/
https://blog.teamtreehouse.com/create-custom-html-elements-2

https://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5

https://www.w3.org/TR/custom-elements/

Web Components

https://github.com/w3c/webcomponents/

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

https://www.webcomponents.org/

https://www.webcomponents.org/polyfills/

https://css-tricks.com/creating-a-custom-element-from-scratch/

https://dev.to/jfbrennan/custom-html-tags-4788

HTML5 & Object

HTML5 & Object

customize element ???

https://davidwalsh.name/typescript

video

video

https://www.w3schools.com/html/html5_video.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

    <video width="400" height="300" controls>
        <source src="https://cdn.xgqfrms.xyz/apple/ipadpro-hidden-bluetooth-bug.mp4" type="video/mp4">
        <source src="https://cdn.xgqfrms.xyz/apple/ipadpro-hidden-bluetooth-bug.ogg" type="video/ogg">
        <p class="video-fallback">Your browser does not support the video tag.</p>
    </video>

https://www.w3schools.com/css/css_rwd_videos.asp

video {
  width: 100%;
  height: auto;
}

figure

figure

CSS3 3D flip cards

CSS3 3D flip cards

https://css3playground.com/3d-flip-cards/

https://davidwalsh.name/css-flip

---

https://www.cnblogs.com/xgqfrms/p/9127423.html

HTML5 DnD

HTML5 DnD

https://codepen.io/xgqfrms/pen/wxyrjv

https://codepen.io/webgeeker/pen/mjoWqw

html5 new features

html5 new features

https://gist.github.com/xgqfrms-GitHub/1ba83e991eb358338151f54e5805ac5d

HashChangeEvent()

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onhashchange

https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange

https://javascript.xgqfrms.xyz/html5-history-api.html#pushState

html5-history-api

http://javascript.ruanyifeng.com/bom/history.html#toc3

https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

CSS Sticky Header

CSS Sticky Header

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

#one {
  position: sticky; 
  top: 10px;
}

https://www.w3schools.com/howto/howto_js_sticky_header.asp

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

demos

https://codepen.io/webgeeker/pen/bGNbmMz

https://codepen.io/webgeeker/pen/ZEYzqRG