前端基础面试题·第一篇——HTML

news/2024/9/17 7:48:06/ 标签: 前端, html

html__0">1 .HTML标签头部< !DOCTYPE html> 的作用

DOCTYPE 使 document type的缩写,是html文档的类型声明,告诉浏览器文档的类型,便于解析文档。 这里会涉及到浏览器渲染页面的两种形式:

  1. CSS1 Compatible Mode(标准模式): 浏览器使用W3C的标准来解析页面。
  2. BackCompatible Mode(怪异模式): 浏览器使用自己的解析方式来解析页面,不同的浏览器在解析时会有差异。

当< !DOCTYPE html>不存在或者格式不正确时,浏览器就会以怪异模式来解析页面。

2.HTML语义化标签

1.常见的语义化标签:
header,main,footer,nav,section,article,aside,address,title等。
2. 特点:
(1) . 结构清晰,增加了代码的可读性与可维护性
(2). 文字表现力丰富,可提升搜索引擎优化。
(3). 在没有CSS样式情况下也能呈现出较好的内容结构与代码结构
(4). 方便其他设备解析,如屏幕阅读器、盲人阅读器、移动设备等

3.meta标签

1.作用:
(1). 1meta标签主要用于描述一个网页文档的属性,例如文档的作者,网页描述,关键词,日期和时间,网页小图标等等
(2). 有利于搜索引擎优化
(3). 定义页面使用语言区,自动刷新指向个新页面等等
(4). 控制网页显示窗口
meta标签的属性:
(1). charset: 定义文档的字符编码格式
(2). name: 定义文档的元信息,如作者,日期等等
(3). content: 定义稳当元信息具体内容
(4). http-equiv: 定义与http协议相关的元信息,如缓存,重定向等

4.HTML5新特性

新增:

  1. 新增语义化标签
  2. 新增dom操作api:
    document.querySelector()document.querySelectorAll()
  1. 新增了多媒体标签video,audio
  2. 新增了webStorage本地存储
  3. 新增了地理位置api——Geolocation
  4. 新增了webSocket
  5. 新增了浏览其实对象history
  6. 新增了相关的拖拽api
  7. 新增了canvas svg等2D绘图api
  8. 增强了表单控件 url,date,datetime,email,range等

移除:
1.移除了纯表现元素font,big,center等
2. 移除了frame,frameset等元素

5.src,href的区别

  1. src 属性是source的缩写,用于指定外部资源的位置,指向内容会嵌入到文档中标签所在的位置,在请求src资源时会将其下载并应用到文档中,如js脚本,img图片
    当浏览器去解析到该元素时,会暂停浏览器得解析,编译和执行开始下载资源文件,当下载完资源并解析应用到文档后才会继续解析文档
  2. href属性是Hypertext Reference的缩写,用于指定网络资源所在链接地址,当浏览器关读取到该元素时,会建立当前文档与资源之间的链接,并行开始下载资源文件,不会停止当前文档的解析

6.行内元素与块级元素都有哪些

  1. 行内元素:元素宽度只有内容撑开,高,行高,padding,margin均可改变,与其他元素处于同一行
    span,a,strong,em,i,b,img,input,label,select
  2. 块级元素:元素默认占据一行,宽高等均可自定义设置
    div,h1-h6,p,ul,li,ol,table,tr,td,th,form

转换:
行内转块级:display: block;
块级转行内:display: inline;

区别:

  1. 是否能占据一行
  2. 是否可以设置宽高
  3. 行内元素只能容纳行内元素或者文本,块级元素可以容纳其他任意元素

7.link 与@import的区别

  1. 从属区别:
    @import时css提供的导入规则,只能导入css文件
    link是html提供的导入标签,不止可以导入css,也可以导入其他类型的文件

  2. 加载顺序区别:
    @import 导入会等到整个页面加载完毕之后在进行机载
    link导入会和文档记载并行加载

  3. 兼容性区别:
    @import 只能在ie5以上才能识别
    link 不存在兼容性问题

  4. dom可控性区别
    可以通过js操作dom来控制link标签
    @import 不可以通过js操作dom来控制

  5. 权重区别:
    link样式权重高于@import权重

8.script标签的defer属性和async属性

1.html文档在解析过程中遇到script属性引入的js文件时会暂停文档的加载转而去下载js文件并解析,等解析完之后才会继续解析html文档,这会阻塞html的加载。defer,async这两个属性就是专门为了处理js脚本下载阻塞文档加载的。
defer 属性设置后,文档读取到script的会异步开始下载代码,不会阻塞文档加载,等到整个文档加载完毕之后,在开始执行js文件
async属性设置之后,文档解析到script标签时,会异步开始下载文件,等文件下载完毕之后会一步开始执行js代码,与文档流解析并行,不会阻塞文档加载,这个方式在引入多个文件时,我们无法得知具体哪个文件先执行,因为我们无法确定哪个文件先下载完成。

