Fe-interview: [html] 第15天 title与h1的区别、b与strong的区别、i与em的区别?

Created on 30 Apr 2019  ·  10Comments  ·  Source: haizlin/fe-interview

第15天 title与h1的区别、b与strong的区别、i与em的区别?

html

Most helpful comment

title与h1的区别

  • 定义:
    title是网站标题,一个页面只能有一个
    h1是文章主题

  • 作用:
    title概括网站信息,可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的,是显示在网页Tab栏里的;
    h1突出文章主题,面对用户,更突出其视觉效果,指向 页面主体信息,是显示在网页中的。

  • 注意:
    如果title为空,但是页面存在h1,b,strong标签,搜索引擎会默认页面title为h1内的内容,所以 得出结论h1是在没有外界干扰下除title以外第二个能强调页面主旨的标记,在一个页面中应该使用且只使用一次h1标记。

b与strong的区别

  • 定义:
    b(bold)是实体标签,用来给文字加粗
    strong是逻辑标签,作用是加强字符语气
  • 区别:
    b标签只是加粗的样式,没有实际含义,常用来表达无强调或着中意味的粗体文字
    strong表示标签内字符重要,用以强调,其默认格式是加粗,但是可以通过css添加样式,使用别的样式强调

  • 建议:为了符合css3的规范语义化,b应尽量少用而改用strong

i与em的区别

  • 定义:
    i(italic)是实体标签,用来使字符倾斜
    em(emphasis)是逻辑标签,作用是强调文本内容
  • 区别:
    i标签只是斜体的样式,没有实际含义,常用来表达无强调或着重意味的斜体,比如生物学名、术语、外来语;
    em表示标签内字符重要,用以强调,其默认格式是斜体,但是可以通过CSS添加样式。

  • 建议:为了符合CSS3的规 范,i应尽量少用而改用em

  • tootip:
    物理元素是告诉浏览器我应该以何种格式显示文字,逻辑元素告诉浏览器这些文字有怎么样的重要性。
    对于搜索引擎来说em和strong比i和b要重视的多。

All 10 comments

title 是 网页标题标签
h1 是文本标签 默认与word的h1相似为最大的标题显示
b 为文本加粗标签 与word的加粗功能相似
strong 为强调语气, 也是为文本加粗 与b标签是有不同
i 标签为斜体 常用于阿里图标 和图片
em 标签为 斜体 用于文本斜体较多

title 是浏览器窗口网页标题
h1 是页面标签,一个页面最好只有一个,利于SEO搜索。
其他的不知道啥区别。只知道 i 标签一般配合图标来使用。

strong是语义化的b em是语义化的i
title是浏览器标题 并且权重最高
h1是文章内容标题

关于 titleh1title 是网页的标题。主要面向的对象是搜索引擎和通过搜索结果过来的人(面向外人,可以理解为报纸首页的标题)。而 h1 是网页内部的标题,是给已经进到页面的人看的(可以理解为报纸某个版面的大标题)。从人类的语境上来理解,两者并没有差别。

bstrong 的效果人眼上是无法区分的。在语义上,b 仅表示加粗既装饰用,我们应该使用 CSS 而不应该使用 b;而 strong 则表示被包围的内容很重要,是语气上的感觉。对于搜索引擎来说,会把 bstrong 视为同一含义。因此我们在使用上需要注意。

iem 的区别类似 bstrong 的区别。i 用于斜体展示,我们应该使用 CSS 而不应该使用 i;而 em 则是对内容的强调,但程度没有 strong 那么高。同样,对搜索引擎来说,两者是没有区别的。

参考文章:
title タグと h1 タグは完全同一がいい?
文字を強調するタグ strong・b・em・i の違いと SEO 効果

title与h1的区别

  • 定义:
    title是网站标题,一个页面只能有一个
    h1是文章主题

  • 作用:
    title概括网站信息,可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的,是显示在网页Tab栏里的;
    h1突出文章主题,面对用户,更突出其视觉效果,指向 页面主体信息,是显示在网页中的。

  • 注意:
    如果title为空,但是页面存在h1,b,strong标签,搜索引擎会默认页面title为h1内的内容,所以 得出结论h1是在没有外界干扰下除title以外第二个能强调页面主旨的标记,在一个页面中应该使用且只使用一次h1标记。

b与strong的区别

  • 定义:
    b(bold)是实体标签,用来给文字加粗
    strong是逻辑标签,作用是加强字符语气
  • 区别:
    b标签只是加粗的样式,没有实际含义,常用来表达无强调或着中意味的粗体文字
    strong表示标签内字符重要,用以强调,其默认格式是加粗,但是可以通过css添加样式,使用别的样式强调

  • 建议:为了符合css3的规范语义化,b应尽量少用而改用strong

