前端面试必备：HTML5语义化与viewport深入解析

前端面试

需积分: 0 147 浏览量更新于2024-08-04 收藏 13KB DOCX 举报

身份认证购VIP最低享 7 折!

30元优惠券

HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它定义了网页的结构和内容，使得文本、图像、音频和视频等内容能够被浏览器理解和呈现。在前端开发中，HTML5的语义化是一个重要的知识点，它强调使用有意义的标签来表达文档结构，而非仅仅为了外观。例如，`<h1>`到`<h6>`标签分别表示标题的不同级别，这有助于提升网页的可读性和无障碍访问，比如盲人阅读器可以根据标签理解网页的组织结构。语义化的优点包括： 1. 提高用户体验：对于视力障碍的用户，屏幕阅读器能根据标签的语义正确朗读内容，增强可用性。 2. 搜索引擎优化（SEO）：搜索引擎可以更好地理解网页内容，根据标签赋予的内容关键词和结构分配权重，从而提升搜索排名。 3. 适应不同设备：语义化的HTML更利于响应式设计，确保内容在各种设备上都能正确展示。 4. 代码可维护性：语义明确的代码结构使得后期维护更加方便，团队协作也更为高效。 `viewport`是移动Web开发中的关键概念，它模拟了设备浏览器的视口宽度，允许开发者在不同的设备上保持一致的布局。通过在`<head>`部分添加`<meta name="viewport" content="...">`标签，开发者可以控制视口的大小、缩放范围等，确保网页在移动设备上的自适应性。例如，`width=device-width`确保页面宽度等于设备的实际宽度，`initial-scale`设置页面的初始缩放比例，`minimum-scale`和`maximum-scale`限制用户可以调整的缩放范围。 `img`标签中的`alt`属性是图片的替代文本，当图像无法加载或者用户使用屏幕阅读器时，浏览器会显示这个文本，提供视觉障碍用户对图片内容的理解。`title`属性则提供了鼠标悬停时的提示信息，帮助用户了解元素的额外细节。两者都是为了让网页内容尽可能地可访问和易于理解。掌握HTML5的语义化和`viewport`的使用是前端工程师在面试中必须具备的基础知识，它们关乎网站的可访问性、性能优化以及在不同设备上的表现。同时，理解并正确使用`img`标签的`alt`和`title`属性，能够体现开发者对用户体验的重视和细节把控能力。

资源详情

资源推荐

HTML

HTML5语义化

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。 #### 好处

* 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。 *

有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。 *

方便其他设备解析，如盲人阅读器根据语义渲染网页 *

有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

viewport

Viewport

：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定

的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。移动版的 Safari

浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport

的大小和缩放，其他手机浏览器也基本支持。

在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），

另一种是视窗视口（网页的宽度是多少）。举个例子：如果我们的屏幕是320像素 *

480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度能够展示980像素宽

度的内容。那么320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是

视窗视口的宽度。

为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，简易的理解，就是让原

本320像素的屏幕宽度能够容下980像素甚至更宽的内容（将网页等比例缩小）。

Viewport属性值

• width 设置layout viewport 的宽度，为一个正整数，或字符串"width-

device"。device-width 指的是设备的物理宽度，width是页面宽度。

• initial-scale 设置页面的初始缩放值，为一个数字，可以带小数

• minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数

• maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数

• height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用

• user-scalable 是否允许用户进行缩放，值为"no"或"yes", no

代表不允许，yes代表允许这些属性可以同时使用，也可以单独使用或混合使用，多

个属性同时使用时用逗号隔开就行了。

img中的alt和元素的title属性作用

• img的alt属性如果无法显示图像，浏览器将显示alt指定的内容

• 元素title属性在鼠标移到元素上时显示title的内容

下载后可阅读完整内容，剩余3页未读，立即下载

2201_75761617

粉丝: 24
资源: 7382

前端面试必备：HTML5语义化与viewport深入解析

前端大厂最新面试题-horizon.docx

前端大厂最新面试题-greedy.docx

深度学习题库大全-hr.docx

html-docx.min.js线上引入地址

系统源代码说明书-模板.docx

file:\C:\Users\Administrator\Desktop\pro\ruoyi-admin.jar!\BOOT-INF\lib\ruoyi-file-3.8.6.jar!\static\template\Word.docx (文件名、目录名或卷标语法不正确。)

python-docx-0.8.11.whl下载

windows python-docx-0.8.11.tar.gz

java.io.FileNotFoundException: \data\temp\2\17033-2-1064200703020542\17033-2-1064200703020542.docx (ϵͳ�Ҳ���ָ����·����)

c 面试题集锦.docx(共152页)

两个docx文档，1.docx和2.docx，需要将1.docx文档中的页眉页脚复制到2.docx，用java编写，使用开源jar包，比如poi，poi-tl，docx4j等等，请注意验证你提供的代码中的方法，麻烦给我源码。

python-docx-0.8.11.tar.gz

python_docx-0.8.6-py2.py3-none-any.whl

KR468G-TDS.docx

aspose-words-19.1.jar

两个docx文档，1.docx和2.docx，需要将1.docx文档中的页眉页脚同步到2.docx，用java编写，使用开源jar包，比如poi，poi-tl，docx4j等等，麻烦给我源码

用Python创建一个.docx文件，将徐志摩的《再别康桥》写入文件中

编写php程序 输出学号,PHP试验1-4.docx

python-docx-0.8.10.tar.gz

poi-ooxml-5.2.2.jar

最新资源

java.io.FileNotFoundException: \data\temp\2\17033-2-1064200703020542\17033-2-1064200703020542.docx (ϵͳ�Ҳ��ָ��·��)

编写php程序输出学号,PHP试验1-4.docx