个性化阅读
专注于IT技术分析

史上最全HTML面试题及最佳答案合集

HTML面试题

下面列出了最常见的HTML面试问题和HTML5面试问题及答案。

  • HTML5面试问题

1)什么是HTML?

HTML代表超文本标记语言。它是万维网的一种语言。它是一种标准的文本格式设置语言, 用于在Web上创建和显示页面。它使文本更具交互性和动态性。它可以将文本转换为图像, 表格, 链接。更多细节。


2)什么是标签?

HTML标签由三部分组成:开始标签, 内容和结束标签。一些标签是未关闭的标签。

HTML文档包含两件事:

  • 内容, 以及
  • 标签

当网络浏览器读取HTML文档时, 浏览器从上到下以及从左到右读取。 HTML标记用于创建HTML文档并呈现其属性。每个HTML标签都有不同的属性。

语法

<tag> content </tag>

内容放置在标签之间, 以在网页上显示数据。

更多细节。


3)所有HTML标签是否都有结束标签?

否。有些HTML标记不需要结束标记。例如:<image>标签, <br>标签。更多细节。


4)什么是HTML格式?

HTML格式设置是格式化文本以获得更好外观的过程。它使用不同的标签使文本加粗, 斜体, 加下划线。更多细节。


5)HTML包含多少种标题?

HTML包含六种标题, 这些标题由<h1>至<h6>标记定义。每种标题标签显示的文字大小都不同。因此, <h1>是最大的标题标签, 而<h6>是最小的标题标签。例如:

<h1>Heading no. 1</h1>  
<h2>Heading no. 2</h2>  
<h3>Heading no. 3</h3>  
<h4>Heading no. 4</h4>  
<h5>Heading no. 5</h5>  
<h6>Heading no. 6</h6>

更多细节。


6)如何在HTML中创建超链接?

HTML提供了一个锚标记来创建将一个页面链接到另一页面的超链接。这些标签可以通过以下任何一种方式出现:

  • 未访问的链接-显示, 带下划线的蓝色。
  • 已访问链接-已显示, 带下划线的紫色。
  • 活动链接-显示, 带下划线的红色。

更多细节。


7)哪个HTML标签用于以表格形式显示数据?

HTML表格标记用于以表格形式(行*列)显示数据。它还管理页面的布局, 例如, 标题部分, 导航栏, 正文内容, 页脚部分。以下是在以表格形式显示数据时使用的标签列表:

Tag Description
它定义了一个表。
它在表中定义一行。
它在表中定义标题单元格。
它在表中定义一个单元格。
它定义了表格标题。
它在表中指定一组一个或多个列以进行格式化。
它与<colgroup>元素一起使用以指定每个列的列属性。
用于将表中的正文内容分组。
用于将表中的标题内容分组。
用于将表中的页脚内容分组。

8)设计页面时使用哪些常见列表?

有许多用于设计页面的常见列表。你可以选择以下列表类型中的任何一种或组合:

  • 有序列表-有序列表以编号格式显示元素。它由<ol>标记表示。
  • 无序列表-无序列表以项目符号格式显示元素。它由<ul>标记表示。
  • 定义列表-定义列表以定义形式显示元素, 例如在字典中。 <dl>, <dt>和<dd>标记用于定义描述列表。

更多细节。


9)HTML元素和标签有什么区别?

HTML元素与浏览器通信以呈现文本。当元素用方括号<>括起来时, 它们形成HTML标记。在大多数情况下, 标签成对出现并围绕内容。


10)什么是语义HTML?

语义HTML是一种编码样式。它是使用HTML标记来增强内容的语义或含义。例如:在语义HTML中, <b> </ b>标记不用于粗体语句, 而<i> </ i>标记用于斜体。代替这些, 我们使用<strong> </ strong>和<em> </ em>标签。


11)什么是图像图?

图像映射可帮助你使用单个图像链接许多不同的网页。它由<map>标签表示。你可以在要成为图像映射一部分的图像中定义形状。


12)如何在浏览器页面上插入版权符号?

你可以在HTML文件中使用©或©插入版权符号。


13)如何用HTML创建嵌套的网页?

HTML iframe标记用于显示嵌套的网页。换句话说, 它表示网页内的网页。 HTML <iframe>标记定义了一个内联框架。例如:

<!DOCTYPE html>  
<html>  
<body>  
<h2>HTML Iframes example</h2>  
<p>Use the height and width attributes to specify the size of the iframe:</p>  
<iframe src="https://www.srcmini.com/" height="300" width="400"></iframe>  
</body>  
</html>

14)如何使列表元素直接放在HTML文件中?

你可以使用缩进来使列表元素保持直线。


15)超链接仅适用于文本吗?

不, 你可以在文本和图像上都使用超链接。 HTML锚标记定义了将一个页面链接到另一页面的超链接。 ” href”属性是HTML锚标记的最重要属性。

