在这篇文章中，我们将带领您了解HTML–HTTP304NotModified响应是否包含缓存控制头？的全貌，包括http响应内容的相关情况。同时，我们还将为您介绍有关005-优化web请求一-gzip

在这篇文章中，我们将带领您了解HTML – HTTP 304 Not Modified响应是否包含缓存控制头？的全貌，包括http响应内容的相关情况。同时，我们还将为您介绍有关005-优化web请求一-gzip压缩、http缓存控制和缓存校验[Pragma、Expires、Cache-Control、max-age、Last-Modified、用户刷新访问、避免过度304]、304 Not Modified、304 not modified 和200 from cache 的区别、304 Not Modified 简述的知识，以帮助您更好地理解这个主题。

• HTML – HTTP 304 Not Modified响应是否包含缓存控制头？（http响应内容）
• 005-优化web请求一-gzip压缩、http缓存控制和缓存校验[Pragma、Expires、Cache-Control、max-age、Last-Modified、用户刷新访问、避免过度304]
• 304 Not Modified
• 304 not modified 和200 from cache 的区别
• 304 Not Modified 简述

HTML – HTTP 304 Not Modified响应是否包含缓存控制头？（http响应内容）

Response Headers
    Server  Apache-Coyote/1.1
    Date    Mon,19 Oct 2009 09:04:04 GMT
    Expires Mon,19 Oct 2009 09:06:05 GMT
    Cache-Control   public,max-age=120
    Etag    image_a70703fb393a60b6da346c112715a0abd54a3236
    Content-disposition inline;filename="binary-216-420"
    Content-Type    image/jpg;charset=UTF-8
    Content-Length  4719

Response Headers
    Server  Apache-Coyote/1.1
    Date    Mon,19 Oct 2009 09:06:13 GMT

Request Headers
    Host    localhost:8080
    User-Agent  Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
    Accept  image/png,image/*;q=0.8,*/*;q=0.5
    Accept-Language en-us,no;q=0.8,sq;q=0.7,en;q=0.5,sv;q=0.3,nn;q=0.2
    Accept-Encoding gzip,deflate
    Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
    Keep-Alive  300
    Connection  keep-alive
    Referer http://localhost:8080/cms/site/0/en/home
    Cookie  JSESSIONID=768ABBE1A3BFABE3B535900233330650; versionsCssdisplayState=block; iceInfo=iceOn:false,activePortletKey:,icePagePanelX:1722,icePagePanelY:3
    if-none-match   image_a70703fb393a60b6da346c112715a0abd54a3236

005-优化web请求一-gzip压缩、http缓存控制和缓存校验[Pragma、Expires、Cache-Control、max-age、Last-Modified、用户刷新访问、避免过度304]

　　优化Web应用的典型技术：缓存控制头信息、Gzip、应用缓存、ETag、反应型技术【异步方法调用和WebSocket】

一、模板缓存

spring.thymeleaf.cache=true
spring.messages.cache-duration=

二、Gzip压缩

　　Gzip是一种能够被浏览器直接理解的压缩算法。服务器会提供压缩响应，会耗一些cpu，但是减少带宽

　　GZIP压缩是一个经常被用到的WEB性能优化的技巧，它主要是对页面代码，CSS，Javascript，PHP等文件进行压缩，而且在压缩的前后，文件的大小会有明显的改变，从而达到网站访问加速的目的。

　　GZIP压缩时，WEB服务器与浏览器之间的协商过程如下：

1、首先浏览器请求某个URL地址，并在请求的开始部分头(head) 设置属性accept-encoding值为gzip、deflate，表明浏览器支持gzip和deflate这两种压缩方式（事实上deflate也是使用GZIP压缩协议，在之后的内容之我们会介绍二者之间的区别）；

2、WEB服务器接收到请求后判断浏览器是否支持GZIP压缩，如果支持就传送压缩后的响应内容，否则传送不经过压缩的内容；

3、浏览器获取响应内容后，判断内容是否被压缩，如果是压缩文件则解压缩，然后显示响应页面的内容。

