前端知识点总结——HTML

置顶圆圆01

已于 2022-06-09 15:07:07 修改

阅读量323

点赞数 3

分类专栏：前端知识点总结文章标签： html html5

于 2021-03-20 19:17:50 首次发布

本文链接：https://blog.csdn.net/weixin_45844049/article/details/115032739

版权

前端知识点总结专栏收录该内容

4 篇文章 3 订阅

订阅专栏

1. doctype的作用是什么？

DOCTYPE（document type）的简写，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。

HTML 4.01 和 HTML5 中 DOCTYPE的区别

HTML 4.01 中的 doctype 需要对 DTD（文档类型定义Document Type Definition）进行引用，因为 HTML 4.01 基于 SGML（标准通用标记语言国际上定义电子文档和内容描述的标准）。
HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（html 5简化了这种声明，意在告诉浏览器使用统一的标准即可）。

两种版本的声明方式

HTML 5：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML 4

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

2. HTML、XHTML、XML有什么区别

HTML：HyperText Markup Language / 超文本标记语言
XML: Extensible Markup Language / 可扩展标记语言
XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语

XML 被设计用来传输和存储数据。

HTML 被设计用来显示数据。

HTML

HTML 是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。

所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。

XML

XML 可以自己“发明”标签————这也是“可扩展的”一个含义。

XML 没什么特别的。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理 XML。

XHTML

HTML 和 XML 一结合，就产生了 XHTML。是更严谨更纯净的 HTML 版本。

从继承关系上讲，HTML是一种基于标准通用标记语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言（XML），XML是SGML的一个子集。

3. 什么是data-属性？

在HTML5中我们可以使用data-*（自定义数据属性）为前缀来设置我们需要的自定义属性，来进行一些数据的存取。

如何使用？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1" class="div1" data-id="myId" data-id-and-class="Hello">test2</div>
    <div id="div2" myName="Hello">test</div>
    <script>
        var div1 = document.getElementById("div1");
        //获取自定义的值
        var myId = div1.getAttribute("data-id");
        var my = div1.getAttribute("data-id-and-class");
        console.log(myId); // myId
        console.log(my); // Hello
        
        //设置自定义的值
        div1.setAttribute("data-name", "nicai")

        var div = document.getElementById("div2");
        var myName = div.getAttribute("myName");
        console.log(myName); //Hello
        </script>
</body>
</html>

getAttribute方法能在所有现代浏览器中正常工作，但它不是HTML5的自定义data-*属性被使用的目的，这个方法也用到我们以前使用自定义属性。

4. 对HTML语义化的理解？

深入浅出的web语义化理解_前端圆圆-CSDN博客_web语义化的理解 https://blog.csdn.net/weixin_45844049/article/details/109508985

5. 什么是HTML5？HTML5和HTML的区别是什么？

什么是HTML5

HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

区别

从文档声明类型上看：

HTML是很长的一段代码，很难记住。如下代码：

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

HTML5却只有简简单单的声明，方便记忆。如下：

<!DOCTYPE html>

从语义结构上看：

HTML4.0：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header>、<article>、<footer>。

从语法的处理上看：

HTML无法处理不准确的语法；HTML5能够处理不准确的语法。

6. 有哪些常用的meta标签？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

</html>

<meta>：文档级元数据元素

meta 元素定义的元数据的类型包括以下几种：

如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。
如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

7. src和href的区别？

什么是src

src是source的缩写，表示外部文件的引用，代表了指向外部资源的位置，把引用的文件加载到html页面的指定位置中去。

src属性是页面内容中不可缺少的一部分，常用到 js脚本，img图片和frame等元素。例如:

<script src="script.js">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

<img src="2.png" />
<img src="https://apps.bdimg.com/img/2.png" />

什么是href

href是Hypertext Reference的简写，表示超文本引用，代表了指向网络资源的所在位置，它与页面直接的关系为链接的关系。

<link href="reset.css" rel=”stylesheet“/>
<a href="https://www.php.cn/">

区别

src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。

8. img的srcset的作用是什么？（追问）

img的srcset的作用

img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

属性格式：图片地址宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如：

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效。

img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。

属性格式：媒体查询宽度描述（支持px），多条规则用逗号分隔。

<img src="images/gun.png" alt="img元素srcset属性浅析"
     srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"
     sizes="(max-width: 320px) 300w, 1200w"/>

上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px。

还有哪一个标签能起到跟srcset相似作用？（追问）

<picture>：picture 元素
HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。

<!--Change the browser window width to see the image change.-->

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

要决定加载哪个URL，用户代理检查每个的 srcset、media 和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

还有什么能起到跟srcset相似作用？（追问）

css image-set()

body {
    background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
    background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}

上述代码将会为普通屏幕使用 pic-1.jpg，为高分屏使用 pic-2.jpg，如果更高的分辨率则使用 pic-3.jpg，比如印刷。

9. `< script >`标签中defer和async的区别？

在 HTML 中会遇到以下三类 script：

<script src='xxx'></script>
<script src='xxx' async></script>
<script src='xxx' defer></script>

那么这三类 script 有什么区别呢？

script

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。整个过程如下图所示：
在这里插入图片描述
可以看到，script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。这也是我们平时都把<script>标签放到底部的原因。

async script

async 表示异步，例如七牛的源码中就有大量的 async 出现：
在这里插入图片描述
当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析，图示如下：
在这里插入图片描述
当然，如果在 JS 脚本请求回来之前，HTML 已经解析完毕了，那就啥事没有，立即执行 JS 代码，如下图所示：

所以 async 是不可控的，因为执行时间不确定，你如果在异步 JS 脚本中获取某个 DOM 元素，有可能获取到也有可能获取不到。而且如果存在多个 async 的时候，它们之间的执行顺序也不确定，完全依赖于网络传输结果，谁先到执行谁。这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适用。

defer script

defer 表示延迟，例如掘金的源码中就有大量的 defer 出现：
在这里插入图片描述
当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码，图示如下：
在这里插入图片描述
如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。