Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

怎样理解 HTML 语义化 #2

Open
yym-yumeng123 opened this issue Aug 10, 2017 · 3 comments
Open

怎样理解 HTML 语义化 #2

yym-yumeng123 opened this issue Aug 10, 2017 · 3 comments

Comments

@yym-yumeng123
Copy link
Owner

  • 用正确的标签做正确的事情
  • html语义化让页面的内容结构化,结构更清晰,便于对浏览器 搜索引擎解析;
  • 即使在没有css情况下也以一种文档格式显示,并且是易于阅读的;
  • 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
  • 是阅读源代码的人对网站更容易将网站分块,便于阅读维护理解.
@yym-yumeng123
Copy link
Owner Author

yym-yumeng123 commented Aug 10, 2017

怎样理解内容与样式分离的原则

HTML负责页面结构和语义,CSS负责页面展示;HTML中不要出现属性样式,尽量不要出现行内样式

优点:

  • 数据的多样显示。通过不同的样式表适应不同的设备,做到内容与设备无关
  • 保持整个站点的视觉一致性变得非常简单,修改样式表就可以轻松改版;
  • 由于结构清晰,数据的集成、更新和处理更加方便灵活;
  • 更有意义的搜索。

@yym-yumeng123
Copy link
Owner Author

浏览器乱码的原因是什么?如何解决

原因:

  • 保存的编码格式和浏览器解析时的解码格式不匹配导致
  • 未设置指定文档编码,或者meta得解码方式与浏览器解码不同设置

解决:

  • 设置正确的字符编码
  • 设置浏览器显示正确的编码
  • <meta charset='utf-8'>

@yym-yumeng123
Copy link
Owner Author

  • 含义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

优点:

  • 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构;
  • 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
  • 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  • 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant