对WEB标准以及W3C的理解与认识

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索机率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

为什么将css引入放头部，js引入放后面？
浏览器从上到下依次解析html文档。将css文件放到头部，css文件可以先加载。避免先加载body内容，导致页面一开始样式错乱，然后闪烁。
将javascript文件放到底部是因为：若将javascript文件放到head里面，就意味着必须等到所有的javascript代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。
style 标签写在 body 后和 body 前有什么区别？
页面加载自上而下，当然是需要先加载样式。
写在body标签后，由于浏览器以逐行方式对HTML文档进行解析，当解析写在尾部的样式表会导致浏览器停止之前的渲染，等待加载且解析样式表后才重新进行渲染，这样可能导致留白现象（所以最好将style标签写在body前）。

"流"概念

‘流’是css的一种基本定位和布局机制，HTML默认的布局机制就是’流布局’,是一种自上而下（例如块级元素div），从左到右排列的布局方式。

盒模型

两种类型 & 区别
IE盒模型（怪异盒模型）:
width = border + padding + content;
一个块的宽度 = width + margin。

W3C盒模型（标准盒模型）:
width = content；
一个块的宽度 = width + padding + border + margin。

切换方式

box-sizing: border-box; // IE盒模型标准
box-sizing: content-box; // W3C盒模型标准

margin | padding 分别适用于什么场合
margin：在border外侧需要留空
padding：在border内侧需要留空
1. 浏览器兼容性问题（了解）
  在IE5.X,IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度，通过改用padding或者指定盒子为display:inline就可以解决。

HTML

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

文档解析类型

HTML存在两种文档类型
怪异模型（默认）：浏览器按照自己的方式解析
标准模式：按照W3C标准
如何避免浏览器的怪异模式?
通过声明文档的解析类型 <!DOCTYPE html>

HTML语义化

Html语义化可以使页面更加结构化，提供了一系列具有结构意义的标签，例如header,footer等，让结构更加清晰，有利于浏览器的解析。
即使在没有css样式的情况下，页面也会以一种文档结构来显示，更加易于阅读。
由于搜索引擎的爬虫也会依赖于Html标记来确定上下文和各个关键字的权重，因此有利于SEO。
Html语义化更便于阅读，维护和理解。

非替换元素&替换元素

可替换元素：其内容是通过标签类型以及其属性值来决定的。例如：iframe、video、img。
非可替换元素：其内容由其标签包裹内容决定。例如div、p、span、ul、li、ol。

块级元素和行内元素

行内元素：

左右两边都可以有元素，和其他元素在一行上。
不可以设置宽高，其宽度就是内容的宽度。对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，但是padding上下对其他元素无影响。
常见有：span、a、img(行内替换元素)

块级元素：

默认独自占据一行，左右两边都没有元素。
可以设置宽高，在不设置宽度的情况下，默认为父元素的宽度一致。
常见有：h1~h6、p、div

HTML5

Html5新特性

语义化标签： header、footer、article、aside、caption、nav等
画布canvas
SVG绘图
视频video和音频audio
input增强型表单控件：calendar,date,time,email,url,search
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除。
WebWorker、WebSocket

Html5移除的元素(了解)

纯表现的元素：basefont,big,center,font,s,strike,tt,u;
对可用性产生负面影响的元素：frame,frameset,noframes;

Html5哪些标签可以优化SEO

title
Meta 详情
Meta提供给页面一些元信息（名称/键值），它有利于SEO。
属性：

属性	描述
name	用于描述网站
http-equiv	没有name时，可以采用这个属性的值（content-type,expires(期限),refresh,set-cookie,content属性关联到http请求头）
content	名称/值中的值，可以是任意有效字符串
scheme	用于指定要用来翻译属性值的方案

语义化标签： header、footer、article、aside、caption、nav等。

iframe

iframe 是一种内联框架，也是一种很常见的网页嵌入方式。
优点：

iframe能够原封不动的把嵌入的网页展示出来
如果有多个网页引用iframe,只需要修改iframe的内容
如果遇到加载缓慢的第三方内容如图标和广告，可以由iframe来解决

缺点：

会产生很多页面，不容易管理，同时造成onload阻塞
iframe框架结构有时让人感到迷惑，用户体验感差
代码结构变得复杂，影响搜索引擎
iframe框架页面会增加服务器的http请求

Html 提供哪些 Api

全屏滚动 Fullscreen API
页面可见性 Pge Visibility API
访问摄像头和麦克风 getUserMedia API
电池 Battery API
预加载网页内容 Link prefetching

CSS

CSS引入方式

Css引入方式有4种内联、内嵌、外链、导入。

通过link和@import引入有什么区别？

外链link 除了可以加载css之外,还可以定义rss、rel等属性，没有兼容性问题，支持使用javascript改变样式。
@import 是css提供的，只能用于加载css，不支持通过javascript修改样式。
页面被加载的时候，link会被同时加载，而@import则需等到页面加载完后再加载，可能出现无样式网页。

CSS选择器

CSS选择器有哪些? 11个

id选择器、类选择器、标签选择器、相邻选择器(h1+p)、子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel = "XXX"])、伪类选择器、伪元素选择器、分组选择器

伪类选择器
1. CSS3新增伪类
  x:first-of-type：选择属于其父元素的首个 <x> 元素的每个 <x> 元素
  x:last-of-type：选择属于其父元素的最后一个 <x> 元素的每个 <x> 元素
  x:only-of-type：选择属于其父元素唯一的 <x> 元素的每个 <x> 元素
  x:only-child：选择属于其父元素的唯一子元素的每个 <x> 元素
  x:nth-child(1)：选择属于其父元素的第一个子元素的每个 <x> 元素
  等等
