Web開發初探（系統理解Web知識點）

RioTian發表於2020-09-14
Web

一、Web開發介紹

我們看到的網頁通過程式碼來實現的 ，這些程式碼由瀏覽器解釋並渲染成你看到的豐富多彩的頁面效果。 這個瀏覽器就相當於Python的直譯器，專門負責解釋和執行(渲染）網頁程式碼。

寫網頁的程式碼是專門的語言， 主要分為Hmtl 、 CSS 和 JavaScript​, 被稱為網頁開發三劍客，分別作用如下：

Html

超文字標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。

主要負責編寫頁面架構，有點像建房子時，造的毛坯房。

CSS

CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式。

讓你的網頁樣式變的豐富多彩起來，可以改變字型、顏色、排列方式、背景顏色等

相當於給你的毛坯房做裝修

JavaScript

網頁尾本語言，可以讓你的網頁動起來，比如一張圖片滑鼠放上去自動變大、一個按鈕自動變色、提交表單時少填或填錯了欄位會提示報錯等，都是JavaScript實現的。

以上3個 元件 是做網站開發都必須掌握的技能 ，我們接下來依次體驗下~吧

二、HTML

2.1 HTML簡介

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>路飛學城</title>
  </head>
  <body>

    <h1>我的第一個標題</h1>
    <p>我的第一個段落。</p>

  </body>
</html>
  • <!DOCTYPE html>宣告為 HTML5 文件
  • <html>元素是 HTML 頁面的根元素
  • <head> 標籤用於定義文件的頭部，它是所有頭部元素的容器。 中的元素可以引用指令碼、指示瀏覽器在哪裡找到樣式表、提供元資訊等等。
  • <meta>元素包含文件的後設資料， 如定義網頁編碼格式為 utf-8、關鍵詞啥的
  • <title>元素裡描述了文件的標題
  • <body>元素包含了可見的頁面內容
  • <h1>元素定義一個大標題
  • <p>元素定義一個段落

**注：**在瀏覽器的頁面上使用鍵盤上的 F12 按鍵開啟除錯模式，就可以看到組成標籤。

2.2 什麼是HTML?

HTML 是用來描述網頁的一種語言。

  • HTML 指的是超文字標記語言: HyperText Markup Language
  • HTML 不是一種程式語言，而是一種標記語言
  • 標記語言是一套標記標籤 (markup tag)
  • HTML 使用標記標籤來描述網頁
  • HTML 文件包含了HTML 標籤及文字內容
  • HTML文件也叫做 web 頁面

HTML 標籤

HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。

  • HTML 標籤是由尖括號包圍的關鍵詞，比如
  • HTML 標籤通常是成對出現的，比如<b> 和 </b>,標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤

2.3 HTML網頁結構

下面是一個視覺化的HTML頁面結構：

注意： 只有 <body> 區域 (白色部分) 才會在瀏覽器中顯示。

三、HTML常用元素入門

3.1 HTML標題

3.2 段落

3.3 超連結

<body>
	<a href="https://www.luffycity.com">這是一個連結使用了 href 屬性</a>
</body>


<a href="https://www.luffycity.com" target="_blank" >訪問路飛學城</a>

target="_blank"會開啟一個新視窗

3.4 顯示圖片

<img src="black_girl.jpg" width="600" height="500" >

3.5 HTML表格

想在頁面上顯示這種表格怎麼做？

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67

先做個最簡單的

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

輸出

表格的表頭

表格的表頭使用 <th> 標籤進行定義。

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

大多數瀏覽器會把表頭顯示為粗體居中的文字

可以加上邊距

<table border="1" cellpadding="10">

3.6 列表

分為有序列表 和 無序列表

有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

效果

無序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

巢狀列表

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

3.7 div區塊元素

HTML 區塊元素

大多數 HTML 元素被定義為塊級元素或內聯元素。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。

例項: <h1>,<p>, <ul>, <table>

HTML 內聯元素

內聯元素在顯示時通常不會以新行開始。

例項: <b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是塊級元素，它可用於組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設定樣式屬性。

<div> 元素的另一個常見的用途是文件佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文件佈局不是表格的正確用法。

<span> 元素

HTML <span> 元素是內聯元素，可用作文字的容器

<span> 元素也沒有特定的含義。當與 CSS 一同使用時，<span> 元素可用於為部分文字設定樣式屬性。

3.8 CSS樣式初識

CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式。

CSS 可以通過以下方式新增到HTML中:

  • 內聯樣式- 在HTML元素中使用"style" 屬性
  • 內部樣式表 -在HTML文件頭部 <head> 區域使用<style> 元素 來包含CSS
  • 外部引用 - 使用外部 CSS 檔案

3.8.1 內聯樣式

當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下例項顯示出如何改變段落的顏色和左外邊距。

<p style="color:blue;margin-left:20px;">這是一個段落。</p>
設定背景顏色
<body style="background-color:yellow;">
  <h2 style="background-color:red;">這是一個標題</h2>
  <p style="background-color:green;">這是一個段落。</p>
</body>

設定字型, 字型顏色 ，字型大小

我們可以使用font-family（字型），color（顏色），和font-size（字型大小）屬性來定義字型的樣式:

<h1 style="font-family:verdana;">一個標題</h1>
<p style="font-family:arial;color:red;font-size:20px;">一個段落。</p>

3.8.2 內部樣式表

當單個檔案需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標籤定義內部樣式表:

<head>
  <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}
  </style>
