HTML有2種路徑的寫法：絕對(duì)路徑和相對(duì)路徑

對(duì)路徑-以引用文件之網(wǎng)頁(yè)所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當(dāng)保存于不同目錄的網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑將不相同，故稱之為相對(duì)。

絕對(duì)路徑-以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對(duì)，意指當(dāng)所有網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑都是一樣的。
其實(shí)絕對(duì)路徑與相對(duì)路徑的不同之處，只在于描述目錄路徑時(shí)，所采用的參考點(diǎn)不同。由于對(duì)網(wǎng)站上所有文件而言，根目錄這個(gè)參考點(diǎn)對(duì)所有文件都是一樣的，因此，運(yùn)用以根目錄為參考點(diǎn)的路徑描述方式才會(huì)被稱之為絕對(duì)路徑。　

　　以下為建立路徑所使用的幾個(gè)特殊符號(hào)，及其所代表的意義。

　　“.”–代表目前所在的目錄。

　　“..”–代表上一層目錄。

　　“/”–代表根目錄。

例：假設(shè)讀者所建立的Web站點(diǎn)擁有如下圖所示目錄路徑。假若要在Ref.htm文件中引用BeRef.gif文件時(shí)，其相對(duì)路徑如下：
　　./SubDir2/BeRef.gif
上面的引用路徑中，”.”代表目前的目錄(Dir1)，所以”./SubDir2”代表目前目錄下的SubDir2。其實(shí)，也可以省略”./”直接用這個(gè)式引用。

　　SubDir2/BeRef.gif

　　若使用絕對(duì)路徑以根目錄為參考點(diǎn)引用該文件時(shí)，引用路徑如下：

　　/Dir1/SubDir2/BeRef.gif

　　如果Web站點(diǎn)的目錄之結(jié)構(gòu)如下圖示:

　　引用BeRef.gif文件的相對(duì)路徑又是如何呢?假若要在Ref.htm文件中引用BeRef.gif文件時(shí)其相對(duì)路徑如下：
　　../SubDir2/BeRef.gif
　　上面的引用路徑中，”..”代表上一層目錄，所以，/Dir2”代表上一層目錄下的Dir2子目錄。若使用絕對(duì)路徑引用時(shí)，則引用路徑如下：　　
/Dir2/BeRer.gif
　　我們?cè)倥e一個(gè)比較復(fù)雜的例子，來(lái)比較一下相對(duì)路徑與絕對(duì)路徑的使用。假設(shè)在讀者所建立的Web站點(diǎn)中，擁有如下圖的目錄路徑。

　　我們用以一個(gè)表格來(lái)說(shuō)明在上圖的情況下，某文件引用另一文件時(shí)，所應(yīng)使用的相對(duì)路徑與絕對(duì)路徑。　　　　

　　上表中比較需要說(shuō)明的是”../../”所代表的意義。

　　“..”代表上一層目錄，而”../../”所代表的是上一層目錄的上一層目錄。所以，從上表中可以看出，如果引用的文件存在于目前目錄的子目錄中，或者存在于上一層目錄的另一個(gè)子目錄中，運(yùn)用相對(duì)路徑是比較方便的。如果不是時(shí)，則利用絕對(duì)路徑。從上表中，亦可以看出，當(dāng)被引用的是同一個(gè)文件時(shí)，引用文件所使用的絕對(duì)路徑是一樣的。

一章. 頁(yè)面基本元素

1.1頁(yè)面基礎(chǔ)元素：<html>

<html>是頁(yè)面的基礎(chǔ)元素，主要用來(lái)定義頁(yè)面的開(kāi)始和結(jié)束部分。元素語(yǔ)法結(jié)構(gòu)如下<html>....</html>（開(kāi)頭標(biāo)記為<>,結(jié)束標(biāo)記為</html>）先介紹一下完整的HTML文件的基本結(jié)構(gòu)

<html> 文件開(kāi)始標(biāo)記

