前端開發(fā)基礎(chǔ)入門--HTML

時間：2023-07-03 17:15:02 | 來源：網(wǎng)站運營

時間：2023-07-03 17:15:02 來源：網(wǎng)站運營

前端開發(fā)基礎(chǔ)入門--HTML：要學(xué)習(xí)前端開發(fā)，首先你要了解一下什么是前端開發(fā)

前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術(shù)、框架、解決方案，來實現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互 。它從網(wǎng)頁制作演變而來，名稱上有很明顯的時代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0時代的產(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)大。

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

那么，了解了這個概念，我們再往下進(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)站廣泛運用。

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




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




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








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

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

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




<font>

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

<font 屬性名=”屬性值”>文字</font>

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

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

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

示例：
<font color="green" size="50" face="宋體">MT苗先生</font>




<br/>

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

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




<p></p>

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

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

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

Right 右

Center 居中

示例：

<p align="center">黃鶴樓送孟浩然之廣陵</p> <p>故人西辭黃鶴樓，</p> <p align="right">煙花三月下杭州。</p> <p>孤帆遠(yuǎn)影碧空盡，</p> <p align="right">唯見長江天際流。</p>效果：

<h1></h1>

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

其中<h1>最大，<h6>最小

示例：

<h1>念奴嬌·赤壁懷古</h1> <h2>念奴嬌·赤壁懷古</h2> <h6>念奴嬌·赤壁懷古</h6>效果：

&nbsp;

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

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




HTML注釋

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

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

格式：<!--HTML注釋內(nèi)容 -->

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




圖片標(biāo)簽

<img/>

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

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

圖片路徑的寫法：

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

絕對路徑 例如：C:/ JavaWeb001_html/img/c_1.jpg

相對路徑 例如：../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è)置的是 width=”400px”。固定設(shè)置方式

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

示例：

<img src="../c_1.jpg" width="600" height="600" /> <img src="../c_2.jpg" width="60%" />


列表標(biāo)簽

<ul></ul>

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

<li></li>

列表條目項標(biāo)簽，用于在效果中定義一個列表的條目

<ol></ol>

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

示例：

<ul> <li>古詩</li> <li>古詞</li> <li>詩歌</li> </ul>效果：

示例：

<ol> <li>古詩</li> <li>古詞</li> <li>詩歌</li> </ol>效果：

超鏈接標(biāo)簽

<a></a>

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

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

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

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

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

超鏈接正常工作：

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

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

示例：

<a herf="http://www.baidu.com/">百度</a> <a herf="demo html">demo</a>注意：

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

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

示例：

<a herf="demo html"> <img src="../img/c_1.jpg" /> </a>示例：

<a herf="../img/c_1.jpg" />鏈接到一張圖片</a>


表格標(biāo)簽

<table></table>

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

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

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

<tr></tr>

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

<td></td>

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

表格的書寫順序：

步驟1：定義一個表格 <table></table>

步驟2：定義表格中的一行 <tr></tr>

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

示例：

<table border="1px"> <tr> <td>姓名</td> <td>年齡</td> </tr> <tr> <td>苗先生</td> <td>18</td> </tr> </table>效果：

<th></th>

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

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

示例：

<table border="1"> <tr> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>苗先生</td> <td>18</td> </tr> </table>效果：

單元格合并

<td>或者<th>都有兩個單元格合并屬性：

colspan：跨列合并單元格

rowspan：跨行合并單元格

合并步驟：

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

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

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

被合并的單元格必須刪掉

示例：

<tr><td conspan="2">1</td><td>3</td><td>4</td></tr>


塊標(biāo)簽

<span></span>

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

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

Span不會自動換行

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

示例：

<span>三生三世</span> <span>十里桃花</span>效果：

<div></div>

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

默認(rèn)占滿一行

會自動換行

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




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