HTML之语义化与路径问题

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为： 相对路径和绝对路径

相对路径

---

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。

2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。

3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

 

绝对路径

---

 

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

 

HTML语义化

为什么要有语义化标签？

1. 方便代码的阅读和维护

2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

3. 使用语义化标签会具有更好地搜索引擎优化

     核心：合适的地方给一个最为合理的标签。

     语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

     白话，一眼看去，就知道哪个是重点，结构是什么，知道每块的内容是干啥的。

     遵循的原则：先确定语义的HTML ，再选合适的CSS。

 

常用的一些语义化标签：

• <h1>~<h6> ，作为标题使用，并且依据重要性递减，<h1> 是最高的等级。
• <p>段落标记，知道了 <p> 作为段落，你就不会再使用 <br /> 来换行了，而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行，而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。
• <ul>、<ol>、<li>，<ul> 无序列表，这个被大家广泛的使用，<ol> 有序列表不常用。在 Web 标准化过程中，<ul> 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，只是美观方面差了一点而已。
• <dl>、<dt>、<dd>，<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。dl不单独使用，它通常与dt和dd一起使用。dl开启一个定义列表，dt表示要定义的项目名称，dd表示对dt的项目的描述。
• <em>、<strong>，<em> 是用作强调，<strong> 是用作重点强调。
• <table>、<thead>、<tbody>、<td>、<th>、<caption>， 就是用来做表格不要用来布局

h5新增的标签：

• header元素：header 元素代表“网页”或“section”的页眉。
• footer元素：footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
• hgroup元素：
• nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
• aside元素：aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
• section元素：section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。
• article元素：article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。

详情请点击：传送门1    传送门2