一個真正0基礎小白學習開端開發的心路歷程

摘要：真正的0基礎小白學習前端開發的心路歷程。

距離第一階段的結束敲響了末尾的聲音，抱着初心從開始8號的學習到第一階段的結束這期間要應付期末考試應付本身的各類事情學習時間老是擠出來的此次學習讓我受益不淺呢？廢話很少說上乾貨。

1、第一階段html知識都有啥子？

前言

咱們介紹了什麼是html？w3c？還有html5？以及基礎的計算機網絡知識？

1：web是啥？

WEB的發展歷史:Internet叫作互聯網，美國國防局高級研究計劃局ArpA建設了軍用網叫作‘阿帕網’，於1969年正式啓用。

2： w3c是幹啥的？

W3C的成立 1994年10月 Tim berner3-lee 在麻省理工學院創立了word wide web conscortium 中文爲 萬維網聯盟 聯盟簡稱爲w3c

W3C最重要的工做是發展web規範，描述了web 的通訊協議、好比 html和xhtml

www是word wide web 的縮寫 也能夠寫成w3 中文名萬維網 是集文本、聲音、圖像、視頻等多媒體信息於 一身的全球信息資源網絡，萬維網的呈現形式是Internet。

3：瞭解前端關於網絡的知識以及協議？

網站 Website ，人們能夠經過網站發佈本身想要公開的諮詢或者利用網站提供相關網絡的服務。

網址:在瀏覽器中輸入網站的地址就能夠打開想要訪問的網站，那麼網站的地址咱們稱之爲url 中文名爲統一資源定位符俗稱網址。

url格式:協議://主機地址+目錄路徑+參數

http：超文本傳輸協議 從萬維網服務器傳輸文本到本地瀏覽器的傳輸協議

https實在http基礎上增長的更安全的協議

ftp協議：文件傳輸協議 能夠經過ftp訪問服務器上的文件

file協議 主要用於訪問本地計算機中的文件

2、html的發展史以及基礎標籤？

Html又叫超文本標記語言，用來構建網頁的一種標記語言

Html的歷史：

• 1993年由互聯網工程工做小組 發佈工做草案
• 1995年發佈html2.0版本
• 1997年12月18日由w3c發佈的html3.2版本
• 1999年由w3c發佈html4.01版本
• 2000年由w3c發佈xhtml1。0版本 她是一種嚴格的html代碼

Xhtml時後可擴展的標記語言 是一種更嚴格 純淨的html語言

Html5中新增長了不少語義化標籤 不一樣的html標籤表明了不一樣網頁的內容

什麼是元素？

Html是一系列標籤組成的 每一個標籤以<>包裹的按此 一般稱之爲元素

單標籤：只有一個變遷就能表達完整的含義如：<input/> <img/>

雙標籤：由開始標籤和結束標籤組成<div></div><span></span>

屬性: 標籤能夠有不少屬性 屬性老是在開始標籤中定義 並且是以名值對的形式出現 其中屬性值 是以 雙引號包裹

3、2html的經常使用標籤基本結構都有啥呢？

1:標題：這裏咱們會用到head的縮寫h1到h6表示標籤顯示出來的結果順序是從大到小的結構

2：段落標籤：什麼是段落標籤？用於定義段落的標籤呀！用<p>來表示

這裏要注意：段落標籤用於定義段落 瀏覽器會自動在其先後建立一些空白

文字行數取決於瀏覽器窗口的寬度

那麼問題來了？如何顯示空格呢？html準備了一個專用的空格符 &nbsp來表示

3：塊級區域 div標籤是 division的含義 表明網頁中的塊 因此通常把他叫作塊標籤

4：span標籤是內聯將一個span元素標記在span中這個很是重要不是很瞭解的小夥伴能夠查一下知識點

5：還有一些咱們經常使用的連接 好比如何點擊一個連接跳轉到另外一個界面呢？這裏就能夠實現啦那就是a標籤 anchor的縮寫用於定義網頁的連接

