• 歡迎加入前端交流群來獲取視頻資料以及前端學習資料：749539640

第一章HTML基礎

一、.web標準的概念及組成

W3C制定的結構和表現的標準;

結構：(xhtml ,xml)
表現：(css)
ECMA制定的行為的標準;
行為：（DOM ,ECMASCRIPT）
結構和表現標準：
1.W3C(?World Wide Web Consortium?)萬維網聯盟，創建于1994年是Web技術領域最具權威和影響力的國際中立性技術標準機構。(制定了結構和表現的標準，非贏利性的。)
2.行為標準：DOM，ECMASCRIPT（ECMA制定的）歐洲電腦場商聯合會。

二、Dreamweaver 基本功能

1、新建，打開，保存????????(ctrl+s)
2、預覽頁面?（F12快捷鍵）
3、建立站點
?CTRL+U(首先參數)里可以更改代碼里的代碼文字大小
F4隱藏顯示所有面版

三、 調試工具 -瀏覽器

1）PC端調試工具的使用 -測試瀏覽器(chrome,ie,firefox)
2）移動端調試工具chrome可以測試移動端頁面（有很多模擬器）

四、 HTML及相關概念的介紹

HTML 指的是超文本標記語言 (Hyper?Text?Markup?Language)
?XHTML指可擴展超文本標記語言（標識語言）（EXtensible HyperText Markup Language）。
?HTML5指的是HTML的第五次重大修改（第5個版本）(HTML5 是 W3C 與 WHATWG 合作的結果)
WHATWG網頁超文本應用技術工作小組是一個以推動網絡HTML 5 標準為目的而成立的組織。在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。

五、HTML5 基本結構 （新建一個html文件時默認有那些代碼）

命名文檔類型 說明我們寫的是標記語言 文件頭部 文件標題（顯示在狀態欄上的內容） 編碼格式 文件主體(所有要寫的內容)

六、文件命名規則：用英文，不用中文

名稱全部用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；必須以英文字母開頭。

七、 HTML基本語法

1、<常規標記>

 <標記??屬性=“屬性值” ??屬性=“屬性值”></標記> 

2.空標記
????`
??<標記 屬性=“屬性值” ?/>
????`

說明：
1.寫在<>中的第一個單詞叫做標記，標簽，元素。
2.標記和屬性用空格隔開，屬性和屬性值用等號連接，屬性值必須放在“”號內。
3.一個標記可以沒有屬性也可以有多個屬性，屬性和屬性之間不分先后順序。
4.空標記沒有結束標簽，用“/”代替。

八、 XHTML常用標記

1）文本標題（h1-h6）

一級標題

二級標題

...

六級標題

• 正文有兩種形式（段落文本和文字列表）

2） 段落(p) 段落文本內容 標識一個段落(段落與段落之間有段間距) ?
3）空格 (?)（所占位置沒有一個確定的值,這與當前字體字號都有關系）.
4） 換行(br) 換行是一個空標記(強制換行) ?
5）加粗
6）傾斜 傾斜標記
7）水平線 空標記
8）列表(ul,ol,dl) HTML中有三種列表，分別是：無序列表，有序列表，自定義列表

• 無序列表
  無序列表組成：

- asd
- asd
- asd

• 有序列表
  有序列表組成：

<ol>
<li></li>
<li></li>
<li></li>
．．．．．．
</ol> 

• 自定義列表

<dl>
?????<dt>名詞</dt>
?????<dd>解釋</dd>
．．．．．．
</dl> 

九、圖片

<img data-original="目標文件路徑及全稱"?alt="圖片替換文本"?title="圖片標題"?/> 

注:所要插入的的圖片必須放在站點下
title的作用: 在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，HTML的絕大多數標簽都支持title屬性，title屬性就是專門做提示信息的
alt的作用:alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方。
*相對路徑的寫法：
1)當當前文件與目標文件在同一目錄下，直接書寫目標文件文件名+擴展名；
?
2)當當前文件與目標文件所處的文件夾在同一目錄下，寫法如下：
文件夾名/目標文件全稱+擴展名；
?
3)當當前文件所處的文件夾和目標文件所處的文件夾在同一目錄下，寫法如下：
../目標文件所處文件夾名/目標文件文件名+擴展名；

十、超鏈接的應用

語法：

<a href="目標文件路徑及全稱/連接地址" alt="替換文本"?title="提示文本">鏈接文本/圖片</a>
<a href="#"></a>空鏈接 

屬性：target:頁面打開方式
屬性值：_blank 新窗口打開
屬性值：_self 本窗口打開
新頁面打開

