知识整理之HTML篇

时间 2019-11-08

标签知识整理 html 栏目 HTML 繁體版

原文原文链接

最近关注winter的“重学前端”系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提高。接下来会从HTML、CSS、JS、性能、网络安全、框架通识进行分类总结。

Doctype做用？标准模式与兼容模式各有什么区别?

<!DOCTYPE>声明位于HTML文档的第一行，处于<html>以前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪一个 HTML 版本进行编写的指令。Doctype不存在或者格式不正确都会致使文档以兼容模式/混杂模式呈现。
标准模式的排版和JS运做模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点没法工做。

HTML5 为何只须要写 `<!DOCTYPE HTML>`？

HTML5 不基于 SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照它们该有的方式来运行）
而HTML4.01基于SGML,因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。css

Doctype的类型有哪些？

整体上应该分为三类： HTML5，HTML4.01，XHTML。html

HTML5

HTML5模式是目前最经常使用的模式。直接在DOCTYPE后面添加html便可。前端

<!DOCTYPE html>

HTML4.01 模式

分为三种模式：严格模式(strict)、过分模式(transitional)、Frameset模式。区别在因而否容许使用展现性和弃用元素，以及是否容许使用框架集。html5

严格模式：不容许展现型、弃用元素和框架集。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

过分模式：容许使用展现性元素、弃用元素（好比font、color等），不容许使用框架集。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset模式：容许展现性元素、弃用元素，容许框架集。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 模式

XHTML是一种比较严格的模式，全部元素必须以XML格式编写。分类和HTML4.01比较相似，分为严格模式、过渡模式、Frameset模式，同时添加了1.1模式。css3

严格模式：不容许展现性、弃用元素和框架集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

过渡模式：容许展现性、弃用元素（好比font，color等）,不容许框架集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset模式：容许展现性、弃用元素，容许框架集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1：该 DTD 等同于 XHTML 1.0 Strict，但容许添加模型（例如提供对东亚语系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

最后附上各类文档类型支持的元素列表：HTML5/HTML 4.01/XHTML 元素和有效的 DTDweb

区分HTML4.01和HTML5

DOCTYPE声明
新增结构元素
新增功能元素

HTML和XHTML编写区别

XHTML要求编写符合XML的语法。主要区别在于：算法

XML区分大小写：之前不少<html>、<body>等都用大写或大小写混用如<HTML>、<BODY>或<Html>、<Body>”排版，可是XHTML统一要求须要用<html>、<body>小写。
XML标签必须闭合，单元素须要以/做为闭合结尾，嵌套不能出错。好比：“<meta name="keywords" content="关键字" > ”像这个标签在html是可行的，可是为了xhtml的标准因此必须关闭如“<meta name="keywords" content="关键字" /> ”
XML属性必须放在引号中。
XML属性必须有属性值，不能省略。好比：网页里显示图片img标签里均可加可不加alt属性，可是如今xhtml要求必须加上alt属性,否则xhtml验证将提示错误，哪怕alt的值为空均可以。
XML中空格不会被自动删除。

<meta>

<meta> 元素可提供有关页面的元信息（meta-information），好比针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
经常使用列表以下:chrome

<!DOCTYPE html>  <!-- H5标准声明，使用 HTML5 doctype，不区分大小写 -->
<head lang="en"> <!-- 标准的 lang 属性写法 -->
<meta charset="utf-8">    <!-- 声明文档使用的字符编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   <!-- 优先使用 IE 最新版本和 Chrome -->
<meta name="description" content="不超过150个字符"/>       <!-- 页面描述 -->
<meta name="keywords" content=""/>      <!-- 页面关键词 -->
<meta name="author" content="name, email@gmail.com"/>    <!-- 网页做者 -->
<meta name="robots" content="index,follow"/>      <!-- 搜索引擎抓取 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- 为移动设备添加 viewport -->
<!-- 设置页面不缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

meta viewport

在移动端开发，最常看到head里面设置了下面这个属性：json

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >

经常使用的6个属性：segmentfault

width ：设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale：设置页面的初始缩放值，为一个数字，能够带小数
minimum-scale：容许用户的最小缩放值，为一个数字，能够带小数
maximum-scale：容许用户的最大缩放值，为一个数字，能够带小数
height：设置layout viewport 的高度，这个属性并不重要，不多使用
user-scalable：是否容许用户进行缩放，值为”no”或”yes”, no 表明不容许，yes表明容许

特殊说明：（IE6,7,8）支持，须要使用css3mediaqueries.js

<!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]>

深刻了解，移步至：移动前端开发之viewport的深刻理解

meta http-equiv

http-equiv顾名思义，至关于http的文件头做用。把 content 属性关联到 HTTP 头部。
http-equiv属性主要有如下几种参数：

content-Type(设定网页字符集)(推荐使用HTML5的方式)

说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  <!--旧的HTML，不推荐 -->
<meta charset="utf-8"> <!-- HTML5设定网页字符集的方式，推荐使用UTF-8 -->

X-UA-Compatible(浏览器采起何种版本渲染当前页面)

说明：用于告知浏览器以何种版原本渲染页面。（通常都设置为最新模式，在各大框架中这个设置也很常见。）举例：

<meta http-equiv="X-UA-Compatibel" conent="IE=edge,chrome=1" >  <!-- 指定IE和Chrome使用最新版本渲染当前页面 -->

cache-control(指定请求和响应遵循的缓存机制)

说明：指定浏览器如何缓存某个响应以及缓存多长时间。举例：

<meta http-equiv="cache-contorl" conent="no-cache">

共有如下几种用法：

- no-cache: 先发送请求，与服务器确认该资源是否被更改，若是未被更改，则使用缓存。
 - no-store: 不容许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
 - public : 缓存全部响应，但并不是必须。由于max-age也能够作到相同效果。
 - private : 只为单个用户缓存，所以不容许任何中继进行缓存。（好比说CDN就不容许缓存private的响应）
 - maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器从新请求。例如：max-age=60表示响应能够再缓存和重用 60 秒。

关于浏览器缓存，可移步至：浏览器缓存机制

expires(网页到期时间)

说明:用于设定网页的到期时间，过时后网页必须到服务器上从新传输。举例：

<meta htttp-equiv="expires" content="Sunday 26 October 2019 01:00 GMT">

Pragma(cache模式)

说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就没法从Cache中再调出。举例：

＜meta http-equiv="pragma" content="no-cache"＞

Set-Cookie(cookie设定)

说明：若是网页过时。那么这个网页存在本地的cookies也会被自动删除。举例：

<meta http-equiv="Set-Cookie" content="name, date"> <!-- 格式 -->
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> <!-- 具体范例 -->

refresh(自动刷新并指向某页面)

说明：网页将在设定的时间内，自动刷新并调向设定的网址。举例:

<meta http-equiv="refresh" content="2；URL=https://segmentfault.com/u/clearlove07"> <!-- 意思是2秒后跳转向个人博客 -->

HTML语义化

根据内容的结构，选择合适的标签（代码语义化）恰当地表示文档结构，便于开发者阅读的同时让浏览器的爬虫和机器很好地解析。

为何要语义化？

在没有css的状况下，也能很好的展现内容结构、代码结构。
提高用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用。
有利于SEO：和搜索引擎创建良好的沟通，有助于爬虫获取更多有效的信息，爬虫以来于标签的上下文和各个关键字的权重。
方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备等）以有意义的方式渲染页面。
便于团队开发和维护，语义化更具可读性，减小由于不遵循标准的差别化。

语义化标签的推荐使用场景

天然语言表达能力的补充

做为天然语言和纯文本的补充

在 HTML5 中，就引入了这个表示 ruby 的标签，它由ruby、rt、rp 三个标签来实现。用于注音或者意思的注解。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

用来表达必定的结构或者消除歧义

好比当没有上下文时，如何消除歧义呢？这就要用到咱们的 em 标签，em 表示重音：