在Springboot中配置gzip

# 是否启用压缩 默认false
server.compression.enabled=true
# 默认"text/html", "text/xml", "text/plain","text/css", "text/javascript", "application/javascript", "application/json",
#            "application/xml"
server.compression.mime-types=text/html,text/xml,text/plain,text/css,text/javascript,application/javascript\
  ,application/json,
#content-length 在压缩启用后。返回数据多大开始启用gzip，默认2048 为了测试添加为1
server.compression.min-response-size=1

测试1、未开启压缩

# 是否启用压缩 默认false
server.compression.enabled=false

客户端请求头

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8

服务端响应

Content-Length:60973
Content-Type:text/html;charset=UTF-8
Date:Wed, 30 Jan 2019 08:19:19 GMT

测试2、开启压缩

# 是否启用压缩 默认false
server.compression.enabled=true
#content-length 在压缩启用后。返回数据多大开始启用gzip，默认2048 为了测试添加为1
server.compression.min-response-size=1

客户端请求头不变

服务端响应

Content-Encoding:gzip
Content-Type:text/html;charset=UTF-8
Date:Wed, 30 Jan 2019 08:20:50 GMT
Transfer-Encoding:chunked
Vary:Accept-Encoding

三、缓存控制和缓存校验

3.1、使用chrome的开发者模式

首先浏览器请求某个URL地址，并在请求的开始部分头(head) 设置属性accept-encoding值为gzip、deflate，表明浏览器支持gzip和def

　　第一部分General是概要，包含请求地址，请求方式，状态码，服务器地址以及Referrer 策略。
　　第二部分是应答头部，是服务器返回的。
　　第三部分是请求头部，是客户端发送的。

　　RFC2616规定的47种http报文首部字段中与缓存相关的字段：

1、通用首部字段

2、请求首部字段

3、响应首部字段

4、实体首部字段

3.2、Http 1.0 缓存控制方式

　　在 http1.0 时代，给客户端设定缓存方式可通过两个字段——Pragma和Expires来规范。虽然这两个字段早可抛弃，但为了做http协议的向下兼容，你还是可以看到很多网站依旧会带上这两个字段。例如在访问个别网站的时候，通过浏览器调试工具可以看到部分HTTP响应是包含Expires头部的。

3.2.1、Pragma-禁用缓存

　　当该字段值为no-cache的时候（事实上现在RFC中也仅标明该可选值），会知会客户端不要对该资源读缓存，即每次都得向服务器发一次请求才行。

3.2.2、Expires-启用缓存和缓存时间

　　有了Pragma来禁用缓存，自然也需要有个东西来启用缓存和定义缓存时间，对http1.0而言，Expires就是做这件事的首部字段。 Expires的值对应一个GMT（格林尼治时间），比如Mon, 22 Jul 2002 11:12:01 GMT来告诉浏览器资源缓存过期时间，如果还没过该时间点则不发请求。　

　　需要注意的是，响应报文中Expires所定义的缓存时间是相对服务器上的时间而言的，其定义的是资源“失效时刻”，如果客户端上的时间跟服务器上的时间不一致（特别是用户修改了自己电脑的系统时间），那缓存时间可能就没意义了。　

3.3、Http 1.1 缓存控制

　　缓存控制由服务器端发送一组HTTP头信息，他将会控制用户浏览器如何缓存资源。

　　如果一个报文中同时出现Pragma和Cache-Control时，以Pragma为准。同时出现Cache-Control和Expires时，以Cache-Control为准。

　　即优先级从高到低是 Pragma -> Cache-Control -> Expires

3.3.1、Cache-Control

1、前提注意：

　　符合缓存策略时，服务器不会发送新的资源，但不是说客户端和服务器就没有会话了，客户端还是会发请求到服务器的。
　　Cache-Control除了在响应中使用，在请求中也可以使用。我们用开发者工具来模拟下请求时带上Cache-Control：勾选Disable cache，刷新页面，可以看到Request Headers中有个字段Cache-Control: no-cache。
　　同时在Response Headers中也能到Cache-Control字段，它的值是must-revalidate，这是服务端设置的。

