那些你不知道的HTML知识，快来学习一下吧

前言

HTML做为前端三大基础知识点之一，是每个前端开发人员都要掌握的部分。今天这篇文章咱们来看看一些平时不太会注意，却在面试时可能会问到的题目，来看看你都会吗？

 

 

 

如何使用div模拟实现textarea？

咱们都知道textarea是form表单中一个很常见的元素，用于多行文本输入，能够设置行数和列数。

可是默认的textarea样式在页面上看起来是很丑的，不少页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说，在你看页面源码后就会发现这个输入框实际上是一个div元素，并非一个textarea元素，如今咱们就来看看这是如何实现的吧？

首先来看看实现的效果是什么样的

 

 

 

关键属性：contenteditable

正如这个属性的字面意思，能够理解为可编辑的，若是在页面标签上设置contenteditable=true，该标签就能够进行编辑了。

能够配合user-modify属性，该属性表示的是控制用户可否对页面元素进行编辑，经过设置不一样的值能够选择富文本或者纯文本内容，可是因为该属性是非标准属性，不多有人知道。

首先咱们来看看页面的HTML部分代码，就是一个很简单的div标签，而后设置contenteditable属性为true。

 

 接下来咱们就看看整个CSS代码的完整实现吧。

 

 

经过min-height和max-height属性能够控制div的高度，在内容超出max-height后会出现滚动条。若是想要固定div的高度，则只须要设置height属性就能够，而不用设置min-height和max-height属性。

src和href的区别

src和href从使用上来看都是对外部资源的一种引用，可是在具体理解上是有差别的。

href的值指定的是资源在网络上的位置，定义的是当前页面上的某个元素与须要的资源文件的一个连接。好比下面一个语句。

 

 

当浏览器解析到页面的这条语句时，会知道在这里引用了一个外部样式文件，但并不会阻止页面解析。这与@import有很大不一样，所以在引入外部样式时，推荐使用link标签。

src的值表示的是页面上必不可少的内容，须要将指定内容加载到当前页面中。好比下面一个语句。

 

当浏览器解析到页面上的这条语句时，浏览器会对这个文件进行解析，编译和执行，从而致使整个页面加载会被暂停，这也是为何通常会选择将script标签放在body结束标签的前面。

有一种更好的理解方式，href表示的是一个资源的连接；src是对当前元素的替换，内容最终会嵌入到当前页面中。

DIV+CSS布局和Table布局对比

虽然目前大多数网页都是采用的DIV+CSS布局的方式，可是也有少数的老式Web网页采用的是Table布局，咱们能够一块儿来看看两种布局方式的优劣。

 

 前端技术的更新如此迅速，在这样的大环境下，前端工程师保持自学能力就显得尤为重要了。所以，“学什么”“怎么学”就是咱们要迫切解决的问题。这是个人前端交流学习qun：前面是四八四，中间是七五七，后面是七六零。若是须要学习资料在里面下载。我作这行十多年，有问题随时来问我，学习方法，学习效率等等问题。

• div+css布局

1. div+css的布局方式属于W3C标准，并且因为CSS的存在，HTML部分的代码会显得很纯净，知足行为，样式，结构分离的原则。
2. 页面加载速度更快，这是目前DIV+CSS使用更普遍的一个很是重要的缘由。
3. 页面编码量相对于Table布局会少不少。
4. 页面内容更容易维护，因为样式都存在CSS文件中，只须要修改CSS文件便可，对HTML文件不会有影响。
5. 因为DIV+CSS布局更容易进行SEO优化，因此更方便被搜索引擎收录。

• Table布局

虽然DIV+CSS有各类各样的优点，可是Table布局也并非彻底无用的。这里也能够列举出几个采用Table布局的优点。

1. 新手学习方便（相信有不少后端RD在进行前端学习时刚开始都是从table布局开始的）。
2. 兼容性更好，因为Table布局是从最古老的浏览器发展而来的，在兼容性上会知足全部浏览器。而CSS3的出现却要考虑浏览器的支持程度，一个样式要考虑加上几个不一样浏览器前缀，相似于-webkit，-moz等

结束语

今天这篇文章主要讲解了几个关于HTML的知识点，你们都掌握了吗？