<head> 文件頭開(kāi)始標(biāo)記

......... 文件頭部分的內(nèi)容

</head> 文件頭結(jié)束標(biāo)記

<body> 文件主體開(kāi)始標(biāo)記

......... 文件主題部分的內(nèi)容

</head> 文件主題結(jié)束標(biāo)記

</html> 文件結(jié)束標(biāo)記

在<html>和</html>之間寫入想要編輯的頁(yè)面內(nèi)容就構(gòu)成了一個(gè)簡(jiǎn)單的頁(yè)面

1.1.1 文本顯示方向?qū)傩裕篸ir

【作用與語(yǔ)法】dir屬性用來(lái)指定瀏覽器文本顯示的方向，同時(shí)也決定瀏覽器滾條的位置。dir屬性的語(yǔ)法結(jié)構(gòu)如下

<html dir="瀏覽器中文本的方向">......</html>(在元素名稱和屬性之間要加入空格)

dir屬性可以取兩個(gè)值，ltr（left title right）和rtl（right title left），分別表示從左向右顯示和從右向左顯示

1.1.2 指定語(yǔ)言屬性：lang

【作用與語(yǔ)法】lang屬性用來(lái)指定文檔中所使用的語(yǔ)言。lang屬性的語(yǔ)法結(jié)構(gòu)如下

lang屬性的取值可以使用ISO標(biāo)準(zhǔn)中的語(yǔ)言代碼。在<html>元素中加入lang屬性，使瀏覽器更好的顯示界面，并不會(huì)更改頁(yè)面的文字編碼

ISO標(biāo)準(zhǔn)中語(yǔ)言代碼的取值及含義語(yǔ)言名稱寫法語(yǔ)言名稱寫法英語(yǔ)en法語(yǔ)fr漢語(yǔ)zh德語(yǔ)de日語(yǔ)ja意大利語(yǔ)it

1.2 頁(yè)面頭部元素：<head>

【作用與語(yǔ)法】HTML的頭部元素是以<head>為開(kāi)始標(biāo)記，以</head>為結(jié)束標(biāo)記。它用于包含當(dāng)前文檔的相關(guān)信息，可包含<title>元素、<meta>元素等，分別用來(lái)定義頁(yè)面的標(biāo)題、編碼。使用<head>元素可以將基本信息部分和頁(yè)面主體內(nèi)容區(qū)分開(kāi)來(lái)。<head>元素的語(yǔ)法結(jié)構(gòu)如下

<head>......</head>

1.3 頁(yè)面標(biāo)題元素：<title>

【作用與語(yǔ)法】HTML頁(yè)面的標(biāo)題一般是用來(lái)說(shuō)明頁(yè)面用途的，它顯示在瀏覽器的標(biāo)題欄中。在HTML文檔中，標(biāo)題信息設(shè)置在頁(yè)面的頭部，也就是<head>和</head>之間。<title>元素的語(yǔ)法結(jié)構(gòu)如下。

<title>......</title> (說(shuō)明：在標(biāo)記中間的“......”就是標(biāo)題的內(nèi)容，它位于HTML文檔的頭部，即<head>和</head>之間)

1.4 元信息元素：<meta>

【作用與語(yǔ)法】元信息元素<meta>用來(lái)定義頁(yè)面的附加信息，其中包括頁(yè)面的作者、版權(quán)、關(guān)鍵字等相關(guān)信息。<meta>元素的語(yǔ)法結(jié)構(gòu)如下。

<meta 屬性=“屬性值”/>

1.4.1 元信息元素名稱屬性：name

【作用與語(yǔ)法】name屬性用來(lái)制定文檔中附加信息的名稱。例如，最常用的值“keywords”用來(lái)定義文檔中的關(guān)鍵字，方便搜索引擎的搜索。name屬性的語(yǔ)法結(jié)構(gòu)如下。

<meta name="信息名稱"/>

在<meta>元素中，名稱必須對(duì)應(yīng)有相關(guān)的值才能生效

1.4.2 元信息元素的值：content

【作用與語(yǔ)法】content屬性用來(lái)指定文檔中附加信息的值，它與name屬性成對(duì)出現(xiàn)。content屬性的語(yǔ)法結(jié)構(gòu)如下

<meta name="信息名稱" conten="附加信息的值"/>

1.4.3 元信息元素的附加屬性：http-equiv

【作用與語(yǔ)法】http-equiv屬性和name屬性類似，用來(lái)指定附加信息的名稱。在瀏覽器加載頁(yè)面之前，服務(wù)器會(huì)把http-equiv屬性定義的相關(guān)信息發(fā)送給瀏覽器，便于在瀏覽器中正確顯示頁(yè)面。http-equiv屬性的語(yǔ)法結(jié)構(gòu)如下

【作用與語(yǔ)法】<meta http-equiv="信息名稱"，content="附加信息的值">

說(shuō)明：和name屬性相似，http-equiv屬性一般要和conten屬性成對(duì)出現(xiàn)

1.4.4 定義頁(yè)面的跳轉(zhuǎn)

【作用與語(yǔ)法】在瀏覽器網(wǎng)頁(yè)的時(shí)候經(jīng)常會(huì)看到一些歡迎信息的頁(yè)面，并經(jīng)過(guò)一段時(shí)間后，這一頁(yè)面會(huì)自動(dòng)轉(zhuǎn)到其他頁(yè)面，這就是網(wǎng)頁(yè)的跳轉(zhuǎn)。使用HTML中的HTTP代碼就可以很輕松的實(shí)現(xiàn)這一功能。頁(yè)面跳轉(zhuǎn)的語(yǔ)法結(jié)構(gòu)

<meta http-equiv="refresh" content="跳轉(zhuǎn)時(shí)間"；url="鏈接地址">

說(shuō)明：在該語(yǔ)法中，refresh表示網(wǎng)頁(yè)的刷新，而在content中則設(shè)定刷新的時(shí)間和刷新后的地址，時(shí)間和鏈接地址之間用分號(hào)相隔。默認(rèn)情況下，跳轉(zhuǎn)時(shí)間是以秒為單位的

1.5 基本設(shè)置元素：<base>

在HTML中，基本設(shè)置元素<base>使用來(lái)定義相對(duì)路徑的根目錄。使用<base>元素，可以方便的定義頁(yè)面中的超級(jí)鏈接。語(yǔ)法結(jié)構(gòu)如下

<base 屬性="屬性值"/>

<base>元素在不使用任何屬性時(shí)，對(duì)頁(yè)面沒(méi)有影響。<base>元素中可以使用的屬性有鏈接路徑屬性href和鏈接窗口屬性target

1.5.1 鏈接路徑屬性：href

【作用與語(yǔ)法】href屬性用來(lái)指定文檔中相對(duì)鏈接的根目錄。文檔中的所有鏈接(包括圖片、音頻等內(nèi)容)都按照href屬性所指定的根目錄顯示。href屬性的語(yǔ)法結(jié)構(gòu)如下

<base href="指定路徑">包含的內(nèi)容部分</base>

href屬性的取值為url值。它可以使用絕對(duì)路徑，也可以指

向某個(gè)文件夾。

.editorconfig

1.EditorConfig和Prettier一樣，都是用來(lái)配置格式化你的代碼的，這個(gè)格式化代碼，要和你lint配置相符！否則會(huì)出現(xiàn)你格式化代碼以后，卻不能通過(guò)你的代碼校驗(yàn)工具的檢驗(yàn)。

2.讓使用不同編輯器的開(kāi)發(fā)者在共同開(kāi)發(fā)一個(gè)項(xiàng)目時(shí)“無(wú)痛”地遵循編碼規(guī)范(編碼風(fēng)格)，就可以使用EditorConfig插件，會(huì)在項(xiàng)目根目錄尋找.editorconfig文件并使用其中定義的編碼風(fēng)格。默認(rèn)配置

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

