那些你不知道的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布局
  

• 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的知识点，大家都把握了吗？






来源：https://www.cnblogs.com/dou485/archive/2019/09/12/11512455.html