语法

<a href = "..........."> Link Text </a>

更多细节。


16)什么是样式表?

样式表用于构建一致, 可移植且设计良好的样式模板。你可以在几个不同的网页上添加这些模板。它描述了以标记语言编写的文档的外观和格式。


17)你可以在网页上创建彩色文本吗?

是。要在网页上创建多色文本, 可以对要着色的特定文本使用<font color =” color”> </ font>。


18)是否可以更改子弹的颜色?

项目符号的颜色始终是列表的第一个文本的颜色。因此, 如果要更改项目符号的颜色, 则必须更改文本的颜色。


19)解释HTML的布局吗?

HTML布局指定了排列网页的方式。

HTML布局

每个网站都有特定的布局以特定方式显示内容。

以下是用于定义网页不同部分的不同HTML5元素。

  • <header>:用于定义文档或节的标题。
  • <nav>:用于定义导航链接的容器
  • <section>:用于在文档中定义一个部分
  • <article>:用于定义独立的, 独立的文章
  • <aside>:用于定义内容以外的内容(如边栏)
  • <footer>:用于为文档或节定义页脚

20)什么是跑马灯?

选取框用于将滚动文本放在网页上。它会自动向上, 向下, 向左或向右滚动图像或文本。你应该将要滚动的文本放在<marquee> …… </ marquee>标记内。更多细节。


21)可以使用多少个标签来分隔一段文本?

使用三个标签来分隔文本。

  • <br>标记-通常<br>标记用于分隔文本行。它中断当前行并将流传送到下一行
  • <p>标记-<p>标记包含新段落形式的文本。
  • <blockquote>标记-用于定义一个大的带引号的部分。如果报价很大, 则将整个文本放在<blockquote> …………. </ blockquote>标记内。

22)如何制作网页背景图片?

要将图片作为网页上的背景图像, 应在</ head>标记后放置以下标记代码。

<body background = "image.gif">

在这里, 将” image.gif”替换为要在网页上显示的图像文件的名称。


23)什么是空元素?

没有内容的HTML元素称为空元素。例如:<br>, <hr>等。


24)span标签的用途是什么?举一个例子。

span标签用于以下用途:

  • 用于在文本上添加颜色
  • 用于在文本上添加背景
  • 突出显示任何颜色文本

例:

<p>
<span style="color:#ffffff;">
In this page we use span.
</span>
</p>

25)iframe广告代码的用途是什么?

iframe用于显示网页内的网页。

语法

<iframe src="URL"></iframe>

例:

<iframe src="demo_iframe.html" width="200px" height="200px"></iframe>

定位到链接:

<iframe src="http://www.srcmini.com" name="iframe_a"></iframe>

26)HTML中的实体是什么?

HTML字符实体用于替换HTML中的保留字符。你也可以用实体替换键盘上不存在的字符。由于某些字符保留在HTML中, 因此替换了这些字符。


27)为什么URL用HTML编码?

URL被编码为将非ASCII字符转换为可在Internet上使用的格式, 因为URL仅通过使用ASCII字符集在Internet上发送。如果URL包含ASCII集之外的字符, 则必须转换URL。非ASCII字符将替换为”%”, 后跟十六进制数字。


28)<!DOCTYPE html>标记是否是HTML标记?

不, <!DOCTYPE html>声明不是HTML标记。 HTML的类型很多, 例如HTML 4.01严格, HTML 4.01过渡, HTML 4.01框架集, XHTML 1.0严格, XHTML 1.0过渡, XHTML 1.0框架集, XHTML 1.1等。因此, <!DOCTYPE html>用于指示Web浏览器有关HTML页面的信息。


HTML5面试问题

让我们看一下最重要的HTML5面试问题和答案。


29)HTML5中的canvas元素是什么?

<canvas>元素是一个容器, 用于使用JavaScript之类的脚本语言在网页上绘制图形。它允许对2D形状和位图图像进行动态且可编写脚本的渲染。画布中有几种绘制路径, 框, 圆, 文本和添加图像的方法。例如:

<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">  
Your browser does not support the HTML5 canvas tag.  
</canvas>

更多细节。


30)什么是SVG?

HTML SVG用于描述二维矢量和矢量/光栅图形。 SVG图像及其行为在XML文本文件中定义。因此, 作为XML文件, 你可以使用文本编辑器创建和编辑SVG图像。它主要用于向量类型图, 例如饼图, X, Y坐标系中的二维图。

<svg width="100" height="100">  
 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />  
</svg>

更多细节。


31)HTML 5中有哪些不同的新表单元素类型?

以下是HTML 5中10个常用的新元素的列表:

  • 颜色
  • 日期
  • 本地日期时间
  • 电子邮件
  • 时间
  • 网址
  • 范围
  • 电话
  • Number
  • 搜索

32)是否需要更改网络浏览器以支持HTML5?

