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


相关推荐
崔庆才丨静觅1 天前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60611 天前
完成前端时间处理的另一块版图
前端·github·web components
掘了1 天前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅1 天前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅1 天前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅1 天前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment1 天前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅1 天前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊1 天前
jwt介绍
前端
爱敲代码的小鱼1 天前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax