HTML序章（學習目的、對象、基本概念）-零基礎自學網頁制作

什么學習網頁制作？

互聯網時代的今天，各種各樣的網頁充斥著我們的生活。只要使用瀏覽器，打開的每一個頁面都可以稱之為網頁。即使使用頭條這樣的APP，其內容布局、展示的方法也脫胎于網頁頁面設計的方法與原則。可以說頁面的概念已經遍布我們的信息化世界。

作為蕓蕓眾生中的一員，學習網頁制作對我們的事業、生活有怎樣的幫助呢？

第一，學習網頁制作有助于理解網絡信息的傳播運行機制，即使通過本課程不能全面了解這些核心機制，也能為大家鋪墊下繼續深入學習的知識基礎。即使自己不必親自制作網頁，在使用第三方工具時，比如微信公眾號、微信小程序或者其他自動網頁或網站生成工具時也會比沒有基礎的人更快的掌握這些工具。

第二，學好網頁制作是制作網站的基礎，如果您因為事業需要或者個人愛好打算制作自己的網站或博客，無論是打算使用php還是Java還是Python去構建您的網站，精通網頁制作技術是您的第一塊技術基石。

第三，如果您打算學習網絡爬蟲來分析一些網絡數據，了解網頁頁面構成也是必要基礎，至少您要知道一個網頁頁面中每個標簽中對應的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想學習編程，但是缺少相應的基礎知識，看不懂復雜的C語言教學，那么從網頁制作入手嘗試理解編程的語法也是一個很不錯的選擇。

除此之外，瀏覽器可以做的事情越來越多，比如webgl的出現，可以讓我們通過瀏覽器構建3d世界，無論是虛擬現實（VR）還是增強現實（AR）都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現，讓我們可以通過結合瀏覽器學習使用人工智能技術，且非常容易實現。

所以，新的一年里，我打算做網頁制作的學習教程，讓更多沒有基礎卻對網絡技術感興趣的小伙伴能加入進來。

制作網頁需要學習哪些技術？

簡單來說學習網頁制作需要掌握三門技術。

第一，也是最基礎最核心的內容是HTML超文本標記語言。大家不必糾結HTML到底是什么，但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想，網頁里都有哪些內容呢？

一般網頁中都會有文字、圖片、聲音、視頻、表格等內容，這些內容就是靠HTML中的標簽添加進頁面的。

所以說HTML這個工具就是個容器，我們使用HTML標簽語言為網頁添加所有需要的信息內容。

第二，CSS層疊樣式表，這是一個用來裝飾頁面的工具。如果說HTML是個信息容器，那么如何讓這些信息條理清晰的顯示出來呢？那就需要CSS來幫忙了。如下圖所示，這是一個最簡單的頁面，只用到了HTML，里面裝了一個標題和一個只有六個字的段落。

為了讓這個頁面看起來美觀些，我們為其添加css樣式表。添加后如圖所示：

我們可以看出來，CSS讓標題文字換了顏色，也居中顯示了，背景也變成了藍色。

第三，JavaScript，這個工具相比HTML和CSS來講是最難學習的，學習JavaScript就是在學習編程了。它雖然只是個腳本語言，但是用到的知識和其他編程語言相差不大。

那JavaScript能干什么呢？

首先，它能為頁面中添加很多交互效果。舉個例子，我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現的。

其次，JavaScript可以為傳統頁面擴展出很多新功能，例如結合three.js我們可以很容易的在頁面中構建三維空間，或者實現一些3d游戲或其他三維動態演示效果。舉個例子（https://renaultespace.littleworkshop.fr/），打開可能略慢。3d展示的汽車廣告是不是很酷！

再次，JavaScript可以以網頁為基礎，實現各種各樣的在線小游戲，例如Phaser.js就是目前非常火的一個開源免費網頁游戲制作庫。phaser官網：http://phaser.io/

JavaScript為網頁的功能拓展提供了很多可能性，無論是3d顯示還是游戲制作還是未來的人工智能工具，都是由JavaScript都為大家提供了將功能引入到頁面的接口，這也是學習難度比較大的原因。不過只要堅持下去一定能學通的！

網站與網頁的區別？

網頁是指我們看到的單個頁面。這些頁面分為靜態頁面和動態頁面兩種。靜態頁面指的是不能與服務器進行數據交互的頁面，顧名思義動態頁面指的是可以與服務器進行數據交互的頁面，這一點大家不必糾結。

簡單來說，靜態頁面寫好后什么樣就是什么樣，誰打開都是事先編輯好的內容，而動態頁面寫好后會隨著不同的訪問變換不同數據，動態頁面更像是一個頁面模板，隨時套用不同信息。

大部分網站中的頁面都是動態頁面。

如果使用靜態頁面做網站會出現什么問題呢？如果您有300篇博客文章，那您就要做300個靜態頁面來顯示，大型資訊網站信息量更加龐大，如果都用靜態頁面來做，占用的服務器空間也是龐大到不可想象。

