语义化

大家好，欢迎来到IT知识分享网。

语义化总结

语义化概述：

什么是语义化：

HTML中不同的元素代表不同的含义；

使用具有含义的元素来书写HTML文档，即语义化；

写HTML文档最重要的，即为不同的内容选择合适的元素；

语义化属于HTML范畴，与样式无关；

目前，HTML的最新版本是HTML5，引入了更多的语义化元素。

语义化的作用：

有利于浏览器理解HTML文档；

<strong>

重要的内容，浏览器在阅读模式下不应该忽略该内容；

若浏览器有语音阅读功能，应该重读该元素中的内容；

<i>

若浏览器有语音阅读功能，应该用一种特别的语调来阅读该元素的内容；

有利于搜索引擎理解HTML文档

百度、谷歌、bing等

搜索引擎通过互联网访问页面，搜索引擎会阅读这些页面的HTML代码，更好的语义化会帮助搜索引擎理解页面中每一段内容的含义有助于提升站点的排名。

HTML5元素表：

HTML5元素表列出了各种元素，并进行了颜色分类，相同颜色归为一类。

超链接：

超链接<a>元素

点击超链接后会跳转到另一个页面；

<a>元素书写格式：

<a href=”目标“> 内容 </a>

<a target=”页面打开位置” href=”目标“> 内容 </a>

href属性：

页面地址(路径)、

锚点、

功能链接；

target属性：

_blank 新窗口中打开、

_self 默认值，当前窗口中打开；

绝对路径和相对路径：

绝对路径：

当网站部署到服务器后，网站中的所有资源都可以通过一个地址(路径)访问。

该地址(路径)的书写格式为：协议://域名/目录

示例：http://www.google.com/

协议：http

域名：www.google.com

目录：根目录

示例：http://meyerweb.com/eric/tools/css/reset/reset.css

协议：http

域名：meyerweb.com

目录：根目录/eric/tools/css/reset/reset.css

种格式书写的路径，叫做绝对路径。

绝对路径的使用场景：

访问站外资源时，只能使用绝对路径；

访问站内资源时，若网站已部署到服务器，可以使用绝对路径，并可以省略协议和域名。

相对路径：

对路径是相对于当前资源的位置，只能用于访问站内资源；

相对路径的书写格式为：

./路径

表示当前资源所在的目录，必须作为相对路径的开始，可省略；

../

表示返回上一级目录；

综合示例：

<link rel=”stylesheet” href=”/css/main.css”>

绝对路径（省略了协议和域名）

<link rel=”stylesheet” href=”css/main.css”>

相对路径（省略了./）

<a href=”http://www.google.com/”>…</a>

绝对路径

<a href=”../u/account/login.html”>…</a>

相对路径（省略了./）

<a href=”/u/account/login.html”>…</a>

绝对路径（省略了协议和域名）

<a href=”u/account/login.html”>…</a>

相对路径（省略了./）

<a href=”./u/account/login.html”>…</a>

相对路径

站外资源：绝对路径

站内资源：绝对路径（网站已部署，可省略协议和域名）、相对路径

文本元素：

h1～h6：1级标题~6级标题

p：段落

blockquote：整段的引用

cite：对参考文献的引用

q:小段文本的引用

abbr：对缩写词的引用

strong：重要的文本

em：强调的文本

b:应突出显示的文本

i:应区别对待的文本

结构元素：

div元素：

它是一个非常常见的元素，它没有任何的语义，它仅仅表示一个容器，用于包含其他元素，在网站布局时，它通常用于表示页面的区域。

实体字符：

实体字符的书写格式为：&实体名称;或&#实体编号;

常见的实体字符：

空格：实体名称 实体编号 

小于符号（＜）：实体名称<实体编号<；

大于符号（＞）：实体名称>实体编号>；

并且符号（&）：实体名称&实体编号&；

版权符号（@）：实体名称©实体编号©；