HTML部分知识点整理

一，主流浏览器的内核分别是什么？

IE：trident;
1997年的ie4首次被采用沿用至今，腾讯，猎豹，360等浏览器都是用ie的内核。因其稳定性，目前国内银行政府等办公主要还是ie浏览器为主。
FireFox:gecko;
开源内核，用户很多，也被称为火狐内核。是一个跨平台内核，Windoxs Linux和Mac os中可以使用。
Chrome:Blink;
基于webkit，Google与Opera Software共同开发。2013年之前是用webkit。
Safari:webkit;
苹果公司的内核，开源代码，不受ie,火狐限制。遨游浏览器，塞班手机浏览器，安卓默认浏览器都是用webkit作为内核，另外，Google chrome,360极速浏览器和搜狗高速浏览器高速模式也是使用webkit作为内核。
Opera:Blink;
以前是presto内核，这款内核渲染速度达到很高的水平，大概是IE内核速度的3倍，但是兼容性很差。现在改用Google的Blink内核。
未来：Servo；
Mozilla与三星达成合作，开发“下一代”浏览器渲染引擎Servo。

二，HTML文件开头的<! Doctype html>有什么作用？

DOCTYPE,简称DTDS，英文Document type,中文“文档类型”，是一种标准通用标记语言的文档类型声明，他的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档，重点就是告诉浏览器按照何种规范来解析页面。
而没有定义DOCTYPE则会开启怪异模式，在怪异模式下，很多的css效果都会受到影响。
现在有用于在Web浏览器中的布局引擎的三种模式：
1，quirks mode:怪异模式；
2，almost standards mode:准标准模式（会执行极少数的怪异行为）；
3，full standards mode:完整标准模式；（一直致力于描述HTML和CSS规范）
即：ln full standards mode,thebehavior is(hopeful)the behvior described by the HTML and CSS specifications.
区分严格模式和混杂模式的意义在于：DOCTYPE；若不存在或者不规范则会导致混杂模式呈现。
那么问题来了，Quirk模式和Standards模式区别是什么呢？
从IE6开始，引入了standard模式，而在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差，都是基于旧的布局方式写的，为了保证既能提供新的渲染机制又能保证旧的yiia你在，此时就传入了一个参数，DTD就是文档声明。在IE6之前是没有DTD的。那我们就可以说，有DTD后是标准模式，而没有DTD的之前的混杂渲染的旧模式是怪异模式。标准模式也指浏览器按照W3C标准解析执行代码，而怪异模式则是使用浏览器自己的方式去解析代码，不同浏览器方式不同，解析后的页面效果也就不同。

三，前端角度如何做好SEO?

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
1，Meta标签优化
主要包括主题（Title)，网站描述（Description），关键字（Keywords），其他还有作者（Author），目录（Category），编码语种（Language）等；
2，放置关键词
关键词分析和选择是SEO最重要的工作之一，首先要给网站确定主关键词，一般在5个左右。然后针对这些关键词进行优化，包裹关键词密度(Density)相关度(Relavancy)突出性（Prominency）等等。
3，付费的搜索引擎
将网站提交搭配搜索引擎，如果是商业网站，主要的搜索引擎和目录都会要求付费来收录。比如Yahoo要299美元，但是目前为止最大的搜索引擎Google目前还是免费的，而且它主宰着60%以上的搜索市场。
4，链接交换和链接广泛度（Link Popularity）
其他网站到你的网站的链接越多，那么你的网站就会获取更多的访问量，更重要的是，网站外部链接越多，会被搜索引擎认为他的重要性越大，从而给予给更高的排名。
5，合理的标签使用
尽可能的使用语义化标签

四，WEB标准以及W3C的理解和认识

