前端面试题 ===> 【HTML】

HTML面试题总结

1. 对 HTML 语义化的理解

  1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构;
  2. 代码结构清晰,方便团队的管理和维护,并且语义化更具有可读性,减少差异化;
  3. 提升用户体验;
    • 例如:title、alt用于解释名词或者图片信息、label标签的活用
  4. 有利于SEO优化,提升搜索引擎排名;
    • 和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息;
    • 爬虫依赖于标签来确上下文和关键字的权重;
  5. 方便其他设备的解析(屏幕阅读器、盲人阅读器、移动设备等等);

2. H5新增特性

  1. 语义化更好的标签
    • header、nav、aside、article、section、footer
  2. 音视频标签
    • audio、video
    • 如果浏览器不支持自动播放怎么办?
      • 在属性中添加autoplay(谷歌浏览器不支持音频自动播放,但是视频支持静音自动播放);
  3. data- 开头的自定义属性
  4. 本地存储
    • localStorage、sessionStorage
  5. 表单控件
    • type 属性设置值;
    • url、search、file、email、date、number、month、color、tel
  6. 画布
    • Canvas
  7. 拖拽释放
    • drag、drop
  8. 新技术
    • 浏览器多线程:webWorker
    • 前后台持久化通信技术:webSocket

3. HTML5常用的结构标签有哪些,它替换了之前的哪些标签?

  • header、nav、main、article、aside、footer、section
  • <div class="header">、<div class="nav">、<div class="main">...

4. HTML文档采用 UTF-8编码集 的优势是什么?

  1. utf-8
    • 使用3个字节表示一个符号,基本上可以覆盖世界上所有的语言;
  2. 优势
    • 与传统的gb2312、gbk相比,可识别的字符集更多,也是行业界推荐的;

5. 标签中常用的属性有哪些?

  • id、class、title、style

6. 标签中的 title属性 和 alt属性 的区别是什么?

  1. title
    • 是标签的描述属性,当鼠标移入时,稍等一会儿就会出现title属性的属性值;
  2. alt:
    • 用在可置换元素上,当外部资源无法正确加载时,alt属性的属性值就会显示在占位符上;

7. 什么是置换元素 和 非置换元素,每种类型至少举出三个例子

  1. 置换元素
    • 置换元素的内容来自外部,该元素仅是外部资源的占位符;
    • <img>、<video>、<audio>...
  2. 非置换元素
    • 非置换元素内容来自当前文档,必须使用双标签;
    • <p>、<h1> ~ <h6>、<ul>...

8. 标签中的 href属性 和 src属性 有什么区别?

  1. 二者都是对外部资源的引用;
  2. href
    • 用于超文本或样式,用在 <link>标签 和 <a>标签上;
  3. src
    • 用在外部资源占位符上,如<img>、<iframe>、<script>、<video>...

9. iframe标签有什么优缺点?

  1. 优点
    • 重载页面时不需要加载整个页面,只需要重载页面中的一个框架页,从另一方面来说,减少数据的传输,加快了网页下载速度;
    • 技术易于掌握,使用方便,可主要使用于不需要搜索引擎来搜索的页面;
    • 当前页面,直接加载其他页面,而不必发生跳转;
  2. 缺点
    • iframe 会阻塞主页面中的 Onload 事件;
    • 会产生很多页面,不容易管理;
    • 多框架的页面会增加服务器的http请求,影响页面的并行加载;
      • 并行加载:同一时间针对不同域名下的请求,iframe和所在页面在同一个域下面,而浏览器的并行加载的数量是有限制的;

10. 表单中的按钮有几种,常用的标签有哪几个?

  1. 按钮有三种:
    • 普通按钮、提交按钮、重置按钮;
  2. 常用标签:
    <input type="button" />
    <input type="submit" />
    <input type="rest" />
    <button />
    

11. 表单数据的提交方式有几种,分析使用场景?

  1. POST
    • 表单数据通过请求体发送;
  2. GET
    • 表单数据通过URL地址栏发送;

12. 什么是 重绘 和 重排?

  1. 重绘
    • 当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘;
  2. 重排
    • 和重绘相反,当改变布局的时候,就会引起重排;
  3. 重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/744280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数组】41. 缺失的第一个正数【困难】

缺失的第一个正数 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1 输入&#xff1a;nums [1,2,0]输出&#xff1a;3 示例 2 输入&#xff1a;nums [3,4,-1,…

同态滤波算法详解

同态滤波是一种用于增强图像的方法&#xff0c;特别适用于去除图像中的照明不均和阴影。该算法基于照射反射模型&#xff0c;将图像分解为两个分量&#xff1a;照射分量&#xff08;illumination component&#xff09;和反射分量&#xff08;reflection component&#xff09;…

精品基于Uniapp+ssm停车场预约缴费微信小程序的设计与实现

《[含文档PPT源码等]精品微信小程序基于Uniappssm停车场微信小程序的设计与实现》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 后台框架&#xff1a;ssm 安卓框架&…

Python打印输出Linux中最常用的linux命令之示例

一、Linux中的~/.bash_history文件说明&#xff1a; 该文件保存了linux系统中运行过的命令的历史。使用该文件来获取命令的列表&#xff0c;并统计命令的执行次数。统计时&#xff0c;只统计命令的名称&#xff0c;以不同参数调用相同的命令也视为同一命令。 二、示例代码&am…

csp模拟题(201604-2,俄罗斯方块模拟下坠)