不会。几乎所有浏览器(更新版本)都支持HTML5。例如Chrome, Firefox, Opera, Safari, IE。


33)HTML5支持哪种类型的视频格式?

HTML 5支持三种类型的视频格式:

  • mp4
  • WebM
  • 奥格

更多细节。


34)HTML 5是否支持音频标签?

是。它用于在网页上添加声音或音乐文件。 HTML 5音频标签支持三种文件格式。

  1. mp3
  2. WAV
  3. 奥格

让我们看看使用HTML音频标签播放mp3文件的代码。

<audio controls>  
  <source src="koyal.mp3" type="audio/mpeg">  
Your browser does not support the html audio tag.  
</audio>

你可以传递任何mp3文件名来代替koyal.mp3。

更多细节。


35)进度标签和仪表标签有什么区别?

仅当仪表标签用于测量给定范围内的数据时, 进度标签才用于表示任务的进度。更多细节。


36)HTML 5中的数字标签有什么用途?

图形标签用于在网页上的文档中添加照片。它用于处理带有某些嵌入式内容的图表, 照片和代码清单。

<p>The Taj Mahal is widely recognized as "the jewel of Muslim art in India and one of the universally admired masterpieces of the world's heritage."</p>  
<figure>  
  <img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>  
</figure>

更多细节。


37)HTML 5中figcaption标记的用途是什么?

<figcaption>元素用于为图像提供标题。它是一个可选标记, 可以出现在<figure>标记内的内容之前或之后。 <figcaption>元素与<figure>元素一起使用, 可以将其放置为<figure>元素的第一个或最后一个子元素。

<figure>  
  <img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>  
<figcaption>Fig.1.1 - A front view of the great Taj Mahal in Agra.</figcaption>  
</figure>

更多细节。


38)什么是按钮标签?

button标记在HTML 5中使用。它用于在网页的HTML表单内创建可单击的按钮。通常用于创建”提交”或”重置”按钮。让我们看一下显示按钮的代码。

<button name="button" type="button">Click Here</button>

更多细节。


39)细节和摘要标签的用途是什么?

详细信息标签用于在网页上指定一些其他详细信息。可以按需查看或隐藏它。摘要标签与详细信息标签一起使用。更多细节。


40)什么是数据列表标签?

HTML 5数据列表标记在form元素上提供了自动完成功能。它方便用户选择预定义的选项供用户选择数据。

<label>  
 Enter your favorite cricket player: Press any character<br />  
 <input type="text" id="favCktPlayer" list="CktPlayers">  
 <datalist id="CktPlayers">  
 <option value="Sachin Tendulkar">  
 <option value="Brian Lara">  
 <option value="Jacques Kallis">   
 <option value="Ricky Ponting">   
 <option value="Rahul Dravid">   
 <option value="Shane Warne">   
 <option value="Rohit Sharma">   
 <option value="Donald Bradman">   
 <option value="Saurav Ganguly ">   
 <option value="AB diVilliers">   
 <option value="Mahendra Singh Dhoni">   
 <option value="Adam Gilchrist">  
 </datalist>  
</label>

更多细节。


41)标签如何从HTML4迁移到HTML5?

No. Typical HTML4 Typical HTML5
<div id =” header”> <header>
<div id=”menu”> <nav>
<div id=”content”> <section>
<div id=”post”> <article>
<div id =” footer”> <footer>

页眉和页脚示例

HTML 4页眉和页脚:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>&copy; srcmini. All rights reserved.</p>
</div>

HTML 5页眉和页脚:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© srcmini. All rights reserved.</p>
</footer>

菜单示例

HTML 4菜单:

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

HTML 5菜单:

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>

42)如果我不输入<!DOCTYPE html>, HTML 5是否可以工作?

否, 浏览器将无法识别它是HTML文档, 并且HTML 5标签不能正常运行。


43)HTML5中required属性的用途是什么?

它强制用户在提交表单之前在文本字段或文本区域上填充文本。它用于表单验证。

例:

Name: <input type="text" name="name" required>

44)HTML5中用于表单验证的新的<input>类型是什么?

用于表单验证的新输入类型是电子邮件, URL, 数字, 电话和日期。

例:

<input type="email">
工作/人力资源面试问题
jQuery面试问题
Java OOP面试问题
JSP面试问题
休眠面试问题
SQL面试题
Android面试题
MySQL面试问题

<表格>

<tr>

<th>

<TD>

<标题>

<colgroup>

<山口>

<身体>

<thead>

<脚注>

1)

2)

3)

4)

5)

面试技巧

JavaScript面试问题

Java基础面试问题

Servlet面试问题

春季面试问题

PL / SQL面试问题

Oracle面试问题

SQL Server面试问题

赞(0) 打赏
未经允许不得转载:srcmini » 史上最全HTML面试题及最佳答案合集
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