要學(xué)習(xí)前端開發(fā)，首先你要了解一下什么是前端開發(fā)

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

(資料圖片)

簡(jiǎn)單的說就是 前端即網(wǎng)站前臺(tái)部分，運(yùn)行在PC端，移動(dòng)端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。

那么，了解了這個(gè)概念，我們?cè)偻逻M(jìn)行

先說一下 HTML 吧

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

是網(wǎng)頁制作所必備的工具。

HTML發(fā)展史

1995年HTML2.0正式發(fā)布

1996年HTML3.2

1997年HTML4.0

2008年HTML5.0 發(fā)布

HTML5是目前最新的HTML規(guī)范。截止目前為止，HTML5標(biāo)準(zhǔn)也已經(jīng)逐漸被各大網(wǎng)站廣泛運(yùn)用。

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

下面，我們寫一個(gè)標(biāo)準(zhǔn)文檔

下面我們?cè)賮砜匆幌骂^部都有什么

標(biāo)簽還有很多，先了解這幾個(gè)就可以了

了解完頭部之后，那么我們就要進(jìn)行下一項(xiàng)了

HTML內(nèi)容部分的標(biāo)簽及屬性（必須記牢）

這是我們這次學(xué)習(xí)的重點(diǎn)（內(nèi)容很多哦）

字體標(biāo)簽，用于展示效果中修飾文字樣式

文字

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

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

face：控制字體類型。只能設(shè)置系統(tǒng)字庫中存在的字體類型

示例：MT苗先生

HTML源碼中換行，瀏覽器解析時(shí)會(huì)自動(dòng)忽略。

換行標(biāo)簽，用于展示效果中換行

段落標(biāo)簽，用于展示效果中劃分段落。并且自動(dòng)在段前和段后自動(dòng)加空白行

align:段落內(nèi)容的對(duì)齊方式

默認(rèn)是left， 內(nèi)容居左

Right 右

Center 居中

示例：

黃鶴樓送孟浩然之廣陵故人西辭黃鶴樓，煙花三月下?lián)P州。孤帆遠(yuǎn)影碧空盡，唯見長(zhǎng)江天際流。

效果：

標(biāo)題標(biāo)簽，用于展示效果中劃分標(biāo)題

其中

最大，

最小

示例：

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

效果：

HTML源碼中的多個(gè)空格，效果中最終會(huì)合并成一個(gè)。

空格符號(hào)，用于展示效果中顯示一個(gè)空白的位置

HTML注釋

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

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

格式：

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

圖片標(biāo)簽

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

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

圖片路徑的寫法：

內(nèi)網(wǎng)路徑：

絕對(duì)路徑 例如：C: JavaWeb001_htmlimgc_1.jpg

相對(duì)路徑 例如：../img/c_1.jpg ../表示上一層目錄 ./表示當(dāng)前目錄

互聯(lián)網(wǎng)路徑：

必須前面加上http://

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

width：圖片寬度

height：圖片的高度

寬度和高度的設(shè)置：

默認(rèn)單位是px，像素。例如：width=”400” 其實(shí)設(shè)置的是 width=”400px”。固定設(shè)置方式

百分比設(shè)置。例如：width=”50%”。 是父標(biāo)簽的百分比。 動(dòng)態(tài)改變的。

示例：

列表標(biāo)簽

無序列表標(biāo)簽，用于在效果中定義一個(gè)無序列表

列表?xiàng)l目項(xiàng)標(biāo)簽，用于在效果中定義一個(gè)列表的條目

有序列表標(biāo)簽，用于在效果中定義一個(gè)有序列表

示例：

古詩古詞詩歌

效果：

示例：

古詩古詞詩歌

效果：

超鏈接標(biāo)簽

超鏈接標(biāo)簽，用于在效果中定義一個(gè)可以點(diǎn)擊跳轉(zhuǎn)的鏈接

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

內(nèi)網(wǎng)本機(jī)路徑：相對(duì)路徑和絕對(duì)路徑

互聯(lián)網(wǎng)路徑：http://地址

本頁：默認(rèn)跳轉(zhuǎn)到本頁

超鏈接正常工作：

①a標(biāo)簽中必須有內(nèi)容

②a標(biāo)簽必須有href屬性

示例：

百度  demo

注意：

①a標(biāo)簽內(nèi)容體，不僅僅是文字，也可以是其他內(nèi)容，例如圖片

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

示例：

示例：

鏈接到一張圖片

表格標(biāo)簽

表格標(biāo)簽，用于在效果中定義一個(gè)表格

border：設(shè)置表格的邊框粗細(xì)

width：設(shè)置表格的寬度

表格的行標(biāo)簽，用于在效果中定義一個(gè)表格行

表格的單元格標(biāo)簽，用于在效果中定義一個(gè)表格行中的單元格

表格的書寫順序：

步驟1：定義一個(gè)表格

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

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

示例：

姓名年齡苗先生18

效果：

表格的表頭單元格標(biāo)簽，用于在效果中定義一個(gè)表格行中的表頭單元格

和唯一區(qū)別：內(nèi)容 居中加粗

示例：

姓名年齡苗先生18

效果：

單元格合并

或者都有兩個(gè)單元格合并屬性：

colspan：跨列合并單元格

rowspan：跨行合并單元格

合并步驟：

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

在第一個(gè)出現(xiàn)的單元格上書寫 合并單元格屬性

合并幾個(gè)單元格，屬性值就書寫幾

被合并的單元格必須刪掉

示例：

134

塊標(biāo)簽

行級(jí)的塊標(biāo)簽，用于在效果中 一行上定義一個(gè)塊，進(jìn)行內(nèi)容顯示。

span有多少內(nèi)容，就會(huì)占用多大空間。

Span不會(huì)自動(dòng)換行

適用于少量數(shù)據(jù)展示

示例：

三生三世  十里桃花

效果：

塊級(jí)的塊標(biāo)簽，用于在效果中 定義一塊，默認(rèn)占滿一行，進(jìn)行內(nèi)容的顯示

默認(rèn)占滿一行

會(huì)自動(dòng)換行

適用于大量數(shù)據(jù)展示

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