前端八股文(HTML篇)一

目录

1.什么是DOCTYPE,有何用呢?

 2.说说对html语义化的理解

3.src和href的区别?

4.title与h1的区别,b与strong的区别,i与em的区别?

5.什么是严格模式与混杂模式?

6.前端页面有哪三层构成,分别是什么?

7.行内元素和块级元素分别有哪些?有何区别?

八.HTML5中新增了哪些新特性?移除了哪些元素?

九.对于Web标准以及W3C的理解

十.知道什么是微格式吗?


1.什么是DOCTYPE,有何用呢?

Doctype是HTML5的文档声明,通过它可以告诉浏览器,使用哪一个HTML版本标准解析文档。在浏览器发展的过程中,HTML出现过很多版本,不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器,那么浏览器就不知道文档解析标准是什么?此时,,大部分浏览器将开启最大兼容模式来解析网页,我们一般称为怪异模式,这不仅会降低解析效率,而且会在解析过程中产生一些难以预知的bug,所以文档声明时必须的。


 2.说说对html语义化的理解

HTML标签的语义化,简单来说,就是用正确的标签做正确的事情,给某块内容用上一个最恰当的标签,使页面有良好的结构,页面元素有含义。

语义化的优点如下:

  • 在没有css样式情况下也能够让页面呈现出清晰的结构
  • 有利于SEO和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息,爬出是依赖于标签来确定上下文和各个关键字的权重。
  • 方便团队开发和维护,语义化更具有可读性,遵循w3c标准的团队都遵循这个标准,可以减少差异化。

3.src和href的区别?

src和href都是HTML中特定元素的属性,都可以用来引入外部的资源。两者区别如下:

  • src:全称source,它通常用于img,video,audio,script元素,通过src指向请求外部资源的来源地址,指向的内容会嵌入到文档中当前标签所在的位置,它会将资源下载并应用到文档内,比如说:js脚本、img图片、frame等元素。当浏览器解析到该元素时,会暂停其它资源下载,直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。
  • href:全称hyper reference ,意味着超链接,指向网络资源,当浏览器识别到它指向的文件时,就会并行下载资源,不会停止对当前文档的处理,通常用于a,link元素。

4.title与h1的区别,b与strong的区别,i与em的区别?

  • title属性表示网页的标题,h1元素表示层次明确的页面的内容标题,对页面信息的抓取也有很大的影响
  • strong是标明重点内容,有语气加强的含义而b是展示强调内容
  • i是italic(斜体)的简写,是早期的斜体元素,表示内容展示为斜体,而em是emphasize(强调)的简写,表示强调的文本。

5.什么是严格模式与混杂模式?

  • 严格模式:是以浏览器支持的最高标准运行
  • 混杂模式:页面以宽松向下兼容的方式显示,模拟老式浏览器的行为

6.前端页面有哪三层构成,分别是什么?

构成:结构层,表示层,行为层

1.结构层

        结构层是由HTML超文本标记语言来创建的,也就是页面中的各种标签,在结构层中保存了用户可以看到所有内容。

2.表示层

        表示层是由css负责创建,它的作用是如何显示有关内容,学名:层叠样式表。

3.行为层

        行为层表示网页内容跟用户之间产生交互性,简单来说就是用户操作了网页,网页给用户一个反馈。


7.行内元素和块级元素分别有哪些?有何区别?

常见的块级元素:p,div,form,ul,li ,ol,table,h1,h2,h3,h4,h5,h6,dl,dt,dd

常见的行内元素:span,a,img,button,input,select

块级元素:

  • 总是在新行上开始,就是每个块级元素独占一行,默认从上到下排列
  • 宽度缺少时它的容器的100%,除非设置一个宽度
  • 高度,行高以及外边距和内边距都是可以设置的
  • 块级元素可以容纳其他行内元素和块级元素

行内元素:

  • 和其他元素都会在一行显示
  • 高,行高以及外边距和内边距可以设置
  • 宽度就是文字或者图片的宽度,不能改变
  • 行级元素只能容纳文本或者其他行内元素

八.HTML5中新增了哪些新特性?移除了哪些元素?

HTML5中主要是关于图像,位置,存储,多任务等功能的增加:

  • 语义化标签,如:article,footer,header,nav等
  • 视频video,音频audio
  • 画布canvas
  • 表单控件,calemdar,date,time,email
  • 地理
  • 本地离线存储,localStorage长期存储数据,浏览器关闭数据不丢失,sessionStorage的数据在浏览器关闭后自动删除
  • 拖拽释放

移除的元素:

  • 纯表现的元素:basefont、font、s、strike、tt、u、big、center
  • 对可选性产生负面影响的元素:frame、frameset、noframes