9.为什么要清楚默认css样式?

1.因为对于浏览器来说,有部分属性会存在默认值,而且这个默认值在不同的浏览器中可能不同,因此为了去除在不同浏览器中的成差异,提高代码的兼容性,我们需要去除css的默认样式。
2.在开发中,我们往往需要对网页元素进行个性化样式设置,但浏览器对于一些元素会有默认样式,这些样式可能在一定程度上影响我们后续的编码开发,所以为了统一性,我们通常需要在开发之前讲网站默认css样式去除,更利于在网站中进行个性化设置。

10.HTML页面中, id和class有什么区别

  1. html中,id属性与class属性都可以用来定义标签css样式,但同一个id属性只能由本页面中唯一一个元素使用,而class属性则没有限制。
  2. css中,id选择器需要在id值铅加上#号,class选择器需要在值前面加上.号
  3. css中id的权重高于class,两者要是有同样的属性,id会层叠class的属性
  4. id一般用于页面布局,同时其主要是定义页面布局与内容,而class主要用于样式修饰,一般先定义好样式,在使用的时直接调用
  5. id常用于页面布局,class常用于页面样式文字修饰

http://www.ppmy.cn/news/1522470.html

相关文章

Nginx反向代理功能及动静分离实现

一&#xff1a;Nginx支持正向代理和反向代理 1.正向代理 正向代理&#xff0c;指的是通过代理服务器 代理浏览器/客户端去重定向请求访问到目标服务器 的一种代理服务。 正向代理服务的特点是代理服务器 代理的对象是浏览器/客户端&#xff0c;也就是对于目标服务器 来说浏览…

共享内存和信号量

共享内存和信号量可以配合起来一起使用。 什么是共享内存&#xff1f;&#xff1a; 共享内存就是映射一段能被其他进程所访问的内存&#xff0c;这段共享内存由一个进程创建&#xff0c;但多个进程都可以访问。共享内存是最快的IPC方式&#xff0c;它是针对其他进程间通信方式…

漫谈设计模式 [8]:装饰器模式

引导性开场 菜鸟&#xff1a;老鸟&#xff0c;我最近在项目中遇到一个问题。有些功能&#xff0c;比如日志记录和权限校验&#xff0c;我需要在多个地方使用。代码很冗余&#xff0c;不知道有没有更好的解决办法&#xff1f; 老鸟&#xff1a;菜鸟&#xff0c;这个问题很常见…

FaskAPI Web学习

FaskAPI Web学习 个人笔记使用&#xff0c;感谢阅读&#xff01; # -*- ecoding: utf-8 -*- # Author: SuperLong # Email: miu_zxl163.com # Time: 2024/9/7 11:37 from enum import Enum from typing import Optionalfrom fastapi import FastAPI import uvicorn app FastA…

log4j 多classloader重复加载配置问题解决

最近OneCoder在开发隔离任务运行的沙箱&#xff0c;用于隔离用户不同任务间以及任务和 框架本身运行代码的隔离和解决潜在的jar包冲突问题。 运行发现&#xff0c;隔离的任务正常运行&#xff0c;但是却没有任何日志记录。从控制台可看到如下错误信息&#xff1a; 全文详见个人…

从零开始学习JVM(七)- StringTable字符串常量池

1 概述 String应该是Java使用最多的类吧&#xff0c;很少有Java程序没有使用到String的。在Java中创建对象是一件挺耗费性能的事&#xff0c;而且我们又经常使用相同的String对象&#xff0c;那么创建这些相同的对象不是白白浪费性能吗。所以就有了StringTable这一特殊的存在&…

Spark2.x 入门:逻辑回归分类器

方法简介 逻辑斯蒂回归&#xff08;logistic regression&#xff09;是统计学习中的经典分类方法&#xff0c;属于对数线性模型。logistic回归的因变量可以是二分类的&#xff0c;也可以是多分类的。 示例代码 我们以iris数据集&#xff08;iris&#xff09;为例进行分析。i…

Spring AOP的注解式开发实现

目录 AOP常用注解注解开发实现步骤1. 导入Maven项目依赖2. 准备一个实体类&#xff08;先定义接口再实现&#xff09;3. 定义切面类4. 准备配置文件5. 编写测试类 注意事项 AOP的配置开发方式见&#xff1a;Spring入门之AOP&#xff08;包含实例代码&#xff09;。其他纯注解开…

记忆化搜索【下】

375. 猜数字大小II 题目分析 题目链接&#xff1a;375. 猜数字大小 II - 力扣&#xff08;LeetCode&#xff09; 题目比较长&#xff0c;大致意思就是给一个数&#xff0c;比如说10&#xff0c;定的数字是7&#xff0c;让我们在[1, 10]这个区间猜。 如果猜大或猜小都会说明…

Spring Boot之DevTools介绍

Spring Boot DevTools 是 Spring Boot 提供的一组易于使用的工具&#xff0c;旨在加速开发和测试过程。它通过提供一系列实用的功能&#xff0c;如自动重启、实时属性更新、依赖项的热替换等&#xff0c;极大地提高了开发者的开发效率。本文将详细介绍 Spring Boot DevTools 的…

RLVF:避免过度泛化地从口头反馈中学习

人工智能咨询培训老师叶梓 转载标明出处 大模型在不同行业和个人中的广泛应用要求模型能够根据具体的用户反馈进行调整或定制&#xff0c;以满足细微的要求和偏好。虽然通过高层次的口头反馈来指定模型调整非常方便&#xff0c;例如“在给老板起草电子邮件时不要使用表情符号”…

【A题第二套完整论文已出】2024数模国赛A题第二套完整论文+可运行代码参考(无偿分享)

“板凳龙” 闹元宵路径速度问题 摘要 本文针对传统舞龙进行了轨迹分析&#xff0c;并针对一系列问题提出了解决方案&#xff0c;将这一运动进行了模型可视化。 针对问题一&#xff0c;我们首先对舞龙的螺线轨迹进行了建模&#xff0c;将直角坐标系转换为极坐标系&#xff0…

缓存和数据库缓存有什么区别

缓存通常是在应用层面进行管理的&#xff0c;它就像是应用的一个临时数据仓库&#xff0c;可以存储一些常用的数据&#xff0c;这样应用就可以直接从缓存中获取数据&#xff0c;而不用每次都去数据库里查询。而数据库缓存则是在数据库层面进行管理的&#xff0c;它主要存储的是…

一键云迁移:利用VMware PowerCLI将OVA虚拟机顺利迁移到AWS

哈喽大家好&#xff0c;欢迎来到虚拟化时代君&#xff08;XNHCYL&#xff09;。 “ 大家好&#xff0c;我是虚拟化时代君&#xff0c;一位潜心于互联网的技术宅男。这里每天为你分享各种你感兴趣的技术、教程、软件、资源、福利…&#xff08;每天更新不间断&#xff0c;福利…

天气预报爬虫

一、获取天气接口 主要通过nowapi注册用户之后&#xff0c;进入相应的接口&#xff0c;进行抓取报文。 二、wireshark抓取报文&#xff0c;解析cjson格式 Http的交互过程 1.建立TCP连接 2.发送HTTP请求报文 3.回复HTTP响应报文 4.断开TCP连接 CJSON的使用办法 1. JSON…

Python爬虫-Amazon亚马逊oData参数

前言 本文是该专栏的第37篇,后面会持续分享python爬虫干货知识,记得关注。 本文以“亚马逊Amazon”为例,主要获取亚马逊商品详情页的oData参数规律。 具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。接下来,跟着笔者直接往下看正文详细内容。(附带完整…

axure之变量

一、设置我们的第一个变量 1、点击axure上方设置一个全局变量a 3 2、加入按钮、文本框元件点击按钮文档框展示变量值。 交互选择【单击时】【设置文本】再点击函数。 点击插入变量和函数直接选择刚刚定义的全局变量&#xff0c;也可以直接手动写入函数(注意写入格式。) 这…

RISC-V最先进CPU微架构分析

简介 近几年热门的RISC-V架构发展迅猛&#xff0c;尽管因为生问题&#xff0c;RISC-V应用方向主要是单片机级的&#xff0c;高端应用方向发展发展速度缓慢&#xff0c;依然有不少公司推出了基于RISC-V指令集的高端应用场景的处理器。 本文汇总具有代表性的RISC-V公司推出的先…

『功能项目』武器的切换实例【34】

本章项目成果展示 我们打开上一篇33战士的A键连击的项目&#xff0c; 本章要做的事情是按键盘E键切换职业时切换手中的武器 首先在资源商店下载免费的武器模型 创建一个空物体 命名为WeaponPos 将武器预制体拖拽至WeaponPos &#xff08;注意调整空物体位置就可以后续文章会更…

DDoS实战 · 攻防演练

21世纪什么最重要&#xff1f;安全&#xff01;安全&#xff01;还是安全&#xff01;接下来给大家并分享一些实用的安全测试小技巧。 请记住&#xff0c;网络并非法外之地&#xff0c;言行举止需谨慎&#xff01; 什么是DDoS攻击 分布式拒绝服务攻击&#xff08;Distribute…