語(yǔ)法

editorConfig配置文件需要是UTF-8字符集編碼的, 以回車換行或換行作為一行的分隔符
斜線(/)被用作為一個(gè)路徑分隔符，井號(hào)(#)或分號(hào)(;)被用作于注釋. 注釋需要與注釋符號(hào)寫在同一行

通配符

*                匹配除/之外的任意字符串
**               匹配任意字符串
?                匹配任意單個(gè)字符
[name]           匹配name中的任意一個(gè)單一字符
[!name]          匹配不存在name中的任意一個(gè)單一字符
{s1,s2,s3}       匹配給定的字符串中的任意一個(gè)(用逗號(hào)分隔) 
{num1..num2}   　匹配num1到num2之間的任意一個(gè)整數(shù), 這里的num1和num2可以為正整數(shù)也可以為負(fù)整數(shù)

屬性
所有的屬性和值都是忽略大小寫的. 解析時(shí)它們都是小寫的

indent_size     用一個(gè)整數(shù)定義的列數(shù)來(lái)設(shè)置縮進(jìn)的寬度，如果indent_style為tab，則此屬性默認(rèn)為tab_width
tab_width       用一個(gè)整數(shù)來(lái)設(shè)置tab縮進(jìn)的列數(shù)。默認(rèn)是indent_size
end_of_line     設(shè)置換行符，值為lf、cr和crlf
charset         設(shè)置編碼，值為latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建議使用utf-8-bom
trim_trailing_whitespace  設(shè)為true表示會(huì)去除換行行首的任意空白字符。
insert_final_newline      設(shè)為true表示使文件以一個(gè)空白行結(jié)尾
root        　　　表示是最頂層的配置文件，發(fā)現(xiàn)設(shè)為true時(shí)，才會(huì)停止查找.editorconfig文件

.prettierrc（格式化配置項(xiàng))

2.當(dāng)我們使用右鍵格式化的時(shí)候,就會(huì)自動(dòng)幫我們補(bǔ)全符號(hào),但是,有些符號(hào)在eslint中就會(huì)報(bào)語(yǔ)法錯(cuò)誤,那我們需要怎么辦呢?可以通過(guò).prettierrc來(lái)進(jìn)行文件配置

{
    "semi": false,    // 使用分號(hào), 默認(rèn)true
    "singleQuote": true,   // 使用單引號(hào), 默認(rèn)false(在jsx中配置無(wú)效, 默認(rèn)都是雙引號(hào))
    "bracketSpacing": true   // 對(duì)象中的空格 默認(rèn)true
}

.browserslistrc 文件

在使用腳手架搭建項(xiàng)目時(shí)，會(huì)自動(dòng)生成.browserslistrc文件，該文件只要是 配置兼容瀏覽器
對(duì)于部分配置參數(shù)做一些解釋:
" >1%" :代表著全球超過(guò)1%人使用的瀏覽器
“l(fā)ast 2 versions” : 表示所有瀏覽器兼容到最后兩個(gè)版本
“not ie <=8” :表示IE瀏覽器版本大于8（實(shí)則用npx browserslist 跑出來(lái)不包含IE9 ）
“safari >=7”:表示safari瀏覽器版本大于等于7

Vue .env .env.development .env.production

1.項(xiàng)目根目錄下創(chuàng)建.env、.env.development和.env.production三個(gè)文件，文件名解釋分別如下：　　.env 無(wú)論開(kāi)發(fā)環(huán)境還是生產(chǎn)環(huán)境都會(huì)加載的配置文件　　.env.development 開(kāi)發(fā)環(huán)境加載的配置文件　　.env.production 生產(chǎn)環(huán)境加載的配置文件

2.環(huán)境變量的簡(jiǎn)單使用示例。需要注意，配置文件里的屬性名必須以VUE_APP_開(kāi)頭，比如在.env文件這樣聲明一個(gè)環(huán)境變量：

VUE_APP_QQQ = `QQ`

