知识整理之HTML篇

2024年1月31日 165次阅读 来源: Clearlove

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

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

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

HTML5 为什么只需要写 <!DOCTYPE HTML>？

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

Doctype的类型有哪些？

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

HTML5

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

<!DOCTYPE html>

HTML4.01 模式

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

  • 严格模式：不允许展示型、弃用元素和框架集。
<!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模式。

  • 严格模式：不允许展示性、弃用元素和框架集
<!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 元素和有效的 DTD

区分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> 标签的属性定义了与文档相关联的名称/值对。
常用列表如下:

<!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里面设置了下面这个属性：

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

常用的6个属性：

  • 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语义化

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

为什么要语义化？

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

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

自然语言表达能力的补充

  • 作为自然语言和纯文本的补充

在 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代码时应该注意什么？

  1. 可能少的使用无语义的标签div和span。
  2. 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利。
  3. 不要使用纯样式标签，如：b、font、u等，改用css设置。
  4. 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）。具体原因，请移步至：HTML中strong与b,em与i标签的区别
  5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td。
  6. 表单域要用fieldset标签包起来，并用legend标签说明表单的用途。
  7. 每个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有哪些新特性、移除了那些元素？

新特性

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

移除元素

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

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

  1. IE8/IE7/IE6支持通过document.createElement方法产生的标签。
  2. 使用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特点：

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

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

WebSocket 如何兼容低浏览器？

  1. Adobe Flash Socket
  2. ActiveX HTMLFile (IE)
  3. 基于 multipart 编码发送 XHR
  4. 基于长轮询的 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>
    原文作者：Clearlove
    原文地址: https://segmentfault.com/a/1190000017996964
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