i与em的区别

  • 定义:
    i(italic)是实体标签,用来使字符倾斜
    em(emphasis)是逻辑标签,作用是强调文本内容
  • 区别:
    i标签只是斜体的样式,没有实际含义,常用来表达无强调或着重意味的斜体,比如生物学名、术语、外来语;
    em表示标签内字符重要,用以强调,其默认格式是斜体,但是可以通过CSS添加样式。

  • 建议:为了符合CSS3的规 范,i应尽量少用而改用em

  • tootip:
    物理元素是告诉浏览器我应该以何种格式显示文字,逻辑元素告诉浏览器这些文字有怎么样的重要性。
    对于搜索引擎来说em和strong比i和b要重视的多。

<b>这个标签对应 bold,即文本加粗,其目的仅仅是为了加粗显示文本,是一种样式/风格需求;
<strong>这个标签意思是加强字符的语气,表示该文本比较重要,提醒读者/终端注意。为了达到这个目的,浏览器等终端将其加粗显示;
因此,盲人朋友使用阅读设备阅读网络时:<strong>会重读,<b>不会

从语意视角来认识标签
语义化标签的特点:与内容有关 、<em>(emphasis)<br /> 非语义化标签:与内容无关 <b>、<h1>、<i></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/49817672?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="gousern picture"> <strong>gousern</strong> <span class="text-muted ml-1">on 28 Apr 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <ul> <li><p>title是一个属性,浏览器标签页上的标题;\<h1>是标签,定义是最大号的标题</p></li> <li><p>\<b>和\<strong>在显示上是一致的,都会加粗字体,相当于属性font-weight:bold。但是从语义化角度来讲,\<b>的意思是粗体;\<strong>是加重,所以在使用阅读设备时,会重读。</p></li> <li><p>\<i>和\<em>在显示上是一致的,都是展示位斜体,相当于font-style:italic。但是从语义化的角度来讲,\<i>的意思是斜体;\<strong>是强调,所以在使用阅读设备时,会加强语气。</p></li> </ul> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/22475160?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="blueRoach picture"> <strong>blueRoach</strong> <span class="text-muted ml-1">on 1 Jun 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><code><title></code>是网页的标题,而<code><h1></code>是网页的页面的标题<br /> <code><b></code>只是单纯的字体加粗,而<code><strong></code>有强调作用<br /> <code><i></code>只是单纯的字体倾斜,而<code><em></code>有强调作用</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/55782090?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="giggleCYT picture"> <strong>giggleCYT</strong> <span class="text-muted ml-1">on 15 Jun 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>title 是 网页标题标签<br /> h1 是文本标签 默认与word的h1相似为最大的标题显示<br /> b 为文本加粗标签 与word的加粗功能相似<br /> strong 为强调语气, 也是为文本加粗 与b标签是有不同<br /> i 标签为斜体 常用于阿里图标 和图片<br /> em 标签为 斜体 用于文本斜体较多</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/3272892?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="MrZ2019 picture"> <strong>MrZ2019</strong> <span class="text-muted ml-1">on 11 Sep 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(438970560, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(438970560, 1);" onclick="rate(438970560, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(438970560, 2);" onclick="rate(438970560, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(438970560, 3);" onclick="rate(438970560, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(438970560, 4);" onclick="rate(438970560, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(438970560, 5);" onclick="rate(438970560, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/fe-interview/459510178/vue-shuo-shuo-ni-dui-vuezu-jian-de-she-ji-yuan-ze-de-li-jie">[vue] 说说你对vue组件的设计原则的理解</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/fe-interview/458692394/vue-ni-you-feng-zhuang-guo-axiosma-zhu-yao-shi-feng-zhuang">[vue] 你有封装过axios吗?主要是封装哪方面的?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/fe-interview/459510197/vue-zen-yao-huan-cun-dang-qian-da-kai-de-lu-you-zu-jian-huan">[vue] 怎么缓存当前打开的路由组件,缓存后想更新当前组件怎么办呢?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/fe-interview/458874539/vue-vuexing-neng-de-you-hua-de-fang-fa-you-na-xie">[vue] vue性能的优化的方法有哪些?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/fe-interview/459510277/vue-kai-fa-guo-cheng-zhong-you-shi-yong-guo-devtoolsma">[vue] 开发过程中有使用过devtools吗?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/haizlin/fe-interview/issues/46" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2025 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>--> <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>