今天我吃了一个 <em> 苹果 </em>。
今天我吃了 <em> 一个 </em> 苹果。

实际上，不只仅是读音，这里的意思也发生了变化。前一段中，表示我今天吃的是苹果，而不是别的什么东西，后一段中，则表示我今天只吃了一个苹果，没有多吃。

文章标题摘要

语义化的 HTML 可以支持自动生成目录结构，HTML 标准中还专门规定了生成目录结构的算法，即便咱们并不打算深刻实践语义，也应该尽可能在大的层面上保证这些元素的语义化使用。例如：

<section>
    <h1>HTML 语义 </h1>
    <p>balah balah balah balah</p>
    <section>
        <h1> 弱语义 </h1>
        <p>balah balah</p>
    </section>
    <section>
        <h1> 结构性元素 </h1>
        <p>balah balah</p> 
    </section>
......
</section>

适合机器阅读的总体结构

随着愈来愈多的浏览器推出“阅读模式”，以及各类非浏览器终端的出现，语义化的 HTML 适合机器阅读的特性变得愈来愈重要。
应用了语义化结构的页面，能够明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可让搜索引擎的命中率提高，同时，它也对视障用户的读屏软件更友好。例如：

<body>
    <header>
        <nav>
            ……
        </nav>
    </header>
    <aside>
        <nav>
            ……
        </nav>
    </aside>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>
        <address>……</address>
    </footer>
</body>

书写HTML代码时应该注意什么？

可能少的使用无语义的标签div和span。
在语义不明显时，既可使用div或者p时，尽可能用p, 由于p在默认状况下有上下间距，对兼容特殊终端有利。
不要使用纯样式标签，如：b、font、u等，改用css设置。
须要强调的文本，能够包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）。具体缘由，请移步至：HTML中strong与b,em与i标签的区别
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和通常单元格要区分开，表头用th，单元格用td。
表单域要用fieldset标签包起来，并用legend标签说明表单的用途。
每一个input标签对应的说明文本都须要使用label标签，而且经过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

HTML5新增了哪些语义标签?

注意不要由于html5新标签的出现，而随意用之，错误的使用确定会事与愿违。因此有些地方仍是要用div的，就是由于div没有任何意义的元素，他只是一个标签，仅仅是用来构建外观和结构。所以是最适合作容器的标签。

<header>

header 元素表明“网页”或section的页眉。
一般包含h1-h6元素或hgroup，做为整个页面或者一个内容块的标题。也能够包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h2>网站副标题</h2>
    </hgroup>
</header>

header使用注意：

没有个数限制。
若是hgroup或h1-h6本身就能工做的很好，那就不要用header。

<footer>

footer元素表明“网页”或section的页脚，一般含有该节的一些基本信息，譬如：做者，相关文档连接，版权资料。若是footer元素包含了整个节，那么它们就表明附录，索引，提拔，许可协议，标签，类别等一些其余相似信息。

<footer>
    COPYRIGHT@clearlove07
</footer>

footer使用注意：

没有个数限制，除了包裹的内容不同，其余跟header相似。

<hgroup>

hgroup元素表明“网页”或section的标题，当元素有多个层级时，该元素能够将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。

<hgroup>
    <h1>this is main title</h1>
    <h2>this is sub title</h2>
</hgroup>

hgroup使用注意：

若是只须要一个h1-h6标签就不用hgroup。
若是有连续多个h1-h6标签就用hgroup。
若是有连续多个标题和其余文章数据，h1-h6标签就用hgroup包住，和其余文章元数据一块儿放入header标签。

<nav>

nav元素表明页面的导航连接区域。用于定义页面的主要导航部分。

<nav>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</nav>

nav使用注意：

用在整个页面主要导航部分上，不合适就不要用nav元素。

<aside>

aside元素被包含在article元素中做为主要内容的附属信息部分，其中的内容能够是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
在article元素以外使用做为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容能够是日志串连，其余组的导航，甚至广告，这些内容相关的页面。

