余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

前端常见面试题总结——HTML篇(前端html)

xiyangw 2022-11-25 12:27 174 浏览 0 评论

1、关于HTML语义化,你知道都有哪些标签?

语义化就是让计算机能够快速读懂内容,高效的处理信息。搜索引擎只能通过标签来判断内容的语义,因为页面的很大一部分流量来自搜索引擎,要使页面尽可能地对搜索引擎友好,所以尽可能地使用语义化标签,如:

div是division分离,span是span范围,table是表格,ol是orderList有序列表,ul是unorderList无序列表,li是list item列表选项,html5进一步推进web语义化的发展,使用了一些新的标签有header、artical、address等。

2、HTML标签分类有哪些?都有啥特点?

  • 块级标签

默认宽度是100%

块级标签独占一行

块级标签可以使用height设置高度

常见块级标签:div、p、h1~h6、ol、ul、table、form等等。

  • 行级标签

默认宽度由内容撑开

行级标签不会自动换行,从左到右一次排列

行级标签height设置高度失效,高度由内容撑开。

常见行级标签:span、a、br、strong、lable、i、em。

  • 行内块标签

结合行级和块级的优点

可以设置元素的宽高

还可以将多个元素显示在一行从左到右一次排列。

常见行内块标签:img、input。


3、网页编码设置有几种方式?

Charset属性规定HTML文档的字符编码,常见的属性值有以下几个:

  • UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码。用在网页上可以同一页面显示中文简体繁体以及其他语言。
  • GBK是汉字编码,是双字节码,可表示简体和繁体字。
  • ISO8859-2字符集,也称Latin-2,收集了东欧字符。


4、HTML的框架优缺点有哪些?

Html框架有iframe和frame两个,将多个页面通过一个浏览器窗口显示。

框架的优点:

  • 重载页面时不需要重载整个页面,只需要重载页面中的一个框架页,减少数据传输,加快网页加载速度。
  • Iframe使用简单不需要引入任何插件,主要用于不需要搜索引擎搜索的页面。
  • 方便制作导航,多个页面共用,方便开发和维护。

缺点:

  • 会产生很多页面,不容易管理。
  • 不方便打印,不能实现对frameset的打印。
  • 浏览器后退按钮失效。
  • 不利于SEO优化,不能为每个页面设置标题和关键字,影响搜索。
  • 多数小型移动设备无法完全显示框架。
  • 多框架页面会增加服务器的http请求。
  • H5已经抛弃该标签。


5、HTML5有哪些新特性,移除了哪些元素?

H5新增了图像、位置、存储、多任务等功能。

新增元素:

  • Canvas
  • video和audio元素
  • 本地离线缓存:localStorage长期存储,浏览器关闭之后数据不丢失,sessionStorage的数据在浏览器关闭后自动删除。
  • 语义化标签:artical、footer、header、nav、section
  • 位置API:Geolocation
  • 表单控件:calendar、date、time、email、search、url
  • 新技术:web worker(运行在后台的js,独立于其他脚本,不影响页面性能。可以在页面继续任何操作,此时web worker在后台运行)、web socket
  • 拖放API:drag、drop

移除元素:

  • 框架元素:frame、frameset、noframes。
  • 纯表现元素:basefont、font、center、u、big、strike、tt

Html5新增了 27 个元素,废弃了 16 个元素,根据现有的标准规范,把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。


6、如何区分HTML和HTML5?

DOCUMENT声明方式是区分的重要元素。

  • Html声明方式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd”>
  • Html5声明方式:<!DOCTYPE html>

根据新增加的结构、功能来区分。H5有好多新增语义化标签。


7、H5文件离线存储怎么使用,工作原理是什么?

在线情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问那么浏览器就会根据manifest文件的内容下载相应的资源,并进行离线存储。如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有改变,就不会有任何操作,如果文件改变了,那么就会重新下载资源,并进行离线缓存。

页面头部加入manifest属性。如:<html manifest="demo.appcache">

在cache.manifest文件中编写离线存储的资源。


8、Cookies,sessionStorage和localStorage的区别?

共同点:都是保存在浏览器端,而且都是同源的。

区别:

  • Cookies是为了标识用户身份而存储在用户本地的数据,始终在同源http请求中携带,在浏览器与服务器间来回传递,而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
  • 存储大小差异。Cookie保存的数据很小,不能超过4k,而sessionStorage和localStorage保存数据大,可达到5M。
  • 存储有效期不同。Cookie在设置的cookie过期前始终有效,而sessionStorage仅在浏览器关闭之前有效,localStorage始终有效,与浏览器窗口没关系。
  • 作用域不同:cookie在所有同源窗口都是共享,sessionStorage不能在不同浏览器窗口上共享,localStorage在所有同源窗口都是共享的。


9、title与h1的区别、b与strong的区别、i与em的区别?

title属性没有明确意义,只表示标题,h1表示层次明确的标题,对页面信息抓取也有很大的影响。

strong标明重点内容,语气加强含义,b表示无意义的视觉表示

em表示强调文本,i是斜体,是无意义的视觉表示

视觉样式标签:b、u、i、s

语义样式标签:strong、em、ins、del、code


10、viewport 所有属性 ?

