前端面试准备之HTML篇

最新推荐文章于 2024-05-28 14:55:45 发布

西西1216

最新推荐文章于 2024-05-28 14:55:45 发布

阅读量287

点赞数

分类专栏：前端面试 html 文章标签：前端 html 面试

本文链接：https://blog.csdn.net/qq_41554071/article/details/100104366

版权

前端面试同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

文章目录

DOCTYPE 有什么作用？怎么写？

DOCTYPE 是document type(文档类型)的简写，在web设计中用来声明文档类型。
DOCTYPE 声明必须是 HTML 文档的第一行，它不是 HTML 标签，它是指示web浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。

常用的 DOCTYPE声明：

HTML 5
```
<!DOCTYPE html>
```

HTML 4.01 Strict

<!--该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!--该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!--该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

data- 属性的作用

data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力。
所有这些自定义数据属性可以通过所属元素的HTMLElement接口来访问它们，HTMLElement.dataset属性可以访问它们。

注意，HTMLElement.dataset是一个DOMStringMap，自定义数据属性data-value可以用HTMLElement.dataset.value来访问。

<div data-author="david" data-comment-num="10">
    .......
</div>

var div1 = document.getElementsByTagName('div')[0];
div1.dataset; // DOMStringMap
div1.dataset.author; // david
div1.dataset.commentNum; // 10
// 注意：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。

WEB标准以及W3C标准是什么？

WEB标准不是某一个标准，是一系列标准的集合。网页主要由三部分组成：结构、表现和行为。
WEB标准就是将三部分独立分开，使其具有模块化。
- 结构（Structure）
  
  结构化标准语言包括 HTML、XHTML、 XML，在页面 body里写入的标签是为了页面结构。
- 表现（Presentation）
  
  表现语言主要包括 CSS层叠样式表，通过 CSS 样式是页面结构标签更具美感。
- 行为（Behavior）
  
  行为指页面和用户具有一定的交互，同时页面结构和表现发生变化，主要由 JS 组成。
W3C标准对WEB标准提出了更为规范的要求，也就是实际编程中的一些代码规范，包含如下：
- 对于结构的要求
  - 标签字母小写
  - 标签要闭合
  - 标签不允许随意嵌套
- 对于表现和行为的要求
  - 尽量使用外链 CSS 样式表和 JS 脚本，使结构、表现和行为分为三部分，符合规范。同时，提高页面渲染速度，提升用户体验。
  - 样式尽量少使用行间样式表，使结构与表现分离。标签的 id 和 class 等属性命名要见文知义，标签越少，加载越快，代码维护简单，便于改版。
  - 不需要变动页面内容便可提供打印版本，而不需要复制内容，提高网站易用性。

html 全局属性有哪些？

全局属性是所有 HTML 元素共有的属性，它可以用于所有元素，即使属性可能对某些元素不起作用。
全局属性列表：

accesskey：提供了当前元素生成键盘快捷键的提示，这个属性由空格分隔的字符列表组成。

autocapitalize：控制用户的文本输入是否和如何自动大写，它可以有以下的值：
- offor none：没有应用自动大写（所有字母默认小写）。
- onor sentences：每个句子的第一个字母 默认为大写，所有其他字母默认为小写。
- words：每个 单词的第一个字母 默认为大写，其他字母默认为小写。
- characters：所有字母都默认为大写。
class：空格分隔的元素的类名（classes ）列表。

contenteditable：一个枚举属性，表示元素是否可被用户编辑。
- true or 空字符串：表明元素可被编辑。
- false：表明元素不能被编辑。
data-*：一类自定义数据属性。

dir：一个指示元素中文本方向的枚举属性。
- ltr：指 从左到右，用于那种从左向右书写的语言。
- rtl：指 从右到左，用于从右到左书写的语言。
- auto：用户代理决定方向。
draggable：指示元素是否可以使用 Drag and Drop API 拖动元素。
- true
- false
hidden：一个布尔属性表明元素尚未或者不再适用。例如，可用于隐藏在登录过程完成之前无法使用的页面元素。

id：定义唯一标识符。

lang：规定元素内容的语言。

spellcheck：枚举属性定义是否检查元素拼写错误。

style：CSS样式声明。

tabindex：整数属性，指键盘中的Tab键在控件中的移动顺序，即焦点的顺序。指示元素是否可以获取输入焦点，是否参与顺序键盘导航，如果是则表示哪个顺序。
- 负值：可聚焦，但不可通过键盘顺序导航到达。
- 0：可聚焦，可导航，排列在在所有指定tabIndex的控件之后。
- 正值：可聚焦，可导航，元素聚焦的顺序是tabindex的增加值，如果有相同的tabindex则遵循它们在文档中的相对位置。
title：包含与其所属元素相关信息的文本。

img 的 title 和 alt 有什么区别？

alt是 img 的特有属性，是图片内容的等价描述，用于图片无法加载时显示，读屏器阅读图片。

搜索引擎对图片意思的判断主要靠 alt属性，所以 alt应该包含图片简要文字说明和关键词。
title是***鼠标滑过时显示的文字提示***，为图片提供额外的说明信息。

meta 有哪些常见值？

meta元素可提供有关页面的元信息，位于文档头部，不包含任何内容。
属性列表：

content：定义与 http-equiv 或 name 属性相关的元信息。