然后就可以在代碼里這樣用了：

console.log(process.env.VUE_APP_QQQ)  // -> `QQ`

那為什么是三個(gè)文件呢？
比如現(xiàn)在三個(gè)文件里內(nèi)容分別如下：

// .env
VUE_APP_QQQ = `QQ`

// .env.development
VUE_APP_QQQ = `WW`

// .env.production
VUE_APP_QQQ = `RR`

那么首先，Vue在啟動(dòng)時(shí)，無(wú)論是在開(kāi)發(fā)環(huán)境還是在生產(chǎn)環(huán)境，它始終都會(huì)加載.env文件里的內(nèi)容，然后（劃重點(diǎn)）=>根據(jù)Node環(huán)境變量’NODE_ENV’的值來(lái)選擇加載’development’還是’production’。

比如我們平常通過(guò)npm run serve啟動(dòng)時(shí)，我們本地系統(tǒng)的環(huán)境變量NODE_ENV 值默認(rèn)是development，這時(shí)就會(huì)先后加載.env和.env.development這兩個(gè)文件。

而當(dāng)我們打包到服務(wù)器后，服務(wù)器的NODE_ENV值一般為production，則此時(shí)Vue仍會(huì)先加載.env文件，然后加載.env.production文件。

其次，在按順序加載文件時(shí)，Vue會(huì)把后一個(gè)加載的文件內(nèi)容和前面加載的文件內(nèi)容進(jìn)行比較，如果存在變量名相同，那么它會(huì)采用后一個(gè)文件里的變量值為變量的最終值。

拿上面三個(gè)文件內(nèi)容打個(gè)比方：我們?cè)谌粘ｉ_(kāi)發(fā)時(shí)，NODE_ENV值是development，那么Vue就會(huì)首先加載.env文件里的內(nèi)容，然后繼續(xù)加載.env.development文件里的內(nèi)容。那么我們發(fā)現(xiàn)變量名VUE_APP_QQQ存在多個(gè)，這時(shí)Vue就會(huì)采用后一個(gè)文件里的變量值為變量的最終值。因此我們通過(guò)console輸出看一看。

console.log(VUE_APP_QQQ)  // -> `WW`

.eslintrc.js

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    //設(shè)置"script"（默認(rèn)）或"module"如果你的代碼是在ECMAScript中的模塊。
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    "no-unused-vars": [2, { 
      // 允許聲明未使用變量
      "vars": "local",
      // 參數(shù)不檢查
      "args": "none" 
    }],
    // 關(guān)閉語(yǔ)句強(qiáng)制分號(hào)結(jié)尾
    "semi": [0],
    //key值前面是否要有空格
     "key-spacing": [0, {
      "singleLine": {
        "beforeColon": false,
        "afterColon": true
      },
      "multiLine": {
        "beforeColon": true,
        "afterColon": true,
        "align": "colon"
      }，
    //空行最多不能超過(guò)100行
    "no-multiple-empty-lines": [0, {"max": 100}],
    //關(guān)閉禁止混用tab和空格
    "no-mixed-spaces-and-tabs": [0],
    //數(shù)組第一個(gè)指定是否啟用這個(gè)規(guī)則，第二個(gè)指定幾個(gè)空格
    "indent":[1,2],
}

其中的rules是配置規(guī)則的

配置參數(shù)

rules: {
    "規(guī)則名": [規(guī)則值, 規(guī)則配置]
}

規(guī)則值

"off"或者0    //關(guān)閉規(guī)則關(guān)閉
"warn"或者1    //在打開(kāi)的規(guī)則作為警告（不影響退出代碼）
"error"或者2    //把規(guī)則作為一個(gè)錯(cuò)誤（退出代碼觸發(fā)時(shí)為1）

常見(jiàn)規(guī)則列表

在線咨詢

上一篇：報(bào)個(gè)HTML培訓(xùn)班要多少錢？
下一篇：Javascript全屏模式的切換

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商