九.对于Web标准以及W3C的理解

web标准简单来说可以分为结构,表现,行为。其中结构是由HTML各种标签组成,简单来说就是body里面写入标签是为了页面的结构。表现是指css层叠样式表,用过css可以让我们的页面结构标签更具美感。行为是指页面和用户具有一定的交互。

W3C,全称:world wide web consortium是一个制定各种标准的非盈利性组织,也叫万维网联盟,标准包括HTML、CSS、ECMAScript等等,web标准的制定有很多好处,比如说:

  • 可以统一开发流程,统一使用标准化开发工具(VSCode、WebStorm、Sublime),方便多人协作
  • 学习成本降低,只需要学习标准就行,否则就要学习各个浏览器厂商标准
  • 跨平台,方便迁移都不同设备
  • 降低代码维护成本、

十.知道什么是微格式吗?

所谓的微格式是建立在已有的,被广泛采用的标准基础之上的一组简单的,开发的数据格式。

具体表现是把语义嵌套在HTML中,以便有助于分离式开发,并通过制定一些简单的约定,来兼顾HTML文档的可阅读性,相当于对web网页进行语义化注解。

采用微格式的web页面,在HTMl文档中给一些标签增加一些属性,这些属性对信息的语义结构进行注解,有助于处理HTML文档的软件,更好的理解HTML文档。当爬取web内容时,能够更为准确地识别到内容块的语义,微格式可以对网站进行SEO优化。


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

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

相关文章

VMware之FTP的简介以及搭建使用计算机端口的介绍

🎬 艳艳耶✌️:个人主页 🔥 个人专栏 :《产品经理如何画泳道图&流程图》 ⛺️ 越努力 ,越幸运 目录 一、FTP介绍 1、什么是FTP: 2、FTP适用于以下情况和应用场景: 3、winServer2012搭…

软件测试/测试开发丨Linux 三剑客与管道使用

1、 程序运行环境输入与输出 标准输入 0 read a;echo $a标准输出 1 echo ceshiren.com错误输出 ls not_exist_dir 2、 管道重定向 管道与管道之间可以重定向管道与文件之间可以重定向 echo 11 > /tmp/1 read var </tmp/1错误输出&#xff1a; ls not_exist_dir > /…

ubuntu:beyond compare 4 This license key has been revoked 解决办法

https://www.cnblogs.com/zhibei/p/12095431.html 错误如图所示&#xff1a; 解决办法&#xff1a; &#xff08;1&#xff09;先用find命令找到bcompare所在位置&#xff1a;sudo find /home/ -name *bcompare &#xff08;2&#xff09;进入 /home/whf/.config,删除/bco…

【瞎折腾/3D】无父物体下物体的旋转与移动

目录 说在前面移动World SpaceLocal Space 旋转World SpaceLocal Space 代码 说在前面 测试环境&#xff1a;Microsoft Edge 120.0.2210.91three.js版本&#xff1a;0.160.0其他&#xff1a;本篇文章中只探讨了无父对象下的移动与旋转&#xff0c;有父对象的情况将在下篇文章中…

剑指offer题解合集——Week2day7

文章目录 剑指offerWeek2周日&#xff1a;链表中倒数第k个节点AC代码思路&#xff1a; 周日&#xff1a;链表中环的入口结点AC代码思路&#xff1a; 剑指offerWeek2 周日&#xff1a;链表中倒数第k个节点 题目链接&#xff1a;链表中倒数第k个节点 输入一个链表&#xff0c…

springboot 接收appsflyer 参数

1、官网登陆&#xff1a;hq1.appsflyer.com a、配置接收请求的地址和需要的事件 配置详情 2、Controller配置接收 RequestMapping(value "/req", method POST)ResponseBodypublic ResData req(RequestBody Map<String, String> map) {String jsonObject J…

一文搞懂什么是缓存穿透、缓存雪崩、缓存击穿三个概念,以及解决方案

先理解概念&#xff1a;【注&#xff1a;我们这里说的是分布式、高并发环境】 一、缓存穿透是什么&#xff1f; 缓存穿透是指&#xff1a;请求【可以有很多】的数据在缓存、关系型数据库中都不存在&#xff0c;每次来查询都会查询到关系型数据库中。 解决方案&#xff1a; 1、将…

CUMT--Java复习--核心类

目录 一、装箱与拆箱 二、“”与equals 三、字符串类 1、String、StringBuffer、StringBuilder的区别 2、String类 3、StringBuffer类 4、StringBuilder类 四、类与类之间关系 一、装箱与拆箱 基本类型与对应封装类之间能够自动进行转换&#xff0c;本质就是Java的自…

强烈推荐 25个 前端开源中后台管理系统