<article>
    <p>this is content</p>
    <aside>
        <h1>author decalation</h1>
        <p>i'm a font-end</p>
    </aside>
</article>

aside使用总结：

aside在article内表示主要内容的附属信息。
在article以外则可作侧边栏，没有article与之对应，最好不用。
若是是广告，其余日志连接或者其余分类导航也能够用。

<section>

section元素表明文档中的“节”或“段”，“段”能够是指一篇文章里按照主题的分段；“节”能够是指一个页面里的分组。
section一般还带标题，虽然html5中section会自动给标题h1-h6降级，可是最好手动给他们降级。以下：

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>关于section</h1>
        <p>section的介绍</p>
        <section>
            <h3>关于其余</h3>
            <p>关于其余section的介绍</p>
        </section>
    </article>
</section>

section使用注意：

表示文档中的节或者段。
article、nav、aside能够理解为特殊的section，因此若是能够用article、nav、aside就不要用section，没实际意义的就用div。

<article>

article元素最容易跟section和div容易混淆，其实article表明一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）

<article>
    <h1>一篇文章</h1>
    <p>文章内容..</p>
    <footer>
        <p><small>版权：html5jscss网所属，做者：小北</small></p>
    </footer>
</article>

article使用注意：

自身独立的状况下：用article。
是相关内容：用section。
没有语义的：用div。

<address>

address 标签订义文档做者/全部者的联系信息。

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

address使用注意：

不该该使用 address 标签来描述邮政地址，除非这些信息是联系信息的组成部分。
address 元素一般被包含在 footer 元素的其余信息中。

html5有哪些新特性、移除了那些元素？

新特性

拖拽释放（Drag and drop）API
语义化标签（header、footer、nav、aside、article、section等）
音频、视频API（audio、video）
画布（Canvas）API
地理(Geolocation) API
本地存储：localStorage和sessionStorage
离线应用：manifest
桌面通知：Notifications
加强表单控件：date、time、url、search、email、calendar等
多任务：Web Worker
全双工通讯协议: Web Socket
历史管理: History
页面可见性改变事件: visibilitychange
跨窗口通讯: PostMeaage
Form Data 对象
新增选择器：document.querySelector、document.querySelectorAll

移除元素

纯表现元素：basefont、big、center、font、s、u、tt、strike
对可用性产生负面影响的元素: frameset、frame、noframes

如何处理HTML5新标签的浏览器兼容问题？

IE8/IE7/IE6支持经过document.createElement方法产生的标签。
使用html5shim框架

<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]>

HTML5的离线储存工做原理能不能解释一下，怎么使用？

HTML5的离线储存原理

用户在线时，保存更新用户机器上的缓存文件；当用户离线时，能够正常访离线储存问站点或应用内容

HTML5的离线储存使用：

在文档的 html 标签设置 manifest 属性，如 manifest="/offline.appcache"
在项目中新建 manifest 文件，manifest 文件的命名建议：xxx.appcache
在 web 服务器配置正确的 MIME-type，即 text/cache-manifest

示例

<!DOCTYPE html>
<html manifest="cache.manifest">
    ....
</html>

cache.manifest文件的书写方式，就像下面这样：

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

CACHE:表示须要离线存储的资源列表，因为包含manifest文件的页面将被自动离线存储，因此不须要把页面自身也列出来。
NETWORK:表示在它下面列出来的资源只有在在线的状况下才能访问，他们不会被离线存储，因此在离线状况下没法使用这些资源。不过，若是在CACHE和NETWORK中有一个相同的资源，那么这个资源仍是会被离线存储，也就是说CACHE的优先级更高。
FALLBACK:表示若是访问第一个资源失败，那么就使用第二个资源来替换他，好比上面这个文件表示的就是若是访问根目录下任何一个资源失败了，那么就去访问offline.html。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的？