網站中的動態頁面就解決了這個問題，例如一個簡單的網站我們只需一個主頁、文章頁、搜索頁基本上就可以了，這些頁面中沒有具體內容，我們稱之為模板。當您打開后，顯示的內容都是在數據庫中調出的。這樣，一個數據庫用來存儲壓縮過的精簡信息，這些信息通過不同頁面模板顯示在用戶面前就成為網站的基本運行模式。

例如在靜態頁面中顯示文字字數的代碼是這樣

<p>300字</p>

如果使用以php編寫的WordPress網站框架來動態顯示文章字數就是這樣

<p><?php echo zm_count_words($text); ?></p>

<?php echo zm_count_words($text); ?>這條語句可以調取數據庫中文章字數的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字數了。

無論是靜態頁面還是動態頁面，他們的核心內容都是一樣的，HTML，CSS，JavaScript都是必修知識。只是靜態頁面在HTML中插入信息，而動態頁面插入的是調取數據庫信息的語句。

因此，我們這個教程看起來是在做靜態頁面，但是我們學習的也是制作網站的基礎知識。

本教學學完能干什么？

第一，可以寫出靜態頁面。

第二，有能力讀懂他人寫好的頁面代碼。

第三，為繼續深入學習網站制作或更為炫酷的頁面制作打下基礎。

第四，掌握編程基礎，至少是基于JavaScript的。

我是大魚，致力于數字藝術技術分享！歡迎大家關注！祝愿大家2020年學有所成！

HTML學習目錄

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

shenlan-ui (UI根目錄)
|--src (核心樣式代碼)
| |--shenlan-ui.css (UI的主樣式文件)
| |--common.css (公共樣式文件)
| |--reset.css (CSS-Reset文件)
| |--layout.css (組件文件：圖標樣式)
| |--... (其他組件文件)
|
|--demo (演示文件目錄)
|--layout.html (布局樣式文件)
|--... (其他組件的樣式文件)

rc/reset.css

/*
* @Author: xutao
* @Date: 2019-04-12 10:06:29
* @Last Modified by: xutao
* @Last Modified time: 2019-04-29 16:37:40
*/
/* 去掉所有元素的內外邊距 */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, img, ul, li, form, label, input,
table, tbody, tfoot, thead, tr, th, td,
audio, video {
margin: 0;
padding: 0;
}
/* 統一全局字體 */
body {
font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif
}
/* 列表元素去掉默認的列表樣式 */
ol, ul {
list-style: none;
}
/* Table元素的邊框折疊 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 去掉默認的下劃線 */
a{
text-decoration: none;
}
/* 去掉input自帶的邊緣效果和背景顏色 */
input{
outline: none;
background: none;
}

/src/common.css

1 區分屏幕寬度的方式

/* 屏幕寬度小于340px時的樣式 */
@media (max-width: 340px){ /* 樣式1 */ }
/* 屏幕寬度在340px至410px時的樣式 */
@media (min-width: 340px) and (max-width: 410px){ /* 樣式2 */ }
/* 屏幕寬度大于410px時的樣式 */
@media (min-width: 410px){ /* 樣式3 */ }

精簡樣式:

/* 屏幕寬度在340px至410px時的樣式 */
/* 樣式2 */
/* 屏幕寬度小于340px時的樣式 */
@media (max-width: 340px){ /* 樣式1 */ }
/* 屏幕寬度大于410px時的樣式 */
@media (min-width: 410px){ /* 樣式3 */ }

這樣屏幕適配的框架就完成了

2 元素尺寸的指定

/* 屏幕寬度在340px至410px時，基準尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕寬度小于340px時，基準尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕寬度大于410px時，基準尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}

3 按比例劃分屏幕

最終common.css樣式

/*
* @Author: xutao
* @Date: 2019-06-20 22:16:01
* @Last Modified by: xutao
* @Last Modified time: 2019-06-20 23:03:17
*/

/* 屏幕寬度在340px至410px時，基準尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕寬度小于340px時，基準尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕寬度大于410px時，基準尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}

src/shenlan-ui.css

目前, 我們只有/src/reset.css和/src/common.css這兩個文件, 所以集成的時候只需要把這兩個文件引入即可。

x0列表的類型

定義列表 dl

無序列表 ul

目錄列表 dir

菜單列表 menu

有序列表 ol

例子：<dt>名稱部分<dd>解釋說明，兩個都在<dl>里面

插入無序列表<ul>

例子：<ul>之間使用<li></li>標記列表項值

插入目錄列表<dir>

效果跟<ul>那個是一樣的。

插入菜單列表<menu>:

插入有序列表<ol>

列表的主要操作就講到這里。是不是很簡單呢？？

在線咨詢

上一篇：Chrono.js：Javascript 中的日期 NLP 庫
下一篇：Vue3問題：如何實現el-tree樹的單選？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。