前端知识体系(1) —— HTML 基础

456 阅读19分钟

前言:本前端知识体系供个人复习与巩固用,不一定适合其他人。会逐步的完善该系列文章。

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表单相关元素的namevalue属性
  • 只用于某一个元素的,如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="我是图片加载失败后显示的文字">

除了必须属性外,还可以添加控制大小的属性widthheight,如下:

<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>的话就形成了嵌套

更多关于列表知识可参看:<ol><ul><li>

表格元素

每个表格由行与列组成的。<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:表示字段是否只读,该属性可以不用设置值,加上该属性即表示只读

更多可参考:

<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),如可以使用&lt;表示小于号(<),&gt;表示大于号(>)。

空格

浏览器总是会截短 HTML 页面中的连续空格。所以如果在HTML代码中连续输入多个空格,最后也只会显示一个空格。

那么如何才能实现连续多个空格呢?这就需要用到&nbsp;字符实体了。

简单示例如下:

<p>空格            好多啊,但是只显示成一个</p>
<p>空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好多啊,全部显示</p>

常用字符实体

字符实体可以有两种方法表示:一种为实体名称,一种为实体编号。如小于号(<)既可以用实体名称&lt;表示,也可以用实体编号&#60;表示。

常用几个字体字符如下:

显示结果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
大于号&gt;&#62;
&和号&amp;&#38;
©版权(copyright)&copy;&#169;
×乘号&times;&#215;

更多可参看: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”。

参考资料