对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. 面试中项目遇见的难点答案_你和offer之间只差这几个面试问题！常见面试问题汇总...
  99%的人都会大呼"坑爹"的面试问题,你真的知道该怎么回答吗? 记得第一次面试的时候,面试官对简历也很满意,前面都聊的好好的,最后问了一句简历上没有的内容:你的职业规划是什么?我一 ...
2. 计算机专业常见面试题目汇总
  机器学习与深度学习常见面试题(上)-知乎机器学习与深度学习常见面试题(下)-知乎计算机考研专业课思维导图-知乎 (31条消息)常见C++笔试面试题整理_ljh0302的专栏-CSDN博客_c++面 ...
3. 新编php找工作常见面试笔试汇总
  今天偶然看到了一篇文章,说是php程序员在找工作当中常见的问题汇总,我觉得不错.特意转来了.收藏. form表单 1.简述 POST 和 GET 传输的最大容量分别是多少? GET 方法提交的表单数据 ...
4. 大数据常见面试问题汇总
  目录第1章核心技术 1.1 Linux&Shell 1.1.1 Linux常用高级命令 1.1.2 Shell常用工具及写过的脚本 1.1.3 Shell中单引号和双引号区别 1.2 Ha ...
5. Redis常见面试问题汇总及解析
  面试后端开发的职位,相信大家经常被问到有关redis问题.Redis作为缓存系统的代表很有必要弄熟搞懂,无论是在工作当中还是求职面试过程中都是大有裨益的,本文将详细介绍一些redis的一些典型问题 ...
6. clr 面试_C# 常见面试问题汇总
  1.c#垃圾回收机制从以下方面入手展开: 1.压缩合并算法 2.代的机制 3.GC调用终结器 Garbage Collector . NET采用了和Java类似的方法由CLR(Common ...
7. 桌面运维工程师常见面试问题汇总
  第一部分:A卷 1. 加快win10系统开机速度的方法有那些? 2. 目前常用的磁盘分区格式是什么?他们之间有什么区别? 3. 电脑比较多的情况下,快速安装所有电脑的操作系统采用什么方法? 4. BI ...
8. Java面试题集锦，Java常见面试问题汇总，有需要的小伙伴看过来
  Spring Framework 现在几乎已成为 Java Web 开发的标配框架.那么,作为 Java 程序员,你对 Spring 的主要技术点又掌握了多少呢?不妨用本文的问题来检测一下. 1. 一 ...
9. “约见”面试官系列之常见面试题第三十六篇之CSS常见兼容性问题及解决方案（建议收藏）
  CSS常见兼容性问题及解决方案: 1. 上下margin重合问题: 问题描述:相邻的margin-left和margin-right是不会重合的,但是相邻的块级元素margin-top 和margin ...
最新文章
热门文章

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常见面试问题汇总相关推荐

最新文章

热门文章

可继承 & 不可继承的样式