在线的状况下，浏览器发现 html 标签有 manifest 属性，它会请求 manifest 文件
若是是第一次访问app，那么浏览器就会根据 manifest 文件的内容下载相应的资源而且进行离线存储
若是已经访问过app且资源已经离线存储了，浏览器会对比新的 manifest 文件与旧的 manifest 文件，若是文件没有发生改变，就不作任何操做。若是文件改变了，那么就会从新下载文件中的资源并进行离线存储
离线的状况下，浏览器就直接使用离线存储的资源

浏览器解析manifest须要注意哪些问题？

若是服务器对离线的资源进行了更新，那么必须更新manifest文件以后这些资源才能被浏览器从新下载，若是只是更新了资源而没有更新manifest文件的话，浏览器并不会从新下载资源，也就是说仍是使用原来离线存储的资源。
对于manifest文件进行缓存的时候须要十分当心，由于可能出现一种状况就是你对manifest文件进行了更新，可是http的缓存规则告诉浏览器本地缓存的manifest文件还没过时，这个状况下浏览器仍是使用原来的manifest文件，因此对于`manifest文件最好不要设置缓存。
浏览器在下载manifest文件中的资源的时候，它会一次性下载全部资源，若是某个资源因为某种缘由下载失败，那么此次的全部更新就算是失败的，浏览器仍是会使用原来的资源。
在更新了资源以后，新的资源须要到下次再打开app才会生效，若是须要资源立刻就能生效，那么可使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的缘由是浏览器会先使用离线资源加载页面，而后再去检查manifest是否有更新，因此须要到下次打开页面才能生效。

页面可见性（Page Visibility API）能够有哪些用途？

在页面被切换到其余后台进程的时候，自动暂停音乐或视频的播放
当用户浏览其余页面，暂停网站首页幻灯自动播放
完成登录后，无刷新自动同步其余页面的登陆状态

关于Page Visibility的原理和应用场景，请移步至阮大神的：Page Visibility API 教程

WebSocket

WebSocket是一种在单个TCP链接上进行全双工通讯的协议。

为何须要 WebSocket ？

HTTP 协议有一个缺陷：通讯只能由客户端发起。
这种单向请求的特色，注定了若是服务器有连续的状态变化，客户端要获知就很是麻烦。大多数 Web 应用程序将经过频繁的异步JavaScript和XML（AJAX）请求实现长轮询。轮询的效率低，很是浪费资源（由于必须不停链接，或者 HTTP 链接始终打开）。

WebSocket特色：

服务器能够主动向客户端推送信息，客户端也能够主动向服务器发送信息。
创建在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，而且握手阶段采用 HTTP 协议，所以握手时不容易屏蔽，能经过各类 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通讯高效。
能够发送文本，也能够发送二进制数据。
没有同源限制，客户端能够与任意服务器通讯。
协议标识符是ws（若是加密，则为wss），服务器网址就是 URL。

关于WebSocket的使用介绍，请移步至软大神的：WebSocket 教程

WebSocket 如何兼容低浏览器？

Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 编码发送 XHR
基于长轮询的 XHR

简述一下src与href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为何将js脚本放在底部而不是头部。

href

href是Hypertext Reference的缩写，指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，若是咱们在文档中添加:

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件，就会并行下载资源而且不会中止对当前文档的处理。这也是为何建议使用link方式来加载css，而不是使用@import方式。

link和@import的区别

二者都是外部引用CSS的方式，可是存在必定的区别：

link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

iframe 有哪些缺点？

iframe的优势：

iframe可以原封不动的把嵌入的网页展示出来。
若是有多个网页引用iframe，那么你只须要修改iframe的内容，就能够实现调用的每个页面内容的更改，方便快捷。
若是遇到加载缓慢的第三方内容如图标和广告，这些问题能够由iframe来解决。

iframe的缺点：

会产生不少页面，不容易管理。
iframe框架结构有时会让人感到迷惑，若是框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
代码复杂，没法被一些搜索引擎索引到，这一点很关键，如今的搜索引擎爬虫还不能很好的处理iframe中的内容，因此使用iframe会不利于搜索引擎优化。
不少的移动设备（PDA手机）没法彻底显示框架，设备兼容性差。
iframe框架页面会增长服务器的http请求，对于大型网站是不可取的。

分析了这么多，如今基本上都是用Ajax来代替iframe，因此iframe已经渐渐的退出了前端开发。

title与h1的区别、b与strong的区别、i与em的区别？

tilte与h1的区别

从搜索引擎角度来讲,title标签是用来描述这个页面的主题的,是一个网页权重的最高点。但title标签并不出如今文章的正文中。而h1标签通常出如今文章的正文中,是展现给访问者的文章的标题。因此说这两个标签不只不冲突的,而是合做的关系。一篇文章既要有title又要有h1标签,既突出了文章的主题,又突出了标题和关键字,达到双重优化网站的效果。
通常会把title和h1标签的内容写成同样,并且通常状况下一篇文章最好只用一个h1标签,过多的h1标签反而会让搜索引擎迷糊,认不清文章的主题。也就是说,从网站角度看,title更重于网站信息。title能够直接告诉搜索引擎和用户这个网站是关于什么主题和内容的。
从文章角度看,h1则是用于归纳文章主题。用户进入内容页,想看到的固然就是文章的内容,h1文章标题就是最重要的。文章标题最好只有一个,多个h1会致使搜索引擎不知道这个页面哪一个标题内容最重要,致使淡化这个页面的标题和关键词,起不到突出主题的效果。
区别:

h1突出文章主题,面对用户,更突出其视觉效果。而title突出网站标题或关键字用。
从seo看,title权重比h1高,适用性比h1广。

一个好的网站是h1和title并存,既突出h1文章主题,又突出网站主题和关键字。达到双重优化网站的效果。

b与strong的区别、i与em的区别

它们的区别就再于一个是物理元素,一个是逻辑元素。
物理元素所强调的是一种物理行为,好比说我把一段文字用b标记加粗了,个人意思是告诉浏览器应该给我加粗了显示这段文字,从单词的语义也能够分析得出,b是Bold(加粗)的简写,因此这个B标记所传达的意思只是加粗,没有任何其它的做用。
而Strong咱们从字面理解就能够知道他是强调的意思,因此咱们用这个标记向浏览器传达了一个强调某段文字的消息,而这个Strong就是咱们所说的逻辑元素,他是强调文档逻辑的,并不是是通知浏览器应该如何显示。
也就是说,这两对标签最大区别就是一个给搜索引擎看的,一个是给用户看的。就用b和strong标签作例子吧。
b标签和strong标签给咱们的主观感觉都是加粗,但对搜索引擎来讲b标签和普通的文字并无什么区别,而strong标签倒是起强调做用的。也就是说若是你想让搜索引擎认为你的某句话很重要时那就用strong标签。若是只是想让用户看到加粗的效果,那就用b标签。
同理如em标签也是针对搜索引擎来起做用的,i标签只是让用户看到展现的是斜体。

行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素有: a、b、span、img、input、strong、select等
块级元素有: div、ul、li、ol、dl、dd、dt、h1-h6等
常见的空元素: br hr img input link meta等

label 的做用是什么？怎么使用的？

`label`标签用来定义表单控件的关系：

当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。

使用方法

<!-- 方法一 -->
<labek for="moible">Mobile: </for>
<input type="number" id="mobile" placeholder="请输入电话号码" />

<!-- 方法二 -->
<label>
    name: <input tpye="text" placeholder="请输入你的名字" />
</label>

1. HTML知识整理
2. html 知识整理
3. 知识整理之CSS篇
4. html+css知识点整理
5. HTML基础知识整理
6. html知识点整理（全）
7. html基础知识整理
8. 知识体系整理之CSS篇
9. 知识整理之浏览器篇
10. 知识点总结之HTML篇
更多相关文章...
• 与传输层有关的基本知识 - TCP/IP教程
• Spring通知类型及使用ProxyFactoryBean创建AOP代理 - Spring教程
• Docker 清理命令
• 互联网组织的未来：剖析GitHub员工的任性之源