2. Css伪类与伪元素的区别
  伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性。
  与伪类针对特殊状态的元素不同的是，伪元素对元素中的特定内容进行操作。但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
3. 用户操作伪类
  推荐书写样式顺序：link、visited、focus、hover、active
伪元素选择器

:first-line、:first-letter、:before、:after、:enabled、:disabled、:checked
1. Css3新增伪元素
  :enabled：每个已启用的元素（多用于表单元素例如input）
  :disabled：控制表单控件的禁用状态
  :checked：单选框或复选框被选中
  :before：在元素之前添加内容（可用来做清除浮动）
  :after：在元素之后添加内容

可继承 & 不可继承的样式

可继承的样式：font-size, font-family, color...
不可继承的样式：border, padding, margin, width, height...

Css选择器优先级 & 权重

优先级：!important > 内联style > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器
权重：二进制规则计算，各选择器权值总览
内联style，权值：1000
ID选择器，权值：0100
类选择器，权值：0010
标签选择器 & 伪元素选择器，权值：0001
通配符、子选择器、相邻选择器等，权值：0000
继承样式没有权值
如果层级相同，则向后比较，层级不同时，层级高的权重大

浏览器如何解析Css选择器？

css选择器的解析是从右向左解析，为了避免对所有元素进行解析

CSS3新特性 10个

各种css选择器
1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n) 匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
圆角border-radius
多列布局详情
文本效果
@Font-face 特性
线性渐变
linear-gradient(left, red, blue)
transform 样式
translate()：元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数
rotate()：元素顺时针旋转给定的角度。
scale()：元素的尺寸会增加或减少。
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix()：把所有 2D 转换方法组合在一起
过渡 transition: property duration timing-function delay;
property：规定设置过渡效果的 CSS 属性的名称。
duration：规定完成过渡效果需要多少秒或毫秒。
timing-function：规定速度效果的速度曲线。
delay：定义过渡效果何时开始。
动画 animation
flex布局

html + css 面试相关推荐
1. HTML CSS 面试题解（不定期更新）
  1. HTML基础强化 HTML重要属性 a [href,target] img [src,alt] table td [colspan,rowspan] form[target,method,enc ...
2. HTML和CSS面试问题总结,html和css面试总结
  html和css w3c 规范结构化标准语言样式标准语言行为标准语言 1) 盒模型常见的盒模型有w3c盒模型(又名标准盒模型)box-sizing:content-box和IE盒模型(又名怪异 ...
3. 6常见的HTML和CSS面试问答
  在本文中,我将介绍一些面试官最常见的问题和答案.会有关于HTML和CSS的问题.如果您喜欢阅读,请继续. CSS选择器的特异性是什么?它如何工作? 使用CSS选择器时,可以使用许多不同的方法来选择某个 ...
4. CSS面试高频题之什么是BFC
  之前一段时间因为各种各样的事情一直都没有时间来写博客,但是因为要保证月更原创的量也是只能翻出前几年压箱底的Java学习笔记了 ==|,当然笔者的博客还是以记录前端开发方面的知识为主的. 如题,笔者近期 ...
5. CSS面试复习（三）：预处理器、工程化方案、三大框架中的CSS
  一.预处理器 1.介绍基于CSS的另一种语言.通过工具编译成CSS.添加了很多CSS不具备的特性.能提升CSS文件的组织 2.less嵌套 3 .sass嵌套 4. less变量 5.sass变量 ...
6. css(面试第2天)用css绘制三角形
  分享一个链接:包括45个css画的图形 http://mp.weixin.qq.com/s?__biz=MjM5NTEwMTAwNg==&mid=2650216157&idx=1&am ...
7. css面试基础知识,CSS知识点与面试题解析
  前言 CSS 和 HTML 是网页开发中布局相关的组成部分,涉及的内容比较多和杂乱,本小节重点介绍下常考的知识点. 选择器的权重和优先级 CSS 选择器有很多,不同的选择器的权重和优先级不一样,对于一 ...
8. CSS面试总结（大致）
  1. 盒模型标准盒模型:总宽度:内容 ( content ) + border + padding + marginIE 盒模型(怪异盒模型):宽度 = 内容宽度 ( content + borde ...
9. HTML/CSS 面试总结
  1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个 ...
10. HTML+CSS面试试题（部分）
  目录 1:主流浏览器的内核分别是什么? 2:每个HTML文件开头都有,它的作用是什么 3: div+css的布局较table布局有什么优点? 4:img的alt属性与title属性有何异同 5:str ...
最新文章
热门文章

html + css 面试

对WEB标准以及W3C的理解与认识

"流"概念

盒模型

HTML

文档解析类型

HTML语义化

非替换元素&替换元素

块级元素和行内元素

HTML5

Html5新特性

Html5移除的元素(了解)

Html5哪些标签可以优化SEO

iframe

Html 提供哪些 Api

CSS

CSS引入方式

CSS选择器

CSS选择器有哪些? 11个

伪类选择器

伪元素选择器

可继承 & 不可继承 的样式

Css选择器优先级 & 权重

浏览器如何解析Css选择器？

CSS3新特性 10个

html + css 面试相关推荐

最新文章

热门文章

可继承 & 不可继承的样式