</head>

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告:

選擇器通常是您需要改變樣式的 HTML 元素。

每條宣告由一個屬性和一個值組成。

屬性（property）是你希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開

3.8.3 外部樣式表

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個檔案來改變整個站點的外觀。

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

3.9 網頁佈局

網頁佈局主要使用div

<body>
<div id="header" style="background: darkorange; height: 100px;text-align: center ">
    Menu
</div>
<div id="content" style="background: aliceblue; height: 600px">

    <div id="left-menu" style="height: 100%; width: 15%; background: deepskyblue; float: left">
        選單
        <ol>
            <li>HMTL</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ol>
    </div>
    <div id="content-panel" style="background: aqua; height: 95%; width: 85%;float: left">
        <p>這裡是真正寫內容的地方。。。</p>
    </div>

</div>

<div style="background: greenyellow; height: 50px">
    footer
</div>
</body>

效果

3.10 Html 表單

當你想收集使用者資料，提交到後臺伺服器時，你就可以用html 表單元素

表單元素分為 文字框、下拉選單、單選、複選 、按鈕

使用者註冊示例

<form action="baidu_url">
     姓名: <input type="text" name="name"> <br>
     電話: <input type="number" name="phone"> <br>
      <button>註冊</button>
</form>

一點選按鈕，<form>.....</form> 表單裡的資料都會被提交到action="baidu_url" 這個地址

其它常用輸入型別

<body>
    <form action="baidu_url">

        姓名: <input type="text" name="name"> <br>
        電話: <input type="number" name="phone"> <br>
        姓別: <input type="radio" name="sex" value="男">男 <input type="radio" name="sex"  value="女">女  <br>
        愛好: <input type="checkbox" name="hobbie" value="girl">姑娘
             <input type="checkbox" name="hobbie" value="潛水">潛水
            <input type="checkbox" name="hobbie" value="Python">Python  <br>

        喜歡的姑娘型別：<br>
        <select name="gilr_type">
            <option value="1">胸大貌美大長腿</option>
            <option value="2">氣質小可愛</option>
            <option value="3">妖嬈性感</option>
            <optgroup label="按區域">
                <option value="4">歐美</option>
                <option value="5">日韓</option>
                <option value="6">河南開封</option>
            </optgroup>
        </select> <br>

        個人簡介: <br>
        <textarea name="intro" placeholder="輸入不省於50字的個人介紹" rows="3" cols="50" ></textarea> <br>

        輸入密碼：<input type="password" name="password"> <br>

        <button>註冊</button>
    </form>

</body>

輸出效果

Fieldset 表單集合

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

效果

四、CSS樣式基礎

4.1 CSS id \ class 選擇器

id選擇器

id就像一個元素的身份證地址，可以在網頁裡，唯一代表某個元素，我們也可以通過這個id快速找到它對應的元素物件

輸出

class 類選擇器

當你想給多個元素批量設定同樣的一個樣式的話，就可以使用類選擇器

輸出

4.2 直接通過元素名設定樣式

若你想給頁面所有的<p> 或<input>標籤加上同樣的樣式，可以直接通過元素名批量設定

注意：id & class 選擇器的樣式優先順序大於 元素名選擇器

4.3 組合選擇器

為了測試效果，先準備好3層div

<div id="layer1">
    <p>第1層</p>
    <div id="layer2">
        <p>layer 2</p>
        <h2>layer 2 h2</h2>
        <div id="layer3">
            <p>第3層</p>
            <h3>layer 3 h3</h3>
        </div>
    </div>

