HTML5&&CSS3知识点总结(1)

---

一、块级元素和行内元素的区别

• 1.块级元素可以独占一行，而行内元素需要和其他元素共享一行；
• 2.块级元素可以直接设置宽高，而行内元素不能直接设置宽高，需要结合CSS的display属性来设置宽高。
• 3.块级元素可以嵌套块级与行内元素，而行内元素只能包含行内元素。
• 块级元素：div p h1~h6 table address form html body ul li ol dl dt dd
  行内元素：span a i img button input b strong
  知名的空元素:img input

二、语义化标签

   首先了解什么是语义化标签？为什么要使用语义化标签？
    ① 语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
       有伙伴会认为，我用DIV+CSS也能做出来一样的效果 ,虽然单纯看实现效果，两者并没有什么区别。但是页面不止是给人看的，机器也要看爬虫也要看，网页结构更清晰方便开发维护。特别是在网络或其他原因页面样式文件丢失的时候，良好语义结构组成的页面，肯定比全是div的页面对用户更友好。
    ② 语义化的特点:
        ● 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。
        ● 有利于不同设备的解析(比如屏幕阅读器，盲人阅读器等)
        ● 有利于构建清晰的机构，有利于团队的开发、维护

三、html5有哪些新增特性？

• 语义化标签：header article footer section nav
• 表单控件：number date time email url search
• 音频和视频：audio video
• 本地离线存储：localStorage sessionStorage cookies
• 画布：canvas

**拓展：**
    1.localStorage：永久存储会话数据，除非removeItem，否则即使浏览器关闭会话数据也一直存在 ;
   2.sessionStorage：临时保存，会话数据只保存到浏览器关闭 ;
   3.cookie：可自定义会话数据的失效时间，一般默认浏览器关闭之后失效;

四、CSS3新增伪类有那些?

    ● p:first-of-type 选择属于其父元素的首个元素
    ● p:last-of-type 选择属于其父元素的最后元素
    ● p:only-of-type 选择属于其父元素唯一的元素
    ● p:only-child 选择属于其父元素的唯一子元素
    ● p:nth-child(2) 选择属于其父元素的第二个子元素
    ● :enabled :disabled 表单控件的禁用状态。
    ● :checked 单选框或复选框被选中。

五、css水平垂直居中方式

• 1.块级元素：
  （1）margin移动 top 、left；
  （2）父相对定位+子绝对定位，绝对定位top、left为50%，其余使用margin-left和margin-top移动；
  （3）父相+子绝，且left、top、bottom、right为0，margin：auto；
  （4）给父元素设置display:flex，且交叉轴设置aligin-items：center；主轴设置justify-content:center；
• 2.行内元素：
  （1）实现水平居中：父元素:text-align:center(父元素必须为块级元素)；
  （2）实现垂直居中：父元素:display:table-cell vertical-align:middle 。
  实现行内元素水平垂直居中，需要这两种方法结合，具体如下：

	//html模块
	<div class="box">
	  <div class="child"></div>
	</div>

  //CSS模块
  //利用textAlign:center实现行内元素的水平居中，再利用verticalAlign:middle实现行内元素的垂直居中，但这个前提是要先加上伪元素并给设置高度为100%
  .box {
	   width: 100px;
	   height: 300px;
	   background: green;
	   text-align: center;
  }
  .box:after {
	   content: "";
	   display: inline-block;
	   height: 100%;
	   width: 0;
	   vertical-align: middle;
  }
  .child {
       display: inline-block;
       vertical-align: middle;
  }

• 3.文本在盒子中垂直居中的方法？
  （1）单行文不能：Line-height /Padding
  （2）多行文本：display:flex align-items:center
  还有很多详细的，可以参考css水平垂直居中方式

六、简述一个盒子在另外一个盒子中水平居中的方法？

1. margin:0 auto;
2. 浮动布局、定位布局、弹性布局居中方式;
3. display:flex justify-content:center;

七、img 的 alt 与 title 有何异同？ strong 、pm与 em 的异同？

• alt 是为了在图片未能正常显示时(屏幕阅读器)给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
• title 属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。alt 是必要属性，title 非必要属性
• strong:粗体强调标签，强调，表示内容的重要性
• em:斜体强调标签，更强烈强调，表示内容的强调点
• px 和 em 都是长度单位，区别是px 的值是固定的，指定是多少就是多少，计算比较容易。 而em 得值不是固定的，并且 em 会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

