前端笔记【一】：HTML

目录

HTML

1.行盒元素和块盒元素

2.页面导入样式，link和import的区别

3.title与h1，b与strong，i与em的区别

title和h1区别：

        定义：

        区别：

        场景：

b和strong区别：

        区别：

i和em的区别：

        区别：

        场景：

4.img标签的title和alt有什么区别：

5.png，jpg，gif图片格式区别：

6.理解HTML语义化：

定义：

语义化好处：

---

HTML

1.行盒元素和块盒元素

行盒元素：{display:inline}的元素，span、a、img、video、audio等

==>不换行，除非内容被折断；并不能设置宽高，宽高只与内容有关

行内块元素：{display:inline-block}的元素 

 ==>不换行，能设置宽高

块盒元素：{display:block}的元素，div、p、 h1~h6等

==>独占一行，能设置宽高

空元素（void）：br , hr...

2.页面导入样式，link和import的区别

区别一：import诞生于link之后，兼容性import的更强

区别二：加载顺序，浏览器先加载link后加载import

3.title与h1，b与strong，i与em的区别

title和h1区别：

        定义：

        title：概括了网站的信息，告诉搜索引擎或者用户关于这个网站的主要内容是什么

        h1：文章主题内容，告诉蜘蛛这个网站内容主要是什么

        区别：

        title显示在网页标签上，h1显示在网页内容上

        title比h1添加的重要（title>h1)==》对于SEO（（搜索引擎优化））的了解

        场景：

        网站的logo都是用h1标签包裹

b和strong区别：

        区别：

        b：实体标签，仅用来给文字加粗（只有加粗的样式，没有实际的含义）

        strong：逻辑标签，加粗文字，同时加强字符语气，比如：网页的语音朗读时（表示标签内字符比较重要，用以强调）

        为了符合css3的规范，<b/>尽量少用，改用<strong/>

i和em的区别：

        区别：

        i：实体标签，仅用来倾斜文字（只是一个倾斜标签，没有特殊含义）

        em：逻辑标签，倾斜文字，同时强调文字内容。

        场景：

        i更多用在字体图标，em更多用于术语上（医学，专业...)

4.img标签的title和alt有什么区别：

title：鼠标悬停在图片上所显示的值

alt：图片加载失败显示的值

在SEO层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加SEO效果要加入alt属性来描述这张图是什么内容或关键词

5.png，jpg，gif图片格式区别：

png：无损压缩，尺寸体积比jpg/jpeg的大，适合做小图标

jpg：采用压缩算法，有一点失真，比png体积小，适合做中大图片

gif：一般做动图

webp：同时支持无损或有损压缩，相同质量的图片，webp具有更小的体积。但兼容性不是特别好

6.理解HTML语义化：

定义：

强调使用HTML标签来准确地描述内容的含义，而不仅仅是展示效果。以便更好地向开发者和浏览器描述其意义。

比如：div，span无法提供关于其内容信息。而 <form>、<table> 以及 <img>清晰地定义其内容

又列如：<header>、<main> 以及 <nav> 只是换了名字的<div>标签，，但是会让结构更清晰有意义

语义化好处：

增强代码可读性和可访问性

更好的SEO：搜索引擎通过分析HTML标签来理解网页内容。HTML语义化可以帮助搜索引擎更准确地理解网页主题和结构，从而提高网页在搜索结果中的排名。

<h1>标准语义化HTML结构</h1>
    <nav>
        <a href="https://www.w3school.com.cn/tags/index.asp">首页</a>
        <a href="https://www.w3school.com.cn/tags/index.asp">关于我们</a>
    </nav>
    <header>
        头部信息
    </header>
    <aside>侧边栏</aside>
    <main>
        <section>
            <article>这是一篇公司的博客</article>
        </section>
        <section>
            <h3>公司业务</h3>
            <div>
                <div>网站开发</div>
                <div>软件开发</div>
                <div>APP开发</div>
                <div>App开发</div>
            </div>
        </section>
    </main>
    <footer>底部信息</footer>

--------------------------------------------------------------------------------------------------------------------------------

若有错误或描述不当的地方，烦请评论或私信指正，万分感谢 😃