　　Cache-Control也是一个通用首部字段，这意味着它能分别在请求报文和响应报文中使用。在RFC中规范了 Cache-Control 的格式为：

"Cache-Control" ":" cache-directive

2、Http Status 304 说明

　　Http status 304 当一个客户端（通常是浏览器）向web服务器发送一个请求，如果web服务器返回304响应，他不包含任何响应的内容，只是提示客户端缓存的内容是最新的，可以直接使用。这种方法可以节省带宽，避免重复响应。

3、作为请求首部时，cache-directive 的可选值有：

4、作为响应首部时，cache-directive 的可选值有：

5、no-store优先级最高

　　在Cache-Control 中，这些值可以自由组合，多个值如果冲突时，也是有优先级的，而no-store优先级最高。本地不保存，每次都需要服务器发送资源。

6、public和private的选择

　　如果你用了CDN，你需要关注下这个值。CDN厂商一般会要求cache-control的值为public，提升缓存命中率。如果你的缓存命中率很低，而访问量很大的话，可以看下是不是设置了private，no-cache这类的值。如果定义了max-age，可以不用再定义public，它们的意义是一样的。

7、max-age

　　max-age：用来指定引用文档过期时间【如页面内引用的js文件等】。　　　　

　　　　max-age>0 时 页面内引用的资源直接从游览器缓存中 提取，此时http status是304，无论被引用的资源服务器端是否改变，可以查看

　　　　　　示例：第一次请求，test.html,test.js的http status均是200

　　　　　　第二次请求，test.html的http status是304，test.js[引用资源]的http status是200，但是数据来自缓存

　　　　　　第三次请求，修改服务端js，后请求，因为max-age=30000，test.html的http status是304，test.js[引用资源]的http status是200，但是数据来自缓存

　　　　max-age<=0 时 页面或页面内引用的资源都会向server发送http请求，请求确认该资源是否有修改 有的话 返回200 ,无的话返回304。

　　　　　　第一次请求，test.html,test.js的http status均是200

　　　　　　第二次请求，test.html,test.js的http status均是304

　　　　　　第三次请求，修改远端js，客户端重新获取，test.html的http status是304，test.js[引用资源]的http status是200，数据来自服务端，size不是from cache

　　　　注意：无论max-age什么值，单独请求回车刷新是会发请求的 如果服务器端的文件没有产生变化，那么会返回304，比如单独访问 一个js

3.4、缓存校验

　　在缓存中，我们需要一个机制来验证缓存是否有效。比如服务器的资源更新了，客户端需要及时刷新缓存；又或者客户端的资源过了有效期，但服务器上的资源还是旧的，此时并不需要重新发送。缓存校验就是用来解决这些问题的，在http 1.1 中，我们主要关注下Last-Modified 和 etag 这两个字段。

　　HTTP提供了自带的缓存框架。你需要做的是在返回的时候加入一些返回头信息，在接受输入的时候加入输入验证。基本两种方法：

　　　ETag：当生成请求的时候，在HTTP头里面加入ETag，其中包含请求的校验和和哈希值，这个值和在输入变化的时候也应该变化。如果输入的HTTP请求包含IF-NONE-MATCH头以及一个ETag值，那么API应该返回304 not modified状态码，而不是常规的输出结果。

　　　Last-Modified：和etag一样，只是多了一个时间戳。返回头里的Last-Modified：包含了 RFC 1123 时间戳，它和IF-MODIFIED-SINCE一致。HTTP规范里面有三种date格式，服务器应该都能处理。

1、Last-Modified

　　服务端在返回资源时，会将该资源的最后更改时间通过Last-Modified字段返回给客户端。客户端下次请求时通过If-Modified-Since或者If-Unmodified-Since带上Last-Modified，服务端检查该时间是否与服务器的最后修改时间一致：如果一致，则返回304状态码，不返回资源；如果不一致则返回200和修改后的资源，并带上新的时间。