viewport是用户网页的可视区域,使用meta设置viewport时有很多属性,分别对以下各个属性介绍

  • width :设置layout viewport的宽度,为一个正整数,或字符串'device-width';
  • initial-scale:设置页面的初始缩放值,为一个数字,可以带小数。
  • minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数。
  • maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数。
  • height:设置layout viewport的高度,这个属性对我们并不重要,很少使用
  • user-scalable:是否允许用户进行缩放,值为‘no’或者‘yes’。
  • target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

安卓中还支持:target-densitydpi,表示目标设备的密度等级,作用是决定css中的1px 代表多少物理像素。


11、meta标签的name属性值?

name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索机器人查找信息和分类信息用的。

Meta标签的name属性语法格式是:

<meta name=”参数”content=”具体的参数值”>

Name主要有以下几个参数:

  • Keywords(关键字):关键字用来告诉搜索引擎你网页的关键字是什么。
  • Description(网站内容描述):描述用来浏览器你的网页主要内容是什么。
  • Robots(机器人向导):robots用来搜索机器人哪些页面需要索引,哪些页面不需要索引。
  • Author(作者):添加网页作者信息。

Content的参数主要有name的参数来决定,如果是关键字的时候,多个关键字之间使用逗号隔开,一般使用5个关键字为宜;如果是描述的时候,描述长度一般控制在200字左右;如果是索引的时候,一般使用inde、noindex、none、all,默认是all。

相关推荐

高效删除文件名中的指定内容,祛除烦恼

如何快速批量删除文件名中的指定字符?在电脑整理文件时,我们常常需要进行批量重命名操作。如果文件名中含有不必要或重复的字符,这将影响文件的识别和查找。因此,删除这些文字或字符是非常必要且有效的。本文将分...

你的手机是不是经常提示存储空间不足?Python帮你清理重复文件

  最近我的手机经常提示存储空间不足,主要是微信和QQ群里接收的文件太多了,平时也没怎么整理。我把这些文件从手机里拷出来,打算整理一下,把该删的文件都删掉,把要备份的文件分门别类存到电脑或网盘上。我突...

从零开始打造云端AI管理调度平台(四)如何设计主页_1

最近闲来无事,想着把自己工作正在做的一个项目做一个简单的分享与实战教程,该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容...

「万能Python」-17-标准库OS_python2.7标准库

Python的库是指预先编写好的代码集合,可以用来处理特定的任务或实现特定的功能。Python的标准库提供了许多常用的标准库,无需安装引入使用。Python3的标准库提供了许多常用的功能,包括...

十多行代码生成原帖和临写对照图_几十行代码可以申请软著吗

介绍这个小工具把原帖和临写分解成多列对照的形式。输入原帖图片,和输入临写图片,生成对照图片。使用说明运行compare.py文件,输入参数为:原帖图片文件名,临写图片文件名,列数。python3co...

Python合集之目录操作(四)_python之文件操作大全

1.删除目录删除目录可以通过os模块提供的rmdir()函数实现。通过rmdir()函数删除目录时,只有当要删除的目录为空时才起作用。os.rmdir(path)path为要删除的目录,可以使用绝对路...

excel办公自动化,自动合并excel表格

平时时收到不同人反馈的excel表格,需要将其合并在一个excel中,每个excel打开复制粘贴会很慢,如下脚本可一键合并所有的exceldefauto_merge():try:print('...

批量打开一个文件夹下面所有的excel表格

如果现在有一个文件夹,名称叫做“练习表格”,路径名是'C:\Users\123\Desktop\练习表格',现在的要求是打开这个文件下面所有的excel表格,后缀名字为“xlsx”,我...

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手/右手...

python 日志写入_python日志文件写入

1.第一步,新建日志文件路径,如下图:2.日志模块封装,代码如下:importlogging,oslogs_path=os.path.join(os.path.dirname(__file...

Python os.path模块使用指南:轻松处理文件路径

前言在Python编程中,文件和目录的操作是非常重要的一部分。为了方便用户进行文件和目录的操作,Python标准库提供了os模块。其中,os.path子模块提供了一些处理文件路径的函数和方法。本文主要...

Python中获取当前路径之pathilb和os的区别

20230114星期六:1,直接在py脚本中,执行,没有区别;2,打包成exe文件以后,在本机执行,有区别,这时,不能使用os.path.dirname(__file__),只能使用pathlib.P...

Python(办公自动化编程系列)学习笔记1

1、获得当前程序工作目录importos#os.getcwd()函数可以取得当前工作路径的字符串print(os.getcwd())运行结果2、获得程序文件夹相对路径#相对路径都用/表示#../...

文件路径名Pathnames的操作_路径和文件名是什么意思

1.现象问题使用路径名来获取文件名,目录名,绝对路径等等2.原因分析无3.问题解决使用os.path模块中的函数来操作路径名importos.path#查看标准化的绝对路径print...

关于《Python入门:os常用函数》中复制文件(夹)函数从简到繁

基本考虑练习os模块及file读写操作:将给定的源路径的文件(夹)复制到目标路径简单实现#文件到文件的复制path_src='E:\src.txt'path_tar='D...

取消回复欢迎 发表评论: