面试总结之HTML部分(持续更新)

**HTML**：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

语义化标签

理解： 语义化的标签，旨在通过标签能理解其含义。
好处：

1. 结构清晰，便于阅读。
2. 方便设备解析，如屏幕阅读器、移动设备等。
3. 有利于搜索引擎优化(SEO)。

常见语义化标签：

• <header>：页面的头部区域，通常包括网站logo、导航及搜索框等内容。
• <nav>：页面的导航区域。
• <main>：页面的主体内容，一个页面只能使用一次。
• <article>：定义外部内容(页面的独立内容)。
• <section>：标记文档的章节、页眉、页脚等。
• <aside>：与主要内容相关的内容块，一般应用于侧边栏。
• <footer>：页面的底部区域，通常包括网站的备案、著作权信息、作者等信息。

列举块级元素、行内元素、行内块元素并说明其特点？

块级元素： <div>、<p>、<h1> - <h6>、<ol>、<ul>、<li>、<form>、<table>…
特点：

1. 块级元素独占一行。
2. 高度，行高，内外边距可设置。
3. 宽度默认是容器100%。
4. 可容纳块级和行内元素。

行内元素： <a>、<strong>、<span>、<label>…
特点：

1. 设置宽高无效。
2. padding,margin水平可设置，垂直无效。
3. 容纳纯文本和其它行内元素（a标签除外）。

行内块元素： <img>、<input>、<td>…
特点：

1. 可设置宽高、内外边距。
2. 和相邻的行内（行内块）元素在一行，中间有空白间隙。

src 和 href有何区别？

href 是建立一条通道，将当前文档和定义的资源连接起来。
src 是将定义的资源嵌入到当前文档。

Img元素的title和alt属性有何区别？

title 是全局属性，提供额外的提示信息，当鼠标滑到该元素，显示定义的提示。
alt 是局部属性，仅可用在img、input等元素中，提供在图片未载入或加载失败时的替代文本。当input的type为image时才能使用alt属性。

图像格式有哪些？什么特点？

gif：无损，简单动画，颜色少，有锯齿。
png：无损，压缩比高，色彩好，除了动画其余方面可取代gif。
jpeg：不支持透明，有损，存储照片或颜色丰富的复杂图像。
webp：chrome和opera支持，更优的图像数据压缩算法。

原文链接：https://www.garfield27.com/2021/11/11/d37289ef2b61/