网页为什么只加载了基本html,关于HTML的那些事

HTML基础知识

meta标签

doctype作用，严格模式和混杂模式如何区分，它们有何意义？

doctype声明位于HTML文档的第一行，位于html标签之前，用于告知浏览器解析器用什么文档标准解析这个文档，doctype不存在或者格式不正确会导致文档以兼容模式呈现

在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。

如果HTML文档包含形式完整的doctype，那么他一般是以标准模式呈现，对于HTML4.01文档，包含严格的DTD的doctype常常导致页面以标准模式呈现，doctype不存在或者格式不对会导致文档以混杂模式出现。

请描述一个网页从开始请求到最终显示的完整过程?

1.在浏览器输入网址

2.发送至DNS服务器并获得域名对应的WEB服务器IP地址

3.与WEB服务器建立TCP连接

4.浏览器向WEB服务器的IP地址发送相应的HTTP请求

5.WEB服务器响应请求并返回指定的url的数据或错误信息。如果重定向，则重定向到新的url地址

6.浏览器下载数据后解析HTML源文件，解析的过程中实现对页面的排版，解析完成后在浏览器显示基础页面

7.分析页面中的超链接并显示在当前页面，重复以上过程直至无超链接需要发送，完成全部数据显示。

html5为什么只需要写？

html5不基于SGML，因此不需要对DTD进行引用

html4.01基于SGML，因此需要对DTD进行引用

浏览器内核的理解

浏览器最重要或者说核心部分：渲染引擎，不过我们一般称之为浏览器内核。负责对网页语法的解释(标准通用标记语言下的一个应用html，javascript)并渲染显示的网页。渲染引擎决定了浏览器如何显示网页内容以及页面的格式信息，不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同浏览器内核的浏览器里渲染显示的效果也不同。

渲染引擎负责获取网页的内容，整理讯息，以及计算网页的显示方式

常用浏览器内核

Trident内核(MSHTML)：IE，360，搜狗

Gecko内核：FireFox

Presto内核：Opera7以上

(Opera内核原为Presto 现为Blink)

webkit内核：Safari，Chrome

(Chrome的Blink使webkit的分支)

EdgeHTML内核：Microsoft Edge

(此内核其实是从MSHTMLfork来的，删除了几乎所有IE私有特性)

简述一下对html语义化的理解

1.html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析

2.即便在没有css样式的情况下也能以一种文档格式显示，并且是容易阅读的。

3.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO

4.使阅读源代码的人更容易将网站分块，便于阅读，维护和理解。

行级元素和块级元素分别有哪些？

行级元素：

a, em(强调),strong(粗体强调)，span,i(斜体),img,b(粗体),lable(表格标签),

select(项目选择),textarea(多行文本输入框)sub(下标)

不能设置宽高宽高是内容的高度,可以设置padding，只能设置左右的外边距，不能设置上下外边距

块元素：

不设置高，靠内容充起来,宽度不设置的情况下是充满父级元素的

可以设置宽高，外边距，内边距

div dl定义列表 dt dd ul 非排序列表

ol，p，h1-h6，table，fieldset form，

空元素：br hr

行内块级元素 input和img

a标签

href里不仅可以是一个远程地址，还可以是一个本地文件

百度一下

link和@impoort的区别

1.link属于XHTML标签，而@import是CSS提供的

2.页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完了再加载

3.import只在ie5以上才能被识别，而link是XHTML标签，无兼容性问题

4.link方式的样式权重高于@import的权重

5.使用dom控制样式时的差别，当使用js控制dom去改变样式的时候，只能使用link标签。

列表标签

ol,ul,li样式重置:list-style:none

a样式重置：text-direction ：none

ul，ol有上下16px的外边距，左面40px内边距

img标签

背景图片大于要显示的大小的时候

table标签

11
21	22