H5基础知识总结

定义

Html5

HTML5 是定义 HTML 标准的最新的版本。 该术语表示两个不同的概念：
	它是一个新版本的HTML语言，具有新的元素，属性和行为，
	它有更大的技术集，允许更多样化和强大的网站和应用程序。
			这个集合有时称为HTML5和朋友，通常缩写为HTML5。

	HTML5     约等于     HTML + CSS + JS

Html5优势

跨平台:唯一一个通吃PC MAC Iphone Android等主流平台的跨平台语言
快速迭代
降低成本
导流入口多
分发效率高

基础知识

1. html5文件前面的是告诉浏览器以标准模式进行页面渲染，没有则浏览器以怪异模式进行页面渲染，document.compatMode可以查看浏览器渲染页面的模式：BackCompat：标准兼容模式未开启（怪异模式）；CSS1Compat：标准兼容模式已开启（标准模式）

2. 语义化标签：

• 语义化的好处
  HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签
  这种语义化的特性提升了网页的质量和语义
  对搜索引擎更加的友好
  他们这些标签功能就是代替

  功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外； https://gsnedders.html5.org/outliner/

• hgroup元素代表 网页 或 section 的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

  
      
  HTML 5
      
  这是一篇介绍HTML 5语义化标签和更简洁的结构
  
  

  hgroup使用注意：
  如果只需要一个h1-h6标签就不用hgroup
  如果有连续多个h1-h6标签就用hgroup
  如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

• header 元素代表 网页 或 section 的页眉。
  通常包含h1-h6元素或hgroup

  
      
  
          
  网站标题
          
  网站副标题
      
  
  

  header使用注意：
  可以是“网页”或任意“section”的头部部分
  没有个数限制。
  如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

• nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

  
      
  
          
  HTML 5
          
  CSS3
          
  JavaScript
      
  
  

  nav使用注意：
  用在整个页面主要导航部分上，不合适就不要用nav元素；

• section元素代表文档中的 节 或 段，段可以是指一篇文章里按照主题的分段；节可以是指一个页面里的分组。

  
      
  section是啥？
      
  
          
  关于section
          
  section的介绍
          
  
              
  关于其他
              
  关于其他section的介绍
          
      
  
  

  section使用注意：
  section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。
  article、nav、aside可以理解为特殊的section，
  所以如果可以用article、nav、aside就不要用section，没实际意义的就用div

• article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容

  
      
  一篇文章
      
  文章内容..
      
  
          
  版权：html5jscss网所属，作者：damu
      
  
  

  article使用注意：
  独立文章：用article
  单独的模块：用section
  没有语义的：用div

• aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等

  在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

  
      
  内容
      
  
          
  作者简介
          
  小北，前端一枚
      
  
  

  aside使用总结：
  aside在article内表示主要内容的附属信息，
  在article之外则可做侧边栏
  如果是广告，其他日志链接或者其他分类导航也可以用

• footer元素代表 网页 或 section 的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

  
      COPYRIGHT@damu
  
  

  footer使用注意：
  可以是 网页 或任意 section 的底部部分；
  没有个数限制，除了包裹的内容不一样，其他跟header类似。

3. html5标签属性：

classlist
dataset
contenteditable="true"

• classlist：相对于class的property(className)
  add
  remove
  toggle

• dataset:自定义属性（限制 data-x-y）的property

• 可编辑：contenteditable=“true”，值只能为’true’，可让元素的文本节点可编辑

   	
  	
  		
  			
  			
  			
  		
  		
  			
  
  				nsjknfksnfjsnfksnfjsnfksnf