前言:本前端知识体系供个人复习与巩固用,不一定适合其他人。会逐步的完善该系列文章。
HTML 基础概念
<!DOCTYPE html>
(HTML5)、<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(HTML4) ——文档声明,告诉浏览器使用哪个 HTML 版本进行解析。
html
元素
顶级元素或根元素,只能包含head
元素或者body
元素
head
元素
常规信息、元数据(文件名、创建时间、修改时间……),
<head>
元素用于定义网页的常规信息和元数据。
总的来说其里面的子元素大概分为三类,分别是:描述网页基本信息的,指向渲染网页需要其他文件链接的,各大厂商根据自己需要定制的。
网页基本信息
一个网页,首先得有个标题,就跟人有名字一样。除此之外,还可以根据实际需要补充一些基本信息。
- 文档标题(浏览器标签中显示的文本):
<title>深入了解 head 元素</title>
- 编码格式:
<meta charset="utf-8">
(可能还会看到gb2312
格式,不过不建议使用),如果页面出现乱码,那一般就是编码格式不对 - 视窗设置:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 搜索引擎优化相关内容:
<meta name="description" content=“深层次了解HTML文档结构”>
- IE浏览器版本渲染设置:
<meta http-equiv="X-UA-Compatible" content="ie=edge">
其他文件链接
一个完整的网页光有 HTML 结构是非常简陋的,就如一个毛坯房。有了结构之后,还需要加入样式与行为为网页增添色彩。
- CSS 文件:
<link rel="stylesheet" type="text/css" href="style.css">
- JavaScript 文件:
<script src=“script.js"></script>
厂商定制
比如开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面,可以设置为webkit内核、IE标准,IE兼容三种模式。代码分别为:
<meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->
<meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->
<meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->
再举个例子,同样分享页面到QQ的聊天窗口,有些页面直接就是一个链接,但是有些页面有标题,图片,还有文字介绍。其实就是看有没有设置下面这三个内容:
<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />
以及,还有IOS也定制了一些移动开发设置如下:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-startup-image" href="/startup.png">
参考资料
body
元素
内容
HTML 元素
元素:开始标签 + 内容 + 结束标签 (单标签元素没有结束标签,比如<img/>
)
属性:属性名="属性值"(有些属性只有属性名,没有属性值,比如布尔属性disabled
)
HTML 注释
<!--...-->
非常重要而且良好的编码习惯。
HTML 属性
为了表示元素的一些特征,可以在开始标签中添加一些属性。如下:
属性特征
一般属性都具有以下特征:
- 每个属性之间或与元素名之间都有一个空格隔开
- 属性名后面紧跟等号
- 属性值使用双引号包裹
但也有一些属性只有属性名,没有属性值,这种属性称之为布尔属性,如下disabled
就是布尔属性,表示是否禁用,有该属性则为禁用:
<input type="text" disabled>
除此之外,还可以自定义属性来存储一些数据以便 JS 使用。具体可参考:HTML data-* 属性。
属性分类
属性有很多种,从使用来说大概可以分为三类:
- 可以用于每个元素的全局属性,如
class
属性 - 可用于某一类元素的,如
form
表单相关元素的name
、value
属性 - 只用于某一个元素的,如
alt
属性只用于img
元素
几个常用的全局属性:
class
用来设置元素的一个或多个类名,这样 CSS 或 JS 就可以方便对该元素进行操作。具有以下特点:
- 类名不能以数字开头
- 类名可以设置多个值,以空格分开,如
<div class="box box--menu"></div>
- 不同的元素可以有相同的类名
简单示例如下:
<p class="p1 red">文本段落</p>
<div class="red">我也有一个类名为red</div>
id
设置元素的唯一性,经常用于 JS 操作或 CSS 操作,也可用作定义锚点。具有以下特点:
- 在整个 HTML 文档中必须是唯一的,也就是说一个 HTML 文档中不能出现两个一样的 id 值
- 不可以和 class 那样设置多个值
简单示例如下:
<p id="text">文本段落</p>
<div id="block">区块内容</div>
title
用来设置元素的额外信息,鼠标滑过元素暂停一会会显示 title 属性的内容。大概效果如下图:
简单示例如下:
<a title="全部的链接文字" href="#">链接文字很多...</a>
style
用于设置元素的行内样式,一般用于 JS 动态改变元素的样式。
简单示例如下:
<div style="display: none;">我是隐藏的区域,可以通过JS来切换显示</div>
<p style="width: 500px;">设置宽度为500px</p>
更多全局属性参考
另附 HTML 属性参考手册一份:HTML 属性参考。
常用基本元素
HTML 定义了各种元素,每个元素都起着不同的作用。可以查阅下面的 MDN 的参考手册。
元素一般是由开始标签、内容和结束标签组成的。所以严格来说,单纯的<p>
就是标签,而<p>一个段落</p>
则是元素。不过一般标签和元素这两个都是混着叫。
标题元素
<h1
>、 <h2>
、 <h3>
、 <h4>
、 <h5>
、 <h6>
标签用来定义标题,其大小依次减小,<h1>
为最大的标题,<h6>
为最小的标题。
实例如下:
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
注意:标题具有明确的语义性,需根据文档结构合理使用,而不要只是用来标识字体大小。
例如,创建一个博客文章标题:
<h1>H5活动宣传页通用布局技术解决方案</h1>
段落元素
<p>
标签定义段落,每一个<p>
标签默认都另起一行。
实例如下:
<p>这是段落文字</p>
<p>这是另一个段落文字,另起一行开始</p>
例如,创建几个博客文章段落:
<p>一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是将内容在不同的手机上良好展示出现就显得有点挑战了。</p>
<p>本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。</p>
图片元素
<img>
标签用来在网页中嵌入图片,该标签没有结束标签。(这种只有一个标签的元素都可以称之为“空元素(empty element)”)
<img>
标签有两个必需的属性:src
属性 和 alt
属性。其中src
属性为图片地址,alt
属性为如果图片加载失败显示的替换文字。
实例如下:
<img src="//placehold.it/300" alt="我是图片加载失败后显示的文字">
除了必须属性外,还可以添加控制大小的属性width
和height
,如下:
<img src="//placehold.it/300" alt="我是图片加载失败后显示的文字" width="150" height="150">
例子,添加一个博客图片:
<img src="baidu.png" alt="百度">
<img>
元素有几个重要属性如下:
- src:必备属性,表示图片地址
- alt:必备属性,如果图片加载失败将会显示该内容
- width:可选属性,用于设置图片的宽度,如
width="400"
- height:可选属性,跟width类似,用于设置图片的高度,如
height="300"
然后在实际页面中,有些图片还是个链接,点击图片会跳转到其他页面,那究竟是怎么回事呢?
其实无非是把图片放在了<a>
元素里面当做了内容,如下代码,即可产生一个图片链接:
<a href=“https://www.lagou.com/jobs/1715898.html” target=“_blank”>
<img src=“http://www.lalala.com/img/p1/img-2.png” alt=“imweb 前端招聘了”>
</a>
更多关于<img>
元素知识可参看:<img>
。
链接元素
<a>
标签定义超链接,用于网页之间的跳转(从一个网页到另一个网页),它有一个重要的属性href
,用来指定链接的目标。
实例如下:
<a href="http://www.baidu.com">我是一个超链接,指向百度</a>
如果需要新标签页打开,则要添加另一个属性target,如下:
<a href="http://www.baidu.com" target="_blank">我是一个超链接,指向百度</a>
如果图片也需要超链接,则可以通过元素嵌套实现,如下:
<a href="http://www.baidu.com" target="_blank">
<img src="baidu.png" alt="百度">
</a>
例子,添加一个博客文字链接:
<p>我们打算使用现有的动画库<a href="https://github.com/daneden/animate.css/">animate.css</a>来实现我们的动画效果</p>
页面跳转
当其用于页面之间的跳转时主要有三个常用属性,分别为:
- title:指链接标题,一般与内容文字一样。鼠标滑过时暂停一会,会有个title提示效果。
- href:指定链接的目标地址(如果暂时不能确定目标地址可先用
#
表示) - target:定义打开窗口方式,默认是当前窗口打开,有四种取值,分别为:
- _self:当前窗口打开,此值为默认值
- _blank:新窗口打开(该值是使用最多的)
- _parent:表示在当前框架的父框架打开(一般用于iframe中)
- _top:表示顶层框架打开(一般用于iframe中)
页面内跳转
先打开一个有页面内跳转的页面:JavaScript秘密花园。
滚动鼠标到底部,发现其就是一篇文章。然后点击右边的导航试试,发现只要一点击,中间的内容就会定位到对应导航的内容部分,这其实就是页面内跳转。
会发现只有后面的“#xxxx"部分发生变化,如下图:
当<a>
元素用于页面内的锚点跳转时,应该先为该页面设置一些锚点,而定义锚点有两种办法:
- 通过
<a>
元素的name属性来定义,如:<a name="anchor-name">name属性的值就是锚点的名称</a>
- 通过其他元素的id属性来定义,如:
<div id="anchor-name">id属性值可以作为锚点的名称</div>
设置好了锚点之外,就可以通过<a>
元素链接到该锚点位置,其href
取值为“# + 锚点名称”,示例如下:
<a href="#anchor1">锚点链接一</a>
<a href="#anchor2">锚点链接二</a>
<div>
<div>我这里有很多内容...</div>
<!-- 使用a的name属性定义锚点 -->
<a name="anchor1">点击锚点链接一,会跳到我这里</a>
<div>我这里有很多内容...</div>
<!-- 使用元素的id属性定义锚点 -->
<p id="anchor2">点击锚点链接二,会跳转到我这里</p>
</div>
电子邮件
当其用于邮件链接时,href
属性的值为“mailto: + 邮件地址”,示例如下:
<a href="mailto:xuyc_brother@foxmail.com”>发送邮件给我</a>
更多参考
更多关于<a>
元素知识可参看:<a>
。
列表元素
列表分为无序列表及有序列表两种,其中无序列表标签为<ul>
,有序列表标签为<ol>
,其直接的子元素标签为<li>
(不能是其他标签)
如要实现WEB三大语言的列表,因为这三大语言没有严格的顺序关系,所以采用无序列表来实现,如下:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
如要实现把大象装进冰箱的步骤列表,有严格的顺序要求,则采用有序列表来实现,如下:
<ol>
<li>首先把冰箱门打开</li>
<li>然后把大象关进去</li>
<li>最后把冰箱门关上</li>
</ol>
例子,添加一个博客的标签列表:
<ul>
<li>CSS</li>
<li>响应式</li>
<li>移动端重构</li>
</ul>
关于列表主要有以下三点需要注意:
- 列表分为有序列表和无序列表两种,分别为
<ol>
和<ul>
元素 - 无论有序还是无序,其直接子元素都只能是
<li>
- 列表可以嵌套,如
<li>
里面的内容如果是<ul>
的话就形成了嵌套
表格元素
每个表格由行与列组成的。<table>
表示表格,<tr>
表示行,<td>
为单元格,<th>
表示表头的单元格,每行可以由多个单元格组成,每一个单元格就是一列。如下是一个简单的两行四列的表格:
<table>
<tr>
<th>1月</th>
<th>2月</th>
<th>3月</th>
<th>4月</th>
</tr>
<tr>
<td>31天</td>
<td>28天</td>
<td>31天</td>
<td>30天</td>
</tr>
</table>
第一行的<tr>
里面的直接子元素并不是<td>
,而是,这是因为第一行是表头,用<th>
表示更合适。
当然为了更清楚的区别表头和内容部分,还可以使用<thead>
包裹表头的<tr>
,<tbody
>包裹所有内容的<tr>
,除此之外还可以为table添加一个标题<caption>
如下:
<table>
<caption>五险一金缴纳</caption> <!-- table 标题,table里面第一个元素 -->
<thead> <!-- 使用 thead 包裹表头行 -->
<tr>
<th>缴纳项目</th>
<th>个人缴纳</th>
<th>单位缴纳</th>
</tr>
</thead>
<tbody> <!-- 使用 tbody 包裹内容 -->
<tr>
<td>养老</td>
<td>8%</td>
<td>14%</td>
</tr>
<tr>
<td>医疗</td>
<td>2%</td>
<td>6.2%</td>
</tr>
<tr>
<td>失业</td>
<td>1%</td>
<td>2%</td>
</tr>
<tr>
<td>工伤</td>
<td>0%</td>
<td>0.4%</td>
</tr>
<tr>
<td>生育</td>
<td>0%</td>
<td>0.5%</td>
</tr>
<tr>
<td>公积金</td>
<td>14%</td>
<td>14%</td>
</tr>
</tbody>
</table>
基本常用的table就这么简单,更多可参看: <table>
(页面下面有其相关元素参考)。
表单元素
表单元素本身是指<form>
,不过它也有一个更广泛的概念,指构成表单的所有元素。
首先就<form>
元素本身来说,主要有两个属性:
- action:表示表单数据所提交到的处理地址(如果不知道处理地址,可先用
#
表示) - method:表示提交内容的方式,默认取值为 get,可以设置为 post
表单元素通用的几个属性:
- name:表示字段名称
- value:表示字段值(最后提交的表单数据就是所有的字段值)
- disabled:表示字段是否禁用,该属性可以不用设置值,加上该属性即表示禁用
- readonly:表示字段是否只读,该属性可以不用设置值,加上该属性即表示只读
更多可参考:
- form W3school
- form MDN(页面下面有其相关元素参考)
- 表单属性浅析
<input>
元素
<input>
元素跟<img>
元素一样,不需要闭合标签。除了上面说到的通用属性外,其常见属性如下:
- type:必备属性,常见取值如下:
- text:文本输入框
- password:密码输入框
- search:搜索框
- number:数字输入框
- radio:单选按钮
- checkbox:复选框
- hidden:隐藏域(页面不可见,用来保存数据等)
- file: 上传文件
- button:普通按钮
- submit:提交按钮
- reset:重置按钮
- placeholder:如为输入框时,可设置该属性,在输入框中灰色显示提示信息
简单示例如下:
<!-- 文本输入框 -->
<input type="text" name="username">
<!-- 文本输入框提示信息 -->
<input type="text" name="username" placeholder="用户名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 数字输入框 -->
<input type="number" name="age" placeholder="只能输入数字">
<!-- 密码输入框 -->
<input type="password" name="pwd" placeholder="密码">
<!-- 单选框 -->
<input type="radio" name="sex" value="man">男
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="music">音乐
<!-- 隐藏域 -->
<input type="hidden" name="other-data" value="用户不可见数据">
<!-- 上传文件 -->
<input type="file" name="file">
<!-- 普通按钮 -->
<input type="button" name="button" value="普通按钮">
<!-- 提交按钮 -->
<input type="submit" name="submit" value="立即加入">
<!-- 重置按钮 -->
<input type="reset" name="reset">
更多 input 请参考:
<textarea>
元素
用于多行文本输入,常用的评论输入框也是这个。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性来控制其尺寸。
简单示例如下:
<textarea rows="5" cols="30" placeholder="请输入评论"></textarea>
更多 textarea 请参考:
<select>
元素
用于创建选项菜单,默认只能选择一个值,可通过设置属性multiple="multiple"
来实现多选(很少很少使用多选)。
其选项为<option>
元素,常用有两个属性:
- value:表示选中该选项的值。
- selected: 表示默认选中。
简单示例如下:
<!-- 单选且有默认选中值 -->
<select name="tag">
<option value="html" selected>HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
<!-- 多选 -->
<select name="tags" multiple="multiple">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
更多 select 请参考:
<button>
元素
<button>
元素用来定义按钮,跟 input 定义的按钮不同,这个是有闭合标签的。简单示例如下:
<button>我是个普通按钮</button>
同样也可以通过设置 type 属性来实现提交按钮和重置按钮,不过不建议这么做。
<!-- 下面的两种方式不建议使用 -->
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
一般对于提交与重置按钮,建议使用 input 来定义,对于普通按钮可以使用 button。
更多 button 请参考:
<label>
元素
<label>
元素用于关联表单元素的标题,可直接包裹表单元素,也可以通过设置其 for 属性关联到表单元素的 id 属性,这样点击 label 标题上关联的表单元素就可以自动获取焦点,提升用户体验。
简单示例如下:
<!-- 包裹表单元素 -->
<label>用户名:<input type="text"></label>
<!-- 使用for属性关联表单元素的id属性 -->
<label for="username">用户名:</label><input type="text" id="username">
更多 label 请参考:
更多参考
更多关于表单元素知识请参考:HTML5中的表单元素。
div 元素
<div>
标签用来分割为独立的、不同的部分,每一个<div>
标签默认都另起一行。
如要创建一个区块,包含<h2>
和<p>
元素:
<div>
<h2>区块标题</h2>
<p>区块描述文字</p>
</div>
例子,添加一个博客发表的相关内容:
<div>
<p>作者:xxx</p>
<p>发布时间:xx-xx-xx</p>
<p>浏览量:xxxx</p>
</div>
span 元素
<span>
标签被用来组合文档中的行内元素。如下:
<p>前端三大语言:<span>HTML</span>、<span>CSS</span>、<span>Javascript</span></p>
例子,用元素对博客发表的相关内容进一步改造:
<div>
<p><span>作者:</span><span>xxx</span></p>
<p><span>发布时间:</span><span>xx-xx-xx</span></p>
<p><span>浏览量:</span><span>xxxx</span></p>
</div>
换行元素
<br/>
标签可插入一个简单的换行符,它是个空元素,没有结束标签,不包含任何内容。所以</br>
或<br>
都是错误的。正确的用法应该是<br/>
<br/>
与<p>
的区别在于,它只是简单地开始新的一行,不包含任何内容,而<p>
标签一般是有内容的,且浏览器默认会在相邻的段落之间插入一些垂直的间距。
简单实例如下:
<p>第一行内容<br/>
第二行内容</p>
参考资料
HTML 元素的 wiki 文档:HTML element - Wikipedia
HTML 字符实体
预留字符
在 HTML 中,某些字符是预留的不能直接使用,如小于号(<)和大于号(>),直接使用会误认为它们是标签。
所以如果希望正确地显示预留字符,那必须在 HTML 源代码中使用字符实体(character entities),如可以使用<
表示小于号(<),>
表示大于号(>)。
空格
浏览器总是会截短 HTML 页面中的连续空格。所以如果在HTML代码中连续输入多个空格,最后也只会显示一个空格。
那么如何才能实现连续多个空格呢?这就需要用到
字符实体了。
简单示例如下:
<p>空格 好多啊,但是只显示成一个</p>
<p>空格 好多啊,全部显示</p>
常用字符实体
字符实体可以有两种方法表示:一种为实体名称,一种为实体编号。如小于号(<)既可以用实体名称<
表示,也可以用实体编号<
表示。
常用几个字体字符如下:
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
大于号 | > | > | |
& | 和号 | & | & |
© | 版权(copyright) | © | © |
× | 乘号 | × | × |
更多可参看:HTML Symbol Entities Codes
块级元素和行内元素
块级元素
p, div, hn, ul/ol, li...
- 默认占据整行高度
- 每个块级元素都会新起一行
行内元素
a, span, img, em...
- 同行显示
- 默认宽度由内容决定
嵌套
无论多么复杂的页面,都是一个个元素以嵌套的方式堆叠而成。注意某些元素是没有闭合标签的,如<img/>
。
HTML 树
浏览器介绍
不同于其他语言的开发,前端开发并不需要一个专门的编译器来编译自己的代码,只需要将网页在浏览器上打开,浏览器就可以自动编译代码了。这意味着无需额外安装任何软件,只要在编辑器中写下代码并保存,然后双击 html 文件就可以自动启用默认浏览器打开网页。
虽然所有的浏览器基本上都能编译网页,但不同的浏览器能够兼容的 HTML / CSS / JavaScript 特性也不尽相同,对网页的渲染方式也有一些小差异。这意味着在开发过程中,需要在不同浏览器中对网页的兼容性进行测试。
Chrome
目前全球占比最大的浏览器。支持全平台,不仅界面简洁,插件丰富,还提供了强大的开发者工具让开发效率得到巨大的提高。
IE / Edge
Windows 系统默认的浏览器,有 IE6-11,总共6个版本(尤其是 6-8 这三个版本,因为过于古老所以功能方面非常落后,幸好正在慢慢退出历史舞台),不过从 Windows 10 系统起就换成 Edge 版本了。
从前的很长一段时间 IE 浏览器都处在绝对的领先地位,后来由于新技术的不断发展而 IE 浏览器版本迭代太慢,所以慢慢就被抛弃了。
Firefox
经典的浏览器,也是众多开发者的选择。支持全平台,有丰富而强大的插件,也提供了很不错的开发者工具供开发者们使用。还有一个非常好用的开发文档:Mozilla Developer Network(简称 MDN)
虽然这款浏览器也比较好用,但是一直处于不温不火的状态,以前是 IE 压制,现在是 Chrome 天下,所以它的地位非常尴尬,但是这并不影响它也是一款非常优秀的浏览器。
其他浏览器
其他浏览器包括 Safari、Opera、QQ 浏览器、360浏览器、搜狗浏览器等。
首先 Safari 是 macOS 或 iOS 的默认浏览器,并不支持其他平台,所以并不推荐为前端开发首先,而且其跟 Chrome 都是基于 Webkit 内核的,所以有很多相似点。
Presto 是挪威产浏览器 opera 的 “前任” 内核。 为了减少研发成本,Opera 在 2013 年 2 月宣布放弃 Presto,转而跟随 Chrome 使用 WebKit 分支的 Chromium 引擎作为自家浏览器核心引擎,Presto 内核的 Opera 浏览器版本永远的停留在了 12.17。换内核的代价对于 Opera 来说过于惨痛。使用谷歌的 WebKit 内核之后,原本快速,轻量化,稳定的 Opera 浏览器变得异常的卡顿,而且表现不稳定,造成了众多的用户流失。时至今日现在还有上千万人在使用老版本的 Opera。
而国产的一些浏览器一般都是套了个壳的双核浏览器(浏览器内核介绍),如 QQ 浏览器,360浏览器、搜狗浏览器,猎豹浏览器等,一般只用来测试兼容性(因为用户在用这些浏览器)。
路径
简单来说,路径就是指向资源的存放位置,资源可以是各种文件,图片,视频等。这跟实际生活中经常以地址来描述一个位置一样。
路径分为绝对路径和相对路径。
- 绝对路径:以站点根目录为参考基础的路径。
- 相对路径:由文件本身所在的路径引起的跟其它文件(或文件夹)的路径关系。
以相对路径来引入,比如:
- 图片:
../../img/img-style.png
- 样式:
style.css或./style.css
在使用相对路径时,用符号“./”来表示当前目录,用符号“../”来表示当前目录的父目录。
以绝对路径来引入,比如:
- 图片:
/img/img-style.png
- 样式:
/play/hello/style.css
在使用绝对路径时,使用"/" 代表根目录,站点目录内部所有文件都可以使用“/”表示根目录。
但是如果是其他站点要访问该目录时,则需要加上域名地址,以图片为例,其绝对地址为:http://www.baidu.com/img/img-style.png
。
如果以本地文件与网络文件为区分的话,路径还可以分为本地路径及网络路径。
注:本地路径方面,如在磁盘里面访问,Windows 约定使用反斜线 () 作为路径中的分隔符,如"E:\娱乐\音乐\蓝莲花.mp3";而UNIX 系统使用正斜线 (/),如“/users/marvin/music/蓝莲花.mp3”。