http-eqiuv：把 content 属性关联到 HTTP 头部。
- content-type：规定文档的字符编码。
```
<meta http-eqiuv="content-type" content="text/html; charset=utf-8">
```
- default-style：规定使用的预定义样式表。
```
<meta http-equiv="default-style" content="the document's preferred stylesheet">

```
- refresh：定义文档自动刷新的时间。值 “refresh” 应该慎重使用，因为它会使得页面不受用户控制。
charset (html5)：定义文档字符编码。

name：把 content 属性关联到一个名称。**注意：**如果设置了 http-equiv 属性，则不应该设置 name 属性。
- application-name：页面所代表的 Web 应用程序的名称。
- author
- description
- generator：规定用于生成页面的一个软件包（不用于手写页面）。
- keywords：规定一个逗号分隔的关键词列表 - 相关的网页。

如何理解 html 语义化？

html语义化就是用合理、正确的标签来展示内容。

html5

html语义化的优点：
- 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析，如盲人阅读器根据语义渲染网页。
- 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

前端需要注意哪些 SEO？

合理的title、description、keywords，搜索引擎对这三项的权重逐个减小：
- title 值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 有所不同；
- description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；
- keywords 列举出重要关键词即可。
语义化的 HTML代码，符合 W3C规范：语义化让搜索引擎更容易理解网页。
重要内容 HTML 代码放在最前面，保证重要内容一定被搜索引擎抓取。
重要内容不要用 JS 输出：爬虫不会执行 JS 获取的内容。
少用 iframe：搜索引擎不会抓取 iframe 中的内容。
非装饰性图片必须加 alt。
提高网站速度：网站速度是搜索引擎排序的一个重要指标。

meta viewport 的作用？怎么写？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该标签的作用是让当前 viewport 的宽度等同于设备的宽度，同时不允许用户手动缩放。
关于 viewport 的深入理解，请移步这篇博客。

post 和 get 方式两种请求方法有什么区别？

GET 和 POST都是 HTTP协议中的两种发送请求的方式，两者的底层实现都是基于TCP/IP协议，所以没有本质区别。
但是由于HTTP的规定和浏览器的限制，导致它们在应用过程中体现出一些不同：
- GET请求参数通过 URL 传递，POST 放在 Request body 中。
- GET 传参有长度限制，而 POST 没有。
- GET 请求的参数只能是 ASCII码，所以中文需要 URL 编码，POST 传参支持多种编码方式。
- GET 在浏览器回退时是无害的，而 POST 会再次提交请求。
- GET 请求参数会被完整保留在浏览器历史记录里，POST 参数不会被保留。
除此之外，GET 和 POST 还有一个重大的区别：GET 产生一个 TCP 数据包，POST 产生两个 TCP 数据包。
- GET请求，浏览器会把 HTTP header 和 data 一起发送出去，服务器响应 200，返回数据。
- POST请求，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应200 ok。
但！并不是所有浏览器都会在 POST中发送两次包，Firefox 就只发送一次！

input 里name有什么作用？

name属性规定 input 元素的名称，用于对提交到服务器后的表单数据进行标识，或在客户端通过 JavaScript引用表单数据。
用于 type=“radio” 的 input 元素分组，用同一个值的 name属性标识 radio 控件属于同一个组，控制同一时间只能选中一个 radio。

label 有什么作用？如何使用？

当用户选择 label 标签时，浏览器会自动将焦点集中在与该标签对应的 input 上，为鼠标用户改进了可用性。
label 的 for 属性值与 input 的 id 属性值相同。

placeholder属性有什么作用？

placeholder 属性提供可描述输入字段预期值的提示信息，一旦输入了什么信息，提示信息就会隐藏，增强用户体验。
适用于以下的 input 类型：text, search, url, telephone, email 以及 password。

type=hidden 隐藏域有什么作用？举例说明。

隐藏域就是用来收集或发送信息的不可见元素，对于网页访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
想要提取页面的某些信息，但在页面又不能显示的这些东西就采用隐藏域。

input 和 textarea 的区别？

input 元素用于为基于WEB的表单创建交互式控件，以便接受来自用户的数据，textarea 代表一个多行的纯文本编辑控件。
textearea 标签是成对的，有结束标签进行闭合，标签内容写在标签对中间。input 是单个标签，标签内容通过 value 属性设置。
textearea 的值是纯文本，input的值根据类型不同而不同。
textarea 没有 type 属性，input 有多种 type 来满足表单与用户的数据交互。
textarea 的值可以是多行的，并且有 cols 和 rows 控制多行结构；input 的值是单行的。

用 div 模拟 textarea 标签

给 div 添加一个 HTML全局属性：contenteditable="true"，使 div 变成用户可编辑的。
给 div 添加样式 resize: vertical;，使 div 可以被用户调整尺寸。同时设置overflow: auto;。
增加一个属性：placeholder= "I am a placeholder"。
通过 css 选择器获取并显示 placeholder 的值。

<div class="textarea" contenteditable="true" placeholder="This is placeholder"></div>

.textarea {
  height: 200px;
  width: 300px;
  padding: 4px;
  border: 1px solid #888;
  resize: vertical;
  overflow: auto;
}

.textarea:empty::before {
  content: attr(placeholder);
  color: #bbb;
}

西西1216

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端面试准备之HTML篇

文章目录DOCTYPE 有什么作用？怎么写？data- 属性的作用WEB标准以及W3C标准是什么？html 全局属性有哪些？img 的 title 和 alt 有什么区别？meta 有哪些常见值？如何理解 html 语义化？前端需要注意哪些 SEO？meta viewport 的作用？怎么写？[post 和 get 方式两种请求方法有什么区别？](https://www.cnblogs.com/l...
复制链接

扫一扫

专栏目录