要學習前端開發，首先你要了解一下什么是前端開發

前端開發是創建Web頁面或app等前端界面呈現給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互 。它從網頁制作演變而來，名稱上有很明顯的時代特征。在互聯網的演化進程中，網頁制作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。

(資料圖片)

簡單的說就是 前端即網站前臺部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。

那么，了解了這個概念，我們再往下進行

先說一下 HTML 吧

HTML是什么呢，它是一種超文本標記語言。（Hyper Text Markup Language）

是網頁制作所必備的工具。

HTML發展史

1995年HTML2.0正式發布

1996年HTML3.2

1997年HTML4.0

2008年HTML5.0 發布

HTML5是目前最新的HTML規范。截止目前為止，HTML5標準也已經逐漸被各大網站廣泛運用。

HTML5=HTML4+HTML第五代新特性+CSS3+JavaScript

下面，我們寫一個標準文檔

下面我們再來看一下頭部都有什么

標簽還有很多，先了解這幾個就可以了

了解完頭部之后，那么我們就要進行下一項了

HTML內容部分的標簽及屬性（必須記牢）

這是我們這次學習的重點（內容很多哦）

字體標簽，用于展示效果中修飾文字樣式

文字

size:控制字體大小.最小1 ~ 最大7。 如果設置范圍不在1~7之間，設置無效

color：控制字體顏色. 使用英文設置（例如：red,blue…）

face：控制字體類型。只能設置系統字庫中存在的字體類型

示例：MT苗先生

HTML源碼中換行，瀏覽器解析時會自動忽略。

換行標簽，用于展示效果中換行

段落標簽，用于展示效果中劃分段落。并且自動在段前和段后自動加空白行

align:段落內容的對齊方式

默認是left， 內容居左

Right 右

Center 居中

示例：

黃鶴樓送孟浩然之廣陵故人西辭黃鶴樓，煙花三月下揚州。孤帆遠影碧空盡，唯見長江天際流。

效果：

標題標簽，用于展示效果中劃分標題

其中

最大，

最小

示例：

念奴嬌·赤壁懷古念奴嬌·赤壁懷古念奴嬌·赤壁懷古

效果：

HTML源碼中的多個空格，效果中最終會合并成一個。

空格符號，用于展示效果中顯示一個空白的位置

HTML注釋

用于注釋HTML源碼，不在HTML效果中展示。

只能在源碼中看到，頁面展示效果中是沒有

格式：

效果：在HTML效果展示中不會顯示，只能在源碼中看到

圖片標簽

用于在頁面效果中展示一張圖片。

src：指明圖片的路徑。（必有屬性）

圖片路徑的寫法：

內網路徑：

絕對路徑 例如：C: JavaWeb001_htmlimgc_1.jpg

相對路徑 例如：../img/c_1.jpg ../表示上一層目錄 ./表示當前目錄

互聯網路徑：

必須前面加上http://

例如：http://www.baidu.com/xxx.jpg

width：圖片寬度

height：圖片的高度

寬度和高度的設置：

默認單位是px，像素。例如：width=”400” 其實設置的是 width=”400px”。固定設置方式

百分比設置。例如：width=”50%”。 是父標簽的百分比。 動態改變的。

示例：

列表標簽

無序列表標簽，用于在效果中定義一個無序列表

列表條目項標簽，用于在效果中定義一個列表的條目

有序列表標簽，用于在效果中定義一個有序列表

示例：

古詩古詞詩歌

效果：

示例：

古詩古詞詩歌

效果：

超鏈接標簽

超鏈接標簽，用于在效果中定義一個可以點擊跳轉的鏈接

href：超鏈接跳轉的路徑 (必有屬性)

內網本機路徑：相對路徑和絕對路徑

互聯網路徑：http://地址

本頁：默認跳轉到本頁

超鏈接正常工作：

①a標簽中必須有內容

②a標簽必須有href屬性

示例：

百度  demo

注意：

①a標簽內容體，不僅僅是文字，也可以是其他內容，例如圖片

②a標簽的href屬性，不僅僅可以鏈接到html上，也可以鏈接到其他文件上，例如圖片

示例：

示例：

鏈接到一張圖片

表格標簽

表格標簽，用于在效果中定義一個表格

border：設置表格的邊框粗細

width：設置表格的寬度

表格的行標簽，用于在效果中定義一個表格行

表格的單元格標簽，用于在效果中定義一個表格行中的單元格

表格的書寫順序：

步驟1：定義一個表格

步驟2：定義表格中的一行

步驟3：在表格一行中定義單元格 內容就可以寫在單元格中

示例：

姓名年齡苗先生18

效果：

表格的表頭單元格標簽，用于在效果中定義一個表格行中的表頭單元格

和唯一區別：內容 居中加粗

示例：

姓名年齡苗先生18

效果：

單元格合并

或者都有兩個單元格合并屬性：

colspan：跨列合并單元格

rowspan：跨行合并單元格

合并步驟：

確定合并哪幾個單元格，確定是跨列合并還是跨行合并

在第一個出現的單元格上書寫 合并單元格屬性

合并幾個單元格，屬性值就書寫幾

被合并的單元格必須刪掉

示例：

134

塊標簽

行級的塊標簽，用于在效果中 一行上定義一個塊，進行內容顯示。

span有多少內容，就會占用多大空間。

Span不會自動換行

適用于少量數據展示

示例：

三生三世  十里桃花

效果：

塊級的塊標簽，用于在效果中 定義一塊，默認占滿一行，進行內容的顯示

默認占滿一行

會自動換行

適用于大量數據展示

呼，先記這些，下期我們來了解如何靈活使用這些標簽