作为程序员&#xff0c;构建一套个人专属的后台管理系统非常重要。这不仅是为了打造自己独有的开发生态&#xff0c;更是因为我们正处于个人开发和AI模型泛滥的时代。利用AI增强自己的系统变得尤为关键。然而&#xff0c;在UI界面设计方面&#xff0c;我们可能需要参考开源项目…

mysql原理--Explain详解

1.概述 一条查询语句在经过 MySQL 查询优化器的各种基于成本和规则的优化会后生成一个所谓的 执行计划 &#xff0c;这个执行计划展示了接下来具体执行查询的方式&#xff0c;比如多表连接的顺序是什么&#xff0c;对于每个表采用什么访问方法来具体执行查询等等。设计 MySQL 的…

实时交通标志检测和分类(代码)

交通标志检测和分类技术是一种基于计算机视觉和深度学习的先进技术&#xff0c;能够识别道路上的各种交通标志&#xff0c;并对其进行分类和识别。这项技术在智能交通系统、自动驾驶汽车和交通安全管理领域具有重要的应用前景。下面我将结合实时交通标志检测和分类的重要性、技…

第9章 继承和派生习题(详解)

一、选择题 1&#xff0e;下列表示引用的方法中&#xff0c; &#xff08;&#xff09; 是正确的。已知&#xff1a;int m10&#xff1a; A&#xff0e;int &xm&#xff1b; B&#xff0e;int &y10&#xff1b; C&#xff0e;int &z&#xff1b; D&#xff0e;fl…

Java中利用Redis,ZooKeeper,数据库等实现分布式锁(遥遥领先)

1. 分布式锁 1.1 什么是分布式锁 在我们进行单机应用开发涉及并发同步的时候&#xff0c;我们往往采用synchronized或者ReentrantLock的方式来解决多线程间的代码同步问题。但是当我们的应用是在分布式集群工作的情况下&#xff0c;那么就需要一种更加高级的锁机制&#xff0…

合伙企业法关于合伙企业的要求

合伙协议可以载明合伙企业的经营期限和合伙人争议的解决方式。 合伙协议经全体合伙人签名、盖章后生效。合伙人依照合伙协议享有权利&#xff0c;承担责任。 经全体合伙人协商一致&#xff0c;可以修改或者补充合伙协议。 申请合伙企业设立登记&#xff0c;应当向企业登记机关提…

个人信息出境标准合同备案政策解读、案例分析与合规指引

文章目录 前言一、政策背景1、 政策解读2、适用范围3、《标准合同办法》和《备案指南》的适用范围二、备案方式三、备案流程四、两种数据出境合规方式对比五、标准合同备案“三步走”合规指引路线六、总结前言 本文将结合《备案指南》和各地备案指引,解读备案规定要求、分析各…

git rebase应用场景三

文章目录 git rebase应用场景三 git rebase应用场景三 在我们的开发分支中 假设我们修改一个文件 提交一个版本 再回到master分支 同时也去修改1.txt文件&#xff0c;提交一个版本 这样相当于master分支提交了一次&#xff0c;dev也提交了一次 然后回到dev分支 此时会报错…

事务失效的十种常见场景

学习事务失效场景 1 概述 事务的传播类型isolationTransactionnal注解属性 事务方法未被Spring管理方法使用final类型修饰非public修饰的方法同一个类中的方法相互调用方法的事务传播类型不支持事务异常被内部catch&#xff0c;程序生吞异常数据库不支持事务未配置开启事务错…

【Linux】修复 Linux 错误 - 主机已关闭

修复 Linux 错误 - 主机已关闭 在使用 Linux 操作系统时,有时会遇到一些错误。其中一个常见的错误是“主机已关闭”(Host is down)。当您尝试连接到另一台计算机或服务器时,可能会收到此错误消息。本文将介绍如何诊断和修复此错误。 1. 检查网络连接 首先,您需要确保您…

【ChatGPT 默认强化学习策略】PPO 近端策略优化算法

PPO 近端策略优化算法 PPO 概率比率裁剪 演员-评论家算法演员-评论家算法&#xff1a;多智能体强化学习核心框架概率比率裁剪&#xff1a;逐步进行变化的方法PPO 目标函数的设计重要性采样KL散度 PPO 概率比率裁剪 演员-评论家算法 论文链接&#xff1a;https://arxiv.org…

Oracle-深入了解cache buffer chain

文章目录 1.Cache buffer chain介绍2.Buffer cache的工作原理3 Buffer chains4.Multi-versioning of Buffers5.Latches6.诊断CBC latch等待7.解决 CBC Latch等待 1.Cache buffer chain介绍 经常看到会话等待事件“latch&#xff1a;cache buffers chain”。 如果想知道意味着什…