题目 问题描述 俄罗斯方块是俄罗斯人阿列克谢帕基特诺夫发明的一款休闲游戏。   游戏在一个15行10列的方格图上进行&#xff0c;方格图上的每一个格子可能已经放置了方块&#xff0c;或者没有放置方块。每一轮&#xff0c;都会有一个新的由4个小方块组成的板块从方格图的上方…

一文掌握Python控制语句操作及实例详解

在 Python 中,控制语句是用于流程控制的重要工具,可以帮助我们根据不同的条件执行不同的代码块。本文将带你快速掌握 Python 中的控制语句操作,并通过实际例子让你更好地理解。 1. 条件控制语句:if-elif-else Python中的条件判断主要依赖于if,elif(else if)和else语句…

应急响应实战笔记03权限维持篇(6)

0x00 前言 在渗透测试中&#xff0c;有三个非常经典的渗透测试框架----Metasploit、Empire、Cobalt Strike。 那么&#xff0c;通过漏洞获取到目标主机权限后&#xff0c;如何利用框架获得持久性权限呢&#xff1f; 0x01 MSF权限维持 使用MSF维持权限的前提是先获得一个met…

蓝桥集训之正则问题

蓝桥集训之正则问题 核心思想&#xff1a;递归 归结到一棵树 向上返回x数量 #include<iostream>#include<cstring>using namespace std;int k;string str;int dfs(){int res0; //记录x数量while(k<str.size()){if(str[k] (){k ; //跳过左括号res dfs();k …

【C#】【SAP2000】OAPI文档案例详解

创建一个简单的结构模型,运行分析,提取结果,并将结果与手算值进行比较。 以下是详细的代码解析: 开头部分是一些using语句,引用了必要的命名空间,特别是SAP2000v1, 它包含了SAP2000 API的类和方法。 在Main方法中,首先定义了一些变量,用于控制是启动一个新的SAP2000实例还是附…

【JVM】Java虚拟机调优 配置启动参数

一、配置方式 options - JVM启动参数。 配置多个参数的时候&#xff0c;参数之间使用空格分隔 参数命名&#xff1a; 常见为 -参数名 参数赋值&#xff1a; 常见为 -参数名参数值 | -参数名:参数值 二、内存参数 -Xms:初始堆大小&#xff0c;JVM启动的时候&#xff0c;给定…

C++:vector类

vector的介绍及使用 1. vector 是表示可变大小数组的序列容器。 2. 就像数组一样&#xff0c; vector 也采用的连续存储空间来存储元素。也就是意味着可以采用下标对 vector 的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的…

虾皮shopee根据ID取商品详情 API

公共参数 名称类型必须描述keyString是免费申请调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_search,item_get,item_search_shop等]cacheString否[yes,no]默认y…

pxe安装mini centos系统

一、准备工作 1、关闭防火墙和selinux systemctl stop firewalld && systemctl disable firewalldsetenforce 02、配置静态ip 需要在dhcp里面填写tftp配置&#xff0c;所以需要固定ip 二、dhcp安装配置 作用&#xff1a;给客户端提供ip地址&#xff0c;并告诉客户…

html5cssjs代码 017样式示例

html5&css&js代码 017样式示例 一、代码二、解释 这段HTML代码定义了一个网页的基本结构&#xff0c;包括头部、主体和尾部。在头部中&#xff0c;设置了网页标题、字符编码和样式。主体部分包含一个标题和一个表格&#xff0c;表格内分为两个单元格&#xff0c;左侧为…

JAVA后端开发面试基础知识(九)——SpringBoot

启动原理 SpringBoot启动非常简单,因其内置了Tomcat,所以只需要通过下面几种方式启动即可: @SpringBootApplication(scanBasePackages = {"cn.dark"}) public class SpringbootDemo {public static void main(String[] args) {// 第一种SpringApplication.run(S…

【ceph】ceph中osd报错,have spurious read error

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

提高转换效率的利器NCP13992ACDR2G 高性能电流模式LLC谐振变换器控制芯片

NCP13992ACDR2G产品概述&#xff1a; NCP13992ACDR2G是一款用于半桥谐振变换器的高性能电流模式控制器。该控制器实现了600 V栅极驱动器&#xff0c;简化了布局并减少了外部组件数量。内置的Brown−Out输入功能简化了控制器在所有应用程序中的实现。在需要PFC前级的应用中&…

采购代购系统独立站,接口采集商品上货

采购代购系统独立站的建设与商品上货接口的采集是一个综合性的项目&#xff0c;涉及前端开发、后端开发、数据库设计以及API接口的对接等多个环节。以下是一个大致的步骤和考虑因素&#xff1a; 一、系统规划与需求分析 明确业务需求&#xff1a;确定代购系统的核心功能&…

Python尝试循环连接服务器,如果连接成功则退出,如果超过3次连接失败则退出

下面是一个使用Python实现的程序&#xff0c;可以实现你描述的功能&#xff1a;通过SSH连接服务器并重启服务器&#xff0c;然后循环尝试连接服务器&#xff0c;如果连接成功则退出&#xff0c;如果超过3次连接失败则退出。 首先&#xff0c;请确保你已经安装了paramiko库&…

【SQL】1084. 销售分析III (多种解法;is null 和 =null 的区别图示 )

前述 知识点学习&#xff1a;MySQL 中 is null 和 null 的区别 题目描述 leetcode题目&#xff1a; 1084. 销售分析III 写法一 思路&#xff1a;“所有售出日期都在这个时间内”&#xff0c;也就是“在这个时间内售出的商品数量等于总商品数量” -- 解法1&#xff1a;ACCE…