Html面试的一些常见问题？

程序员文章站 2022-04-20 09:00:24

...

HTML、XML、XHTML 有什么区别？

HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；
XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；
XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

怎样理解 HTML 语义化？

HTML语义化是什么

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

语义化的HTML怎么写

HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。
写语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，div是一个容器；strong表示强调；ul li是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

HTML语义化的好处

我们知道HTML5新增的标签，比如<header>、<aritile>、<aside>、<footer>等，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明了语义化的HTML结构是html的发展趋势。

去掉或样式丢失的时候能让页面呈现清晰的结构
屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页
PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
便于团队开发和维护

怎样理解内容与样式分离的原则

网页分离

一个网页分为三个部分：Html——结构，css——表现，javascrip——行为。内容也就是html，样式也就是css。所以内容和样式的分离，就是指在网页编码的过程中，要将html和css两大部分分开。

如何做到分离

内容与样式分离的原则的实现，一个是要依靠意识，另一个是依靠经验。
举例而言，面对一个分块明显的网页设计图时：

初级的开发人员思路及制作方法：div 层层嵌套；
中级的开发人员思路及制造方法：去掉多余的 div ,进行简化；
高级的开发人员思路及制造方法：最大化的简化 html 的结构，然后用 css 进行设置，减少 html 与 css 的契合度。
正确做法是写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离），写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。

分离的优点

浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。
更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。

有哪些常见的meta标签？

meta标签共有两个属性，分别是http-equiv属性和name属性。

name属性
name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。meta标签中name属性语法格式是：

<meta name="参数" content="具体的描述">。

keywords(关键字)

说明：用于告诉搜索引擎，你网页的关键字。举例：

<meta name="keywords" content="软件，开发">

description(网站内容的描述)

说明：用于告诉搜索引擎，你网站的主要内容。举例：

<meta name="description" content="财务软件，外贸软件">

viewport(移动端的窗口)

说明：这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。

举例（常用范例）：

<meta name="viewport" content="width=device-width, initial-scale=1">

http-equiv属性

http-equiv顾名思义，相当于http的文件头作用。

meta标签中http-equiv属性语法格式是：

<meta http-equiv="参数" content="具体的描述">

content-Type(设定网页字符集)(推荐使用HTML5的方式)

说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML，不推荐

<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

X-UA-Compatible(浏览器采取何种版本渲染当前页面)

说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）举例：


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新
版本渲染当前页面

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

文档声明的作用

文档声明是为了告诉浏览器，你的 HTML 文档是用的什么版本的 HTML 来写的，这样浏览器才能按照你声明的版本来正确的解析你的 HTML 文档。

严格模式和混杂模式

严格模式（推荐）现在也称为标准模式，在该模式下，浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。
混杂模式（不推荐）的由来是一个历史问题。在互联网早期，网页一般写成两个版本：一个写给网景公司的 Navigator浏览器，一个写给微软公司的IE浏览器。当W3C制定了 Web 标准后，这两个浏览器不能马上开始按标准来解析渲染页面，因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式，在该模式下，浏览器会模拟Navigator 4和IE5的非标准行为来解析渲染页面，这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。

<!doctype html> 的作用

<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的。

浏览器乱码的原因是什么？如何解决

产生乱码的原因是：

1、比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
2、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码，造成网页乱码。

解决方法：

1、使用软件进行编辑HTML网页内容
2、如果网页设置编码是gbk的，而数据库储存数据编码格式是UTF-8的，这个时候程序查询数据库数据显示数据前进程序转码即可。
3、如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

常见的浏览器有哪些，什么内核？

1、Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
2、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
3、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
4、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

列出常见的标签，并简单介绍这些标签用在什么场景？

div 块级元素
h1-h6 定义标题
p 定义一段文字
ul li 无序列表
ol li 有序列表
dl dd dt 用于展示一系列“标题：内容”的场景
img 用于插入图片
a 超链接
strong 加粗语义强
em 斜体
del 删除线

上一篇：业务User和Ralasafe User如何转换

下一篇： ansible