那些你不知道的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的知识点,大家都掌握了吗?
那些你不知道的HTML知识,快来学习一下吧的更多相关文章
- Vue大概知识体系和学习参考
Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...
- C++ 由快排学习到的的随机数等知识
起: 力扣的912题 数组排序 ,想着先用快速排序来写写,在实际用c++编写的时候,有一些之前没注意到的细节问题造成了一些麻烦. 912. 排序数组 - 力扣(LeetCode) 快排思想 每次以数组 ...
- IT知识圈视频学习资源整理贴
原文地址 热门课程 1.2019 尚学堂大数据全套视频教程(视频.源码.课件) 2.IDEA破解补丁(支持最新2019.2) 3.2019年 MySQL DBA 6期视频教程 4.微信小程序实战开发特 ...
- JVM的相关知识整理和学习--(转载)
JVM是虚拟机,也是一种规范,他遵循着冯·诺依曼体系结构的设计原理.冯·诺依曼体系结构中,指出计算机处理的数据和指令都是二进制数,采用存储程序方式不加区分的存储在同一个存储器里,并且顺序执行,指令由操 ...
- Java基础知识二次学习--第三章 面向对象
第三章 面向对象 时间:2017年4月24日17:51:37~2017年4月25日13:52:34 章节:03章_01节 03章_02节 视频长度:30:11 + 21:44 内容:面向对象设计思 ...
- Java基础知识二次学习-- 第一章 java基础
基础知识有时候感觉时间长似乎有点生疏,正好这几天有时间有机会,就决定重新做一轮二次学习,挑重避轻 回过头来重新整理基础知识,能收获到之前不少遗漏的,所以这一次就称作查漏补缺吧!废话不多说,开始! 第一 ...
- java中你不知道的字符串知识!!!
声明:这是上次写完String和StringBuffer后的补充(看上次的请复制链接在搜索栏粘贴访问) 链接:http://www.cnblogs.com/ytsbk/p/7420581.html 一 ...
- java知识体系(自我学习中)
java自我学习知识体系
- 《掌握融资必备知识》---创业学习---训练营第一课---HHR---
一,<开始学习> 1,四个思考题: (1)从你决定开始融资,到你拿到钱,你都需要经历哪些环节? (2)你知道投资机构内部的工作流程吗? (3)融资最好的时机是什么时候? (4)创投圈的专业 ...
随机推荐
- FreeSql (八)插入数据时指定列
插入数据时指定列,和忽略列对应,未被指定的列将被忽略. var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Passwor ...
- 华为Quidway S5700开启SNMP协议
开启SNMP协议通过Console口登录主要用于交换机第一次上电或者本地配置.或者无法通过远程访问时,可通过Console口登录.如何才能通过Console口登录交换机呢?在配置通过Console口配 ...
- selenium IDE的断言与验证
断言 验证应用程序的状态是否同所期望的一致.常见的断言包括验证页面内容,如标题是否为X或当前位置是否正确等等 断言被用于4种模式+5种手段: Assert Assert断言失败时,该测试将终止 ver ...
- DNA sequence(映射+BFS)
Problem Description The twenty-first century is a biology-technology developing century. We know tha ...
- 基于ViewPager与TabLayout建立三类图表
延续昨天,今天使用ViewPager和TabLayout来实战一下,顺便补充一下新知识: 1.线形图,显示一周的温度情况. 2.饼状图,2017年互联网教育细分领域投资情况. 3.柱状 ...
- Flink 从 0 到 1 学习 —— Flink 配置文件详解
前面文章我们已经知道 Flink 是什么东西了,安装好 Flink 后,我们再来看下安装路径下的配置文件吧. 安装目录下主要有 flink-conf.yaml 配置.日志的配置文件.zk 配置.Fli ...
- vue2.0搭建vue手脚架(vue-cli)
1.安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了.安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功了. ...
- 游戏设计模式——Unity对象池
对象池这个名字听起来很玄乎,其实就是将一系列需要反复创建和销毁的对象存储在一个看不到的地方,下次用同样的东西时往这里取,类似于一个存放备用物质的仓库. 它的好处就是避免了反复实例化个体的运算,能减少大 ...
- 【全网首创】修改 Ext.ux.UploadDialog.Dialog 源码支持多选添加文件,批量上传文件
公司老框架的一个页面需要用到文件上传,本以为修改一个配置参数即可解决,百度一番发现都在说这个第三方插件不支持文件多选功能,还有各种各样缺点,暂且不讨论这些吧.先完成领导安排下来的任务. 任务一:支持多 ...
- java枚举的应用
最近的项目中,看前辈们用到的枚举比较多,由于自己之前对枚举这种类型不是很了解,遂花费心机看了下,整理记录下. 1.枚举常量 系统中定义的状态字段,用的比较多: public enum orderTyp ...