前端八股文(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优化。


  • 23
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端八股文是指在前端开发领域,一些常见的面试题目和技术要点的总结,通常以提问的形式呈现在GitHub上,供面试准备和学习使用。 GitHub是一个开源代码库托管平台,以版本控制系统Git为基础。在GitHub上,开发者可以创建自己的代码仓库,存放自己开发的项目代码,并与其他开发者共享、协作。同时,GitHub也是前端开发者交流、学习的重要平台之一,许多前端开发的优秀项目、教程和资源都可以在GitHub上找到。 前端开发的八股文是一种面试备考的指导性资料,涵盖了前端开发的常见知识点和技能要求。它们通常包括HTML、CSS、JavaScript等基础知识、常见的前端框架和类库,以及一些实际项目中常见的技术难点和解决方案。通过学习和掌握这些知识点,前端开发者可以更好地应对面试,提高自己的竞争力。 GitHub上有许多前端八股文的项目,从基础知识到高级技巧都有所涉及。这些项目一般以问题+答案的形式展示,通过阅读问题和答案,前端开发者可以系统性地学习和巩固前端开发的各个方面的知识点。同时,这些项目通常也会提供一些练习题目,帮助开发者进一步巩固学习成果。 总而言之,前端八股文是一份充实的学习资料,帮助前端开发者在面试中取得好的表现。GitHub提供了许多前端八股文的资源,通过学习这些资源,前端开发者可以提升自己的技能水平,更好地适应不断发展的前端技术领域。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端VC

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值