深挖一些html的知识

  当初学习html的时候，对一些知识不以为然，认为能会简单使用即可，但再次让我重新学习html的时候，对html背后深挖一些知识，让我在日常使用中着实提升我的代码开发效率。

行盒和块盒

  在现在w3c标准中将，行内元素，行元素称为行盒元素；块元素，块状元素称为块盒元素，
   包含关系
   before：块盒(块级)元素可以包含行盒(行级)元素，行盒(行级)元素不能包含块盒(块级)元素，a标签除外；
   after：元素包含关系由元素类别决定

1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素（ul>li, ol>li, dl>dt>dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素

语义化标签

  简述：标签语义化就是给某块内容用上最恰当合适的标签
常见的语义化标签

     <header></header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
     也适合对页面内部一组介绍性或导航性内容进行标记。
     <nav></nav>：标记导航，仅对文档中重要的链接群使用。
     html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。
     <main></main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

     <article></article>：包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器。
     article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

     <section></section>：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
     如果只是为了添加样式，请用div！

     <aside></aside>：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
      如果放在main内，应该与所在内容密切相关。

     <footer></footer>：页脚，只有当父级是body时，才是整个页面的页脚。

语义化标签对开发有什么优点(面试题)

1. 去掉或样式丢失的时候能让页面呈现清晰的结构
2. 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
3. 便于团队开发和维护
4. 方便其他设备解析（如屏幕阅读器，盲人阅读器，移动设备）以意义的方式渲染网页

盒模型详解

盒子的组成部分

1. 内容 content
   width、height ,设置的是盒子内容的高度、宽度
   内容盒：content-box
2. 填充/内边距 padding
   盒子边框到盒子内容的距离
   padding-left padding-right padding-top padding-bottom
   padding:简写属性
   上 右 下 左
   如果有一个没有，那么去找对边
   如果只有一个，四边都是相同值
   填充区 + 内容 = 填充盒 padding-box
3. 边框 border
   边框 = 边框样式 + 边框宽度 + 边框颜色
   border-style
   border-width
   border-color 边框 + 填充区 + 内容 = 边框盒 border-box
4. 外边距 margin
   边框到其他盒子的距离
   margin-top margin-left margin-right margin-bottom
   margin : 上 右 下 左

必考面试题
标准盒模型和怪异盒模型的区别
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
标准盒模型是按照W3C标准规范来书写的，通用于各个适应W3c标准浏览器中，
怪异模型是按照浏览器自己的标准来定义的，只适合符合自己浏览器规则来运行，其余的规则则不能运行怪异盒模