2020-04-13发表2020-04-14更新learning / HTML&&CSS3 分钟读完 (大约412个字)

秒杀活动

秒杀活动特点

“限时限量”、“价格极地”、“几秒内就被抢光”

秒杀活动带来的问题：
1、对现有网站业务的冲击
2、高并发情况以及数据库负载
3、突然增加的网路和服务器宽带
4、直接下单
5、防止机器秒杀

解决方案
1、秒杀系统单独部署，如果有需要甚至是独立的域名，根网站完全隔离开，除了底层数据库中某些数据，也就是从 Web 服务器、数据库服务器等都会有单独的一套。
2、在没有开始秒杀之前，把商品的展示页面做静态化，也就是简单的 HTML 页面不做任何业务逻辑的处理，也不访问数据库，就只是很简单的展示，等真正需要秒杀的时候再打开另外一个页面，这个页面有业务逻辑，也会有可能访问数据库的。在秒杀活动之前大多数用户会不停的刷新页面。
3、可以根运营商购买或者是租借网络服务器带宽，将秒杀商品的静态页面缓存到 CDN，租借 CDN。
4、避免让用户在秒杀活动前知道秒杀活动下单的接口或者页面。对下单页面添加动态验证参数，并且该页面是在秒杀开始前无法访问到的。
5、ip 的阻止，一个 ip 可以访问几次，验证码。

2020-02-15发表2020-04-10更新learning / HTML&&CSS19 分钟读完 (大约2842个字)

千锋HTML5高级教程-移动端WebApp及混合App开发

P1 移动 m 站开发

知识点概述

1.本地存储+多媒体
2.touch.js（移动端触摸事件库） + swiper.js（移动端触摸滑动插件） + animate.css（CSS3 动画库） + iScroll.js（移动端区域滚动插件）
3.Gulp + webpack 前端工程化 + Sass 开发 UI 核心函数
4.嵌入地图与地理定位（H5 Navigator.geolocation）
5.Touch 端项目实战开发

2019-12-26发表2020-08-23更新learning / HTML&&CSS5 分钟读完 (大约687个字)

HTML5 与 CSS3 基础教程（第8版）

前言

W3C 与 WHATWG
如果你想仔细查看这些规范（推荐你这样做），可访问下面列出的这些规范最新版本的网址。

HTML5（W3C）
http://www.w3.org/TR/html5/
HTML5.1（W3C）
http://www.w3.org/TR/html51/
开发中的 HTML 标准（WHATWG）
http://www.whatwg.org/specs/web-apps/current-work/multipage/

CSS 的规范
http:// www.w3.org/standards/techs/css#w3c_all。

HTML4 和 HTML5 的区别
http:// www.w3.org/TR/html5-diff

Doctype
HTML语法要求指定doctype，以确保浏览器以标准模式呈现页面。该文档类型没有其他用途。[DOCTYPE]
HTML语法的doctype声明<!DOCTYPE html>不区分大小写。HTML早期版本中的文档类型更长，因为HTML语言基于SGML，因此需要引用DTD。情况不再如此，仅需要doctype才能为使用HTML语法编写的文档启用标准模式。浏览器已经为此执行了操作 <!DOCTYPE html>。
为了支持无法生成首选的简短doctype的旧式标记生成器，<!DOCTYPE html SYSTEM "about:legacy-compat">HTML语法中允许使用doctype 。
HTML语法中也允许（但不鼓励使用）用于HTML 4.0，HTML 4.01，XHTML 1.0以及XHTML 1.1的严格doctype。
在XML语法中，可以使用任何doctype声明，也可以将其完全省略。具有XML媒体类型的文档始终以标准模式处理。

CSS3 变换、动画和过渡效果。要了解更多信息，参见 www.htmlcssvqs.com/resources/。
CSS3 中新的布局模型，如 FlexBox、Grid 等。这些技术致力于改变我们对页面进行布局的方法（前提是规范进一步发展，浏览器的支持程度更高一些）。参见 Zoe Mickley Gillenwater 的演示文档（www. slideshare.net/zomigi/css3-layout）和 Peter Gasston 的文章（www.netmagazine.com/ features/pros-guide-css-layouts）。

<header class="masthead" role="banner">
  ...
  <nav role="navigation">
    <ul class="nav-main">
      <li><a href="/" class="current- ➝ page">Home</a></li>
      <li><a href="/about/">About</a> ➝</li>
      <li><a href="/contact/">Contact ➝ </a></li>
    </ul>
  </nav>
  ...
</header>

Bootstrap 上

1
2
3

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

html 里面的 role 本质上是增强语义性，当现有的 HTML 标签不能充分表达语义性的时候，就可以借助 role 来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。
role 的作用是描述一个非标准的 tag 的实际作用。比如用 div 做 button，那么设置 div 的 role=“button”，辅助工具就可以认出这实际上是个 button。
（这段解释来自于https://blog.csdn.net/mxk4869/article/details/88944927）

本书主页：www.htmlcssvqs.com/
16种基本颜色