Web标准简单来说可以分为结构，表现，行为三层，其中结构主要是HTML标签组成，更通俗点说，在页面Body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以使页面的结构标签更具美感。行为指页面和用户具有一定的交互，同时页面结构或表现放生变化，主要是js组成。
web标准三层分离，使其更具有模块化，但一般产生行为时，就会有结构与或者表现的变化，也使这三者的界限并不那么清晰。W3C对web标准提出了规范化的要求，也就是在实际编程过程中的一些代码规范。包括以下几点：
1，对于结构要求（标签规范可以提高搜索引擎对页面的抓取效率，即对SEO很有帮助）
（1）标签字母小写；
（2）标签须闭合；
（3）标签不允许随意嵌套；
2，对于css和js
（1）尽量使用外链css央视表和Js脚本，使结构，表现和行为分为三块，符合规范，同时提高页面渲染速度；
（2）样式进俩个少用行间样式表，式结构与表现分离，标签的id和class等属性命名亚欧哦到见文知意，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
（3）不需要变动页面内容，便可打印版本而不需要复制内容，提高网站易用性。

五，HTML和XHTML的区别

粗略可以分为两大类比较：功能差别和书写差别。功能上主要是XHTML可兼容各大浏览器，手机以及平板，并且浏览器也能更快的编译网页。写法上XHTML的语法较为严谨，所以需要注意XHTML的规则。
1，所有的标签都必须小写，不能大小写混用，也不能全大写；
2，标签必须成对；
3，标签顺序必须正确，即内外包裹层次分明；
4，所有属性必须使用双引；
5，不允许使用target="_blank"；
XHTML1.1开始全面禁止此属性，此功能改写为rel=“external”，并搭配JavaScript实现效果。

六，微格式的理解，以及前端是否考虑？

微格式（microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准，是为特殊应用而制定的特殊格式。
包含数据的结构化XHTML代码块的定义格式，由于是XHTML代码块，所以很适合阅读，也因是结构化，也容易被机器处理，很容易和外部进行数据通信，需要做的仅仅是为现有的(X)HTML添加元数据和其他属性，微格式提供的解决方法是符合当前行为和习惯模式，所以不需要抛开现有的习惯。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示（例如豆瓣）；在爬取Web内容时，更为准确的识别代码块的语义。
总的来说：根据特定格式给现有标签添加语义化属性，对搜索提供额外显示信息，方便代码阅读。

七，div+css的布局和table布局两者的优缺有哪些？

div+css:
1，能够使代码精简：css文件可以在网站任意一个页面调用，避免了使用table表格修改部分页面；
2，提升网页访问速度：代码少，其浏览访问速度自然提升，从而提高网站的用户体验度；
3，有利于SEO优化：对于搜索引擎很是友好，简洁，结构化的代码更利于突出重点和适合搜索引擎抓取，另外网络爬虫不喜欢页面有太多的css代码，所以外部调用css有益于优化；
4，浏览器兼容不好：div+css更容易出现多种浏览器不兼容的问题，主要原因是不同浏览器对web标准默认值不同；

table:
优点：开发时间短（使用DW开发速度快）；纯table各浏览器不会有兼容问题，内容可自适应，在搜索引擎排名也能靠前；
缺点：如果布局变更，需要重新开发，如果table里有div,ul等可能会出现浏览器兼容问题，加载速度慢，而且table套table对维护人员极不友好；

八，从用户刷新网页开始，一次js请求一般情况下有哪些地方有缓存处理？

1，DNS缓存：成功访问后网站的域名，IP地址信息缓存在本地；
2，CDN缓存：内容分发网络，选择一个离用户最近的CDN边缘节点来响应用户的请求；
3，浏览器缓存：存储最近访问过的页面，再次请求时从本地磁盘显示文档来加载页面，节约网络资源加速浏览；
4，服务器缓存：将需要频繁访问的网络内容存放在利用较近，访问速度更快的系统中，来提高访问速度。

九，大量图片加载很慢，有哪些方法优化，从而给用户更好的体验？

1，图片懒加载：在页面的未可视区域添加一个滚动事件，判断图片位置与浏览器顶端的距离，如果前者小于后者，优先加载，大型电商网站常用；
2，图片预加载：幻灯片，相册等可以使用，将当前展示图片的前一张和后一张优先下载；
3，如果图片为css图片，可以使用CSSsprite精灵图，SVGsprite矢量图，Iconfont字体图标，Base等技术；
4，缩略图：如果图片过大，使用特殊编码的图片，加载会先加载一张压缩率很高的缩略图，提高用户体验。

