整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
.css前缀为"-moz-"的浏览器：
火狐浏览器
2.css前缀为"-webkit-" 的浏览器：
谷歌浏览器,苹果浏览器, Comodo Drangon(科摩多龙)，搜狗高速浏览器，快快浏览器，枫树浏览器，云游浏览器，360极速浏览器，世界之窗极速版，SRWare Iron，猎豹浏览器，RockMelt，QQ浏览器
3.css前缀为"-o-"的浏览器：
Opera(欧朋),NDSBrowser
4.css前缀为"-ms-"的浏览器：
IE,猎豹安全浏览器，傲游浏览器，百度浏览器，世界之窗浏览器，2345浏览器，腾讯TT，淘宝浏览器，采编读浏览器，阿云浏览器，瑞星安全浏览器，Slim Browser，GreenBrowser、爱帆浏览器，115浏览器，155浏览器，114浏览器，N氧化碳浏览器，糖果浏览器，彩虹浏览器，瑞影浏览器，勇者无疆浏览器，闪游浏览器，蚂蚁浏览 器，飞腾浏览器，速达浏览器，佐罗浏览器，UC浏览器
除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址！
HTML作为前端三大基础知识点之一，是每一个前端开发人员都要掌握的部分。今天这篇文章我们来看看一些平时不太会注意，却在面试时可能会问到的题目，来看看你都会吗？
HTML
我们都知道textarea是form表单中一个很常见的元素，用于多行文本输入，可以设置行数和列数。
但是默认的textarea样式在页面上看起来是很丑的，很多页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说，在你看页面源码后就会发现这个输入框其实是一个div元素，并不是一个textarea元素，现在我们就来看看这是如何实现的吧？
首先来看看实现的效果是什么样的。
实现效果
关键属性：contenteditable
正如这个属性的字面意思，可以理解为可编辑的，如果在页面标签上设置contenteditable=true，该标签就可以进行编辑了。
可以配合user-modify属性，该属性表示的是控制用户能否对页面元素进行编辑，通过设置不同的值可以选择富文本或者纯文本内容，但是由于该属性是非标准属性，很少有人知道。
首先我们来看看页面的HTML部分代码，就是一个很简单的div标签，然后设置contenteditable属性为true。
HTML部分代码
接下来我们就看看整个CSS代码的完整实现吧。
CSS样式
通过min-height和max-height属性可以控制div的高度，在内容超出max-height后会出现滚动条。如果想要固定div的高度，则只需要设置height属性就可以，而不用设置min-height和max-height属性。
src和href从使用上来看都是对外部资源的一种引用，但是在具体理解上是有差异的。
href的值指定的是资源在网络上的位置，定义的是当前页面上的某个元素与需要的资源文件的一个链接。比如下面一个语句。
href引用
当浏览器解析到页面的这条语句时，会知道在这里引用了一个外部样式文件，但并不会阻止页面解析。这与@import有很大不同，因此在引入外部样式时，推荐使用link标签。
src的值表示的是页面上必不可少的内容，需要将指定内容加载到当前页面中。比如下面一个语句。
src引用
当浏览器解析到页面上的这条语句时，浏览器会对这个文件进行解析，编译和执行，从而导致整个页面加载会被暂停，这也是为什么一般会选择将script标签放在body结束标签的前面。
有一种更好的理解方式，href表示的是一个资源的链接；src是对当前元素的替换，内容最终会嵌入到当前页面中。
虽然目前大多数网页都是采用的DIV+CSS布局的方式，但是也有少数的老式Web网页采用的是Table布局，我们可以一起来看看两种布局方式的优劣。
布局对比
div+css布局
div+css的布局方式属于W3C标准，而且由于CSS的存在，HTML部分的代码会显得很纯净，满足行为，样式，结构分离的原则。
页面加载速度更快，这是目前DIV+CSS使用更广泛的一个非常重要的原因。
页面编码量相对于Table布局会少很多。
页面内容更容易维护，由于样式都存在CSS文件中，只需要修改CSS文件即可，对HTML文件不会有影响。
由于DIV+CSS布局更容易进行SEO优化，所以更方便被搜索引擎收录。
Table布局
虽然DIV+CSS有各种各样的优势，但是Table布局也并不是完全无用的。这里也可以列举出几个采用Table布局的优势。
新手学习方便（相信有很多后端RD在进行前端学习时刚开始都是从table布局开始的）。
兼容性更好，由于Table布局是从最古老的浏览器发展而来的，在兼容性上会满足所有浏览器。而CSS3的出现却要考虑浏览器的支持程度，一个样式要考虑加上几个不同浏览器前缀，类似于-webkit，-moz等
今天这篇文章主要讲解了几个关于HTML的知识点，大家都掌握了吗？
喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
1 渐进增强和优雅降级
什么是渐进增强（ progressive enhancement）、优雅降级（ graceful degradation）呢？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 graceful degradation：
开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
类似蹦极，由高处往低处下落
区别：渐进增强是向上兼容，优雅降级是向下兼容。
个人建议：现在互联网发展很快，连微软公司都抛弃了e浏览器，转而支持edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。
2 浏览器前缀
后面我们会有常用的解决H5和C3的兼容解决文件，我们这里暂且不涉及。
3 背影渐变上
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或者沿任何任意轴。如果你曾使用过制作图件，比如说 Photoshop，你对线性渐变并不会陌生。
兼容性问题很严重，我们这里只讲解线性渐变语法格式：
4 背景渐变下
5 CSSw3C统一的验证工具
CssStats是一个在线的css代码分析工具
如果你想要更全面的，这个神奇，你值得拥有
W3C统一验证工具
因为它可以检测本地文件哦！！
6 CSS压缩工具
通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。
w3ccss压缩网速比较慢还可以去站长之家进行快速压缩。
7 认识 preserve-3d
这个效果我们需要用到透视过渡还有子元素 preserve-3d
transform-style
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：f1at和 preserve-3d。
其中f1at值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现
8 旋转轮播图结构制作
9 旋转轮播图
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
本章已结束，下篇文章将分享《第三阶段 Javascript 基础》小伙伴们不要错过哟！
?
*请认真填写需求信息，我们会在24小时内与您取得联系。
