/7z7chn/p/5727245.html
WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar).
Demo页面:&
Github页面:&
下面讲一讲我从WeUI中学到的CSS技巧.
从这里我开始注意到, WeUI的实现中, 很多边框都是用:before,&:after绘制的.
.weui_btn:after {
content: & &;
width: 200%;
height: 200%;
position: absolute;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 10px;
这么做是为了在Retina屏(视网膜屏)上确保1px真的是1pixel. 详见
.weui_cell {
padding: 10px 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
看到这里发现WeUI大量使用了flex布局方式. 对这个布局方式我整理了另一篇文章, 见.
Cell (列表项)
之前一直比较困惑如何实现列表项之间的, 左边有些空缺的边框. border属性又不支持只显示一条边上的一部分, 难道要插入&hr&?
WeUI的实现方式是: 利用.weui_cells:before.
.weui_cell:before {
content: & &;
position: absolute;
left: 15px;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
15px(左边的空缺)配合上.weui_cells_title的overflow:
hidden(隐藏右边超出的部分)就可以显示有空缺的边框了.
列表项末尾的右箭头的实现方式竟然是weui_cell_ft::after的旋转了45度的border.
我本以为会用iconfont.
.weui_cells_access .weui_cell_ft:after {
content: & &;
display: inline-block;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #C8C8CD;
border-style: solid;
position: relative;
top: -2px;
top: -1px;
margin-left: .3em;
Radio (单选列表项)
在每个行内部嵌入了一个隐藏的
隐藏的方式是:
.weui_check {
position: absolute;
left: -9999em;
在每个input.weui_check的后面放置了一个用于显示对勾的span.&input.weui_check和.weui_icon_checked是兄弟关系.
.weui_cells_radio .weui_check:checked + .weui_icon_checked:before {
display: block;
content: '\EA08';
color: #09BB07;
font-size: 16px;
Checkbox (复选列表项)
复选框如上面的单选框一样被隐藏了.
比较出乎我意料的是选中和未被选中的效果都是用iconfont实现的. 本以为未被选中的效果是用border实现,
选中效果用一个check的iconfont配合水平竖直居中定位.
.weui_cells_checkbox .weui_check:checked + .weui_icon_checked:before {
content: '\EA06';
color: #09BB07;
.weui_cells_checkbox .weui_icon_checked:before {
content: '\EA01';
color: #C9C9C9;
font-size: 23px;
display: block;
Switch (开关)
之前觉得这个效果很难做啊, 看了weui的实现竟然只用css就行了!
.weui_switch {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 52px;
height: 32px;
border: 1px solid #DFDFDF;
outline: 0;
border-radius: 16px;
box-sizing: border-box;
background: #DFDFDF;
.weui_switch:checked {
border-color: #04BE02;
background-color: #04BE02;
.weui_switch:before {
content: & &;
position: absolute;
width: 50px;
height: 30px;
border-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background-color: #FDFDFD;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
.weui_switch:checked:before {
-webkit-transform: scale(0);
transform: scale(0);
.weui_switch:after {
content: & &;
position: absolute;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
.weui_switch:checked:after {
-webkit-transform: translateX(20px);
transform: translateX(20px);
其中,&.weui_switch提供了边框,
未选中时背景色#DFDFDF(深灰),
选中时#04BE02(绿色).
.weui_switch:before提供了边框内部的浅灰色#FDFDFD.
被选中时scale(0)缩小消失.
.weui_switch:after提供了圆形按键.
被选中时向右边移动20px.
Form (表单)
input的pattern=&[0-9]*限制了输入只能是0-9的数字(pattern的值是正则表达式).
input[type=&number&]在Chrome上默认会在最右边显示上下箭头.
WeUI通过下面的代码禁用了箭头, 这段代码在Chrome的Dev Tool里面是看不到的, 只能从CSS里面看, 害我找了半天.
.weui_input::-webkit-outer-spin-button,
.weui_input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
点选input[type=&number&]在iOS上会自动打开数字键盘.
Upload (上传)
WeUI用下面这个简单的方法实现了图片前面的灰层.&absolute定位加上top:0;
right:0; bottom:0; left:0;就会让元素被抻开到父元素的边界.
.weui_uploader_status:before {
content: & &;
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
图片上传状态用了一个经典的(水平+垂直)居中方式, 利用top:
50%(让元素的上边界定位到父元素的50%位置)和transform:
translateY(-50%)(让元素往上移动元素自身高度的50%).
.weui_uploader_status .weui_uploader_status_content {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #FFFFFF;
我平时常用的垂直居中方式如下. 水平居中类似.
.vertical-center {
position: relative;
transform: translateY(-50%);
最后的上传按钮:
input[type=&file&]在iOS上会自动触发选择&拍照&还是&照片&的菜单.
方框是用.weui_uploader_input_wrp画出来的,
而加号是用.weui_uploader_input_wrp:before和:after.
真正的input利用opacity:0隐藏起来了.
.weui_uploader_input_wrp:before {
width: 2px;
height: 39.5px;
.weui_uploader_input_wrp:after {
width: 39.5px;
height: 2px;
.weui_uploader_input_wrp:before,
.weui_uploader_input_wrp:after {
content: & &;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #D9D9D9;
.weui_uploader_input {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Form Error (表单报错)
在iOS上, 点选input[type=&date&]会出现&年-月-日&的选择框,
点选input[type=&datetime-local&]会出现&月-日-上午/下午-时-分&的选择框.
Select (选择)
电话号码+86位置的右箭头和分割线是用:before和:after绘制的.
.weui_mask_transparent就是一个position:fixed占满全屏的透明幕布,
让用户无法操作界面.
.weui_toast才是页面中间的黑块.
竟然是纯用HTML+CSS(animation+transition)实现的.
=数据加载中&
.weui_loading_leaf {
position: absolute;
top: -1px;
opacity: 0.25;
.weui_loading_leaf:before {
content: & &;
position: absolute;
width: 8.14px;
height: 3.08px;
background: #d1d1d5;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
border-radius: 1px;
-webkit-transform-origin: left 50% 0px;
transform-origin: left 50% 0px;
.weui_loading_leaf_0 {
-webkit-animation: opacity-60-25-0-12 1.25s linear infinite;
animation: opacity-60-25-0-12 1.25s linear infinite;
.weui_loading_leaf_0:before {
-webkit-transform: rotate(0deg) translate(7.92px, 0px);
transform: rotate(0deg) translate(7.92px, 0px);
.weui_loading_leaf_11 {
-webkit-animation: opacity-60-25-11-12 1.25s linear infinite;
animation: opacity-60-25-11-12 1.25s linear infinite;
.weui_loading_leaf_11:before {
-webkit-transform: rotate(330deg) translate(7.92px, 0px);
transform: rotate(330deg) translate(7.92px, 0px);
@-webkit-keyframes opacity-60-25-0-12 {
opacity: 0.25;
opacity: 0.25;
opacity: 1;
opacity: 0.25;
opacity: 0.25;
@-webkit-keyframes opacity-60-25-11-12 {
opacity: 0.333;
91.6767% {
opacity: 0.25;
91.6867% {
opacity: 1;
51.6767% {
opacity: 0.25;
opacity: 0.333;
==弹窗标题&&
=自定义弹窗内容，居左对齐显示，告知需要确认的信息等&
你能看到的边框都是用:after实现的.
5. Progress
略. ( *?ω?)?╰ひ╯
略. ( *?ω?)?╰ひ╯
7. Article
略. ( *?ω?)?╰ひ╯
8. ActionSheet
=示例菜单&
=示例菜单&
=示例菜单&
=示例菜单&
值得一提的是, 页面下方的ActionSheet始终是显示的, 只不过平时通过transform:
translateY(100%)隐藏了起来, 显示时用translateY(0).
这方法无需JS就可以自适应任意高度的ActionSheet.
.weui_actionsheet {
position: fixed;
bottom: 0;
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
width: 100%;
background-color: #EFEFF4;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
.weui_actionsheet_toggle {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
一堆iconfont. ( *?ω?)?╰ひ╯
略. ( *?ω?)?╰ひ╯
略. ( *?ω?)?╰ひ╯
无焦点状态:
有焦点状态:
这里我最好奇的是, 当用户点击搜索框时, 弹出的键盘上右下角的按键是&搜索&而不是&换行&.
我测试的效果是, 在微信中点击搜索框时键盘显示&搜索&按键, 在Safari中打开时则显示&换行&.
这就很诡异了, 说明微信做了什么手脚. 难道与JS有关?
但是我在网上搜索了下, 发现只要确保input[type=&search&]被form包围,
且form有action属性即可.
但是WeUI的实现中,&form并没有action属性,
所以暂时不知道WeUI是如何做的.
本文已收录于以下专栏：
相关文章推荐
想用weui.css写微信平台的页面，发现没有让flex（weui-flex）容器下，子项目（weui-flex__item）居中的类。
百度了一下，是用justify-content:center...
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含butto...
从WeUI学习到的知识点
WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, A...
写一两次还好，如果多个页面需要多个这样的单选按钮，那代码量较大，而且需要复制粘贴大量的代码。...
微信小程序之入门篇（一）
微信小程序之注册篇（二）
微信小程序之开发初体验（三）——开发工具使用和目录结构
微信小程序之生命周期（四）
微信小程序之数据绑定（五）
微信小程序之触控事件（六）...
//设置弹出框弹出事件
function showImagesActionSheet(index) {
console.log('showImagesAction...
未封装前的官方代码：和封装后的代码
前言：weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档，所以这篇博客就当是方便以后开发而使用吧。weui资源下载（也可以从官网下载）：
http://...
今天想用一下weui里的tabbar，发现一直在顶部，不能到底部，究其原因是父容器的 height:100; 不生效，什么都不说了，解决方案来
html style="height: 1...
手机微信里页面实现滚动刷新，在底部可以加上导航栏。
他的最新文章
讲师：李江龙
讲师：司徒正美
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)首先添加一个Grid
&Grid x:Name="GTest" ShowGridLines="False" SizeChanged="GTest_SizeChanged" & &/Grid&
1. Grid动态添加新的列和行。
this.GTest.RowDefinitions.Add(new RowDefinition() {Height=new GridLength(30) });
this.GTest.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
2. 为Grid动态添加Border的样式。
Border tempBorder = new Border();
tempBorder.BorderThickness = new Thickness(1);
tempBorder.BorderBrush = new SolidColorBrush(Colors.Red);
tempBorder.SetValue(Grid.ColumnProperty, 1);
tempBorder.SetValue(Grid.ColumnSpanProperty, 2);
this.GTest.Children.Add(tempBorder);
3. 动态添加Button及Button的背景图片。
// Add new button
Button btnNew = new Button();
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri(@"../Images/New.gif", UriKind.Relative));
btnNew.Background = imageB
btnNew.Width = 20;
btnNew.Height = 20;
btnNew.SetValue(Grid.ColumnProperty, 0);
btnNew.SetValue(Grid.RowProperty, iContentStart);
btnNew.Click += new RoutedEventHandler(btnNew_Click);
titlePanel.Children.Add(btnNew);
4. 鼠标移动事件。
Rectangle rec = new Rectangle();
rec.Stroke = new SolidColorBrush(Colors.Black);
rec.Fill = new SolidColorBrush(Colors.Orange);
rec.MouseLeftButtonDown +=new MouseButtonEventHandler(rec_MouseLeftButtonDown);
rec.MouseLeftButtonUp += new MouseButtonEventHandler(rec_MouseLeftButtonUp);
rec.MouseMove += new MouseEventHandler(rec_MouseMove);
// Mouse Down Method
private void rec_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
FrameworkElement element = sender as FrameworkE
mousePosition = e.GetPosition(null);
trackingMouseMove =
if (null != element)
element.CaptureMouse();
element.Cursor = Cursors.H
// Mouse Move Method
private void rec_MouseMove(object sender, MouseEventArgs e)
FrameworkElement element = sender as FrameworkE
if (trackingMouseMove)
double deltaV = e.GetPosition(null).Y - mousePosition.Y;
double deltaH = e.GetPosition(null).X - mousePosition.X;
double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);
double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);
element.SetValue(Canvas.TopProperty, newTop);
element.SetValue(Canvas.LeftProperty, newLeft);
mousePosition = e.GetPosition(null);
// Mouse Move Method
private void rec_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
FrameworkElement element = sender as FrameworkE
Canvas.SetTop(element, 15);
trackingMouseMove =
element.ReleaseMouseCapture();
mousePosition.X = mousePosition.Y = 0;
element.Cursor =
if (pop != null)
pop.IsOpen =
// Update the datebase
5, Grid的形状改变的时候，去改变Grid的类似那些Canvas控件的形状。
// First Remove the control in the Grid and ReBuild those controls that have been removed
private void GTest_SizeChanged(object sender, SizeChangedEventArgs e)
List&UIElement& controlsToRemove = new List&UIElement&();
int RowsCount = this.GTest.RowDefinitions.C
for (int i = 2; i & RowsC i++)
controlsToRemove = (from pControl in GTest.Children
where (i == (int)pControl.GetValue(Grid.RowProperty))
select pControl).ToList&UIElement&();
for (int j = 0; j & controlsToRemove.C j++)
GTest.Children.Remove(controlsToRemove[j]);
this.GTest.RowDefinitions.Remove(this.GTest.RowDefinitions[2]);
BuildTR(postCollection);
6，利用WebService异步操作后台数据。
private void UserControl_Loaded(object sender, RoutedEventArgs e)
BuildTRYear();
BuildTRMonth();
BlogWebServiceSoapClient client = new BlogWebServiceSoapClient();
client.GetPostsCompleted +=new EventHandler&GetPostsCompletedEventArgs&(client_GetPostsCompleted);
client.GetPostsAsync();
private void client_GetPostsCompleted(object sender, GetPostsCompletedEventArgs e)
if (e.Error == null)
postCollection = e.R
BuildTR(postCollection);
7，怎样去创建一个PopUp对话框，并设置他的位置和样式，以下代码是我写的一个popup类，用户就可以New一个，然后传入参数
contentTxt就是popup要显示的内容，xOffsite，yOffsite距离父控件的位置，canvas，父控件，这个popup不具有通用行，但是很好改，就可以去适合自己的popup对话框。
public class ContentPop
private string content = string.E
private bool isAdd =
public bool IsAdd
get { return isA }
set { isAdd = }
public string Content
if (thisPopUp.Child != null)
thisPopUp.Child =
AddContent(content);
private bool isOpen =
public bool IsOpen
get { return isO }
thisPopUp.IsOpen = isO
private Popup thisPopUp =
public Popup ThisPopUp
get { return thisPopUp; }
private double xO
public double XOffsite
get { return xO }
xOffsite =
thisPopUp.HorizontalOffset = xO
private double yO
public double YOffsite
get { return yO }
yOffsite =
thisPopUp.VerticalOffset = yO
private Canvas parantC
public Canvas ParantCanvas
get { return parantC }
parantCanvas =
parantCanvas.Children.Add(thisPopUp);
private Border border =
public ContentPop(string content,double xOffsite,double yOffsite,Canvas canvas)
thisPopUp = new Popup();
AddContent(content);
canvas.Children.Add(thisPopUp);
thisPopUp.HorizontalOffset = xO
thisPopUp.VerticalOffset = xO
thisPopUp.IsOpen =
this.content =
this.xOffsite = xO
this.yOffsite = yO
this.isOpen =
private void AddContent(string content)
if (thisPopUp.Child == null)
border = new Border();
border.BorderBrush = new SolidColorBrush(Colors.Black);
border.BorderThickness = new Thickness(0);
StackPanel panel1 = new StackPanel();
TextBlock textblock1 = new TextBlock();
textblock1.Text =
textblock1.Opacity = 100;
panel1.Children.Add(textblock1);
border.Child = panel1;
thisPopUp.Child =
本文已收录于以下专栏：
相关文章推荐
main不是关键字，但是可以被jvm识别
静态代码块–构造代码块–构造函数，启动一个类时他们的执行顺序
生成帮助文档
在学习Unity之前，相信我们都要经历C#编程语言的学习，大家都知道在C#是一门面向对象的编程语言，具有封装继承多态的一些特点，这些知识点浅学并不难，但是当我们在Unity的道路上越走越远的时候，我们...
环境是xcode4.3
首先要弄懂几个基本的概念。
一）三个结构体：CGPoint、CGSize、CGRect
请尊重他人劳动成果，请勿随意剽窃，转载请注明，谢谢！转载请注明出处：http://blog.csdn.net/evan_man/article/details/
1.普通成员函数声明为const是防止函数修改调用该成员函数的对象的数据成员，这个对象时通过this指针隐式传递给该函数的
，而静态成员函数没有this指针，所以就没有这项功能，也就不需要声明为con...
源表：物化视图数据源对应的表基表：物化视图对应的表本文主要内容包括：1、如何使源表的数据变化不影响物化视图的快速刷新2、建好物化视图后，当基表或者源表的结构发生变化对物化视图刷新的影响。测试数据准备：...
本文介绍了性能测试的几个基本概念，包括：什么是性能测试、压力测试与稳定性测试、TPS、PV等等。...
因为招新培训，所以写下这篇博客，浅谈PHP中的输出、运算符、数组、表单等知识点，希望能带小鲜肉入门，给到他们帮助...
热泪欢迎各位大虾多多指正，在下先行谢过
属性相关练习题（根据给出的内部 DTD 补全 xml ）
1.用typeof可以看到变量的具体数据类型
var v1="abc";
var v2=890;
window.alert("v1是"+typeof v1);
window.alert(...
他的最新文章
讲师：李江龙
讲师：司徒正美
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)11-1911-1911-1810-2110-2110-2110-2110-2110-2110-21最新范文01-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-01本文主要记录一些针对常见前端面试问题的个人见解和知识扩展
Edited by Yiyi at
题目一：有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
审题：”高度自适应”？什么意思？怎么个自适应法？根据子元素的高度自适应？显然不是这个意思，那样的话这道题目就没有意义了。我个人觉得这里的自适应是指父div高度不确定的意思，也就是不管父div高度是多少（前提大于100px），第二个子div的高度都能填充满剩下的部分。PS：如果理解错误欢迎指摘。
&div style="position:height: 500"&
&div style="height: 100background-color:font-size: 50text-align:line-height: 100"&子div：A&/div&
&div style="position:width:100%;top: 100bottom: 0background:font-size: 50text-align:"&子div：B&/div&
知识点&实现思路：父div的position为static之外的任意值；第二个子div的position设置为absolute，top为100(第一个子div的高度)，bottom为0，自动拉伸充满剩余部分。之所以父div的position必须设置为static之外的任意值，因为absolute的定位原点是相对于值不为static的第一个父元素进行定位。（position的默认值为static）
&div style="width:100%;height:250border-color:display:flex-direction:;"&
&div style="height: 100width: 100%;background-color: #1c4a70; font-size: 50text-align:line-height: 100"&子div：A&/div&
&div style="flex:1;background-color: font-size: 50text-align:"&子div：B&/div&
知识点&实现思路：关于Flex的内容实在有点多，但是不复杂，就不一一总结了。
奉上几篇大神的文章：
&div style="width:100%;height:234"&
&div style="height: 100background-color: #22aadd"&&/div&
&div style="height: calc(100% - 100px);background-color: #b490d0"&&/div&
知识点&实现思路： calc() 函数，在指定元素高度或宽度时，可以基于计算进行设定，而不是简单的使用固定数值，其运算规则如下：
一：使用“+”、“-”、“*” 和 “/”四则运算；
二：可以使用百分比、px、em、rem等单位；
三：可以混合使用各种单位进行计算；
四：表达式中有“+”和“-”时，其前后必须要有空格，width: calc(12%+5em)这种没有空格的写法是错误的；表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格；width:-webkit-calc(100% - (10px + 5px)*2);
赋一张图帮助理解
说到这里，有经验有想法的人会发现，这个功能跟box-sizing:border-box的效果相同，无图无真相：
.border-box{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid #3DA3EF;
background: yellow;
也就是说，如果一个元素指定了box-sizing:border-box，那么元素的高度：100px ＝ content高度 ＋ 上下padding高度总和 ＋ 上下border高度总和 ，这样一来content的高度就不用手动计算了！
box-sizing的默认值为content-box，也就是如果指定元素width为100px，那么其content高度就被设置为100px。此时元素自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。也就是说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。
background: #f60;
padding: 10px;
border: 5px solid green;
width: 90%;
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px)*2);
width: calc(100% - (10px + 5px) * 2);
height: 90%;
height:-moz-calc(100% - (10px + 5px) * 2);
height:-webkit-calc(100% - (10px + 5px) * 2);
height: calc(100% - (10px + 5px) * 2);
相比于box-sizing:border-box，如果想实现content高度的自适应，就要利用calc属性手动计算然后赋值。
总结：以上两种实现方式各有利弊，可自行Google；至于选择鱼还是熊掌，就看你是生在海边喜欢吃海鲜囊，还是长在内陆喜欢大口吃肉了。
题目二：浏览器的标准模式(strict mode)和怪异模式(quirks mode)
标准模式：浏览器按W3C标准解析执行代码；
怪异模式：浏览器按照自己的方式解析执行代码；
因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页，如果文档最开头部分定义且正确定义了DOCTYPE浏览器则会进入标准模式（Standards Mode），否则浏览器会进入怪异模式或混杂模式（Quirks mode）。
这两种模式引起最大的问题就是下图盒模式的问题:
如上图，在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。即：
Strict Mode：width是内容宽度，元素真正的宽度 ＝ width ＋ margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right；
Quirks Mode：width是元素的实际宽度，内容宽度 ＝ width - (padding-left + padding-right + border-left-width +border-right-width)
怎样解决IE盒模型导致的表现差异：
1?避免导致这个问题的情景：这是首选，避免同时为一个元素同时设置width和padding值或者width和border值，再或者width同时和它们两个值。这确保了所有的浏览器都会一样的去计算元素的总宽度，而不用考虑它们使用哪种盒模型方式。
2?插入额外的标记：我们拿一个例子来说明一下，下面的HTML用来定义一个新闻列表：
//为了得到一个250像素宽的列表，且应用1像素的边框和10像素的填充，会用到这样的CSS：
padding:10
id="news"&
&News article 1&
&Lorem ipsum dolor sit amet&
&News article 2&
&Lorem ipsum dolor sit amet&
在符合标准的浏览器中，总宽度是250像素（1px left border + 10px left padding + width + 10px right padding + 1px right border）。但在IE5.5及更早的版本中，总宽度只是228像素，因为它并未计算边框和填充的值。那么该如何避免这个问题呢？
方案一：为父容器（sidebar）设置宽度来达到效果
padding:10
&div id="sidebar"&
&div id="news"&
方案二：在#news里面插入一个标记来达到效果，思路是外层的元素提供宽度，包含在里面的元素提供边框和填充。
padding:10
&div id="news"&
&h2&News&/h2&
3?使用条件注释判断语句：果没有合适的父容器来控制宽度也不能通过添加额外的标记解决问题，那针对IE 5.*/Win我们就需要设置一个不同的width值了。最安全的方式就是使用条件注释判断语句（conditional comments）这些内容只能在IE/Win中被解析，下面的代码只有在IE6以下的版本中被执行：
如果你打算使用这个方法，我建议将全部的针对IE 5.*/Win的代码都转移到一个单独的CSS文件中来加载它：
4?使用CSS hacks：（虽然尽量不要使用hacks）针对盒模型问题最简单的CSS hack是SBMH（The simplified box model hack），案例的HTML代码和上面第一个是一样的，CSS是：
padding:10px;
border:1px solid;
width:250px;
width:228px;
思路：所有的浏览器都会看到并理解“width:250px”，但IE 5./Win不会读取下面的一行，width:228px，但这行会被其余的浏览器解析。所以最后，IE 5./Win得到的width值是250px，其他浏览器得到的是228px。这样，在全部的浏览器中我们的新闻列表的总宽度就一致了。
Hack的使用：.
关于标准模式和怪异模式的其它区别：.
题目三：HTML和XHTML的异同
什么是HTML：超文本标记语言（HyperText Markup Language）
什么是XHTML：可扩展的超文本标签语言（EXtensible HyperText Markup Language）
HTML：结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
XHTML：可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言的应用，是一种非常灵活的置标语言；XHTML则基于可扩展标记语言，可扩展标记语言是标准通用置标语言的一个子集。
XHTML与HTML的对比：
1?所有的标记都必须要有一个相应的结束标记；
?：&p&this is example.&/p&
?：&p&this is example.
2?所有标签的元素和属性的名字都必须使用小写；
?：&table width="100%"&
?：&table WIDTH="100%"&
3?所有的XML标记都必须合理嵌套；
?：&p&&span&this is example.&/span&&/p&
?：&p&&span&this is example.&/p&&/span&
4?所有的属性必须用引号”“括起来；
?：&table width="100%"&
?：&table width=100%&
5?把所有&和&特殊符号用编码表示；
6?所有属性都必须有一个值，没有值的就重复本身；
checked="checked" /&
readonly="readonly" /&
disabled="disabled" /&
selected="selected" /&
7?不要在注释内容中使“–”；
?：&!--这里是注释============这里是注释--&
?：&!--这里是注释-----------这里是注释--&
?：“–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。
8?用id属性来替代name属性；
?：&img src="picture.gif" id="picture1" /&
?：&img src="picture.gif" name="picture1" /&
?：为了版本比较低的浏览器，你应该同时使用name和id属性，并使它们两个的值相同的：&img src="picture.gif" id="picture1" name="picture1" /&
9?：图片必须有说明文字；
?：&img src="ball.jpg" alt="large red ball" title="large red ball"/&
?：为了兼容火狐和IE浏览器，对于图片标签，尽量采用 alt和title双标签，单纯的alt标签在火狐下没有图片说明！
题目四：常见浏览器的内核
IE，360，搜狗：trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
题目五：DOCTYPE作用？为什么HTML5只需要写&!DOCTYPE html&？如果不定义或者定义错误会导致什么结果？
DOCTYPE作用：&!DOCTYPE&声明位于位于HTML文档中的第一行，处于 &html& 标签之前，告知浏览器的解析器用什么文档标准（规范）解析这个文档。
为什么HTML5只需要写&!DOCTYPE html&： HTML5 不基于 SGML(Standard Generalized Markup language 标准通用标记语言)，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照H5的标准去解析渲染文档）
如果不定义或者定义错误会导致什么结果：DOCTYPE不存在或格式不正确会导致文档以兼容模式（Quirks）呈现。
题目六：常见的 DOCTYPE 声明有哪些？
&!DOCTYPE html&
2?HTML 4.01 Strict：这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&
3?HTML 4.01 Transitional：这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
4?HTML 4.01 Frameset：这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&
5?XHTML 1.0 Strict：这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。（请上翻题目三）
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
6?XHTML 1.0 Transitional：这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
7?XHTML 1.0 Frameset：这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&
8?XHTML 1.1：这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&
题目七：谈谈你对浏览器内核的理解？
早起的浏览器中，引擎包括两大部分：渲染引擎和JS引擎。
现在常说的浏览器引擎，就是渲染引擎。 JS引擎已经独立出来了(最著名的就属Chrome的V8)
渲染引擎工作原理：
浏览器就收到HTML文件和CSS文件；
首先Parse对文件进行解析；
然后将对应的HTML生成为DOM，CSS解析为CSS Object Model；
然后两者合并，最后绘制到页面上。如下图
JS引擎是怎么和浏览器渲染引擎相互工作：
从服务器获得HTML文件，浏览器开始解析文档；
解析到script标签时，则会暂停解析，将控制权给JS引擎；
如果script引用的是外部资源，则会发起请求进行加载，然后执行；
执行完毕后再将控制权还给渲染引擎，然后继续解析；
PS：由于浏览器会将控制权交给JS引擎，所以如果要加载的资源过大，会造成网页卡死，直到文件加载完成为止。所以，通用的做法就是将js文件放到body底部，保证DOM树的完整渲染。
reflow（重流，重排）与repaint（重绘）：
通常页面在加载你的js，css，img等文件时，引擎会对文件加以解析，最终生成两颗树：渲染树和DOM树
渲染树：要显示到页面上，展示给用户看的真实节点（所以display:none的节点则不会存在）
DOM树：页面显示的HTML结构（所有的节点都存在）
当渲染树和DOM树都已经完成的时候，则开始将页面显示到桌面上了。
这时候，如果你改变页面的DOM结构，浏览器则会重新改动涉及到的DOM. 此时你的渲染树和DOM树就会发生改变。
浏览器重新计算出渲染树这一过程叫做重流(重排)。reflow是可以优化的，比如图片在css.css样式文件中就定义好图片的高度，这要会减少重新渲染的次数。
将更新后的结构重新渲染到页面这一过程叫做重绘。只是改变如背景颜色或者文字的颜色，没有改变其它节点的形状布局。
repaint的速度要比reflow的速度明显快的多。
重流必将引起重绘，而重绘不一定会引起重流。
题目八：两个CSS隐藏节点语句visibility和display的异同
visibility：visible（默认，元素是可见的）；hidden（元素是不可见的，但仍然影响布局）；inherit（visibility 属性的值从父元素继承）
display：inline（默认，元素呈现为内联元素）；block（元素呈现为块级元素）
；none（元素被隐藏）
HTML 中的元素大多是”内联”或”块”元素：一个内联元素，在其左侧和右侧都是浮动内容。一个块元素填满整个行，并没有什么可显示在其左侧或右侧。
visibility和display属性都用于显示或隐藏一个元素。
如果设置 display:none，将隐藏整个元素，也不占用位置；
如果设置 visibility:hidden，元素的内容将不可见，但元素保持原来的位置和大小。
通过修改visibility属性控制元素显示或者隐藏只会触发重绘；而display则即会触发重流，又会触发重绘。（请上翻题目六）
题目九：cookies，sessionStorage和localStorage的区别？
1?数据储存流通方式：
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源（cookie还需要指定作用域，不可以跨域调用）的http请求中携带（即使不需要），即：会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2?存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3?有期时间：
localStorage—存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage — 数据在当前浏览器窗口关闭后自动删除。
cookie—设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4?数据操作：
Web Storage拥有setItem，getItem，removeItem，clear等方法。
cookie需要前端开发者自己封装setCookie，getCookie。
sessionStorage.setItem(key, value)
Storage.prototype.setItem = function(key,data) {};
sessionStorage.getItem(key)
Storage.prototype.getItem = function(key) {};
sessionStorage.removeItem(key)
Storage.prototype.removeItem = function(key) {};
sessionStorage.clear()
Storage.prototype.clear = function() {};
题目十：href 和 src 的区别；link和@import的区别
(Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。
href="style.css" rel="stylesheet" /&
浏览器明白当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被被暂停）。
src是source的缩写，指向外部资源的位置，嵌入指定资源到当前文档元素定义的位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停，这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。
src="script.js"&&
src="..\..\css\image\Img00010.JPG"/&
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；
页面被加载的时，link会同时被加载；
link是XHTML标签，无兼容问题;
link是html标签，只能放入html中使用；
href="style.css" rel="stylesheet" /&
@import是CSS提供的，只能用于加载CSS;
@import引用的CSS会等到页面被加载完再加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况);
@import是CSS2.1 提出的，只在IE5以上才能被识别；
@import作为css样式，既可以存在于HTML中，也可以存在于.CSS文件中；
@import url(style.css) 和@import url(“style.css”)是最优的选择，兼容的浏览器最多。
//在html中
type="text/css"&
@import url(CSS文件路径地址);
@import url(CSS文件路径地址);
题目十一：考察JavaScript的作用域
var scope='global';
function fn(){
alert(scope);
var scope='local';
alert(scope);
alert(scope);
var scope='global';
function fn(){
alert(scope);
scope='local';
alert(scope);
alert(scope);
var scope='global';
function fn(scope){
alert(scope);
scope='local';
alert(scope);
alert(scope);
上述题目，输出结果分别是：
例1分别输出[undefined , local , global]，
例2分别输出[global , local , local]，
例3结果输出[undefined , local , global]，
＊前提是分别执行，如果你把这一整段代码copy到IDE中运行，会发现是完全不同的结果（微笑脸）
例1-考点是变量定义提升，相当于如下代码
var scope='global';
function fn(){
var scope；
alert(scope);
scope='local';
alert(scope);
例2-无考点，就是为了迷惑你的，scope是全局变量，操作读取都是针对外层的全局变量，所以值能取到也能改变。
例3-函数参数是按值传递，参数在函数内部相当于局部变量，所以对其修改不会改变外部的全局变量。另一个知识点时JS函数调用的时候只查找最后一个函数名字匹配的函数定义，跟参数个数是否匹配无关。所以先返回undefined。
var actualArgs = arguments.
var expectArgs = 函数名.
题目十二：何为文档流以及position属性的考查
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。块元素（block）独占一行，常见的有 div，ul，ol，h标签，p标签；内联元素（inline）不独占一行（从左至右依次排列），常见的有 a，label，img，input，textarea。
脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
当前所知的脱离文档流的方式有两种： 浮动和定位 。
position属性值及介绍：
1?absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
2?relative：生成相对定位的元素，相对于其正常位置进行定位。
3?fixed：生成绝对定位的元素，相对于浏览器窗口进行绝对定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
4?static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5?inherit：规定从父元素继承 position 属性的值。
?：position的值为absolute、fixed的元素脱离文档流；static、relative没有脱离文档流。
type="text/css"&
border: 1px solid #ccc;
height: 200px;
width: 200px;
position: relative;
left: 100px;
top:100px;
background: blue;
height: 50px;
width: 50px;
class="rel"&
class="rel1"&&
1.如果设定TRBL（top，right，bottom，left），并且父级没有设定position属性（默认为static），仍旧以父级的左上角为原点进行定位(和absolute不同)
type="text/css"&
position: absolute;
border: 1px solid #ccc;
height: 200px;
width: 200px;
position: relative;
left: 100px;
top:100px;
background: blue;
height: 50px;
width: 50px;
class="rel"&
class="rel1"&&
2.如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决 定(前半段和absolute一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolute不同)。
上述两个栗子效果图如下：
相对定位的总结：
1.使用相对定位的盒子，会相对于它原本的位置（父级左上角，如果父级不存在，则以浏览器左上角进行定位），通过偏移指定的距离，到达新的位置。
2.使用相对定位的盒子仍在标准流中（会占据原来的位置），它对父亲和兄弟盒子都没有任何影响。
top:100 //没有设置position,此处top无效;
border: 1px solid #
height: 200
width: 200
padding: 10
background:
height: 50
top:260 //设置了position,此处top有效;
border: 1px solid #
height: 200
width: 200
padding: 10
background:
height: 50
class="abs0_1"&
class="abs0_2"&&
class="abs1_1"&
class="abs1_2"&&
1.如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
2.如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有Padding属性，对其也不起作用。说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影 响。
上述两个栗子效果图如下：
绝对定位的总结：
1.若想把一个定位属性为absolute的元素定位于其父级元素内，必须满足两个条件：设 定TRBL且父级设定Position属性（无论是absolute还是relative）。
2.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。
3.绝对定位的框从标准流中脱离，这意味着他们对其后的兄弟盒子的定位没有影响，其他的盒子好像就好像这个盒子不存在一样。
题目十三：谈谈HTML语义化编程思想
HTML5提供了语义化更好的内容元素，比如 article、footer、header、nav、
语义化的HTML结构首先要强调HTML结构；
用一句话总结语义化编程就是 “用正确的标签做正确的事情”；
HTML语义化优点：
1?让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
2?即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
3?有了良好的结构和语义的网页更容易被搜索引擎抓取，搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO，利于网页推广;
4?使阅读源代码的人对网站更容易将网站分块，便于代码阅读维护理解，提高团队开发效率；
5?屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
写一段符合语义化编程思想的HTML代码
&!DOCTYPE html&
lang="en"&
charset="utf-8"&
&HTML5语义化编程&
name="keywords" content="HTML5 语义化"&
name="description" content="HTML5语义化编程"&
rel="stylesheet" href="css/common.css" type="text/css"&
rel="stylesheet" href="css/layout.css" type="text/css"&
rel="stylesheet" href="css/reset.css" type="text/css"&
src="js/jquery-1.3.2.min.js"&&
class="home"&
id="container"&
id="page-header"&
id="logo"& href="/"& src="images/logo.gif"
alt="myLogo"&&&
id="main-navigation"&
class="current"& href="#"&首页&&
& href="#"&联系&&
id="page-content"&
&用HTML5做的网页&
&HTML5+CSS3网页&
&这就是content部分的内容&
&A demonstration of list items&
&无序list1&
&无序list2&
&有序list1&
&有序list2&
&这就是aside部分的内容&
&aside部分的内容&
& Copyright zhangyi 2016
可以看到我们利用了header，nav，article，section，aside，footer这些语义化标签，效果图如下：
手贱的我去掉head部的css样式之后，效果如下：
可以看到，如上总结的，即使在没有CSS样式的情况下，页面也能保持一种文档格式显示，并且是容易阅读的;
标签中meta属性使用介绍：
meta是html语言head区的一个辅助性标签，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！
1?name属性：
1?－1：Keywords(关键字)：描述该网页内容的一组唯一的关键字。
使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。
name="keywords" content="meta总结,html meta,meta属性,meta跳转"&
1?－2：description(网站内容描述)：不超过 150 个字符且能准确反映网页内容的描述标签，告诉搜索引擎你的网站主要内容。
name="description" content="yiyi的博客,前端开发面试题汇总,meta是html语言head区的一个辅助性标签。"&
1?－3：robots(机器人向导)：搜索引擎索引方式。
name="robots" content="index,follow" /&
1?－4：author(作者)：标注网页的作者
name="author" content=""&
1?－5：revisit-after：代表网站重访,7days代表7天，依此类推。
name="revisit-after" content="7days"&
2?http-equiv属性：
2?－1：Expires(期限)：设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
http-equiv="expires" content="Fri,12Jan:18GMT"&
?必须使用GMT的时间格式。
2?－2：Pragma(cache模式)：禁止浏览器从本地计算机的缓存中访问页面内容。
http-equiv="Pragma" content="no-cache"&
?这样设定，访问者将无法脱机浏览。
2?－3：Refresh(刷新)：自动刷新并指向新页面。
&meta http-equiv="Refresh" content="2; URL=http://www."&
?其中的2是指停留2秒钟后自动刷新到URL网址。
2?－4：Set-Cookie(cookie设定)：如果网页过期，那么存盘的cookie将被删除。
http-equiv="Set-Cookie" content="cookie value=expires=Friday,12-Jan-:18GMT；path=/"&
?必须使用GMT的时间格式。
2?－5：content-Type(显示字符集的设定)：设定页面使用的字符集。
&meta http-equiv="content-Type" content="text/charset=UTF-8"&
meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；
meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；
meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；
meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；
meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；
meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；
2?－6：content-Language（显示语言的设定）
http-equiv="Content-Language"content="zh-cn"/&
2?－7：Cache-Control（指定请求和响应遵循的缓存机制）
在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。
请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached；
响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。
Public指示响应可被任何缓存区缓存；
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效；
no-cache指示请求或响应消息不能缓存；
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存；
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应；
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应；
max-stale指示客户机可以接收超出超时期间的响应消息，如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
本文已收录于以下专栏：
相关文章推荐
原文地址：/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answ...
Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
介绍一下CSS的盒子模型？
（答案在下一篇文章中）
1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
2. 行内元...
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更...
最近更新时间：日09:50:06
IT行业发展迅速并且热火朝天，每年都呈现人才紧缺现象，同时高薪岗位更是数不胜数，但要想过五关斩六将进入大厂，就需要谦虚学习基础知识，不同总...
jQuery是什么？
jQuery是javascript编写一个可重用的JavaScript库。
不使用JQuery设置UI文本的JavaScript代码如下：
document.get...
1、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
　　（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 ...
　　本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！
前端开发面试题收集(css部分)
/quiz/ 做了下这里面前端开发面试的题，发现有些不会，所以在此...
他的最新文章
讲师：李江龙
讲师：司徒正美
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)