前端入门 语义化标签及字符实体

什么是语义化? 

语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等）

为什么要使用语义化?

在没有 CSS 的情况下，页面也能呈现出很好地内容结构。
使代码更具【可读性】，便于团队开发和维护。
有利于 SEO搜索引擎优化（和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。爬虫依赖
于标签来确定上下文和各个关键字的权重）。
有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用）

语义化标签中的文本格式化标签

在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。 与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、删除划线等效果。

em标签 语义:强调,用于标记强调内容 默认样式 斜体显示 不独占一行

strong标签 语义:着重强调 默认样式 不独占一行 加粗显示

作用：标记重要强调的内容 为了强调重要的词

在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的 效果

del标签 语义:删除的内容 默认样式 带有中划线 不独占一行

作用：被从文档中删除的文字内容 

常用于:价格中的原价 待办事项中已完成的项

i标签 无语义 默认样式 斜体显示 不独占一行

作用:区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等

b标签 无语义 默认样式加粗 不独占一行

作用:区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等

span标签 无语义 无默认样式

作用：作为行内容器包含短语内容，通常用来区分文本样式

换行<br/>

常常我们在需要手动换行地方，加入换行标签 即可实现内容强制换行

注意： 不应该只为了实现加粗、斜体效果使用strong,em,可以使用css替代 br用于处理文本内容换行，不应用于控制元素间距

HTML 字符实体

概述:HTML中有些字符是保留的。例如，不能直接在文本中输入大于号（>）或小于号（<），因为浏览 器会误以为它们是标记。 希望浏览器如实显示这些字符，那么我们必须在HTML源代码中插入字符实体

常用的 字符实体

注意：实体名称对大小写敏感！