</div>
<p>我不在任何的div裡</p>

設定好樣式

<head>
    <style type="text/css">
        #layer1 {
            height: 500px;
            padding: 30px;
            border: 1px dashed blue;
        }
        #layer2 {
            height: 400px;
            padding: 30px;
            border: 1px dashed red;
        }
        #layer3 {
            height: 300px;
            padding: 30px;
            border: 1px dashed black;
        }
    </style>
</head>

效果

4.3.1 後代選擇器

給指定元素的所有指定後代，設定樣式

比如 ，我給上圖第一層div下面所有的

標籤設定顏色

#layer1 p {
	color: red;
	background: yellow;
}

效果

4.3.2 子元素選擇器

又可稱為兒子選擇器，是指可給指定元素的下一層兒子元素設定格式 ，注意，只是兒子，孫子不管

給layer1的div的兒子設定樣式

#layer1 > p {
    color: red;
    background: yellow;
}

4.3.3 相鄰兄弟選擇器

可選擇緊接在另一元素後的元素，且二者有相同父元素。

#layer2 > p+h2 {
  color: red;
  background: yellow;
}

效果

4.3.4 多個元素組合

可同時給不相干的多個元素設定同一個樣式

比如 把整 個頁面所有的

和

標籤同時設定樣式 
p,h3 {
  color: red;
  background: yellow;
}

效果

image-20200606180807866

4.4 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了盒子模型(Box Model)：

CSS box-model

不同部分的說明：

  • Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
  • Border(邊框) - 圍繞在內邊距和內容外的邊框。
  • Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
  • Content(內容) - 盒子的內容，顯示文字和影像。

為了正確設定元素在所有瀏覽器中的寬度和高度，你需要知道的盒模型是如何工作的。

元素的寬度和高度

重要: 當指定一個 CSS 元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度。要知道，完整大小的元素，你還必須新增內邊距，邊框和邊距。

下面的例子中的元素的總寬度為300px：

div {
    width: 300px;
    border: 25px dashed yellow;
    padding: 25px;
    margin: 25px;
}

<body>
	<h2>盒子模型演示</h2>
	<p>CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。</p>
	<div>這裡是盒子內的實際內容。有 25px 內間距，25px 外間距、5px 黃色邊框。</div>
</body>

效果

image-20200606182354423

4.5 常用CSS屬性

css有很多屬性，我們先只講幾個基本的

更多的看這裡：https://www.runoob.com/cssref/css-reference.html#box

4.5.1 background背景屬性

屬性 描述 CSS
background 複合屬性。設定物件的背景特性。 1
background-attachment 設定或檢索背景影像是隨物件內容滾動還是固定的。必須先指定background-image屬性。 1
background-color 設定或檢索物件的背景顏色。 1
background-image 設定或檢索物件的背景影像。 1
background-position 設定或檢索物件的背景影像位置。必須先指定background-image屬性。 1
background-repeat 設定或檢索物件的背景影像如何鋪排填充。必須先指定background-image屬性。 1
background-clip 指定物件的背景影像向外裁剪的區域。 3
background-origin S設定或檢索物件的背景影像計算background-position時的參考原點(位置)。 3
background-size 檢索或設定物件的背景影像的尺寸大小。 3

4.5.2 邊框Border 和輪廓Outline屬性