十，网页的制作会用到哪些图片格式？

1，PSD格式：是Photoshop专用文件，非压缩的原始文件保存格式，常用于保存原始信息，文件较大，不便于传输，一般用于备份；
2，GIF格式：256种的颜色，无损压缩，支持透明度；
3，PNG格式：有PNG-8,PNG-24两种，比GIF更好，但旧的浏览器和程序可能不支持；
4，JPEG格式:目前最流行的图片格式，可以把文件压缩到最小的格式，下载速度快，纯在一定损耗；
5，BMP格式：Windows系统标准图片，缺点是占用磁盘空间过大，再单击上比较流行；
6，WEBP格式：由谷歌推出的新一代图片格式，在压缩方面比当前JPEG格式更优越，同时提供了有损压缩和无损压缩的图片文件格式，派生自图像编码格式VP8；
优点：在质量相同的情况下WEBP格式图像体积要比JPEG格式小40%；
缺点：编解码速度偏慢，但是由于减少了文件体积，缩短了加载时间，实际上文件的渲染速度反而更快；
浏览器支持尚不完备，目前可行的解决方法只能是同时提供两套图片；

十一，前端页面有哪三层构成，分别是什么？所用是什么？

1，结构层：由HTML或者XHTML之类的标记语言负责创建，仅负责语义上的表达，解决页面“内容是什么”的问题；
2，表示层：由CSS负责创建，解决了页面“如何展示”的问题；
3，行为层：由JavaScript脚本负责，解决了“内容应该对事件如何反应，反应什么”的问题；

十二，css语句构成？选择符有哪些？哪些属性可以继承？优先级怎么计算？CSS3新增伪类有哪些？

语句构成：选择器（属性 1：值1 ；属性2：值2；…）;
选择符：
1，id选择器，如#id；
2，class选择器，如.class;
3，tag选择器，如div,span,p;
4，子选择器，如ul>li；
5，后代选择器，如 ul li；
6，通配符选择器，* ;
7，属性选择器，如a[rel=’‘external’’] ;
8，相邻选择器，如h1+p;
9，伪类选择器，如a:hover,li:nth-child();
可继承：font-size,font-family,color,UL LI DO DT ;
不可继承：border，padding，margin, width height;
优先级：!important>行内样式>di>class>tag>通配符>继承>默认；
权重：帮助理解，非标准；

1，important，加在样式属性值后，权重值为 10000
2，联样式，如：style=””，权重值为1000
3，ID选择器，如：#content，权重值为100
4，类，伪类和属性选择器，如： content、:hover 权重值为10
5，标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6，通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1；

十三，盒模型的理解

CSS盒模型有两种：IE盒模型，还有标准的W3C盒模型
内容content,内边距padding,边框border,边界margin都是盒模型的基本属性。
标准W3C盒模型：border值包括content和padding;
IE盒模型：border值包括content,padding和border;

十四，有哪些方式可以对DOM设置CSS样式？

外部样式：link标签引入一个外部css文件；
内部样式：将css代码放在标签内部；
内联样式：将css样式直接定义在标签内部；

十五，CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围？

设置display:none；HTML元素的宽高和其他属性都将丢失，所以不占位置；
设置visibility:none；HTML元素还在，只是完全透明，所以占位置；
技巧性：设置宽高为0，透明度为0，设置z-index位置在-1000；

十六，img的alt和title有何异同，strong和em有何异同？

alt值是在图片无法加载时显示在原图片位置的信息；
title值时在鼠标悬停在图片上时的提示信息，HTML绝大部分标签都支持title属性，它也是专门做提示信息的；
默认显示样式上：是斜体，是粗体；
语义上：是用来局部强调，是全局强调；
视觉上：的强调是有顺序的，阅读到某处时，才会注意到，而是无顺序的，阅读时立刻会显示出来的关键词句；
注：在实际开发中，大型网站常使用，较少使用，此外使用和可以为SEO关键词排名加分。

