前端面试基础题：HTML文件结构及常用标签

2023-07-0309:00:39WEB前端开发Comments2,271 views字数 7731阅读模式

✨ HTML文件结构

<!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></style>
</head>
<body>
    <script></script>
</body>
</html>

<!DOCTYPE html>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<html lang="en">用来定义当前文档显示的语言。
<meta charset="UTF-8">用来规定HTML文档应该使用哪种字符编码。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 指定网页兼容性模式设置。
基本结构标签
- <html></html>：根标签
- <head></head>：文档头部
- <title></title>：文档标题
- <body></body>：文档主体

✨ 常用meta标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<!-- 字符集 -->
<meta charset="UTF-8" >
<!-- 关键词 -->
<meta name="keywords" content="关键词" />
<!-- 页面描述 -->
<meta name="description" content="页面描述内容" />
<!-- 页面重定向和刷新 -->
<meta http-equiv="refresh" content="0;url=" />
<!-- 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 搜索引擎索引方式 -->
<meta name="robots" content="index,follow" />

✨ HTML语义化

根据网页中内容的结构，选择适合的HTML标签进行编写。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

语义化的优点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

对机器友好，有助于搜索引擎的爬虫爬取有效信息，有利于SEO。
对开发者友好，语义类标签增强了可读性，结构更加清晰，便于团队的开发与维护。

常见语义化标签：<header> ，<nav>，<section>，<article>，<aside>，<footer>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

✨ SEO搜索引擎优化

SEO的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。而优化的目的就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

使用HTTPS：HTTPS站点比HTTP站点能获得更好的排名；
确保页面快速加载：如果网站加载缓慢，会损坏站点的搜索排名；
设置好有流量潜力的关键词：<meta name="keywords" content="keywords1, keywords2...">；
使用简明扼要的URL
编写一个引人注目的标题和描述：<title></title>和<meta name="description" content="...">；
加入内链：页面从内部和外部获得的链接越多，页面搜索排名会越高。可以设置ref="nofollow"防止页面权重被分散；
获取更多外链：其他知名的网站都链接到该页面，则表明该页面的内容是高质量的；
LOGO SEO优化：logo盒子中放一个<h1>标签，告诉搜索引擎这里很重要，<h1>中再放一个<a>标签，返回首页，将logo图片作为背景给<a>,<a>中放置网站名称，但不显示（设置text-indent: -9999px，或font-size: 0），最后给<a>添加title属性。

LOGO SEO优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

logo中放置一个<h1>标签（提权）告诉搜索引擎这个地方很重要，<h1>标签中再放一个<a>标签返回首页，将logo图片作为背景给<a>，<a>中放文字，但不显示。最后给<a>添加title属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

text-indent: -9999px; overflow: hidden;
font-size: 0;

✨ `<img>`的title属性和alt属性

title：当鼠标移动到img元素上时显示title的内容
alt：如果无法显示图像，浏览器将显示alt指定的内容

✨ href和src的区别

href：表示超文本引用，指向网络资源，建立和当前元素或文档的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理。常在a、link标签中。
src：表示资源引用，指向外部资源，指向的内容会嵌入到当前标签的位置。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以JS脚本一般放在页面底部。

✨ link和@import的区别

<!-- link标签引入 -->
<link href="css/a.css" type="text/css" rel="stylesheet"/>

<!-- @import引入 -->
<style type="text/css">
	@import url("css/a.css");
</style>

link是HTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要网页完全载入以后加载，这种方式加载css相当于把css放在了底部，在网速慢的情况下，会出现一开始没有css样式，闪烁一下出现样式后的页面的情况。
link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
可以通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

✨ 为什么在HTML页面中CSS在头部引入，script在尾部引入

如果将css放在头部，css的下载解析是可以和html的解析同步进行的，放到尾部，要花费额外时间来解析css，并且浏览器会先渲染出一个没有样式的页面，等CSS加载完后会再渲染成一个有样式的页面，页面会出现明显的闪动的现象，会导致浏览器发生回流重绘，这个开销是非常大的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

script标签会阻塞html解析，从而阻塞页面渲染，另外js可能会修改dom元素，所以一般把script标签放在html文档的最后，或者给script标签加上defer，async参数，强制让script标签延迟加载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

✨ label标签的作用

在定义单选框或者复选框的时候，只能通过点击这个选择框选中，有了这个label标签之后可以把这个单选或复选框跟文本描述关联起来，这样点击文字就能选中这个单选框或复选框。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<label for="male">男</label>
<input type="radio" name="sex" id="male">
<label for="female">女</label>
<input type="radio" name="sex" id="female">

✨ XML、HTML、XHTML

XML（可扩展标记语言）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