　　If-Modified-Since和If-Unmodified-Since的区别是：
　　　　If-Modified-Since：告诉服务器如果时间一致，返回状态码304
　　　　If-Unmodified-Since：告诉服务器如果时间不一致，返回状态码412

2、etag

　　单纯的以修改时间来判断还是有缺陷，比如文件的最后修改时间变了，但内容没变。对于这样的情况，我们可以使用etag来处理。
　　etag的方式是这样：服务器通过某个算法对资源进行计算，取得一串值(类似于文件的md5值)，之后将该值通过etag返回给客户端，客户端下次请求时通过If-None-Match或If-Match带上该值，服务器对该值进行对比校验：如果一致则不要返回资源。

　　If-None-Match和If-Match的区别是：
　　　　If-None-Match：告诉服务器如果一致，返回状态码304，不一致则返回资源
　　　　If-Match：告诉服务器如果不一致，返回状态码412

3.5、小结

　　1、缓存开关是： pragma， cache-control。

　　2、缓存校验有：Expires，Last-Modified，etag。需要兼容HTTP1.0的时候需要使用Expires，不然可以考虑直接使用Cache-Control。需要处理一秒内多次修改的情况，或者其他Last-Modified处理不了的情况，才使用ETag，否则使用Last-Modified。

　　3、缓存头部对比

　　3、从状态码的角度来看，它们的关系如下图：

　　4、cache-control的各个值关系如下图

　　原文参看地址：https://imweb.io/topic/5795dcb6fb312541492eda8c

3.6、用户刷新访问行为

1、在URI输入栏中输入然后回车/通过书签访问

　　可以看到返回响应码是 200 OK (from cache)，浏览器发现该资源已经缓存了而且没有过期（通过Expires头部或者Cache-Control头部），没有跟服务器确认，而是直接使用了浏览器缓存的内容。其中响应内容和之前的响应内容一模一样，例如其中的Date时间是上一次响应的时间。

2、F5/点击工具栏中的刷新按钮/右键菜单重新加载

　　F5的作用和直接在URI输入栏中输入然后回车是不一样的，F5会让浏览器无论如何都发一个HTTP Request给Server，即使先前的响应中有Expires头部。

　　其中Cache-Control是Chrome强制加上的，而If-Modified-Since是因为获取该资源的时候包含了Last-Modified头部，浏览器会使用If-Modified-Since头部信息重新发送该时间以确认资源是否需要重新发送。 实际上Server没有修改这个index.css文件，所以返回了一个304(Not Modified)，这样的响应信息很小，所消耗的route-trip不多，网页很快就刷新了。

3、Ctl+F5

　　Ctrl+F5是彻底的从Server拿一份新的资源过来，所以不光要发送HTTP request给Server，而且这个请求里面连If-Modified-Since/If-None-Match都没有，这样Server不能返回304，而是把整个资源原原本本地返回一份，这样，Ctrl+F5引发的传输时间变长了，自然网页Refresh的也慢一些。我们可以看到该操作返回了200，并刷新了相关的缓存控制时间。

　　实际上，为了保证拿到的是从Server上最新的，Ctrl+F5不只是去掉了If-Modified-Since/If-None-Match，还需要添加一些HTTP Headers。按照HTTP/1.1协议，Cache不光只是存在Browser终端，从Browser到Server之间的中间节点(比如Proxy)也可能扮演Cache的作用，为了防止获得的只是这些中间节点的Cache，需要告诉他们，别用自己的Cache敷衍我，往Upstream的节点要一个最新的copy吧。
　　在Chrome 51 中会包含两个头部信息， 作用就是让中间的Cache对这个请求失效，这样返回的绝对是新鲜的资源。

Cache-Control: no-cache
Pragma: no-cache

3.7、避免过度304

　　可以通过标识文件版本名、加长缓存时间的方式来减少304响应。

　　如果Expires和Cache-Control时间过长长，导致用户无法得到其最近的内容。

　　把服务侧ETag的那一套理论搬到了前端来使用。 页面的静态资源以版本形式发布，常用的方法是在文件名或参数带上一串md5或时间标记符：