href指向連接的地址，還有一些咱們經常使用的空鏈接void（0）

6：圖片img屬性來定義圖片的方法 他有倆個屬性一個是src表明圖片的地址 alt屬性表明圖片沒法顯示時的代替文本

爲此更加細分會有無序列表和有序列表以及自定義列表狀況：

1：無序列表？使用ul標籤訂義無序列表li標籤訂義列表項無需列標的含義是 先後內容沒有順序

2：有序列表？顧名思義就是每一項都有順序含義 有序列表的前端一般爲字母或數字

3：自定義列表：使用dl標籤訂義自定義列表 dt定義標題 用dd來定義列標項

4、接下來來到了很重要的重中之重表格標籤：

爲啥使用表格標籤表格標籤都有啥子？

在咱們瀏覽網頁時總會看見商品的分類在不一樣的單元中？

好比咱們在買東西時會出現分類華爲手機要什麼型號？什麼顏色？這樣就須要將類品區分開的同時也要在一個手機的類中

表格標籤表示方法：

表格元素：<table>標籤訂義 裏面由若干行和列的單元格組成

在表格元素中 使用<tr>表示表格中的一行 使用<td>表示列

表格能夠定義標題 用<caption>標籤訂義

行？

咱們能夠把一個網頁的總體分爲三部分：head body 和foot 表明一個完成的人/網頁

表格的行 使用<tr>標籤訂義表格的行

Tr 表哎內部用來包含td標籤

例如:

<table>
   <tr>
   <td>單元格</td>
   </tr>
   </table>

<th>會把本身的顏色變化 變粗變黑

咱們也能夠在tr 屬性中設置align來調試單元格顯示的位置等

表單：

使用表單來簡單的設置一個提交的按鈕或者是 重置按鈕 來實現咱們在輸入網頁信息時的一個小程序？你們能夠自主發現！

表單元素：使用form標籤訂義表單，表單有倆個最重要的屬性 action和method action屬性定義了，表單提交的地址，eod 屬性定義了表單提交的方式

表單提交有倆種方式： 一種是get 一種是 post

其餘的表單控件元素 必須放在form標籤的內部

Form action=www.huawei.com  method=’post
Input type =」submit value=」提交
Input type = 「reset vale = 「重置

表單元素：使用form標籤訂義表單，表單有倆個最重要的屬性 action和method action屬性定義了，表單提交的地址，eod 屬性定義了表單提交的方式

表單提交有倆種方式： 一種是get 一種是 post

其餘的表單控件元素 必須放在form標籤的內部

案例：

Form action=www.huawei.com  method=’post
Input type =」submit value=」提交
Input type = 「reset vale = 「重置

表格中的三個屬性？select input textare？

1：input：

表格元素： input是一個單標籤元素 其屬性type表明了input的表單類型 input標籤就是經過tupe屬性的不一樣取值來定義不一樣的表單控件

單本框：能夠輸入一行文本的表單控件

例如: <input type=」text/>

單選按鈕: 具備相同屬性的單選按鈕只能選擇一個

例如:<input type = 「radio/>

多選按鈕: 能夠選中多個的選擇框

例如：<input type = 「checkbox/>

按鈕：

普通按鈕：

例如:<input type =」button」/>

提交按鈕：會觸發將表單數據提交到服務器的功能

<input type =」submit」/>

重置按鈕：會清楚表單中的全部數據 回覆表單中的原始值

<input type =」reset」/>

文件上傳按鈕:用於文件上傳

2：select選擇？如何選中心儀的商品？

Select用來定義列表 option用來定義列表項

示例：

Select name=」course」>
Option value = 「Math」>英語</option
Option value = 「Math」>數學</option
</select>

3：textare來顯示多行的文本域？

<textarea/>用來表示多行文本域

示例： <textarea rows =」5」 col =」10」></textarea>

本文分享自華爲雲社區《0基礎小白如何玩轉前端開發？》，原文做者：一隻無腦程序員 。

點擊關注，第一時間瞭解華爲雲新鮮技術~