XML用来传输数据而非显示数据，没有预定义的标签集，有句法规则：每个打开的标签必须有匹配的结束标签，不得含有次序颠倒的标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

HTML（超文本标记语言）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

HTML是一种标记语言，有一套标记标签，使用标记标签来描述网页，是为了显示数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

XHTML（可扩展超文本标记语言）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

XHTML是HTML的升级版，有很多其它的规范：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

元素必须正确嵌套
元素必须始终关闭（有结束标签）
元素必须小写
元素属性必须用引号括起来

✨ Canvas和SVG

Canvas和SVG的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

SVG是一种使用XML描述2D图形的语言，Canvas通过JS来绘制2D图形。
SVG是矢量图，放大不会失真。
在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。Canvas是逐像素进行渲染的，一旦图形被绘制完成，它就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景需要重绘。

Canvas文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<canvas>标签只是图形容器，必须使用脚本来绘制图形。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<canvas>标签只有两个属性—— width和height，这两个属性是可选的。当我们没有定义时，Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，我们也可以使用HTML的高度和宽度属性来自定义尺寸。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

Canvas坐标：Canvas是一个二维网格，以左上角坐标为(0,0)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

Canvas绘制图像步骤：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

找到canvas元素
创建context对象（<canvas> 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。这里，我们采用CanvasRenderingContext2D。）
绘制你所需的图像

Canvas图形绘制API：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

API	作用
rect(x, y, width, height)	绘制一个左上角坐标为（x,y），宽高为width以及height的矩形
fillRect(x, y, width, height)	绘制一个填充的矩形
strokeRect(x, y, width, height)	绘制一个矩形边框
clearRect(x, y, width, height)	清除指定矩形区域，让清除部分完全透明
beginPath()	新建一条路径
closePath()	闭合路径，绘制一条从当前点到开始点的直线来闭合路径
stroke()	通过线条来绘制图形轮廓
fill()	通过填充路径的内容区域生成实心的图形（自动闭合）
moveTo(x, y)	将笔触移动到指定的(x, y)坐标上
lineTo(x, y)	绘制一条从当前位置到指定(x, y)位置的直线
arc(x, y, radius, startAngle, endAngle, anticlockwise)	画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向
fillText(text, x, y [, maxWidth])	在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的
strokeText(text, x, y [, maxWidth])	在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的

<!-- 例子 -->
<canvas id="mycanvas" width="200" height="300">
   您的浏览器不支持canvas
</canvas>
<script>
    var cc = document.getElementById("mycanvas");
    if(cc.getContext){
        var cxt = cc.getContext("2d");
        cxt.strokeRect(20,20,100,100);
        cxt.fillRect(40,40,50,50);
        cxt.clearRect(50,50,30,30);
    }
</script>

SVG文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

SVG 使用 XML 格式定义图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

SVG的代码可以直接嵌入到HTML页面中，或直接链接到SVG文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

SVG有一些预定义的形状元素：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

矩形 <rect x="x坐标" y="y坐标" rx="圆角" ry="圆角" width="宽度" height="高度">
圆形 <circle cx="圆心x坐标" cy="圆心y坐标" r="半径" stroke="轮廓颜色" stroke-width="轮廓粗细" fill="填充颜色">
椭圆 <ellipse cx="中心x坐标" cy="中心y坐标" rx="水平半径" ry="垂直半径">
线 <line x1="起点x坐标" y1="起点y坐标" x2="终点x坐标" y2="终点y坐标">
折线 <polyline points="x1,y1 x2,y2, x3,y3 ...">
多边形 <polygon points="x1,y1 x2,y2, x3,y3 ...">
路径 <path>
文本 <text>

✨ HTML5的更新

语义化标签：<header>, <nav>, <article>, <section>, <aside>, <footer>等
媒体标签：音频<audio>，视频<video>
表单类型：email, url, number, serach, range, color, time, date, datetime等
表单属性：placeholder, autofocus, autocomplete, required, pattern, multiple, form等
表单事件：oninput, onvalid
DOM查询：document.querySelector，document.querySelectorAll
Web存储：localStorage，sessionStorage
其他：canvas，SVG

✨ 输入URL到页面显示的前端体系知识

1. 用户在地址栏输入URL地址文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

2. 检查缓存文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

浏览器读取的顺序为：Memory Cache → Disk Cache
- Memory Cache：基于内存的缓存，读取高效速度快，但是一旦关闭网页，内存就释放了
- Disk Cache：基于磁盘的缓存，容量大，读取慢
强缓存、协商缓存

3. DNS解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

将域名转换为IP地址。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

查询DNS缓存
主机向本地域名服务器查询：递归查询
本地域名服务器向根域名服务器查询：迭代查询（根→顶级→权限域名服务器）