八、HTML标签中的src和href有什么区别

      ● href是超文本引用，它是指向资源的位置，建立与目标文件的联系;
      ● src目的是把资源下载到页面中;
      浏览器解析href不会阻塞对文档的处理 (这就是官方建议使用link引入而不是@import的原因)，src会阻塞对文档的处理。

九、页面导入样式时，使用link和@import有什么区别?

   1.link属于HTML标签，而@import是css提供的;
   2.页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载;
   3.@import只在IE5以上才能识别，而link是HTML标签,无兼容问题;
   4.link方式的样式的权重高于@import的权重。

十、什么是HTML5以及和HTML的区别是什么?

        HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash等 ，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。HTML和HTML5区别

十一、html和css中的图片加载和渲染规则是怎样的?

      1. 解析HTML，构成DOM树；
      2. 解析加载的样式，构建样式规则树；
      3. 加载JavaScript，执行JavaScript代码；
      4. DOM树和样式规则树进行匹配，构成渲染树；
      5. 计算元素位置进行页面布局；
      6. 绘制页面，最终在浏览器中呈现；

十二、简述html页面渲染过程?

- 1.解析HTML文件，创建DOM树
       浏览器解析htm|源码，然后创建一个DOM树。并行请求css/image/js在DOM树中，每一个HTML 标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是documentElement，其对应的是html标签。
- 2.解析CSS,形成CSS对象模型
       浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < htmI中的style。
- 3.将CSSOM( CSS对象模型 )与DOM合并，构建渲染树(renderingtree)
       DOM树 + CSSOM–>渲染树(rendering tree)。渲染树和DOM树有点像，但还是有区别的。DOM树完全和htmI标签一一对应， 但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。 而且一大段文本中的每一行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性中。
- 4.布局和绘制
       一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。
       总结：以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上,CSS和JavaScript往往会多次修改DOM或者CSSOM。参考

十三、重绘和重排以及浏览器如何优化渲染

Repaint(重绘) – 布局没有发生改变
       重绘是改变不影响元素在网页中的位置的元素样式,比如background-color(背景色),border-color(边框色),visibility(可见性)，浏览器会根据元素的新属性重新绘制一次(这就是重绘，也就是说是重新构造样式)，使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。
Reflow (重排) – 布局发生改变
       渲染对象在创建完成后并添加到渲染树时，这并不包含位置和大小信息。计算这些值的过程称为布局或重排。
       “重绘"不一定需要’重排”，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变.但是，“重排"必然导致"重绘”，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。
引申问题:浏览器如何优化渲染?
       1. 将多次改变样式属性的操作合并成一次操作
       2. 将需要多次重排的元素，position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
        3. 由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。

十四、display:none 与 visibility:hidden 的区别是什么？

1. display:none 隐藏对应的元素但不挤占该元素原来的空间，即彻底消失，不在文档流中占位，浏览器也不会解析该元素。
2. visibility:hidden 隐藏对应的元素并且挤占该元素原来的空间，即视觉上消失了，可以理解为是一个透明度为0的效果，并且在文档流中占位，对应的浏览器也会解析该元素;。
3. 使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流)，而visibility切换是否显示时则不会引起回流。

十五、如何实现响应式布局？

    首先，响应式布局就是一个网站能够兼容多个终端；
       1. 如果是通过css原生代码，可以通过@media来进行媒体查询，当网页显示在不同的网页中加载执行不同的css代码；
       2. 如果是通过框架，例如bs(浏览器和服务器架构)，可以使用bs提供的响应式框架完成页面布局。

十六、简述浮动布局以及其工作方式？

1. 浮动布局用来解决块元素在x轴上排列的问题;
2. 浮动布局通常出现在 div>div 这种父子结构中，为子元素添加浮动特性。一个元素如果成为浮动元素，那么这个元素就会脱离文档流：如果此时没有指定宽度则由内容决定，不再占据屏幕空间；同一级别的浮动元素会在一行排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素支撑，这时候需要设置overflow:hidden；clear:both；然后给父元素设置一个高度：height:xxpx;

十七、清除浮动

• 首先，得了解清除浮动的原因：
       元素使用float:left/right之后会脱离文档流，父元素如果没有设置高度就会失去支撑，而后面的元素就会忽略父元素而开始布局。
