TML知识点梳理
关注“教授学苑”,期待带给你快乐的开发知识!
信ID:WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
(点击页底“阅读原文”下载源代码)
● ● ●
1、对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率;
使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快;
内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件;
容易维护、改版方便,不需要变动页面内容;
提供打印版本而不需要复制内容、提高网站易用性;
2、xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言;
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
XHTML 标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3、Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 :严格 、过度、基于框架的html文档;
加入XMl声明可触发,解析方式更改为IE5.5拥有IE5.5的bug;
4、行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素:a b br i span input select
Css盒模型:内容,border,margin,padding
5、CSS引入的方式有哪些? link和@import的区别是?
引入方式:内联、内嵌、外链、导入
link和@import区别 :
同时加载;
前者无兼容性,后者CSS2.1以下浏览器不支持;
Link支持使用javascript改变样式,后者不可;
6、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
选择符:标签选择符、类选择符、id选择符;
继承不如指定Id>class>标签选择
内联和important优先级哪个高:important优先级高
7、前端页面有哪三层构成,分别是什么?作用是什么?
结构层:Html
表示层:CSS
行为层:js
8、css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
IE(IE内核)、火狐(Gecko)、谷歌(webkit)、opear(Presto)
10、写出几种IE6 BUG的解决方法
双边距BUG:float引起的,使用display;
像素问题:使用float引起的,使用dislpay:inline -3px;
超链接hover点击后失效:使用正确的书写顺序 linkvisited hover activen
IE z-index问题:给父级添加position:relative
Png 透明:使用js代码改
Min-height 最小高度 !Important 解决’
select 在ie6下遮盖:使用iframe嵌套;
为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08line-height:1px)
11、<img>标签上title与alt属性的区别是什么?
Alt :当图片不显示是用文字代表。
Title :为该属性提供信息
12、描述css reset的作用和用途。
css reset的作用:Reset重置浏览器的css默认属性;
用途:浏览器的品种不同,样式不同,然后重置,让他们统一;
13、解释css sprites,如何使用。
css sprites:把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量
14、浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用window.top.document.compatMode 可显示为什么模式
15、你如何对网站的文件和资源进行优化?期待的解决方案包括:
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16、什么是语义化的HTML?
直观的认识标签 ,对于搜索引擎的抓取有好处
17、清除浮动的几种方式,各自的优缺点
使用空标签清除浮动clear:both(理论上能清楚任何标签,,,增加无意义的标签)
使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1用于兼容IE)
是用afert伪元素清除浮动(用于非IE浏览器)
干货!免费领取腾讯高级讲师网页设计教程
点我领取
???
关注网页设计自学平台,99%的努力都在这里
▼原码打包下载可以点「阅读原文」噢!群文件里哦!
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的知识点,大家都掌握了吗?
*请认真填写需求信息,我们会在24小时内与您取得联系。