十七，src和href的区别？
src：
soucre的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片,frame等元素，用于替换当前元素；当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载编译执行完毕，图片和框架等元素也是如此。类似于所指向资源嵌入当前标签内，这也是为什么将js脚本放在底部而不是头部的原由。
href：
Hypertext Reference的缩写，指向网络资源所在的位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加，那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理，这也是为什么建议使用link来加载css，而不是使用@import方式的原由。

十八，link和@import的异同？

相同点：两者都是外部引入css的方式；
不同点：
1，link是HTML标签，除了加载CSS外，还可以定义RSS等其他事物，而@import属于CSS范畴，只能加载CSS；
2，link引用CSS时，在页面载入时同时加载，而@import需要页面网页完全完成加载后加载；
3，link时XHTML标签，无兼容性问题，@import是在CSS2.1提出的，低版本的浏览器不支持；
4，link支持使用JavaScript控制DOM去改变样式，@import不支持；

十九，px和em的区别？

px和em都是长度单位，区别是px的值是固定的，计算容易；em的值不固定，并且继承父级元素的字体大小，先计算结果后继承，和数值+%一样。
浏览器默认字体高都是16px，所以未经调整的浏览器都符合：1em=16px，即12px=0.75em,10px=0.625em;

二十，行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

常见块元素：center dir div dl p form h1-h6 hr input main section ul 等
常见行元素：a b img small span strong等
空元素：没有内容的HTML内容被称为空元素，空元素是在开始标签中关闭的。例如

1，块级元素：block element

块级元素默认占一行，可嵌套块级元素或行内元素，一般作为容器出现，用来组织结构。特例：只能包含块级元素；DIV是最常用的块级元素，元素样式为display:block都是块级元素。

2，行内元素：inline element

也叫内联元素，内嵌元素。行内元素一般都是基于语义的基本元素，只能容纳文本活着其他内联元素，元素样式为display:inline的皆为行内元素。

3，块级元素的特点

总是新行上开始；
高度和行高以及外边距和内边距都可控制；
宽度缺省是他的容器的100%，除非设置；
它可以容纳内联元素和其他块元素；

4，行内元素的特点

和其他行元素在一行；
高和行高以及内外边距不可变；
宽度即使他的文字或者图片的宽度，不可变；
只能容纳文本或者其他行元素；
设置宽高度无效，可以通过设置line-height来设置高度；
padding和margin设置左右有效，上下无效。
注：元素饭为增大，但是元素周围的内容无影响。

二十一，rgba()和opacity的透明效果有什么不同？

rgba（）和opacity都能实现透明效果
opacity作用于元素，以及元素内的所有内容的透明度；
rgba（）只作用于元素的颜色或背景色，且子元素不会继承；

二十二，css中可以让文字在垂直和水平方向向上重叠的两个属性是什么？

垂直方向：
line-height:0; 垂直上缩成一行；
水平方向：
letter-spacing：字体大小 ; font-size值取负；水平上缩成一列；
letter-spacing还可以用于消除inline-block元素间的换行符空格间隙；

二十三，BFC是什么？

BFC即块级格式上下文，一个独立的渲染区域，只有块级元素参与，规定了内部块级元素的布局方式，且该区域与外部无关；
BFC元素特性表现原则：内部元素变动不会影响外部元素；
布局规则：
1，内部BOX会垂直方向上一个接一个放置，所以从上向下排列；
2，元素的magin左边和父级的左边紧挨，浮动元素也是这样，所以从左向右排列；
3，BOX垂直方向上距离由margin决定，但同一个BFC内的两个相邻元素的margin会出现外边距合并，用voerflow可以解决此问题；
4，BFC计算高度时，浮动元素也参与计算，overflow清除浮动后可以撑开盒子高度；
根元素的body,浮动float不为none，定位position：absolue/fixed,overflow,dispaly:inline-block/flex/table-cell

