HTML标签问题-优快云博客

本文链接：https://blog.youkuaiyun.com/augenstern416/article/details/144419300

1.table和div+css的区别

<div>：加载方式是即读即加载，遇到<div> 没有遇到</div> 的时候一样加载<div> 中的内容，读多少加载多少；

<table>：加载方式是完成后加载，遇到<table> 后，在读到</table> 之前，<table> 中的内容不加载

2.对HTML语义化的理解

去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。 HTML5 中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于语义化设计原则）下面就是语义化 html 代码；

3.iframe的作用与优缺点

作用：嵌入外部内容（地图，视频，广告等）

<iframe src="url" width="width" height="height" frameborder="number" scrolling="scrolling"></iframe>

src属性指定了要嵌入的网页的URL，width和height属性指定了iframe的宽度和高度，frameborder属性指定是否显示边框，scrolling属性指定滚动条的显示方式。

优点：

内容分隔：iframe标签允许将不同的HTML文档嵌入到当前文档中，实现内容的分隔和独立，使得页面布局更加灵活。
并行加载：iframe中的内容可以并行加载，提高了页面的加载速度和性能。
代码隔离：iframe中的内容与主页面的内容相互隔离，可以避免一些CSS样式或JavaScript代码的冲突，提高代码的可维护性和可靠性。
安全性：由于iframe是独立的文档上下文，可以用于实现一些安全隔离的措施，例如加载来自不可信源的内容时，可以将其放置在iframe中，以保护主页面的安全性。

缺点：

SEO不友好：搜索引擎对iframe中的内容索引能力较弱，可能影响页面的搜索引擎优化。
高度难以控制：iframe的高度默认会根据内容的高度自动调整，如果内容高度动态变化，可能导致页面布局出现问题。
页面性能：每个iframe都会增加页面的请求量和渲染成本，特别是当页面中存在大量的iframe时，会影响页面的性能。
安全性风险：如果在iframe中加载来自不受信任的源的内容，可能存在安全风险，例如跨域脚本攻击（XSS）。此外，恶意网站可以通过透明的iframe叠加在合法网站上，欺骗用户在不知情的情况下点击恶意操作（点击劫持）

5.label的作用是什么，是怎么用的？

作用：

<label> 元素是HTML中的标签，其主要作用是提供对表单元素的标签或说明文本，从而增强表单的可访问性和用户体验。它通常与表单控件元素（例如文本输入框、单选按钮、复选框、下拉菜单等）一起使用，以帮助用户理解表单元素的用途和如何与之交互。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

label中的for与input中id相匹配

6.tite 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

tite 与 h1:

h1 标签写在网页的 body 中，

title 标签写在网页的 head 中，

h1 标签控制一段文字的大小（从 h1~h6），

title 是网页标题的意思，如<title>这是网页标题</title>。

b 与 strong :

<b>为了加粗而加粗，<strong>为了标明重点而加粗。

i 与 em :

I 是 Italic（斜体），而 em 是 emphasize（强调）。

7.块级元素，行内元素，行内块元素的区别？

display:block

就是将元素显示为块级元素。

block 元素的特点是：

总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的 100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

display:inline

就是将元素显示为行内元素。

inline 元素的特点是：

和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是 inline 元素的例子。

inline 和 block 可以控制一个元素的行宽高等特性，需要切换的情况如下：

让一个 inline 元素从新行开始；
让块元素和其他元素保持在一行上；
控制 inline 元素的宽度（对导航条特别有用）；
控制 inline 元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

`display:inline-block`

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。（同行显示，可设置宽高）

8.行内元素，块级元素，空元素有哪些?

行内元素有

a
b
span
img
input
select（创建下拉列表，包含多个option元素，每个option都有value及文本内容值）
strong（强调的语气）

块级元素有

div
ul
ol（有序列表）
li（列表项）
dl（定义列表）
dt（定义列表中的术语）
dd（定义术语的描述）
h1
h2
h3
h4
p

知名的空元素

<br>（换行符） <hr>（水平线） <img> <input> <link> <meta>（于HTML文档的元数据，如作者、描述、关键词、页面刷新）

`9.Canvas和SVG图形的区别？`

一、绘图原理与格式

Canvas：
- 使用JavaScript和HTML元素来绘制图形。
- 提供一个可编程的2D绘图环境，通过JavaScript代码可以在Canvas上绘制各种形状、图片和文本。
- 绘制的图形或传入的图片都依赖分辨率，能够以.png和.jpg格式保存存储图像，属于位图格式。
SVG：
- 使用XML（可扩展标记语言）来绘制图形。
- 是一种基于XML的二维矢量图形格式，使用数学公式定义图形，支持无限放大而不失真。
- 图像以文本形式存储，可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。

二、渲染方式与性能

Canvas：
- 通过像素渲染图形，适合绘制简单的图形和文字。
- 逐像素进行渲染，一旦图形绘制完成，就不会继续被浏览器关注，因此性能较好，适合有许多对象要被频繁重绘的图形密集型应用，如游戏。
SVG：
- 通过DOM（文档对象模型）节点渲染图形，适合绘制复杂的矢量图形。
- 渲染性能可能受到SVG节点数量的影响，如果节点过多，会导致渲染速度变慢。
- 适合带有大型渲染区域的应用程序，如地图。