整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
众号【传智播客博学谷】回复关键词：前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料！
一、HTML
1、<image>标签上title属性与alt属性的区别是什么？
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》
2、分别写出以下几个HTML标签：文字加粗、下标、居中、字体
加粗：<b>、<strong>
下标：<sub>
居中：<center>
字体：<font>、<basefont>、参考《HTML标签列表》
3、请写出至少5个html5新增的标签，并说明其语义和应用场景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
参考《HTML5 标签列表》
4、请说说你对标签语义化的理解？
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、你知道多少种Doctype文档类型？
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
7、HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，noframes；
9、iframe的优缺点？
优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
参考《iframe的一些记录》
10、Quirks模式是什么？它和Standards模式有什么区别？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。
区别：总体会有布局、样式解析和脚本执行三个方面的区别。
a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
11、请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
参考《为什么说table表格布局不好？》
12、简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
公众号【传智播客博学谷】回复关键词：前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料！
ss中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。
负边距他符合正常的文档流特性，w3c也支持使用负边距，因此他有很好的兼容性不是在使用hack。
在float中使用负边距可能会在旧的浏览器造成一些问题，比如下面的这些：
让链接不可点击
文本变得很难选中
失去焦点的时候按tab键失效
只要对节点添加position:relative属性就可以解决上述问题。
常用的已知宽高让内容垂直水平居中就是使用绝对定位之后让内容定位到中心点，然后使用负边距margin将content的中心拉回到父亲节点的中心重合，这样就达到了垂直居中的目的。如下图所示：
负边距实现垂直水平居中
在项目的开发过程中，经常会有使用浮动列表展示信息的时候，但在设计的时候为了美观每个item之间都会设置一定的间距来达到信息隔离的目的，并且在设计的时候一般都是使用分散两段对齐完成布局，但是在代码实现过程总能都会让每个item有一个右边距（margin-right）。这样导致最右边的item就会产生一个多余的右边距而被挤到下一行去。
当代码是后端渲染后者是循环出来的时候对最右边的item增加class还得不断的判断每个item的索引值，并且当父亲节点宽度改变时有可能最右一个item还在不断的变化中，这个时候就需要对父亲节点完成实现负边距并且在外层实现超出部分隐藏的功能就可以实现。
负边距实现列的多余margin隐藏
负边距实现列超出部分的效果
列表中我们经常会使用到border-bottom来让li与li之间的内容有一个明显的区分，单最后一个li的边框会与外边框连在一起或者重合导致外观上的不好看，一种方法就是使用css3中的最后一个的选择器来实现，li:last-of-type{border-bottom:0 none;}
负边距实现最后一个的border-bottom隐藏
在响应式布局中，经常会用到左边固定右边自适应或者右边固定左边自适应的两栏布局或者三栏布 局，在这种情况中如果不考虑兼容可以使用css的calc函数来实现（100% - 100px）这样的动态计算值，但是这玩意连中国手机端最大的UC浏览器都不支持，所以还是不要想使用了。因此需要用到负边距来实现页面布局。
负边距实现响应式布局
多列等高布局实现起来较为复杂，如果要内容自适应撑大达到等高布局很不好设计，一般的可以使用js来实现高度的自定义，计算那个高度高就用那个。这儿使用极大的padding-bottom来增加高度，然后用负边距拉回来相互抵消达到高度撑满整个父亲节点的效果。
负边距实现等高布局
还有部分应用，例如在实现左右都加入了边框的分页上，可以使用margin-left： -1px。直接实现抵消中间两个item都有边框而导致的边框叠加的效果。在实现元素的宽度或者高度增加的时候，如果100%已经不能达到需要的数字大小时就可以用负边距在增加数值来达到目的。
个网页前端是由HTML DOM与嵌套组合形成视图结加上 CSS 样式的修饰形成视图，由JavaScript 接受用户的交互请求，以事件机制来响应用户交互操作而形成的。CSS是前台页面形式最重要的部分，它负责控制DOM元素的页面布局和颜色、大小的属性。
在CSS中有一著名的盒子模型理论，可以用它来控制DOM的位置。基于div+css技术的“盒子模型”的出现大大代替了传统的table表格嵌套。
虽然其十分好用，但是对于很多新手来说，却很难搞清楚它几个属性和内容之间的联系个区别。
所有页面的元素都可以看做一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往会比单纯的内容要大。因此，可以通过盒子的边框和距离等参数来控制内容的位置。
Div+CSS 盒子模型
说明：
1、Margin：中文叫外边距，主要作用是控制边框外（Border以外）的区域，外边距是透明的。
2、Border：中文叫边框，是围绕在内边距（Padding）和内容外的边框。注意，它不是透明的。
3、Padding：中文叫内边距，控制内容周围的区域，内边距是透明的。
4、Content：内容，盒子的内容，显示文本和图像。
5、在Css文件中设置的Div的Css.width和Css. height就是内容的宽和高。
6、盒子实际尺寸有可能大于内容尺寸：
盒子模型的总宽度等于content（宽）+padding（左右）+border（左右）+margin（左右）;
盒子模型的总高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下来通过实例演示的方式来一一讲解Margin、Border、Padding的作用和区别。
页面如图所示：
原始样式
代码：
HTML:
<body>
<div class="TsetUpper"></div>
<div class="TsetMiddle"></div>
<div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}
.TsetMiddle{
width: 600px;
height: 200px;
background-color: red;
position: relative;
margin: auto;
}
.TsetDown{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}元素边框：我们可以在CSS边框属性中设置元素边框的样式和颜色。
按如下代码设置Div(TsetMiddle)的Border（边框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30+30了，而且可以设置其底色和线条样式。
Border
margin 控制周围的元素区域。margin 没有背景颜色，是完全透明的。通过margin可以控制元素与四周元素的空隙距离；
按如下代码设置Div(TsetMiddle)的margin（外边距）：
margin: 30px auto;刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
按如下代码设置Div(TsetMiddle)的margin（外边距）：
padding: 30px;刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各属性的值可以用px为单位，也可以用em，百分比等。
2、可以利用盒子的各种属性，调整其内容在父容器中的位置。
*请认真填写需求信息，我们会在24小时内与您取得联系。
