HTML5 introduces more descriptive HTML tags. These include main, header, footer, nav, video, article, section

make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility.

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

https://www.w3school.com.cn/html5/html_5_intro.asp

placeholder

division element, is a general purpose container

CSS

行内样式CSS Selectors、内部样式表、外部样式表（链接式、导入式）

优先级：行内样式>内部样式>外部样式(后两者是就近原则)

Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important

Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important

Never 永远不要在全站范围的 css 上使用 !important

Never 永远不要在你的插件中使用 !important

id 选择器

 类选择器

 伪类选择器

 属性选择器

 伪元素选择器

 通配选择器

 标签选择器

CSS 优先规则：

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

HTML:

<div class="content-class" id="content-id"></div>

CSS:

#content-id {    color: red;}.

content-class {    color: blue;}

div {    color: grey;}

Create a custom CSS Variable

CSS property属性一览

https://www.cnblogs.com/tufujie/p/4994285.html

---

a custom CSS Variable "--"

background: black;

background:var(--penguin-skin,black);

By creating your variables in :root, they will be available globally and can be accessed from any other selector in the style sheet.

display:

The <div> element is a block-level element.

vs inline elements: <span> <a> <img>

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

Display: none; vs visibility: hidden;