初识web（一）
什么是web？
web（World Wide Web）全球廣域網，一種基于超文本和HTTP的，全球性的，動態交互的，易于訪問的只管界面，其中的文檔及超級鏈接將Internet上的信息節點組織成一個互為關聯的網狀結構。
什么是html和css？
他們是兩種編輯語言，一般情況下需要配合使用，是作為網站開發的基礎語言。
- HTML：超文本標記語言（HyperText Markup Language），標準通用標記語言的一個應用。時網頁制作必備的編程語言。
- CSS：層疊樣式表(Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化
如何在網站中查看原始代碼？
隨意點開一個網站，在其首頁空白區域右擊，選擇“查看網頁源代碼（V）Ctrl+V”
如：打開騰訊網link，右擊選擇查看網頁初始代碼，會展示如下界面：
我們所看到的就是這個網頁的使用html編寫的原始代碼，瀏覽器將他們解析后就是我們所看到的樣子。當然，每個網站是由單個或多個網頁組成的，網頁都是以.html的文件格式儲存。
一、初步了解HTML
1、我們如何編寫一個.html的文件呢？
我們可以在指定的文件夾之中創建一個“文本文檔”，并將其后綴名更改為.html 這樣它就成了一個可以被瀏覽器識別的html文件。當我們需要對其編寫時，我們可以右擊所選文件，使用記事本的方式打開，我們就可以對其內容進行修改。
保存后我們再打開這個文件，我們就可以看到這樣一個網頁：
2、“宇宙第一編輯器——VS Code
VS Code 全稱Visual Studio Code，來自微軟，是一個開源的、基于Electron的輕量代碼編輯器
下載地址：VS Code
VS Code的基本使用
設置類：1：插件的安裝，如Chinese(Simplily),View in Browser,Open in Browser等等
2：文件->首選項->設置->（大小、是否換行word wrap）
3：文件的創建、設置路徑、保存和打開
4：搜索的應用：可以多文件（夾）搜索相同內容
快捷鍵：Ctrl+s：保存
Ctrl+a：全選
Ctrl+x、Ctrl+c、Ctrl+V：剪切、復制、粘貼
Ctrl+z、Ctrl+y：撤銷、前進
Shift+end：從頭選中一行
Shift+Home：從尾部選中一行
Shift+Alt+↓：向下復制一行
Alt+↑或↓：快速移動一行
Tab：向后縮進
Tab+Shift：向前縮進
Alt+鼠標左鍵：多光標（我們可以利用鍵盤的↑↓←→鍵來實現多行統一編輯）
Ctrl+d：選擇相同元素的下一個
3、對Chrome瀏覽器的了解和應用
世界五大瀏覽器：ie（已停止維護）Google Chrome（市場占比最大）FireFox ，Safari和Opera
練習熟練運用瀏覽器進行搜索預覽
- 技巧：Ctrl+滾輪：放大/縮小頁面
Ctrl+0：還原頁面大小
4、深入了解網站開發
UI設計師：設計稿
Web前端開發工程師（H5開發）
將設計稿 ->代碼
數據庫里的數據->顯示到頁面
工具：HTML+CSS
HTML：結構
CSS：樣式
Web后端開發工程師：數據庫的數據存儲
當然，一個大型網站的開發，需要團隊的配合，各個崗位不可或缺。
拓展：前端設計的另外一項技能：JavaScript1
他的主要功能：
5、Web前端的三大核心技術
| HTML | 結構 |
| CSS | 樣式 |
| JavaScript | 行為 |
- JS主要負責與用戶的交互，如用戶在搜索框輸入內容，自動跳出聯想內容供用戶選擇，再或者，如網頁滾動的頁面框，用戶點擊下一張（或上一張）時，會自行滾動至下一張。
- 我們也可以在瀏覽器設置中關閉JS。
二、Html的核心技術
1、如何編寫一個html文件
那我們如何利用VSCode來編寫一個html網頁呢？
首先我們需要了解html的幾個主要的內容：
打開VSCode，創建一個html文件，然后鍵入如下代碼：
- html的結構
- html的樣式
保存后，我們用Chrome瀏覽器打開，我們可以看到如下頁面：
- 我們還可以利用JS嘗試添加一些“行為”
我們鍵入如下代碼：
保存后打開，當我們鼠標移到內容上時，它會變換樣式：
當我們鼠標移開時，它又會變回原來的樣子：
以上這些就是我們完善一個Web所需要做的基礎部分。
2、HTML的基礎結構和屬性
前面我們介紹到HTML全稱為：超文本標記語言，那我們可以把他拆詞理解：
- 超文本：文本內容+非文字文本。非文本內容有例如網頁之中的圖片、視頻、音頻等等
- 標記：<單詞名>， 也叫做標簽
- 語言：編程語言
（1）標簽的寫法
標簽的寫法分為兩種
- 單標簽 <header>
- 雙標簽<header></header>
創建標簽的快捷鍵：單詞 + tab -> <單詞>
標簽除了可以上下排列，還可以組合嵌套
（2）標簽的種類
html的標簽類型很多，我們可以在在百度上搜索他們的種類及作用
我們可以參考html5標簽類型大全中的所列出的標簽種類和介紹。
（3）標簽的屬性
<header title='hello'>hello world</header><footer title='hi'>hi HTML</footer>其中title='內容'就是我們給標簽所添加的一個屬性。當然，一個標簽也可以擁有多個屬性：<標簽 屬性1=‘值’ 屬性2=‘值’ … >
我們利用vscode鍵入如上代碼，保存后用瀏覽器打開，當我們將鼠標移動到文字上時，就是現實他的屬性值：
3、HTML的初始代碼
每一個.html文件都是需要寫出事代碼，初始代碼就是無論你寫什么樣的網頁，這些代碼都是要有的，這就是初始代碼。（當然有一些初始代碼沒有也是可以的，但是最好還是要符合規范。）
快速創建初始代碼：！+ tab
在VSCode，利用快捷鍵我們可以得到一下代碼：
這些就是.html的初始代碼。
4、HTML的注釋
注釋的代碼，只有在文件中看得到，但是瀏覽器顯示不出來
寫法：<!-- 注釋的內容 -->
意義
快捷添加和刪除注釋：
5、HTML語義化
html的語義化指的是：根據網頁內容的結構，選擇適合的html標簽進行編寫。
好處
6、標題與段落
h標簽實現標題
p標簽實現段落
標題
它是雙標簽：<h1></h1> ... <h6></h6> 一共有6個等級；在一個網頁中，<h1></h1>標題時最重要的，并且在一個html文件之中只能出現一個，而<h5></h5>和<h6></h6>很少用到
段落
它是雙標簽：<p>段落內容</p>
7、文本修飾標簽
它是雙標簽。
第一種：<strong>強調標簽</strong>會對文本進行加粗
第二種：<em>強調標簽</em>會對文本進行斜體
但是strong的強調性更強。
鍵入以下代碼：
顯示：a2 + b2 = c2
鍵入以下代碼：
顯示：H2O
鍵入如下代碼：
顯示：原價300，現價150
注：一般情況下，刪除文本和插入文本都是混合使用的
8、圖片標簽與圖片屬性
圖片標簽
img：單標簽
圖片屬性
9、引入文件的地址文件
相對路徑
- .在路徑中表示當前路徑
- ..在路徑中顯示上一級路徑
絕對路徑
- <img src="https://inews.gtimg.com/newsapp_bt/0/15359755335/1000">這是網絡路徑
- <img src="D:\百度網盤\BaiduNetdisk\Assets">這是本地路徑
注意盡量避免反斜線
10、跳轉鏈接
（1）<a>標簽
注：它是雙標簽<a>鏈接</a>
屬性一：herf屬性
保存后用Chrome打開，我們就可以看到
點擊后，我們就可以跳轉到百度網頁。
當然，我們也可以在中插入其他屬性，如圖片等
例如：
這樣我們就可以通過點擊圖片來跳轉到指定的網頁了。
屬性二： target屬性
這個標簽可以改變鏈接的打開方式，默認情況下點一個鏈接都是以當前頁面打開。特殊說明時：target="_self"表示當前窗口打開 target="_blank"表示新窗口打開
例如，將如上代碼中改變成：
這樣，我們再點擊“訪問百度”時，就會在新的頁面打開。
（2）<base>標簽
作用：它可以改變<a>的默認行為
<head> <base target="_blank"> </head>這樣，我們這個網頁的所有鏈接的默認打開方式就是新窗口打開
練習：分別建立一個首頁、列表頁；并讓他們之間實現相互跳轉，每個頁面至少包含一個圖片，并且圖片要在images文件夾內；列表和詳情也要在html文件夾內，首頁在根目錄下。
11、跳轉錨點
它和跳轉鏈接的區別：跳轉鏈接是從一個頁面跳轉到另一個頁面，而跳轉錨點是指在當前的頁面內進行跳轉。
跳轉錨點也是在<a>標簽內來實現的。
實現一：#號+id 屬性
保存后用瀏覽器打開，我們能看到如下頁面：
當我們點擊上方錨點時，會自動跳轉到同頁面對應的那一行，這樣，我們的一個鏈接錨點就完成了。
實現二：#號+name 屬性
這種方式我們就可以不用在h2中加入id屬性，但是需要子啊每一個h2上方加入一個用<a name=" ">來進行引導
這樣我們也能實現相同的跳轉效果。
12、特殊符號
編寫一些文本時，經常會遇到輸入法無法輸入的字符，如?(注冊商標)等，還有王一段文字中加入多個空格時，頁面并不會接寫出多個空格。這些無法輸入和空格字符都是特殊字符，在HTML中，為這些特殊字符準備了專門的代碼。
這樣，我們就可以看到它顯示：<html>
就避免了與html之中的尖括號沖突。
13、列表項
（1）、無序列表
<ul>、<li>：列表的最外層容器，列表項
注：ul和li必須是組合出現，他們之間時不能有其他標簽的，而且要符合嵌套規范。
比如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><ul><li>第一項</ul> <li>第二項</ul> <li>第三項</ul> </ul> </body> </html>這就是一個正確的寫法。運行后如下：
這樣我們就能看到它的無序標記。
再如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><ul><p><li>S1</ul> <li>S2</ul> <li>S3</ul> <p></ul> </body> </html>這里ul和li之間加入了<p>標簽，導致了網頁中無法顯示，所以在ul和li之間不能有其他標簽。都是在li內部可以添加其他標簽，如鏈接等。
type屬性：改變前面標記的樣式（一般都是CSS去控制）,詳細參考html的ul樣式類型
（2）、有序列表
<ol>、li：列表的最外層容器、列表項
注：有序列表用的非常少，經常用的是無序列表，無序列表可以去貼袋有序列表。
類似的，我們將
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><ol><li>第一項</ul> <li>第二項</ul> <li>第三項</ul> </ol> </body> </html>運行后就是如下樣式：
（3）、定義列表
<dl>：定義列表
<dt>：定義專業術語或名詞
<dd>：對名詞進行解釋或描述
列表項需要添加標題和對標題進行描述的內容
我們隊以上三中輸入VSCode
運行后我們在瀏覽器中就能看到如下樣式：
這樣，一個定義列表就完成了。
JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作為開發Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式、聲明式、函數式編程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。
JavaScript的標準是ECMAScript 。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準。2015年6月17日，ECMA國際組織發布了ECMAScript的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES2015。 ??
總結
- 上一篇： CSS3实现各种纹理背景效果
- 下一篇： python+flask 配置https