面试押题(1) -- HTML5

柔情只为你懂 2022-12-19 08:55 150阅读 0赞

### 文章目录 ###

*  1: 复习：
 *   *   *  · DOCTYPE和lang以及字符串的作用
         *  · 相对路径
         *  · 特殊标签
         *  · 锚点标签
         *  · 绝对路径
         *  · 表格标签 table
         *  · 表单域 form
         *  · label 标注
         *  · html查 W3School
 *  2: 押题：
 *   *  · 1：常问：
     *   *  · 什么是 HTML5? (重点)
         *  · HTML 代码约定
         *  · HTML5有哪些的新特性？(重点)
         *   *  \`· canvas图形 video视频 audio音频\`
         *  · 语义化标签 (重点)
         *   *  \`· header nav section article aside footer \`
         *  · Web 存储 (重点)
         *   *  · localStorage 长久保存
             *  · sessionStorage 临时保存
         *  · 常用元素
         *   *  · 常用块级元素 block
             *  · 常用行级元素 inline
         *  · link 和 @import 的区别是？
         *  · 浏览器的内核分别是什么
         *  · 常见兼容性问题及解决方案
         *   *  · src 和 href 的区别
         *  cookie session localStroage sessionStorage 的区别和优点 (重点)
         *  url地址输入后，接下来会发生什么
         *  什么是标签语义， 有什么作用
         *  简述下你对html 语义化的理解 (重点)
         *  网站如何进行性能优化
         *  XHTML 和 HTML有什么区别
         *  常用块元素， 行内元素，空元素有哪些
     *  2：不常问：
     *   *  浏览器的渲染过程
         *  · 前端由哪三层构成， 分别是什么
         *  · svg 和canvas 区别
         *  常见的空元素有哪些
         *  label 标签的作用是什么， 是怎么用的
         *  请说出 XHTML 和 HTML 的区别
         *  很多网站不常用 table iframe 这2个元素， 为什么
         *  请用 HTML 知识，解决seo优化问题
         *  xhtml的局限性

# 1: 复习： #

### · DOCTYPE和lang以及字符串的作用 ###

> `<!DOCTYPE html>` 文档类型声明标签， 告诉浏览器这个页面采取html版本来显示  
> `<html lang="en">` 告诉浏览器或者搜索引擎，这是一个英文网站，本页面采取英文来显示  
> `<meta charest="UTF-8">`必须写， 采取HTF-8 来保存文字， 如果不写就会乱码

### · 相对路径 ###

> 同级路径 `<img src="baidu.gif" />`  
> 下一级 `< img src="images/baidu.gif" />`  
> 上一级`< img src="../baidu/gif" />`

### · 特殊标签 ###

> ` `空格标签  
> `&lt` < 左箭头  
> `&gt` > 右箭头

### · 锚点标签 ###

> 1：设置点击的a标签 `<a href="#two">第二集</a>`  
> 2：设置对应接收的标签，点击就会跳转到该位置： `<h2 id="#two">第二集 内容介绍</h2>`

### · 绝对路径 ###

> 相对于本地的地址： `< img src="C:\Users\Administrator\Desktop\baidu.gif" />`  
> 相对于服务器地址： `< img src="www.baidu.com/images/logo.png" />`

### · 表格标签 table ###

> align ： left right center 表格在浏览器中的位置  
> border: 默认没有边框  
> cellpadding 单元格和内容之间的空隙 默认1px  
> cellspacing 单元格与单元格之间的空隙 默认 2px  
> width 表格的宽度， height 表格的高度  
> rowspan = “跨行合并单元格的个数”  
> colspan = “跨列合并单元格的个数”

### · 表单域 form ###

> `<form action="url地址" method="提交方式" name="表单域名称"></form>`  
> action=“提交到url地址”  
> method=“提交方式”  
> name=“表单域名称” 一个页面中有多个表单

### · label 标注 ###

> `<label for="sex">男</label>`  
> `<input type="radio" name="sex" id="sex" />`  
> 注意 label的 **sex** 和 input 的 **sex** 需要保相同

### · html查 W3School ###

# 2: 押题： #

## · 1：常问： ##

### · 什么是 HTML5? (重点) ###

> PS: HTML5是HTML（超文本标记语言）的最新版本。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。  
> 现代的浏览器都支持 HTML5

### · HTML 代码约定 ###

> 使用正确的文档类型  
> `<!DOCTYPE html>`  
> 关闭空的 HTML 元素  
> `<meta charset="utf-8"`/`>`  
> 属性值我们推荐使用引号:  
> `<table class=`“`table striped`”`>`  
> 空格和等号  
> `<link rel="stylesheet" href="styles.css">`  
> 避免一行代码过长  
> `每行代码尽量少于 80 个字符`

空行和缩进
    <body>
    
    <h1>空行和缩进</h1>
    
    <h2></h2>
    <p>不要无缘无故添加空行。
    为每个逻辑功能块添加空行，这样更易于阅读。
    缩进使用两个空格，不建议使用 TAB。
    比较短的代码间不要使用不必要的空行和缩进。</p>
    
    </body>

HTML 注释
    比较长的评论可以在  分行写：

短的规则可以写成一行: p.into { font-family: Verdana; font-size: 16em;}

### · HTML5有哪些的新特性？(重点) ###

#### `· canvas图形 video视频 audio音频` ####

> 二维画图中的元素  
> 媒体播放的 和元素  
> 支持本地存储  
> 新的内容特定元素，`如<section>，<article>，<footer>，<header>，<nav>，<menu>`  
> 接下来是代码实例：附解释 ↓↓↓

1:创建一个画布（Canvas）
        <canvas id="canvas"></canvas>
    2:使用 JavaScript 来绘制图像
        <script>
            var canvas=document.getElementById('canvas'); //首先，找到 <canvas> 元素
            var ctx=canvas.getContext('2d');//然后，创建 context 对象：
            ctx.fillStyle='#FF0000'; // 通常颜色
            ctx.fillRect(0,0,200,200);//坐标和宽高
        </script>
    ==================================================================================
    2：Video(视频)
      <video width="320" height="240" controls>   //播放控件
      <source src="movie.mp4" type="video/mp4">链接不同的视频文件。浏览器将使用第一个可识别的格式
      <source src="movie.ogg" type="video/ogg">
      您的浏览器不支持 HTML5 video 标签。
    </video>
    ==================================================================================
    3：Audio(音频)
    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
    </audio>

### · 语义化标签 (重点) ###

#### `· header nav section article aside footer` ####

> 呈现出很好地内容结构、代码结构,  
> 比`<div>`标签有更加丰富的含义，方便开发与维护  
> 方便搜索引擎能识别页面结构，有利于SEO  
> 遵守W3C标准,有利于合作

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3NDU0OQ_size_16_color_FFFFFF_t_70_pic_center]

### · Web 存储 (重点) ###

#### · localStorage 长久保存 ####

#### · sessionStorage 临时保存 ####

> 客户端存储数据的两个对象为：  
> `localStorage` \- 用于**长久保存**整个网站的数据，保存的数据没有过期时间，直到手动去除。  
> `sessionStorage` \- 用于**临时保存**同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

> **localStorage** 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用  
> 保存数据：localStorage.setItem(key,value);  
> 读取数据：localStorage.getItem(key);  
> 删除单个数据：localStorage.removeItem(key);  
> 删除所有数据：localStorage.clear();  
> 得到某个索引的key：localStorage.key(index);

> **sessionStorage** 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。  
> 保存数据： sessionStorage.setItem(“key”, “value”);  
> 读取数据：sessionStorage.getItem(key)

### · 常用元素 ###

#### · 常用块级元素 block ####

> **不常用**\-----------  
> address - 地址 　　　　  
> blockquote - 块引用  
> center - 举中对齐块  
> dir - 目录列表  
> fieldset - form控制组  
> isindex - input prompt  
> menu - 菜单列表  
> noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容  
> noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）  
> pre - 格式化文本  
> ·  
> **常用**\--------------  
> `div` \- 常用块级容易，也是css layout的主要标签  
> `dl` \- 定义列表  
> `table` \- 表格  
> `ul` \- 非排序列表  
> `form` \- 交互表单  
> `h1` \- 大标题  
> `h2` \- 副标题  
> `h3 -h6` 3级-6级标题  
> `hr`\- 水平分隔线  
> `ol`\- 排序表单  
> `p`\- 段落

#### · 常用行级元素 inline ####

> **不常用----------**  
> 　　abbr - 缩写  
> 　　acronym - 首字  
> 　　bdo - bidi override  
> 　　big - 大字体  
> 　　cite - 引用  
> 　　code - 计算机代码(在引用源码的时候需要)  
> 　　dfn - 定义字段  
> 　　font - 字体设定(不推荐)  
> 　　kbd - 定义键盘文本  
> 　　q - 短引用  
> 　　s - 中划线(不推荐)  
> 　　samp - 定义范例计算机代码  
> 　　select - 项目选择  
> 　　small - 小字体文本  
> 　　span - 常用内联容器，定义文本内区块  
> 　　strike - 中划线  
> 　　strong - 粗体强调  
> 　　sub - 下标  
> 　　sup - 上标  
> 　　textarea - 多行文本输入框  
> 　　tt - 电传文本  
> 　　u - 下划线  
> 　　.  
> **常用-----------**  
> `a` \- 锚点  
> `hr` \- 分割线  
> `b` \- 粗体(不推荐)  
> `br` \- 换行  
> `em` \- 强调  
> `i`\- 斜体  
> `img` \- 图片  
> `input`\- 输入框  
> `label`\- 表格标签

### · link 和 @import 的区别是？ ###

> 1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。  
> 2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。  
> 3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。  
> 4.link支持使用Javascript控制DOM去改变样式；而@import不支持

### · 浏览器的内核分别是什么 ###

> Trident \[`踹等刺`\] (微软IE内核)，是微软开发的一种排版引擎。  
> Gecko\[`该狗`\] (火狐Firefox内核)，是一套开放源代码的、以C++编写的网页排版引擎。  
> Presto\[`破莱斯椭`\] (欧朋Opera前内核) (已废弃)。  
> Webkit(苹果Safari内核,谷歌Chrome内核原型,开源)。

### · 常见兼容性问题及解决方案 ###

> 1.清除图片下方出现几像素的空白间隙  
> img\{display:block;\}  
> img\{vertical-align:top;\}  
> .  
> 2.不同浏览器的标签默认的外边距和内边距不同  
> \*｛margin:0;padding:0｝  
> 或者仅自己可见功能？

#### · src 和 href 的区别 ####

> src 是引入资源的地址  
> href 是跳转的url地址

### cookie session localStroage sessionStorage 的区别和优点 (重点) ###

> 1: `session` 存储在服务器端， 不是存储在客户端  
> 2: `cookie` 用于和服务器端通信， 而其他不会  
> 2.1: `cookie` 相对于其他2个它有大小限制， 单个不超过4kb，  
> 3: `localStorage` \- 用于**长久保存**整个网站的数据，保存的数据没有过期时间，直到手动去除。  
> 4: `sessionStorage` \- 用于**临时保存**同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

### url地址输入后，接下来会发生什么 ###

> 首先从 DNS 解析域名， 获取ip地址，找到服务器， 服务器会根据请求地址返回相关数据， 浏览器获取到数据，再进行页面渲染

### 什么是标签语义， 有什么作用 ###

> 即使在没有css的情况下，页面代码也能很好的被阅读理解， 用正确的标签，能够对浏览器和搜索引擎的支持更好， 便于后期的维护。

### 简述下你对html 语义化的理解 (重点) ###

> 1：去掉或者丢失css样式时， 页面也能呈现出清晰易读的结构  
> 2：有利于 SEO 和 搜索引擎的建立良好的沟通  
> 3：方便其他设备的解析  
> 4：便于团队开发，和后期的维护， 语义化更具可读性

### 网站如何进行性能优化 ###

> **`A： content 内容方面：`**  
> 1： 减少HTTP请求， 合并文件， css精灵图， 小图使用base64  
> 2：减少DNS 查询， DNS 查询之前浏览器不能从这个主机下载任何文件  
> 3：多余的中间访问， 避免重定向  
> 4：使用Ajax 可缓存  
> 5：非必须组件延迟加载  
> 6：未来所需组件预加载  
> 7：将资源放到不同的域下， 浏览器同时从一个域下下载资源的目录有限。  
> 8：减少iframe和table标签的数量，会影响页面渲染顺序  
> ·  
> **`B：Server 服务器请求方面`**  
> 1：有限使用CDN加载请求  
> 2：对组件使用Gzip进行文件体积压缩  
> 3：Ajax使用 GET 请求  
> 4：避免 src 的img标签  
> ·  
> **`C：Cookie 方面`**  
> 1：减小cookie大小  
> 2：引入资源的域名， 不要包含cookie  
> ·  
> **`D：CSS样式方面`**  
> 1：将css样式表放在页面顶部加载  
> 2：不使用css表达式  
> ·  
> **`E：JavaScript 方面`**  
> 1：将js脚本放在页面顶部  
> 2：将js脚本和css样式，从外部引入  
> 3：减少DOM的操作和访问  
> 4： 合理的设计时间监听器，减少无意义和没必要的事件监听  
> ·  
> **`F：图片方面`**  
> 1：小图标优先使用字体图标  
> 2：页面背景小图，优先设置好精灵图，并使用精灵图提高网站渲染和加载速度

### XHTML 和 HTML有什么区别 ###

> 1: HTML是一种基本的WEB 网页设计语言， XHTML是基于 XML的置标语言  
> 2:XHTML 元素必须被正确的嵌套  
> 3:XHTML元素 必须被正确的关闭  
> 4:标签名必须用小写字母  
> 5:XHTML 文档必须用于根元素

### 常用块元素， 行内元素，空元素有哪些 ###

> 1：块级元素：div, ul, li, dl, dt, dd, h1-h6  
> 2：行内元素：a, b, sapn, input, strong, select, label, em, button, textarea  
> 3：空元素：没有内容的标签： br, meta, hr, link, input, img

## 2：不常问： ##

### 浏览器的渲染过程 ###

> 1：将html 解析为 dom树  
> 2：处理css， 构成层叠样式表 CSSOM  
> 3：将dom树 与CSSOM 合并为渲染树  
> 4：根据 CSSOM 将渲染树的节点布局计算  
> 5：将渲染树节点样式绘制到页面上  
> `注意在渲染的过程中是自上而下的渲染， js会阻塞页面的渲染， 优先等待js执行完成， 如果在渲染的过程中改变了样式，会造成回流渲染`

### · 前端由哪三层构成， 分别是什么 ###

> 前端3剑客： html dom结构， css样式渲染 js行为操作

### · svg 和canvas 区别 ###

> svg 输出的图形都有独立的dom， 是一个独立的矢量图像， 放大缩小也不会失真  
> canvas 输出的是一整块画布， 放大缩小会失真
> 
> ### 常见的空元素有哪些 ###
> 
> br, hr, img, input, link, meta

### label 标签的作用是什么， 是怎么用的 ###

> label 标签定义表单控制间的关系， 当用户选择该标签时， 浏览器会自动将焦点转移到和标签相关的表单控件上

### 请说出 XHTML 和 HTML 的区别 ###

> 1： 文档顶部的 DOCTYPE 声明不同， XHTML 的 DOCTYPE 顶部声明中明确确定了 XHTML DTD的写法  
> 2：HTML 元素 必须正确嵌套，不能乱  
> 3：属性名必须是小写  
> 4：属性值必须加引号  
> 5：标签必须有结束， 单标签必须使用 "`/`"来结束

### 很多网站不常用 table iframe 这2个元素， 为什么 ###

> 因为浏览器页面渲染的时候，从上至下的， 而table和 iframe 这两个元素会改变这样的渲染规则， 他们是要等待自己元素内容加载完成才整体渲染， 用户体验不好。

### 请用 HTML 知识，解决seo优化问题 ###

> 标题 - 概述 - 关键词 被业界称为 seo  
> 1：title 尽量简洁， 写好后就不要再去修改了  
> 2：description 对网页的概述，内容要精简，3次最佳，阅读起来要自然顺畅。  
> 3：kewords关键词，数量控制在3-6个内， 想方设法让主关键词出现在页面中。

### xhtml的局限性 ###

> 1: 语法上更加严格， 放弃了一些语义化不好的标签  
> 2：必须要有 head， body 标签必须闭合  
> 3：一些老的浏览器并不兼容

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3NDU0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/09d67b6303274cf3be22179be60a1621.png