二十四，如何垂直居中一个浮动元素？

1，已知浮动元素的宽高
设置父元素为相对定位，浮动元素为绝对定位，top和left为50%，再设置浮动元素的margin-left/top值为浮动元素宽高一半的负值；
2，不知浮动元素的宽高
设置父元素为相对定位，浮动元素为绝对定位，且left/top/right/bottom设置为0，再给浮动元素设置margin为auto;

二十五，列出display的值以及作用，position的值，relative和absolute定位原点是什么？

display

block:设置元素为块级元素，独占一行可设置宽高，外边距和内边距；
inline:设置元素为行内元素；
inline-block：设置元素为行内块，可以设置宽高，但是和其他行内元素在一行；
none：缺省值，不存在页面中；

position

relative:相对定位，相对于其本身正常位置定位；
absolute：绝对定位，相对于非static定位第一个父元素进行定位；
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，旧版IE不支持；
static：默认值，没有定位，出现在正常页面，忽略top,bottom,left,right z-index等声明；

结语：如果有错误或不足，恳请指出。如果有用的话，请多多点赞和关注吧，谢谢了！

HTML部分知识点整理相关推荐

C语言考研复试知识点整理
C语言考研复试知识点整理 1.由float x=3e-6,y=3e-6;不能得到x= =y的逻辑值为真. 解析:float类型的变量只能进行>或<运算,不能进行==运算 2.自增和自减运算 ...
【Android 面试基础知识点整理】
针对Android面试中常见的一些知识点整理,Max 仅仅是个搬运工.感谢本文中引用文章的各位作者,给大家分享了这么多优秀文章.对于当中的解析,是原作者个人见解,有错误和不准确的地方,也请大家积极指正 ...
mysql 存储引擎面试_搞定PHP面试 - MySQL基础知识点整理 - 存储引擎
MySQL基础知识点整理 - 存储引擎 0. 查看 MySQL 支持的存储引擎可以在 mysql 客户端中,使用 show engines; 命令可以查看MySQL支持的引擎: mysql> ...
mysql 全面知识点_Mysql知识点整理
1.存储引擎区别 MyISAM:不支持事物.仅支持表级锁.支持B+树索引 MEMORY:不支持事物.仅支持表级锁.支持B+树和HASH索引 InnoDB:支持事物.支持行级锁.支持B+树索引 2.锁机 ...
04741计算机网络原理知识点,04741计算机网络原理知识点整理.doc
04741计算机网络原理知识点整理 1.计算机网络大发展计算机网络从20世纪70年代开始发展,他的演变可以概括为面向终端的计算机网络.计算机-计算机网络.开放式标准化网络以及因特网广泛应用和高速网 ...
python基础知识整理-python入门基础知识点整理-20171214
一.知识点整理 1.python2与python3的区别: (1)宏观比对 python2 源码不标准,较为混乱,并且重复的代码很多. python3 源码统一了标准,同时也去除了重复代码. (2)编 ...
python基础知识整理-python爬虫基础知识点整理
首先爬虫是什么? 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动的抓取万维网信息的程序或者脚本. 根据我的经验,要学习Python爬虫 ...
JS,JQ,PHP的小知识点整理
在日常开发中所使用的JS,JQ,PHP的小知识点整理持续更新-- 1.js和jq获取当前的时间戳方法一: <script>var timestamp = Date.parse(new ...
计算机地图制图知识点,地图制图知识点整理
地图制图知识点整理第一章地图的定义:按照严密的数学法则,用特定的符号系统,将地图或其他星球的空间事象,以二维或维静态或动态可视化形式,抽象概括.缩小模拟等手段表示在平面或球面上,科学地分析认知与交 ...
大一计算机理论考试知识点,计算机一级考试理论知识点整理.doc
计算机一级考试理论知识点整理.doc 还剩 62页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧,价低环保! 内容要点: 个人整理仅供 ...

HTML部分知识点整理

HTML部分知识点整理相关推荐

最新文章

热门文章