【想啥學啥】小白入門網頁製作（HTML+CSS）

05-11

無聊刷手機APP，不經意間看到粉筆有個視頻教程《1小時教你做出個人網頁》。挺好奇點進去，哈哈，一口氣把課學完了，蠻有收穫~~起碼懂了點HTML和CSS，下次爬網頁也能看得懂網頁源代碼啦。

一、網頁技術簡介

HTML+CSS+JavaScript

本文只涉及到HTML和CSS，難度係數高點兒的JavaScript暫不涉及。

HTML語法

HTML代碼需要寫在標籤符號"<>"裡面。如<h1> </h1>; <img/>;<p> </p>。
HTML標籤成對出現，尾標籤加上關閉符號"/"區分首尾。例外：<img/>單獨出現。
標籤是可以嵌套使用的。

CSS語法

遵循鍵值對規則，基本格式是---k:v。
寫在標籤中的style屬性中。stylex=""

---先把乾巴巴的語法看個大概，接下來會用例子說明---

二、網頁開發工具

很多工具支持寫網頁，即便是最原始的記事本

教程中，用的是最後一個H Builder，我也依樣畫葫蘆下載並安裝好了。

下載網址：http://www.dcloud.io/

下載完成後，點安裝並註冊賬戶即可

一打卡軟體，直接能看到《HBuilder入門》網頁，第一次仔細閱讀下就知道大概了~

三、邊做網頁邊學語法

新建個web項目First Try，會自帶css,img,js三個文件夾以及index.html。

<!DOCTYPE html> ##告訴電腦文檔類型是html<html> ##<html> 與 </html> 標籤限定了文檔的開始點和結束點 <head> ##用於定義文檔的頭部，描述了文檔的各種屬性和信息 <meta charset="utf-8" /> ## utf-8，方便識別中文 <title></title> ## 文檔的標題 </head> <body> </body> ##<body> 與 </body> 之間的文本是可見的頁面內容</html>

------直接po：

第一次做的個人網頁

<div> ##分區<p> ##標籤定義段落##列表<ul> <li> </li></ul>padding left 從左側往裡靠……還有好多要備註，偷懶懶得寫了

一個小時的入門課程聽下來，上手不難，但是想要做複雜點的網頁，還需要學挺多的。我沒打算走前端這個方向，所以也不深入學了。看得懂大致代碼，會爬蟲就成~

文中涉及到的素材：

鏈接：https://pan.baidu.com/s/1tt0lkGW_xH6eiXM_7EST5g 密碼：bwlq