4. 建立TCP连接：三次握手文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

5. HTTPS的TLS握手文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

6. 成功建立连接文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

连接建立成功之后，浏览器会构建请求行、cookie等数据附加到请求头中，发给服务器，服务器接受请求并解析。如果没有对应的资源就返回404状态码。
否则检查HTTP请求头有没有包含协商缓存信息(前面查询强缓存已过期的话会走这个步骤)，如果验证缓存没有更新，过期的缓存依然可以使用，就返回304和空响应体。
如果没有缓存或者资源更新了，且还没有CDN的话，就读取完整请求并准备http响应，进行查询数据库等操作。
如果连接的是CDN节点，并且正好有这个资源就直接返回，如果没有资源或者资源更新了，CDN服务器就去源站获取文件，如果源站也没有，就返回404，有的话就返回给CDN节点缓存起来。
响应数据通过之前建立的TCP连接，返回给浏览器的网络进程。
浏览器接收到响应数据之后，如果是http1.1以下则直接关闭连接，否则双方都可以根据情况选择关闭TCP连接或者保留重用，现在浏览器默认都会保持连接(keep-alive)

7. 关闭TCP连接：四次挥手文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

8. 浏览器解析文档并渲染页面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

（1）构建DOM树文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

根据html规范对字符词法分析，将html字符解析为Tokens(标记）
对标记进行语法分析，转成DOM节点并定义属性和规则
根据节点对象关系按照顺序依次向解析栈添加，形成DOM Tree（根节点为Document）

（2）构建CSS规则树文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

DOM解析和CSS解析是异步的，不会互相干扰，因此CSS的加载不影响DOM树的构建。
但CSS会阻塞JS，间接导致阻塞DOM解析

（3）构建Render渲染树文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

浏览器使用DOM树和CSS规则树构建出Render Tree。此时不像构建DOM树一样把所有节点构建出来，浏览器只构建需要在屏幕上显示的部分，因此像 <head> 或 <meta> 这些标签就无需构建了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

浏览器从DOM树开始，遍历每一个“可见”节点
对于每一个"可见"节点，在CSSOM上找到匹配的样式并应用

（4）布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。从渲染树的根节点开始遍历，通过渲染树每一个节点的宽高，位置等信息，确定每个节点在页面上的确切大小和位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

（5）绘制文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

浏览器会遍历渲染树，绘制页面的像素信息。在绘制过程中，浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素。绘制包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

（6）合成文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

浏览器主进程将默认图层和复合图层交给GPU进程，GPU进程再将各个图层合成，最后显示出页面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

默认图层指的是普通文档流的元素（包括absolute这些脱离文档流的）
复合图层一般指的使用动画执行或者<video>,<iframe>,<canvas>,<webgl>等元素，也可以使用z-index将层级高的元素变成复合图层

GPU中，各个复合图层是单独绘制的，单独分配资源，这样的话，无论它图层内部发送何等复杂的变化，也不会影响默认图层的回流重绘。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

✨ 常见浏览器内核

IE浏览器	FireFox浏览器	Safari浏览器	Chrome浏览器
Trident	Gecko	Webkit	Blink

✨ HTML标签

HTML常用基本标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

标签	说明
<h1></h1>~<h6></h6>	标题标签
<p></p>	段落标签
<br/>	强制换行
<hr/>	水平分隔线
<div></div><span></span>	容器标签

文本格式化标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

标签	说明
<strong></strong>或<b></b>	加粗
<em></em>或<i></i>	斜体
<del></del>或<s></s>	删除线
<ins></ins>或<u></u>	下划线
<small></small>	小号字
<sub></sub>	下标字
<sup></sup>	上标字

图像标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<img src="url" title="提示文本" alt="替换文本" />

超链接标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<a href="url" target="_blank"></a>
<!-- target属性：_self(默认)当前窗口跳转，_blank新窗口打开 -->

表格标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<table>
    <!-- 头部 -->
    <thead>
    	<tr>
            <th></th>
        </tr>
    </thead>
    <!-- 主体 -->
    <tbody>
    	<tr>
            <td></td>
        </tr>
    </tbody>
    <!-- 底部 -->
    <tfoot></tfoot>
</table>

合并单元格属性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

rowspan：跨行合并
colspan：跨列合并

列表标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<!-- 无序标签 -->
<ul>
    <li></li>
</ul>
<!-- 有序标签 -->
<ol>
    <li></li>
</ol>
<!-- 自定义标签 -->
<dl>
    <dt></dt>
    <dd></dd>
</dl>

表单标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49414.html

<form action="url" method="提交方式" name="表单名称">
    <input type="表单类型" />
    
    <select>
        <option></option>
    </select>
    
    <textarea></textarea>
</form>