屬性 描述 CSS
border 複合屬性。設定物件邊框的特性。 1
border-bottom 複合屬性。設定物件底部邊框的特性。 1
border-bottom-color 設定或檢索物件的底部邊框顏色。 1
border-bottom-style 設定或檢索物件的底部邊框樣式。 1
border-bottom-width 設定或檢索物件的底部邊框寬度。 1
border-color 置或檢索物件的邊框顏色。 1
border-left 複合屬性。設定物件左邊邊框的特性。 1
border-left-color 設定或檢索物件的左邊邊框顏色。 1
border-left-style 設定或檢索物件的左邊邊框樣式。 1
border-left-width 設定或檢索物件的左邊邊框寬度。 1
border-right 複合屬性。設定物件右邊邊框的特性。 1
border-right-color 設定或檢索物件的右邊邊框顏色。 1
border-right-style 設定或檢索物件的右邊邊框樣式。 1
border-right-width 設定或檢索物件的右邊邊框寬度。 1
border-style 設定或檢索物件的邊框樣式。 1
border-top 複合屬性。設定物件頂部邊框的特性。 1
border-top-color 設定或檢索物件的頂部邊框顏色 1
border-top-style 設定或檢索物件的頂部邊框樣式。 1
border-top-width 設定或檢索物件的頂部邊框寬度。 1
border-width 設定或檢索物件的邊框寬度。 1
outline 複合屬性。設定或檢索物件外的線條輪廓。 2
outline-color 設定或檢索物件外的線條輪廓的顏色。 2
outline-style 設定或檢索物件外的線條輪廓的樣式。 2
outline-width 設定或檢索物件外的線條輪廓的寬度。 2
border-bottom-left-radius 設定或檢索物件的左下角圓角邊框。 3
border-bottom-right-radius 設定或檢索物件的右下角圓角邊框。 3
border-image 設定或檢索物件的邊框樣式使用影像來填充。 3
border-image-outset 規定邊框影像超過邊框的量。 3
border-image-repeat 規定影像邊框是否應該被重複（repeated）、拉伸（stretched） 3
border-image-slice 規定影像邊框的向內偏移。 3
border-image-source 規定要使用的影像，代替 border-style 屬性中設定的邊框樣式。 3
border-image-width 規定影像邊框的寬度。 3
border-radius 設定或檢索物件使用圓角邊框。 3
border-top-left-radius 定義左上角邊框的形狀。 3
border-top-right-radius 定義右上角邊框的形狀。 3
box-decoration-break 規定行內元素被折行 3
box-shadow 向方框新增一個或多個陰影。 3

4.5.3 內邊距Padding屬性

屬性 說明 CSS
padding 在一個宣告中設定所有填充屬性 1
padding-bottom 設定元素的底填充 1
padding-left 設定元素的左填充 1
padding-right 設定元素的右填充 1
padding-top 設定元素的頂部填充 1

4.5.4 外邊距(Margin) 屬性

屬性 說明 CSS
margin 在一個宣告中設定所有外邊距屬性 1
margin-bottom 設定元素的下外邊距 1
margin-left 設定元素的左外邊距 1
margin-right 設定元素的右外邊距 1
margin-top 設定元素的上外邊距 1

4.5.5 position 定位屬性

屬性值

值 描述
absolute 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed 生成固定定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative 生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。
static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
sticky 粘性定位，該定位基於使用者滾動的位置。它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支援 sticky 定位。 Safari 需要使用 -webkit- prefix (檢視以下例項)。
inherit 規定應該從父元素繼承 position 屬性的值。

4.5.6 字型（Font） 屬性

屬性 說明 CSS
font 在一個宣告中設定所有字型屬性 1
font-family 規定文字的字型系列 1
font-size 規定文字的字型尺寸 1
font-style 規定文字的字型樣式 1
font-variant 規定文字的字型樣式 1
font-weight 規定字型的粗細 1
@font-face 一個規則，允許網站下載並使用其他超過"Web- safe"字型的字型 3
font-size-adjust 為元素規定 aspect 值 3
font-stretch 收縮或拉伸當前的字型系列 3

4.5.7 文字（Text） 屬性

屬性 說明 CSS
color 設定文字的顏色 1
direction 規定文字的方向 / 書寫方向 2
letter-spacing 設定字元間距 1
line-height 設定行高 1
text-align 規定文字的水平對齊方式 1
text-decoration 規定新增到文字的裝飾效果 1
text-indent 規定文字塊首行的縮排 1
text-transform 控制文字的大小寫 1
vertical-align 設定元素的垂直對齊方式 1
white-space 設定怎樣給一元素控制元件留白 1
word-spacing 設定單詞間距 1
text-emphasis 向元素的文字應用重點標記以及重點標記的前景色。 1
hanging-punctuation 指定一個標點符號是否可能超出行框 3
punctuation-trim 指定一個標點符號是否要去掉 3
text-align-last 當 text-align 設定為 justify 時，最後一行的對齊方式。 3
text-justify 當 text-align 設定為 justify 時指定分散對齊的方式。 3
text-outline 設定文字的輪廓。 3
text-overflow 指定當文字溢位包含的元素，應該發生什麼 3
text-shadow 為文字新增陰影 3
text-wrap 指定文字換行規則 3
word-break 指定非CJK文字的斷行規則 3
word-wrap 設定瀏覽器是否對過長的單詞進行換行。 3

五、練習題

5.1 開發登入註冊頁面

請參考下面的註冊頁面，模仿開發一個一樣的註冊頁面， 只寫好靜態頁面樣式就行，不需要能真的獲取驗證碼等。

Ps：部分內容來自博主線上課程的教程的檔案內容

相關文章