1. 标签语义化

①用正确的标签做正确的事情。

②html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

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

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

2. <a>标签的各种取值

href属性

（1）跳转地址

（2）站内文件

（3）锚点（跳转到对于id的元素上）/hash值，加上#跟在url之后，但是不会被发送到服务器。

<!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>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin: 50px;
    }
</style>

<body>
    <!-- 超链接的 URL。可能的值：
    绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
    相对 URL - 指向站点内的某个文件（href="index.htm"）
    锚 URL - 指向页面中的锚（href="#top"） -->
    <a href="#123">1</a>
    <a href="http://www.baidu.com">2</a>
    <a href="./文本.html">3</a>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div id="123">#123</div>
    <div>1</div>
    <script></script>
</body>

</html>

target取值

<!-- 1. rel	text	规定当前文档与被链接文档之间的关系。
2. target	_blank   framename 规定在何处打开链接文档。
            _parent
            _self
            _top
            _blank	在新窗口中打开被链接文档。
            _self	默认。在相同的框架中打开被链接文档。
            _parent	在父框架集中打开被链接文档。
            _top	在整个窗口中打开被链接文档。
            framename	在指定的框架中打开被链接文档。 -->
<!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>
<style>
    #box {
        margin-top: 50px;
        width: 300px;
        height: 300px;
        border: 1px sandybrown solid;
    }
</style>

<body>
        <div>
            <a href="./文本.html" target="_blank">_blank</a>
            <a href="./文本.html" target="_self">_self</a>
            <a href="./文本.html" target="_parent">_parent</a>
            <a href="./文本.html" target="_top">_top</a>
            <a href="./文本.html" target="box">box</a>
        </div>
        <cite>1999 王晨</cite>
        <div id="box"></div>
        <iframe name="box"></iframe>
    <script></script>
</body>

</html>

3.Label 标签

<label> 标签为 input 元素定义标签（label）。

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

<!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>
    <style>
        #demo2 {
            display: none;
        }
        .demo1-div{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: rgb(255, 230, 0);
        }
        .demo2-div{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: rgb(162, 0, 255);
        }
        .demo3-div{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <label for="demo1">
       <div class="demo1-div">点我聚焦</div>
    </label>
    <input id="demo1" />
    <label for="demo2">
        <div class="demo2-div">点我提交</div>
    </label>
    <input id="demo2" type="file" />
    <label>
        <div class="demo3-div">点我触发按钮</div>
        <button onclick="demo3()">demo3</button>
    </label>
    <script>
        function demo3() {
            console.log("我是按钮，我被点了，我不干净了");
        }
    </script>
</body>

</html>

4.HTML 与 XHTML

XML:

1、XHTML中所有的标记都必须有一个相应的结束标签；

2、XHTML所有标签的元素和属性的名字都必须使用小写；

3、所有的XML标记都必须合理嵌套；

4、所有的属性都必须用引号“”括起来；

5、把所有<和&特殊符号用编码表示；

6、给所有属性附一个值；

7、不要在注释内容中使用“--”；

8、图片必须使用说明文字。

HTML5

基本就和上面相反，可以不闭合，可以不写img的alt，可以不合理嵌套，标签大小写都行。

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

①title用于网站信息标题，突出网站标题或关键字，一个网站可以有多个title，seo权重高于H1；H1概括的是文章主题，一个页面最好只用一个H1，seo权重低于title。

解析：

A.从网站角度而言，title则重于网站信息标题，突出网站标题或关键字用title，一篇文章，一个页面最好只用一个H1，H1用得太多，会稀释主题；一个网站可以有多个title，最好一个单页用一个title以便突出网站页面主题信息。

B.从文章角度而言，H1则概括的是文章主题，突出文章主题，用H1，面对的用户，要突出其视觉效果。

C.从SEO角度而言，title的权重高于H1，其适用性要比H1广。

②b为了加粗而加粗，strong为了标明重点而加粗

解析：

A.b这个标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求； B.strong这个标签意思是加强字符的语气，表示该文本比较重要，提醒读者／终端注意。为了达到这个目的，浏览器等终端将其加粗显示；

③ 同②i为了斜体而斜体，em为了标明重点而斜体，且对于搜索引擎来说strong和em比b和i要重视的多

转自 html常见面试题及答案_Acpo的博客-CSDN博客_html面试题

7.请描述下 SEO 中的 TDK？

答案：在 SEO 中，所谓的 TDK 其实就是 title、description、keywords 这三个标签，title 标题标签，description 描述标签，keywords 关键词标签

示例

<!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">
    <!-- 文档标题 T -->
    <title>Document</title>
    <!-- 描述 D -->
    <meta name="description" content="This page is about the meaning of science,education,culture.">
    <!-- 关键词 K -->
    <meta name="keywords" content="test">
</head>

<body>

</body>

</html>

8. 数学标签

<!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>
        <!-- 下角标 -->
        10<sub>2</sub>
        <!-- 次方   -->
        10<sup>2</sup>
        <!-- 标记 -->
        10<mark>2</mark>
        <!-- pp -->
        10*2
    </div>
</body>

</html>

效果图

9. HTML <!DOCTYPE> 声明

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。

HTML5 不是基于 SGML，因此不要求引用 DTD。

提示：总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。

10. 简述一下 src 与 href 的区别。

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

解析：

href

href 标识超文本引用，用在 link 和 a 等元素上，href 是引用和页面关联，是在当前元素和引用资源之间建立联系

若在文档中添加 href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
src

src 表示引用资源，替换当前元素，用在 img，script，iframe 上，src 是页面内容不可缺少的一部分。

当浏览器解析到 src ，会暂停其他资源的下载和处理（图片不会暂停其他资源下载和处理），直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

转载 html常见面试题及答案_Acpo的博客-CSDN博客_html面试题