html语义化 title,「HTML+ CSS」理解html语义化,让你的网页更好的被搜索引擎识别...

58520ee0de05a974c93646edfa86a1ef.png

1)什么叫做标签语义化

说的通俗点就是:明白每个html标签的用法(在什么情况下使用此标签合理)比如,网页上的新闻列表可以使用列表标签,文章的标题可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 、strong等标签表示强调说明等等。

总的来说就是根据网页内容,选择合适的标签,便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

1a9b15ca8c9bf231eb3c055d0426e891.png

2)为什么要标签语义化?

->有助于提升用户体验:例如合理的利用title、alt用于解释名词或解释图片信息让用户在访问浏览图片的时候可以查看到图片的主体信息;

->有利于网站的优化:良好的标签使用可以与搜索引擎建立良好沟通,有助于爬虫快速抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

->方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页,便于自动转码阅读;

->便于团队开发和维护,html标签语义化可以使更具可读性,让开发者能更快的切入重点,节省工作时间,遵循W3C标准,可以减少代码差异化,避免页面兼容性bug。

3)常见的语义化标签

16fab35a42851430e37caf9cc140d673.gif

:页面主体内容,常用于文章的标题。

:h1~h6,分级标题,

与 协调有利于搜索引擎优化。

  • :无序列表。
  • :有序列表。

    :页眉通常包括网站标志、主导航、全站链接以及搜索框。

    :标记导航,仅对文档中重要的链接群使用。

    :定义外部的内容,其中的内容独立于文档的其余部分。

    :定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

    :定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

    :页脚,只有当父级是body时,才是整个页面的页脚。

    :呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。

    :和 em 标签一样,用于强调文本,但它强调的程度更强一些。

    :将其中的文本表示为强调的内容,表现为斜体。

    :规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。

    :定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。

    :定义块引用,块引用拥有它们自己的空间。

    :预格式化文本。保留文本固有的换行和空格。

    以上只是列举了一些常用的语义化标签,大家先简单了解下即可,后边的文章我们将详细介绍html每个标签的作用以及用法,大家记得关注哦。

    举报/反馈

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5和CSS3是用于网页开发的两种核心技术。HTML5是一种标记语言,用于定义网页的结构和内容。CSS3是一种样式表语言,用于定义网页的外观和布局。 在网页布局方面,HTML5提供了一些新的语义标签,如<header>、<nav>、<section>、<article>、<aside>和<footer>等,用于好地组织网页内容。而CSS3则提供了一些新的布局属性和选择器,使得网页布局加灵活和多样。 以下是一个简单的HTML5+CSS3网页布局的例子: ```html <!DOCTYPE html> <html> <head> <title>网页布局示例</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #f1f1f1; padding: 10px; text-align: center; } section { padding: 20px; } aside { background-color: #f1f1f1; padding: 10px; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <header> <h1>网页标题</h1> </header> <nav> <a href="#">导航链接1</a> <a href="#">导航链接2</a> <a href="#">导航链接3</a> </nav> <section> <h2>内容标题</h2> <p>这是网页的主要内容。</p> </section> <aside> <h3>侧边栏标题</h3> <p>这是侧边栏的内容。</p> </aside> <footer> <p>版权信息</p> </footer> </body> </html> ``` 这个例子中,使用了<header>、<nav>、<section>、<aside>和<footer>等HTML5标签来组织网页的结构。通过CSS样式,设置了不同部分的背景颜色、字体颜色和内边距等,实现了简单的网页布局效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值