https://hm.baidu.com/hm.js?e23800c454aa573c0ccb16b52665ac26
http://tb1.bdstatic.com/tb/_/tbean_safe_ajax_94e7ca2.js
http://img1.gtimg.com/ninja/2/2016/04/ninja145972803357449.jpg

　　那么在文件没有变动的时候，浏览器不用发起请求直接可以使用缓存文件；而在文件有变化的时候，由于文件版本号的变更，导致文件名变化，请求的url变了，自然文件就更新了。这样能确保客户端能及时从服务器收取到新修改的文件。通过这样的处理，增长了静态资源，特别是图片资源的缓存时间，避免该资源很快过期，客户端频繁向服务端发起资源请求，服务器再返回304响应的情况（有Last-Modified/Etag）。

304 Not Modified

今天在用chrome浏览淘宝页面的时候，发现很多来自淘宝图片HTTP状态码是 304 Not Modified

到百度搜索了一下，明白了 304状态的含义（以下绿色内容来自网络）：

304 Not Modified：客户端有缓冲的文件并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

如果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last Modified 。因此，如果请求中包含 If Modified Since，就说明已经有缓存在客户端。只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。对于静态文件，例如：CSS、图片，服务器会自动完成 Last Modified 和 If Modified Since 的比较，完成缓存或者更新。但是对于动态页面，就是动态产生的页面，往往没有包含 Last Modified 信息，这样浏览器、网关等都不会做缓存，也就是在每次请求的时候都完成一个 200 的请求。

我突然想起我所写的图片服务器没有实现HTTP 304 缓存功能。

这个 304 状态一般主要在用户刷新页面(F5键)的时候触发.
当用户在刷新页面的时候，因为原来的页面里的很多图片已经缓存过，客户端的浏览器已经记录了图片的最后更新时间(Last Mod)，所以在用户刷新页面的时候，会向服务器提交一个字段：If-Modified-Since: Wed, 08 Sep 2010 21:35:06 GMT


这个时候，服务器端的程序先取得这个字段的值，然后与服务器上的图片最后修改时间对比，如果相同，就直接返回 304 Not Modified ，然后停止。这样就不用把图片重新传输到客户端，达到节省带宽的目的。

关于 Cache-Control: max-age=秒 和 Expires

Expires = 时间，HTTP 1.0 版本，缓存的载止时间，允许客户端在这个时间之前不去检查（发请求）
max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒。
如果max-age和同时存在，则被Cache-Control的max-age覆盖。

Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大，那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代。

今天我还发现一个小的问题，是关于客户端的日期格式：

Wed, 08 Sep 2010 21:35:06 GMT 与 Wed, 8 Sep 2010 21:35:06 GMT

注意上面的格式，一个是8的前面有个前置的0，一个没有。

我发现firefox和chrome对这个日期格式处理一致，ie有点不同。
最终我修改了服务器端的程序：
//HTTP 日期格式: Wed, 08 Sep 2010 21:35:06 GMT
DateFormat dateFormatGMT = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss z", Locale.ENGLISH); //时间格式 

304 not modified 和200 from cache 的区别

304 not modified 还需要向服务器发送请求，验证资源是否有变化 200 from cache 直接从缓存读取资源，不向服务器发送请求

http://stackoverflow.com/questions/1665082/http-status-code-200-cache-vs-status-code-304

304 Not Modified 简述

在客户端向服务端发送http请求时，若返回状态码为304 Not Modified 则表明此次请求为条件请求。在请求头中有两个请求参数：If-Modified-Since 和 If-None-Match。

当客户端缓存了目标资源但不确定该缓存资源是否是最新版本的时候, 就会发送一个条件请求。在进行条件请求时,客户端会提供给服务器一个If-Modified-Since请求头,其值为服务器上次返回响应头中Last-Modified值,还会提供一个If-None-Match请求头,值为服务器上次返回的ETag响应头的值。