• 1.父子级
  (1) 在子级元素后添加一个空元素，为其添加 clear:both —> 弊端：增加了无意义的元素结构；
  (2) 给父级元素设置一个overflow:hidden —>可以解决第一种方法的弊端【推荐使用】
  (3) 用伪类元素after清除浮动，并且加上content:""，可以加内容，也可以不加，但一定要加上display:block；同时还要写clear:both；具体如下所示：

    #layout::after{
     	  dispaly:block;
      	  clear:both;
     	  content:"";
    }

• 2.兄弟级—>即就是两个并列的div标签,移动一个标签，另一个标签也会受到影响。
  可以给被浮动影响的元素设置css属性clear，值可以left、right、both。
  • clear-left 清除左浮动元素带来的影响;
  • clear-right 清除右浮动元素带来的影响；
  • clear-both 清除左右两侧浮动元素带来的影响。

十八、简述伸缩盒布局中的核心概念、常用规则、使用技巧

1. 核心概念：主轴、交叉轴、伸缩盒容器、伸缩盒元素
2. 常用规则：
   （1）伸缩盒容器：display flex-wrap flex-direction align-items justify-content
   （2）伸缩盒元素： flex-basic flex-grow flex-shrink flex
3. 使用技巧：
          伸缩盒容器常用于列级布局，与浮动布局类似可以将多个块元素在一行中显示。伸缩盒更简单一些，只需要为容器盒子添加display:flex属性，这个容器盒子就变成了伸缩盒容器，其子元素伸缩盒元素就会沿着主轴来排列，默认主轴是x轴，可以通过flex-direction来改变主轴。

十九、对于定位总结

● static 元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。
● relative 相对定位，不脱离文档流，相对于其父级元素进行定位。
● absolute 绝对定位，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。
● fixed 固定定位，脱离文档流，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。当父元素使用了transform的时候，会以父元素定位。
● sticky 粘性定位，不脱离文档流，可以简单理解为relative和fixed布局的混合。
具体如图所示：

二十、盒模型

当一个文档进行布局的时候，浏览器得渲染引擎会根据标准之一的CSS基础盒子模型(CSS basic box model ),将所有元素表示为一个个矩形得盒子。盒子组成:content padding bordermargin
    1. 标准盒子/默认盒子/w3c盒子    
        盒子总宽度=width+padding+border+margin  
        盒子总高度=height+padding+border+margin
    width设置给的是内容,不包含padding和border得值      
    2. IE盒子/边框盒子/怪异盒子           
       盒子总宽度=width+margin           
       盒子总高度=height+margin           
    设置得width包括padding和border

二十一、script标签为什么建议放在body标签的底部(defer、async)

       因为浏览器在渲染html的时候是从上到下执行的，当遇到js文件的时候就会停止当前页面的渲染，转而去下载js文件。如果将script标签放在头部，在文件很大的情况下将导致首屏加载时间延长，影响用户体验。 解决办法
      ● 将script标签放在body的底部
      ● 通过defer、async属 性将js文件转为异步加载

二十二、什么是BFC？

      直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素
1. 如何触发BFC,如何为元素添加BFC这个属性呢

	1.根元素 (<html>)
	2.浮动元素(元素的float值不是none)
	3.绝对定位(元素的position为absolute或fixed)
	4.display为inline-block、table-cell、table-caption、table、table-row、
	  table-row-group、table-header-group、table-footer-group、inline-table、
	  flow-root、flex或inline-flex、grid或 inline-grid
	5.overflow值不为visible的元素 

2. BFC特性和作用

1.可以避免外边距重叠
2.清除浮动
3.阻止元素被浮动元素覆盖
BFC详细参考

二十三、渐进增强和优雅降级

      渐进增强(progressive enhancement) : 主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。
      优雅降级(graceful degradation):一 开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
区别:
       ● 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给;而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要;
       ● 优雅降级(功能衰竭)意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

二十四 前端如何优化网站性能？

优化性能的三种方式：
　1. 减少 HTTP 请求数量；
　2. 控制资源文件加载优先级；
　3. 减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。

二十五 跨域以及解决方案

跨域 是指一个域下的文档或脚本试图去请求另一个域下的资源。
跨域解决方案

1. 通过jsonp跨域
2. document.domain + iframe跨域
3. location.hash + iframe
4. window.name + iframe跨域
5. postMessage跨域
6. 跨域资源共享（CORS）
7. nginx代理跨域
8. nodejs中间件代理跨域
9. WebSocket协议跨域
   跨域解决方案参考