十一、 數據表格的作用及組成

作用：顯示數據

<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
<tr>
?????<td></td>
????<td></td>
</tr>
</table> 

注：一個tr表示一行;一個td表示一列(一個單元格)
*數據表格的相關屬性
1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bgcolor="表格的背景色"
5）cellspacing="單元格與單元格之間的間距"
6）cellpadding="單元格與內容之間的空隙"
7）對齊方式：align="left/center/right"; valign=”top/middle/bottom”;
8)合并單元格屬性：
colspan=“所要合并的單元格的列數"合并列;
一行
一行 一行

rowspan=“所要合并單元格的行數”合并行;
一行 一行
一行

十二、表單的應用

表單的作用：用來收集用戶的信息的;
1、表單框

<form name="表單名稱" method="post/get" ?action="">
?
</form> 

1）文本框

<input type="text" value="默認值"/> 

2)密碼框

<input type="password" />
<input type="password" placeholder="密碼" /> 

3)提交按鈕

<input type="submit" value="按鈕內容" /> 

4)重置按鈕

<input type="reset" value="按鈕內容" /> 

5）單選框/單選按鈕

<input type="radio" name="ral" />
<input type="radio" name="ral" />
<input type="radio" name="ral" checked="checked" />(默認選中；) 

6）復選框

<input  type="checkbox"  name="like" />
<input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用)
(checked="checked" :默認選中) 

7)下拉菜單

<select ???name="">
?????????<option>菜單內容</option>
</select> 

8）多行文本框（文本域）

<textarea name="textareal" cols="字符寬度" rows="行數">
</textarea> 

9)按鈕

<input ??name="'" ??type="button" value=“按鈕內容” /> 

注：（button和submit的區別是 ，submit是提交按鈕 起到提交信息的作用，button只起到跳轉的作用，不進行提交。）

13）div的用法

<div id="id名"/class="class名"></div> 

文檔區域，文檔布局對象

14） span的用法
文本結點（某一小段文本，或是某一個字）

15）post和get的區別？

1. get是從服務器上獲取數據，post是向服務器傳送數據。
2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
3. 對于get方式，服務器端用Request.QueryString獲取變量的值，對于post方式，服務器端用Request.Form獲取提交的數據。
4. get傳送的數據量較小，不能大于2KB。post傳送的數據量較大，一般被默認為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB。
5. get安全性非常低，post安全性較高。但是執行效率卻比Post方法好。

十三、iframe框架

iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）

簡介

很多情況下前端同學并不知道怎么部署項目，很多情況都是丟給后端或者運維來處理
今天就來給大家簡單介紹下如何來部署項目
這里以vue項目為例

項目配置

publicPath

在vue的項目文件vue.confing.js里將publicPath:設置為 './'
默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設置 publicPath 為 /my-app/。

這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應用的文件系統中。

詳見publicpath

devServer.proxy

本地通過webpack的proxy來解決后端服務跨域問題，

devServer: {
....
    proxy: {
      '/bd': {
        target: `http://xxx.xxx.14.178:9101/`,
        changeOrigin: true
      }
    }
.....

詳見proxy

打包

npm run build

之后你會拿到一個dist目錄包。

服務器配置

準備工具,這里推薦xshell、winscp、termius、MobaXterm等
ftp工具
ssh工具

ftp

輸入服務器賬號密碼登錄后，將dist目錄傳至服務器。比如/home/dist

ssh

檢查安裝nginx

也是輸入信息登錄后，先查看服務器有沒有nginx

nginx -t

如果有就會出現如下提示

[root@VM-8-3-centos ~]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

如果沒有就去下載個nginx

這里以centos7為例,詳見如何在CentOS7上安裝 Nginx
EPEL 倉庫中有 Nginx 的安裝包。如果你還沒有安裝過 EPEL，可以通過運行下面的命令來完成安裝：

sudo yum install epel-release

輸入以下命令來安裝 Nginx：

sudo yum install nginx

配置nginx

vi /etc/nginx/nginx.conf

將頂部的user nginx;改為user root;
再把80端口下的root改為你的靜態資源路徑/home/dist

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root        /home/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }
        # 代理
        location ^~/bd/ {
            proxy_pass http://xxx.xxx.14.178:9101/bd/;
            proxy_buffers 256 4k;
            proxy_max_temp_file_size 0k;
            proxy_connect_timeout 30;
            proxy_send_timeout 60;
            proxy_read_timeout 60;
            proxy_next_upstream error timeout invalid_header http_502;            
        }
    }

啟動nginx

nginx    
nginx -s reload //重啟

然后你就可以用你的ip來訪問界面了