HTML基础

最新推荐文章于 2024-05-07 23:43:18 发布

VIP文章 Cristine_LZ

最新推荐文章于 2024-05-07 23:43:18 发布

阅读量2.5k

点赞数 2

分类专栏：前端面试题文章标签： html

本文链接：https://blog.csdn.net/weixin_42337982/article/details/126291474

版权

1.块元素、行内元素和行内块元素的区别？

1.1 块级元素

（1）常见的块元素有哪些？

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。

（2）块级元素有什么特点？

自己独占一行
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的 100%
是一个容器及盒子，里面可以放行内或者块级元素

（3）注意问题：

只有文字才能组成段落，因此 p 标签里面不能放块级元素，特别是 p 标签不能放 div。同理还有这些标签：h1、h2、h3、h4、h5、h6、dt ，他们都是文字类块级标签，里面不能放其他块级元素。

1.2 行内元素

（1）常见行内元素有哪些？

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等，其中 <span> 标签最典型的行内元素，也称内联元素。

（2）行内元素有哪些特点？

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
只可以设置水平方向的外边距
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素

（3）注意问题：

链接里面不能再放链接。
特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

1.3 行内块元素

（1）常见行内块儿元素有哪些？

在行内元素中有几个特殊的标签 <img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

（2）行内块元素有什么特点？

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

1.4 块级元素、行内元素和行内块元素的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7kwHzpd-1660215871542)(…/noteImg/1.png)]

1.5 块级元素、行内元素和行内块元素互转

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display: inline-block;

2. src 和 href 的区别

src 和 href 都是用来引用外部的资源，它们的区别如下：

src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。
href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。常用在 a、link 等标签上。

简单来说，src 执行时会暂停其他资源的处理，href 不会

3. 对 HTML 语义化的理解

语义化是指 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部