前端面试总结——HTML

0. 在最前面编辑,写完放到后面

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的一个子集。

扫描二维码关注公众号,回复: 12819899 查看本文章

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

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

区别

从文档声明类型上看:

  • 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是指向网络资源所在位置(的超链接),用来建立和当前元素或文档之间的连接,当浏览器识别到它他指向的文件时,就会并行下载资源,不会停止对当前文档的处理。

猜你喜欢

转载自blog.csdn.net/weixin_45844049/article/details/115032739