HTML&&CSS

一、HTML的新特性和语义化

概念:HTML5的语义化是指合理正确的使用语义化标签来创建页面的结构(也就是用正确的标签做正确的事情)

语义化标签:

1.header(用于定义文档的页眉部分,通常包含网页的标题、导航栏和其他重要信息)

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  
  <!-- 网页内容 -->
  
</body>
</html>

2.nav(用于定义文档的导航部分,通常包含网站的导航链接或菜单)

3.main(用于定义文档的主要内容部分,标记了网页的核心内容)

4.article(用于定义一个独立的、完整的、可独立分配的内容块,比如一篇新闻报道、博客文章或论坛帖子)

5.section(表示 HTML 文档中一个通用独立章节)

6.aside(表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框(call-out boxes))

7.footer(表示最近一个章节内容或者根节点(sectioning root)元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息)

语义化的优点:(1)在没有CSS样式的情况下,页面整体也会呈现出很好的结构效果。(2)代码的结构清晰易于阅读。(3)有利于开发和维护,方便其他设备解析(如屏幕阅读器)根据语义渲染网页。(4)有利于搜索引擎优化(SEO),搜索引擎会爬虫会根据不同标签来赋予不同的权重。

二、HTML5的新特性

(1)语义化标签(2)音频、视频处理API(audio、video)(3)canvas/webGL(4)拖拽释放(Drag and drop)API(5)history API(6)requestAnimationFrame(7)地理位置(Geolocation)API(8)webSocket(9)web存储localStorage、SessionStorage(10)表单控件,calender、date、time、email、url、search

三、渐进增强与优雅降级的理解和区别

渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果交互、追加功能达到更好的体验。

优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用CSS3的特性构建了一个应用,然后逐步针对各大浏览器进行hack使其可以在低版本的浏览器上正常浏览。

区别:广义上:其实要定义一个基准线,在此之上的增强叫做渐进增强,在此之下的兼容叫优雅降级。狭义上:渐进增强一般说的是使用CSS3技术,在不影响老浏览器的正常显示与使用情形下来增强体验,而优雅降级则是体现html标签的语义,以便在js/css的加载失败/被禁用时,也不影响用户的相应功能。