1、简述!DOCTYPE的作用？!DOCTYPE决定浏览器渲染方式；帮助浏览器正确地显示网页文档类型声明（简称为"DTD"），告诉浏览器这个文件的类型，让浏览器知道该用哪个规范来解析文档。声明必须在HTML中的第一行，Doctype是一条声明它不是一个HTML标签，只起到声明作用。!DOCTYPEhtml：用HTML5的doctype声明文件包含HTML5标记
2、常见的浏览器及其内核有哪些？有五大浏览器，分别是：1、chrome浏览器--Google公司特点安全、高效、安全2013年前使用苹果公司的webkit内核，13年后开始使用webkit的分支Blink内核内核webkit,Blink2、Firefox浏览器--Mozilla公司特点非盈利、Gecko项目开源内核Gecko3、safari浏览器--苹果公司特点移动端占有率高内核webkit4、Opera浏览器--OperaSftwareASA公司特点自主研发presto内核使用自研的Presto内核2016年被收购后改用webkit内核，后跟随谷歌改用Blink内核内核presto、webkit-blink5、IE浏览器--Microsoft微软公司特点依托强大的Windows系统的市场占有率捆绑安装不可卸载内核trident1）使用trident内核的IE，及一些国产浏览器2）使用Gecko内核的MozillaFirefox3）使用blink内核的chrome、opera4）使用webkit内核的Safari、chrome，及一些国产的双核浏览器
3、常见的块级标签和行内标签分别有哪些？块级标签h1-h6、p、div、ul、ol、dl、li、dt、dd、br、hr行内标签span、i、em、b、strong、sub、sup、del
4、b和strong（i和em）标签的区别？b和strong默认情况下它们起的均是加粗字体的作用二者所不同的是，b标签是一个实体标签，用来呈现文字的粗体效果而strong标签是一个语义标签，它的作用是加强字符的语义，用来表示重要文本，在文本中呈现粗体效果i和em默认情况下它们起的均是倾斜字体的作用二者所不同的是，i标签是一个实体标签，文本呈现为斜体，没有特殊语义而em标签是一个语义标签，它的作用是用来呈现被强调的文本，在文本中呈现斜体效果
5、谈谈对语义化的理解？即根据页面内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码，便于浏览器、搜索引擎解析，有利于SEO，便于团队开发和维护。如：标题用h1~h6,段落使用p标签语义化的好处：1）在没有css的情况下，页面也能呈现出较好的内容结构；2）语义化使代码更具有可读性，便于团队开发和维护；3）语义化有利于用户体验4）语义化有利于SEO搜索引擎优化
6、如何合并表格单元格？表格合并跨行合并rowspan跨列合并colspan
7、thead、tbody、tfoot有什么作用？thead、tbody、tfoot标签结合起来使用，用来规定表格的各个部分（表头、主体、页脚）标签默认不会影响表格布局
8、常见表格元素有哪些？table标签定义HTML表格。简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行，th元素定义表头，td元素定义表格单元。更复杂的HTML表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。caption元素定义表格标题。caption标签必须紧随table标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。tr标签定义HTML表格中的行。tr元素包含一个或多个th或td元素。td（标准单元格）|th（表头单元格）元素定义表格内的表头单元格。
9、引入css的方式有几种?引入的三种方式：行内样式/内部样式/外部样式行内样式pstyle="color:red;font-size:20px;"内容/p内部样式styletype="text/css"@import""/*或者：@importurl()*/或者color：red；/style外部样式linkhref=""rel="stylesheet"type="text/css"
10、单行文本水平垂直居中如何实现？先设置高度height:10px;行高等于高度line-height:10px;文本居中text-align:center;
11、选择器优先级如何计算？一般来说选择器的权值越大，优先级越高基本选择器的权值由小到大分别为：通配符选择器（0）标签选择器（1）class选择器（10）id选择器（100）行间样式（1000）如果选择器的权值相同，后写的内容会覆盖先写的内容；行间样式拥有最高优先级但是高不过!importantbackground-color:lightcoral!important;
12、哪些CSS属性是可以继承的？子标签可以继承父标签的样式1）、字体系列属性font-family：字体系列font-weight：字体的粗细font-size：字体的大小font-style：字体的风格line-height：行高2）、文本系列属性text-indent：文本缩进text-align：文本水平对齐color：文本颜色
13、简述css盒模型？盒模型又称框模型（BoxModel）在页面布局中，将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范。,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。css盒模型的本质是一个盒子，封装周围的HTML元素盒模型由：元素的内容(content)+内边距(padding)+边框(border)+外边距(margin)要素组成元素框的总宽度=元素（element）的width+padding的左边距和右边距的值+margin的左边距和右边距的值+border的左右宽度；元素框的总高度=元素（element）的height+padding的上下边距的值+margin的上下边距的值＋border的上下宽度。
14、如何使用border实现小三角?三角形.box1{width:0;height:0;border:40pxsolid;border-color:test{overflow:hidden;height:0px;font-size:0;line-height:0;}4)IE6及更早浏览器浮动时产生双倍边距的BUG问题？解决方案：针对ie6设置该标签的display属性为inline即可#test{float:left;_display:inline;}5)IE7下子标签相对定位时父标签overflow属性的auto|hidden失效的问题解决方案：给父标签也设置相对定位position:relative;6)块转内联块ie7-不在一行显示问题解决方案：div{display:inline-block;*display:inline;*zoom:1;}7)IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙解决方案：给li加vertical-align:middle/top/bottomli{vertical-align:top;}28、HTML5中新增的表单元素和表单属性有哪些？新增表单标签--input类型1）url类型：包含访问协议的URL地址的输入域2）email类型：包含e-mail地址的输入域3）search类型：用于检索关键字的输入域4）tel类型：用于输入电话号码的输入域5）number类型：用于包含数值的输入域6）range类型：生成一个数字滑动条7）color类型：生成一个颜色选择器8）date类型：日期选择器9）datetime类型：输入日期时间10）datetime-local类型：日期和时间选择器11）month类型：月选择器12）time类型：时间选择器13）week类型：周选择器14）datalist类型：选项列表，与input元素配合使用新增表单属性：1）min、max、step属性：输入域中所允许的最小值、最大值、步长2）placeholder属性：为输入域设置提示信息3）list属性：通过input元素和datalist元素实现可选的下拉列表4）autocomplete属性：是否启用自动完成功能5）autofocus属性：自动获取焦点6）form属性：定义表单元素所属的表单区域7）required属性：提交表单时，表单元素不能为空8）pattern属性：对用户输入内容做验证9）multiple属性：选择多个值
29、简述rem布局原理rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。比如说html的font-size大小为100px，一个div的width为1rem，则div的width大小为100px。rem布局实现步骤1）设置页面的viewport2）动态计算并设置html的fontsize值3）按照pc端布局方式正常布局，把px单位换算成rem
30、什么是less?less有什么好处？拥有一套自定义的语法和一个解析器，将程序员编写的样式规则，通过解析器编译成对应的css文件，才能被浏览器识别。好处：结构清晰，结构清晰，便于扩展，可以屏蔽浏览器中私有语法的差异，可以实现多重继承，完全兼容css代码，可以方便地应用到老项目中。
31、常见的移动端布局解决方案有哪些？原理如何？1）流式布局垂直方向高度固定，水平方向使用百分比实现，并且使用弹性布局、浮动、定位等技术综合使用创建可扩展的流式布局优先：可以很好解决自适应需求缺点：实际效果可能会不协调，设计存在局限性2）rem布局rem——相对于根元素的font-size属性值的单位，css3新增单位未经调整的浏览器的默认字号为16像素，1rem=16pxrem布局的实现：设置页面的viewport；动态计算并设置html的font-size值;按照PC端布局方式正常布局，将px单位换算成rem单位3）vw适配vw——viewport'swidthcss3规范中视口单位vh——viewport'sheightvw和vh都是将屏幕分成100份，1vw等于屏幕宽度的1%4）将设备划分成10份，确定好html标签的font-size属性值。假设有750px的设计稿，则html{font-size:75px;}，页面中元素的rem值=元素的px值/755）响应式布局一站适配所有终端。通过媒体查询检测不同的设备屏幕尺寸，适当调整标签显示布局，在每种设备屏幕宽度下呈现出不同的页面效果6）grid网格布局将页面划分成相应的表格进行布局32、metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"如何解释这句话呢？viewport虚拟窗口width虚拟窗口的宽度device-width设备宽度initial-scale初始缩放比例maximum-scale最大缩放比例minimum-scale最小缩放比例user-scalable是否允许用户手动缩放窗口自定义虚拟窗口，指定虚拟窗口的宽度为设备宽，初始缩放比为1倍，最大缩放比1倍，最小缩放比1倍，同时不允许用户手动缩放