服务器会读取到这两个请求头中的值,判断出客户端缓存的资源是否是最新的,如果是的话,服务器就会返回HTTP/304 Not Modified响应头, 但没有响应体.客户端收到304响应后,就会从本地缓存中读取对应的资源。 所以：当访问资源出现304访问的情况下其实就是先在本地缓存了访问的资源。

另一种情况是,如果服务器认为客户端缓存的资源已经过期了,那么服务器就会返回HTTP/200 OK响应,响应体就是该资源当前最新的内容.客户端收到200响应后,就会用新的响应体覆盖掉旧的缓存资源.只有在客户端缓存了对应资源且该资源的响应头中包含了Last-Modified或ETag的情况下,才可能发送条件请求.如果这两个头都不存在,则必须无条件(unconditionally)请求该资源,服务器也就必须返回完整的资源数据.另外，有时候我们浏览器调试的时候不希望本地缓存，可以设置取消缓存即可。

如果选中了no cache,则请求资源时，请求头中的Cache-Control为no-cache，表明不使用缓存，则会直接获取服务器资源。另外，若没选中no cache，Cache-Control有二种情况：
1、max-age>0 时直接从游览器缓存中提取
2、max-age<=0 时向服务器发送http请求,该资源是否有修改有的话返回200 ,无的话返回304.

本文出处：https://blog.csdn.net/franknotbad/article/details/79399809

关于HTML – HTTP 304 Not Modified响应是否包含缓存控制头？和http响应内容的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于005-优化web请求一-gzip压缩、http缓存控制和缓存校验[Pragma、Expires、Cache-Control、max-age、Last-Modified、用户刷新访问、避免过度304]、304 Not Modified、304 not modified 和200 from cache 的区别、304 Not Modified 简述等相关内容，可以在本站寻找。

在本文中，我们将带你了解html – 如何使用Bootstrap CDN？在这篇文章中，我们将为您详细介绍html – 如何使用Bootstrap CDN？的方方面面，并解答html中bootstrap常见的疑惑，同时我们还将给您一些技巧，以帮助您实现更有效的bootstrap-4 – 如何使用CDN库安装和使用带有bootstrap 4 beta的open-iconic？、html – a：悬停不起作用,使用bootstrap、html – Bootstrap CDN未加载、html – Border无法使用bootstrap 4。

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

<html>
<div>
<div>
<ahref="#">Matt's Homepage</a>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="http://www.mattydb.com">Website</a></li>
  <li><a href="http://www.twitter.com/akkatracker">Twitter</a></li>
</ul>
</div>
</div>
<div><a href="http://www.mattydb.com">Click Here to Visit my Blog</a>  
</div>              
</html>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
      rel="stylesheet">

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
      rel="stylesheet">

<!-- Bootstrap 4.0 Beta -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha256-m/h/cUDAhf6/iBRixTbuc8+Rg2cIETQtPcH9D3p2Kg0=" crossorigin="anonymous" />
<!-- open-iconic-bootstrap (icon set for bootstrap) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />

<spantitle="person" aria-hidden="true"></span>

<!-- Bootstrap 4.0 Beta -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha256-m/h/cUDAhf6/iBRixTbuc8+Rg2cIETQtPcH9D3p2Kg0=" crossorigin="anonymous" />
<!-- open-iconic-bootstrap (icon set for bootstrap) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />

<spantitle="person" aria-hidden="true"></span>

<nav>
  <div>
    <ulrole="tablist">
        <li><a href="#">Home</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">About</a></li>        
    </ul>
  </div>
</nav>

ul>li>a {
    color: black;
    padding: 15px;
}

ul>li>a:hover {
    background-color: #B0B0B0;
    color: red;
}

.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus {
  color: #333;
  background-color: transparent;
}

.navbar-default .navbar-nav>li>a:hover {
  background-color: #B0B0B0;
  color: red;
}

<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </head>
    <body>
        <div>
            
            <h2> SAMPLE DATA FOR RENDERING </h2>    
            <blockquote>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum. - Lorem Ipsum</blockquote>

            
        </div>
       
        <div>
            <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  </p><br>
            <button> Submit </button>
        </div>
        
    </body>
</html>