家好，今天給大家介紹一款，文字旋轉(zhuǎn)跳動(dòng)動(dòng)畫(huà)特效html頁(yè)面前端源碼，可自定義內(nèi)容 （圖1）。送給大家哦，獲取方式在本文末尾。

特效炫酷（圖2）

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）

本源碼編碼：10167，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10167，即可獲取。

就愛(ài)UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴

據(jù)地圖平臺(tái)是字節(jié)跳動(dòng)內(nèi)部的大數(shù)據(jù)檢索平臺(tái)，每天近萬(wàn)的字節(jié)員工在此查找所需數(shù)據(jù)。數(shù)據(jù)地圖通過(guò)提供便捷的找數(shù)，理解數(shù)服務(wù)，大大節(jié)省了內(nèi)部數(shù)據(jù)的溝通和建設(shè)成本。

數(shù)據(jù)血緣圖譜介紹

字節(jié)的數(shù)據(jù)可分為端數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)，這些記錄往往需要通過(guò)加工處理才能產(chǎn)生業(yè)務(wù)價(jià)值。數(shù)據(jù)加工處理的流程一般是讀取原始數(shù)據(jù)，進(jìn)行數(shù)據(jù)清洗，再經(jīng)過(guò)多種計(jì)算和存儲(chǔ)，最終匯入指標(biāo)、報(bào)表和數(shù)據(jù)服務(wù)系統(tǒng)。數(shù)據(jù)血緣描述了數(shù)據(jù)的來(lái)源和去向，以及數(shù)據(jù)在多個(gè)處理過(guò)程中的轉(zhuǎn)換，是組織內(nèi)使數(shù)據(jù)發(fā)揮價(jià)值的重要基礎(chǔ)能力。

數(shù)據(jù)地圖平臺(tái)在 2021 年接入了全鏈路核心元數(shù)據(jù)，包括但不限于：Hive、Clickhouse、Kafka、BI 報(bào)表、BI 數(shù)據(jù)集、畫(huà)像、埋點(diǎn)、MySQL、Abase。這些數(shù)據(jù)全部要通過(guò)數(shù)據(jù)血緣連接起來(lái)，進(jìn)而可以進(jìn)行影響分析、內(nèi)部審計(jì)、SLA 保障、歸因分析、理解和查找數(shù)據(jù)、自動(dòng)化推薦等操作。

隨著內(nèi)部數(shù)據(jù)不斷膨脹，簡(jiǎn)單的數(shù)據(jù)血緣圖譜已經(jīng)無(wú)法滿足萬(wàn)級(jí)表血緣的關(guān)系展示。一些突出的問(wèn)題包括看不清單個(gè)表的直接上下游，看不清數(shù)據(jù)鏈路，整體情況等等。因此需要重構(gòu)一種更清晰、靈活、便利的方式。下圖簡(jiǎn)單展示了優(yōu)化后的使用效果。

在新版血緣圖譜中，我們可以直接清晰的看到每個(gè)表的多層上下游依賴關(guān)系，甚至可以直接看到一些特殊場(chǎng)景下用戶關(guān)注的表屬性，通過(guò)點(diǎn)擊節(jié)點(diǎn)高亮查看數(shù)據(jù)鏈路，更可以看清每層的統(tǒng)計(jì)信息。在下文中我們將詳細(xì)拆解優(yōu)化的全過(guò)程。

需求發(fā)現(xiàn)

要做出一個(gè)能滿足用戶需求的圖產(chǎn)品，首先是要清楚用戶想從圖中獲取什么信息，從而有針對(duì)性的將這些信息展示出來(lái)。從血緣圖譜的背景本身可以推斷出用戶希望在圖譜中查看表之間的關(guān)系，查看關(guān)系鏈路，而更多的使用場(chǎng)景待發(fā)掘。因此我們對(duì)內(nèi)部重度用戶進(jìn)行了訪談，整理得出了以下不同用戶角色使用數(shù)據(jù)血緣圖譜的用戶場(chǎng)景。

結(jié)合訪談結(jié)果和用戶的日常反饋，數(shù)據(jù)血緣圖譜的場(chǎng)景按目前用戶的使用頻率從大到小排序依次為：

抽象出幾個(gè)主要需求即為：

1. 表血緣關(guān)系查看：能從圖中清楚的瀏覽用戶關(guān)注的表的上下游血緣關(guān)系，最好還能便捷的查看一些場(chǎng)景相關(guān)的表屬性。
2. 表血緣鏈路查看：能清晰的查看到某個(gè)上游/下游表到用戶關(guān)注表的鏈路情況。
3. 按關(guān)鍵指標(biāo)分組查看：例如當(dāng)表數(shù)據(jù)發(fā)生變更時(shí)，分組查看所有下游表的負(fù)責(zé)人以便通知變更。
4. 篩選關(guān)鍵信息查看：例如用戶找數(shù)據(jù)指標(biāo)的時(shí)候，僅看相關(guān)的報(bào)表更高效。

問(wèn)題分析

其實(shí)上述需求舊版血緣圖譜都有一定程度上的滿足，我們需要去找出舊版血緣圖譜提供的功能為什么不滿足用戶需求，有哪些問(wèn)題需要在新版中注意避免。

• 概覽：在數(shù)據(jù)量較小的情況下可用，在數(shù)據(jù)量大的時(shí)候完全不可用。看不清每層有多少個(gè)節(jié)點(diǎn)，層級(jí)關(guān)系是怎么樣的，且鏈路查看困難。

• 舊版血緣圖譜中功能細(xì)節(jié)粗糙：
• 用戶無(wú)法直觀的區(qū)分節(jié)點(diǎn)：舊版節(jié)點(diǎn)上顯示了表類型、庫(kù)名、表名。因此表名只能顯示幾個(gè)字符，不具備辨識(shí)度。
• 無(wú)法知曉表到表之間的任務(wù)：舊版血緣圖譜僅在側(cè)邊欄列出了與當(dāng)前表相關(guān)的任務(wù)有哪些并未列出加工邏輯的對(duì)應(yīng)關(guān)系，歸因分析困難。
• 分組結(jié)構(gòu)不清晰：舊版是在原圖中框出節(jié)點(diǎn)來(lái)展示分組的。一方面是空間利用率更低，另一方面是看節(jié)點(diǎn)時(shí)難定位到所屬分組，看分組時(shí)則無(wú)法看清包含的節(jié)點(diǎn)。
• 篩選功能不直觀：符合篩選條件的節(jié)點(diǎn)高亮展示，而被篩掉的表仍在圖中，無(wú)法有效提升用戶瀏覽效率。

方案設(shè)計(jì)

用戶在使用過(guò)程中看重的是查看關(guān)系的效率和屬性的完備度，因此在設(shè)計(jì)優(yōu)化方案時(shí)會(huì)盡量從這兩點(diǎn)出發(fā)去考慮。

首先是表數(shù)據(jù)查看的效率問(wèn)題。看不清表名，無(wú)法區(qū)分相同前綴的表是用戶痛點(diǎn)之一。首先我們統(tǒng)計(jì)了現(xiàn)有表的平均字符數(shù)是 47 位，于是調(diào)寬了節(jié)點(diǎn)讓用戶能更直觀的區(qū)分表名。用數(shù)據(jù)地圖平臺(tái)中通用的類型圖表來(lái)代替色塊圖例，讓數(shù)據(jù)類型一目了然。

其次對(duì)于數(shù)據(jù)量大時(shí)看不清數(shù)據(jù)關(guān)系的問(wèn)題，我們需要一個(gè)更緊湊清晰的數(shù)據(jù)呈現(xiàn)方式。通過(guò)需求分析和用戶調(diào)研，我們了解到用戶關(guān)心的是節(jié)點(diǎn)所在層級(jí)和節(jié)點(diǎn)之間的聯(lián)系。對(duì)于同一層級(jí)節(jié)點(diǎn)的先后順序，次層級(jí)節(jié)點(diǎn)之間的關(guān)系不是很看重。

說(shuō)到緊湊的布局方式，自然而然我們就想到了列表。如果能用一個(gè)列表來(lái)承載層級(jí)血緣的節(jié)點(diǎn)，用連線來(lái)連接不同層級(jí)的節(jié)點(diǎn)，那么久可以表達(dá)節(jié)點(diǎn)之間的血緣關(guān)系了。當(dāng)節(jié)點(diǎn)較多超出一屏?xí)r可以拖動(dòng)此列滾動(dòng)條來(lái)查看更多節(jié)點(diǎn)，連線隨之刷新位置。當(dāng)層級(jí)不滿一屏?xí)r整體居中展示，層級(jí)過(guò)多超過(guò)一屏?xí)r可以左右滑動(dòng)查看。這樣在保留層級(jí)結(jié)構(gòu)信息的同時(shí)最大程度的利用了可視區(qū)域，展示出了盡可能多的數(shù)據(jù)。

新版血緣圖譜支持了點(diǎn)擊任意節(jié)點(diǎn)則高亮該節(jié)點(diǎn)到主節(jié)點(diǎn)的鏈路功能。配合列滾動(dòng)和連線刷新，不管數(shù)據(jù)量多大總能看清一整條數(shù)據(jù)鏈路。

我們還在每列列表頂部增加了層級(jí)信息和節(jié)點(diǎn)統(tǒng)計(jì)，讓用戶能同時(shí)查看每個(gè)節(jié)點(diǎn)細(xì)節(jié)和節(jié)點(diǎn)的整體分布。最終實(shí)現(xiàn)效果如下圖：

當(dāng)用戶想去找數(shù)，理解數(shù)或做歸因分析時(shí)，不僅要了解一個(gè)表的上游依賴，更需要理解表的加工邏輯。因此我們?cè)诠?jié)點(diǎn)的連線上新增了任務(wù)信息。當(dāng)用戶 hover 到連線上后，連線會(huì)加粗高亮并彈出任務(wù)信息。我們還附上了大數(shù)據(jù)開(kāi)發(fā)平臺(tái)的對(duì)應(yīng)任務(wù)鏈接，點(diǎn)擊鏈接即可跳轉(zhuǎn)到新頁(yè)面查看任務(wù)邏輯詳情。

在設(shè)計(jì)分組功能時(shí)，采用了每列獨(dú)立分組的方式。一般認(rèn)為用戶會(huì)關(guān)注有對(duì)應(yīng)分組數(shù)據(jù)的節(jié)點(diǎn)，因此總將有分組的數(shù)據(jù)放在上面，無(wú)分組數(shù)據(jù)的置底，這樣排序能提升用戶的瀏覽效率。

舊版血緣圖譜的篩選功能是在前端處理的，由于一些性能限制導(dǎo)致篩選后只能顯示部分?jǐn)?shù)據(jù)，用戶無(wú)法得知符合條件的節(jié)點(diǎn)是否已經(jīng)全部展示。新版血緣圖譜針對(duì)這個(gè)用戶痛點(diǎn)，將前端篩選改為了服務(wù)端篩選，盡量展示全符合要求的數(shù)據(jù)。每個(gè)層級(jí)的頂欄對(duì)應(yīng)更新為篩選后的統(tǒng)計(jì)信息。同時(shí)更新連線，如果篩選后節(jié)點(diǎn)之間是有關(guān)聯(lián)的，也會(huì)展示關(guān)聯(lián)關(guān)系和高亮關(guān)系鏈路。

不同職能的用戶在不同場(chǎng)景下使用血緣圖譜時(shí)關(guān)注的節(jié)點(diǎn)屬性并不相同，如果血緣圖譜可以直接在圖上顯示用戶當(dāng)前想關(guān)注的表屬性就能幫助用戶更高效的解決問(wèn)題。于是我們?cè)谘増D譜上設(shè)計(jì)了屬性展示功能，用戶可以勾選自己感興趣的屬性直接顯示到圖中。比如下圖中展示了每個(gè)節(jié)點(diǎn)表熱度和生命周期兩個(gè)屬性。

技術(shù)實(shí)現(xiàn)

技術(shù)選型

在編碼實(shí)現(xiàn)之前，我們需要進(jìn)行技術(shù)選型。好的選型往往能讓編碼事半功倍。在做技術(shù)選型時(shí)，我們會(huì)主要考慮實(shí)現(xiàn)復(fù)雜度、研發(fā)周期、可擴(kuò)展性三個(gè)角度。分析整個(gè)血緣圖譜的需求：

1. Canvas 實(shí)現(xiàn)滾動(dòng)條，節(jié)點(diǎn)文字標(biāo)簽混排很復(fù)雜，要達(dá)到 HTML 的美觀度需要大量調(diào)試，后續(xù)迭代要新增屬性標(biāo)簽，進(jìn)行流式布局會(huì)很頭痛。開(kāi)放組件給別的產(chǎn)品復(fù)用也有很大的定制成本。而這些問(wèn)題使用 React 框架渲染就可以輕松解決。
2. 如果用 DOM 實(shí)現(xiàn)不但很難實(shí)現(xiàn)箭頭，在連線高亮?xí)r也很難靈活處理層疊關(guān)系。在大數(shù)據(jù)量下連線很多，還容易出現(xiàn)性能問(wèn)題。而這是 Canvas 的優(yōu)勢(shì)。

于是我們結(jié)合兩者之長(zhǎng)，選用了 React + Canvas 的混合模式來(lái)實(shí)現(xiàn)血緣圖譜。Canvas 居于底部，僅負(fù)責(zé)畫(huà)連線。React 在上層負(fù)責(zé)渲染節(jié)點(diǎn)響應(yīng) hover 等交互。DOM 層疊關(guān)系如下：

整個(gè)血緣圖譜的初始化流程如下：

• 數(shù)據(jù)預(yù)處理：服務(wù)端給到點(diǎn)邊結(jié)構(gòu)的數(shù)據(jù)。由于兩個(gè)節(jié)點(diǎn)之間可能存在多個(gè)任務(wù)，對(duì)應(yīng)會(huì)有多條連線記錄。而血緣圖譜中相同兩個(gè)節(jié)點(diǎn)之間僅一條連線，對(duì)應(yīng)多個(gè)任務(wù)。先做連線的合并處理。
• 計(jì)算節(jié)點(diǎn)層級(jí)：服務(wù)端會(huì)給到點(diǎn)邊結(jié)構(gòu)的數(shù)據(jù)，根據(jù)主節(jié)點(diǎn)的連線關(guān)系向來(lái)源和去向兩個(gè)方向做廣度遍歷來(lái)確定每個(gè)節(jié)點(diǎn)的層級(jí)。
• 數(shù)據(jù)分組：按分組條件對(duì)每列數(shù)據(jù)進(jìn)行分組計(jì)算。
• 節(jié)點(diǎn)布局：根據(jù)層級(jí)和分組情況布局節(jié)點(diǎn)，相對(duì)應(yīng)的每個(gè)節(jié)點(diǎn)有 { x, y, width, height 屬性以確定每個(gè)節(jié)點(diǎn)的定位。
• 初始化畫(huà)布：畫(huà)布用于繪制連線，響應(yīng)連線的交互。采用內(nèi)部自研的圖形渲染引擎實(shí)現(xiàn)。
• 渲染節(jié)點(diǎn)：根據(jù)節(jié)點(diǎn)的位置和分組情況用 React 渲染出每一列節(jié)點(diǎn) DOM。
• 渲染畫(huà)布：根據(jù)前景的列和節(jié)點(diǎn)位置調(diào)整畫(huà)布，繪制連線。在渲染連線時(shí)分兩個(gè)圖層：默認(rèn)狀態(tài)連線在底層；高亮鏈路和高亮連線狀態(tài)下的連線在上層。這樣做的好處是高亮的連線永遠(yuǎn)在默認(rèn)狀態(tài)的上方，不用特殊處理圖形的層疊關(guān)系。

實(shí)現(xiàn)細(xì)節(jié)

用這種混合模式的一個(gè)挑戰(zhàn)就是 Canvas 和 DOM 的刷新率和同步率。在血緣圖譜中滾動(dòng)橫向滾動(dòng)條和每一列的縱向滾動(dòng)條時(shí) Canvas 要進(jìn)行及時(shí)的刷新以保證連線和節(jié)點(diǎn)的相對(duì)位置一定。

• 當(dāng)圖譜橫向滾動(dòng)時(shí)，每條連線的斜率不變，只是端點(diǎn)左右平移了。我們可以通過(guò)更新繪圖矩陣來(lái)加速這種情況下的更新，不需要去重計(jì)算每條連線的位置。具體做法是監(jiān)聽(tīng)容器的滾動(dòng)事件，根據(jù)容器的 scrollLeft 屬性來(lái)更新繪圖矩陣后重繪。
• 當(dāng)圖譜縱向滾動(dòng)時(shí)，與當(dāng)前滾動(dòng)的列中節(jié)點(diǎn)相連的連線斜率和端點(diǎn)都有變化，而與滾動(dòng)列不直接相連的連線無(wú)需更新。我們僅重計(jì)算并更新與當(dāng)前列連接的線條位置。

另一個(gè)挑戰(zhàn)是 DOM 節(jié)點(diǎn)在大數(shù)據(jù)量下的性能問(wèn)題。通常情況下我們認(rèn)為 Canvas 在大數(shù)據(jù)量渲染有更好的性能，而萬(wàn)級(jí)的 DOM 節(jié)點(diǎn)就會(huì)讓用戶在使用中感受到卡頓了。這時(shí)候我們想到了按需渲染。 用戶在圖譜可視區(qū)域中一屏能看到的節(jié)點(diǎn)數(shù)量是有限的，高度為 1120 的容器中，一列僅存在至多 30 個(gè)節(jié)點(diǎn)。如果僅渲染可見(jiàn)的節(jié)點(diǎn)，則能保證使用過(guò)程的流暢。具體做法是在節(jié)點(diǎn)布局時(shí)增加以下步驟：

• 根據(jù)視口的位置（主要是圖容器的橫向滾動(dòng)距離 scrollLeft ）和每一列的滾動(dòng)距離（主要是每一列容器的縱向滾動(dòng)距離 scrollTop ）計(jì)算目前的可視范圍。
• 計(jì)算節(jié)點(diǎn)坐標(biāo)時(shí)判斷是否在可視范圍的上半屏和下半屏內(nèi)，如果在此范圍內(nèi)則打標(biāo)。多顯示一屏的節(jié)點(diǎn)是希望在用戶上下滾動(dòng)瀏覽節(jié)點(diǎn)時(shí)不會(huì)出現(xiàn)空白區(qū)域閃一下等體驗(yàn)不佳的問(wèn)題。
• 計(jì)算出每一列的真實(shí)長(zhǎng)度。

在 React 渲染時(shí)更新每列容器的長(zhǎng)度，將節(jié)點(diǎn)根據(jù)坐標(biāo)絕對(duì)定位到正確的位置上。看起來(lái)就跟全量渲染的效果一致，渲染效率大幅提升。

然而問(wèn)題并不止于此。在進(jìn)行大數(shù)據(jù)量的縱向滾動(dòng)時(shí)，會(huì)發(fā)現(xiàn)幀率很低，交互還是不流暢。分析得知是由于列表滾動(dòng)時(shí)會(huì)在短時(shí)間內(nèi)進(jìn)行大量線條重計(jì)算和渲染。于是還要在 Canvas 繪制上進(jìn)行優(yōu)化。

我們從上圖可以看到在單層節(jié)點(diǎn)很多的情況下，主節(jié)點(diǎn)與不可見(jiàn)節(jié)點(diǎn)的連線可見(jiàn)，但是沒(méi)有任何價(jià)值，只是加重了用戶對(duì)當(dāng)前節(jié)點(diǎn)連線查看的負(fù)擔(dān)。因此我們對(duì)線條也進(jìn)行了渲染優(yōu)化，僅當(dāng)一條連線兩端的節(jié)點(diǎn)都在可見(jiàn)范圍中時(shí)才渲染連線，在連線的 Tooltip 上增加了來(lái)源去向的展示輔助查看。至此我們做到了在復(fù)雜情況下的流暢展示血緣數(shù)據(jù)。

總結(jié)

以上就是數(shù)據(jù)血緣圖譜的整個(gè)優(yōu)化過(guò)程。在這個(gè)過(guò)程中，我總結(jié)起來(lái)就是在了解用戶訴求的前提下，克制地表達(dá)關(guān)系圖中的信息，在合適的場(chǎng)景下突出核心的內(nèi)容。做圖分析產(chǎn)品時(shí)不需要拘泥于某種形式，而是真正的從用戶需求出發(fā)，為用戶服務(wù)。

關(guān)于我們

火山引擎大數(shù)據(jù)研發(fā)治理套件 DataLeap

一站式數(shù)據(jù)中臺(tái)套件，幫助用戶快速完成數(shù)據(jù)集成、開(kāi)發(fā)、運(yùn)維、治理、資產(chǎn)、安全等全套數(shù)據(jù)中臺(tái)建設(shè)，幫助數(shù)據(jù)團(tuán)隊(duì)有效的降低工作成本和數(shù)據(jù)維護(hù)成本、挖掘數(shù)據(jù)價(jià)值、為企業(yè)決策提供數(shù)據(jù)支撐。

歡迎加入字節(jié)跳動(dòng)數(shù)據(jù)平臺(tái)官方群，進(jìn)行數(shù)據(jù)技術(shù)交流、獲取更多內(nèi)容干貨

點(diǎn)擊 大數(shù)據(jù)研發(fā)治理套件-火山引擎 了解產(chǎn)品詳情

1 HTML概念

HTML，超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language），是一門(mén)描述性語(yǔ)言。標(biāo)記，標(biāo)簽，元素，叫法不同，意思相同。HTML超文本標(biāo)記語(yǔ)言主要通過(guò)標(biāo)簽的方式，對(duì)網(wǎng)頁(yè)頁(yè)面的文本、圖片、音頻、視頻等內(nèi)容進(jìn)行描述。學(xué)習(xí)HTML，就是學(xué)習(xí)各種標(biāo)簽，來(lái)搭建網(wǎng)頁(yè)的結(jié)構(gòu)。

2 HTML結(jié)構(gòu)

結(jié)構(gòu)：!DOCTYPE

說(shuō)明：作用是告訴瀏覽器用哪個(gè)文檔規(guī)范來(lái)解析文檔

標(biāo)簽：html

說(shuō)明：用于搭建HTML網(wǎng)頁(yè)文檔結(jié)構(gòu)和網(wǎng)頁(yè)布局

?標(biāo)簽：head

說(shuō)明：用于定義HTML網(wǎng)頁(yè)文檔的頭部,它是所有頭部元素的容器?

?標(biāo)簽：body

說(shuō)明：用來(lái)定義HTML網(wǎng)頁(yè)文檔的主體區(qū)域?

?標(biāo)簽：meta

說(shuō)明：用來(lái)描述HTML網(wǎng)頁(yè)文檔的屬性?

?標(biāo)簽：title

說(shuō)明：用來(lái)放到HTML網(wǎng)頁(yè)文檔的頭部，是搜索引擎首要抓取的目標(biāo)代碼?

?2.1 標(biāo)簽

標(biāo)簽，也叫作標(biāo)記，是由一對(duì)尖括號(hào)<>，里面包含單詞組成

2.1.1 雙標(biāo)簽

<html></html>

2.1.2 單標(biāo)簽

<br>

2.1.3 標(biāo)簽關(guān)系

嵌套關(guān)系

<html>
    <head>
    </head>
</html>

并列關(guān)系

<head>
</head>
<body>    
</body>

3 注釋

注釋用來(lái)幫助程序員記錄程序設(shè)計(jì)方法，輔助程序閱讀

4 head標(biāo)簽

4.1 title標(biāo)簽

雙標(biāo)簽，定義網(wǎng)頁(yè)的標(biāo)題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta標(biāo)簽

是單標(biāo)簽，用來(lái)描述HTML網(wǎng)頁(yè)文檔的屬性

4.2.1 name屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 網(wǎng)頁(yè)關(guān)鍵字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 網(wǎng)頁(yè)描述 -->
    <meta name="description" content="基礎(chǔ)前端知識(shí)">
    <!-- 網(wǎng)頁(yè)作者 -->
    <meta name="author" content="buddha">
    <!-- 網(wǎng)頁(yè)版權(quán)信息 -->
    <meta name="copyright" content="版權(quán)所有，翻版必究">
</head>
<body>

</body>
</html>

標(biāo)簽屬性：

1、標(biāo)簽的屬性寫(xiě)在開(kāi)始標(biāo)簽內(nèi)部

2、標(biāo)簽名與屬性之間要有空格隔開(kāi)

3、一個(gè)標(biāo)簽可以同時(shí)存在多個(gè)屬性

4、屬性之間以空格隔開(kāi)

5、屬性沒(méi)有先后順序之分

4.2.2 http-equiv屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 設(shè)置網(wǎng)頁(yè)編碼完整寫(xiě)法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 設(shè)置網(wǎng)頁(yè)編碼簡(jiǎn)寫(xiě)寫(xiě)法 -->
    <meta charset="UTF-8">
    <!-- 網(wǎng)頁(yè)打開(kāi)3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style標(biāo)簽

是雙標(biāo)簽，用來(lái)定義標(biāo)簽的css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css內(nèi)聯(lián)樣式寫(xiě)這里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link標(biāo)簽

是單標(biāo)簽，是用來(lái)引入外部css樣式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script標(biāo)簽

是雙標(biāo)簽，是用來(lái)寫(xiě)JavaScript代碼的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 這里寫(xiě)JavaScript代碼 */
    </script>

</head>
<body>

</body>
</html>

4.6 base標(biāo)簽

是單標(biāo)簽，是用來(lái)設(shè)置整個(gè)網(wǎng)頁(yè)的基礎(chǔ)路徑。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

開(kāi)發(fā)中很少用到，有人使用知道就行

上面所述標(biāo)簽是放在head標(biāo)簽里的，接下來(lái)接觸的標(biāo)簽都是放在body標(biāo)簽內(nèi)的

5 文本標(biāo)簽

5.1 標(biāo)題標(biāo)簽

是雙標(biāo)簽，h是header的縮寫(xiě)

<h1>h1標(biāo)簽：一級(jí)標(biāo)題</h1>
<h2>h2標(biāo)簽：二級(jí)標(biāo)題</h2>
<h3>h3標(biāo)簽：三級(jí)標(biāo)題</h3>
<h4>h4標(biāo)簽：四級(jí)標(biāo)題</h4>
<h5>h5標(biāo)簽：五級(jí)標(biāo)題</h5>
<h6>h6標(biāo)簽：六級(jí)標(biāo)題</h6>

特點(diǎn)：

1、字體加粗

2、獨(dú)占一行

3、從h1到h6，字體逐漸減小

4、使用<h>標(biāo)簽的主要意義是告訴搜索引擎這是一段文字的標(biāo)題

5、<h1>在一個(gè)頁(yè)面最多只能有一個(gè)，不要用多個(gè)

5.2 段落標(biāo)簽

是雙標(biāo)簽，p是paragraph的縮寫(xiě)

<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>

特點(diǎn)：

1、獨(dú)占一行

2、段落與段落之間，存在間隙

5.3 換行標(biāo)簽

是單標(biāo)簽，br是break的縮寫(xiě)

<p>這是一段<br>文字</p>

特點(diǎn)：

1、強(qiáng)制換行

2、單標(biāo)簽

5.4 水平線標(biāo)簽

是單標(biāo)簽，hr是horizon地平線的縮寫(xiě)

<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>

特點(diǎn)：

1、在頁(yè)面中顯示一條水平線

2、單標(biāo)簽

6 文本格式化標(biāo)簽

<b>這是一段文字</b>
<strong>這是一段文字</strong>
<br>
<u>這是一段文字</u>
<ins>這是一段文字</ins>
<br>
<i>這是一段文字</i>
<em>這是一段文字</em>
<br>
<s>這是一段文字</s>
<del>這是一段文字</del>

特點(diǎn)：

1、不會(huì)獨(dú)占一行

2、推薦使用標(biāo)簽2所在列標(biāo)簽

6.1 上標(biāo)標(biāo)簽

sup是superscripted這個(gè)單詞的縮寫(xiě)

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下標(biāo)標(biāo)簽

sub是subscripted這個(gè)單詞的縮寫(xiě)

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符實(shí)體

在網(wǎng)頁(yè)中展示特殊符號(hào)效果時(shí)，需要使用字符實(shí)體替代

7 媒體標(biāo)簽

7.1 圖片標(biāo)簽

<img src="./001.jpg" alt="">

img標(biāo)簽常見(jiàn)屬性：

只設(shè)置寬或高，會(huì)自動(dòng)等比縮放，寬高只需要數(shù)字，不需要'px'

<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">

絕對(duì)路徑：指目錄下的絕對(duì)位置，比如從根目錄開(kāi)始的路徑，或完整的網(wǎng)絡(luò)地址

相對(duì)路徑：從當(dāng)前文件開(kāi)始出發(fā)找目標(biāo)文件的過(guò)程

7.2 音頻標(biāo)簽

<audio src="music.mp3" controls autoplay loop></audio>

audio標(biāo)簽常見(jiàn)屬性：

支持mp3、wav、ogg三種音頻格式

7.3 視頻標(biāo)簽

<video src="video.mp4" controls loop autoplay></video>

支持mp4、webm、ogg三種視頻格式

7.4 超鏈接標(biāo)簽

超鏈接，是雙標(biāo)簽，實(shí)現(xiàn)各個(gè)獨(dú)立頁(yè)面之間進(jìn)行跳轉(zhuǎn)，可以跳去站外也可以在站內(nèi)之間跳轉(zhuǎn)

<a href="鏈接地址">文本或圖片</a>

站外跳轉(zhuǎn)，采用絕對(duì)路徑

<a href="http://www.baidu.com" target="_blank">百度</a>

站內(nèi)跳轉(zhuǎn)，采用相對(duì)路徑

<!-- a頁(yè)面 -->
<a href="b.html">跳去b頁(yè)面</a>

<!-- b頁(yè)面 -->
<p>b頁(yè)面</p>

頁(yè)面內(nèi)跳轉(zhuǎn)

<a href="#ms">美食</a>
<a href="#jd">景點(diǎn)</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個(gè)br標(biāo)簽 -->
<br>
<h3 id="jd">推薦景點(diǎn)</h3>

target屬性值

target屬性值一般使用_self（默認(rèn)）和_blank

8 列表標(biāo)簽

8.1 無(wú)序列表

<ul type="屬性值">
    <li>列表項(xiàng)</li>
    <li>列表項(xiàng)</li>
    <li>列表項(xiàng)</li>
</ul>

解釋：

1、ul，unordered lists，無(wú)序列表，li，list item，列表項(xiàng)

2、ul標(biāo)簽子標(biāo)簽只允許是li標(biāo)簽

3、li標(biāo)簽可以包含任意內(nèi)容

type屬性值

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="屬性值">
    <li>列表項(xiàng)</li>
    <li>列表項(xiàng)</li>
    <li>列表項(xiàng)</li>
</ol>

解釋：

1、ol，ordered lists，有序列表，li，list item，列表項(xiàng)

2、ol標(biāo)簽子標(biāo)簽只允許是li標(biāo)簽

3、li標(biāo)簽可以包含任意內(nèi)容

type屬性值

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定義列表

<dl>
    <dt>名詞</dt>
    <dd>描述</dd>
    ……
</dl>

解釋：

1、dl，definition lists，自定義列表；dt，definition term，自定義列表組；dd，definition description，自定義列表描述

<dl>
    <dt>稱呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格標(biāo)簽

9.1 表格基本結(jié)構(gòu)

<table>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
    <tr>
        <td>單元格3</td>
        <td>單元格4</td>
    </tr>
</table>

解釋：

1、tr，table row，表格行；td，table data cell，表行單元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格標(biāo)簽屬性

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格標(biāo)題標(biāo)簽

<caption>標(biāo)題內(nèi)容</caption>，位于表格內(nèi)第一行

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表頭單元格標(biāo)簽

<th></th>，th，table header cell，表頭單元格

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <tr>
        <th>序號(hào)</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格語(yǔ)義化結(jié)構(gòu)標(biāo)簽

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <thead>
        <tr>
            <th>序號(hào)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
        </tr>
    </tfoot>
</table>

9.6 合并單元格

<td rowspan="跨越的行數(shù)"></td>

<td colspan="跨越的列數(shù)"></td>

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <thead>
        <tr>
            <th>序號(hào)</th>
            <th>金額</th>
            <th>金額</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表單標(biāo)簽

10.1 form標(biāo)簽

雙標(biāo)簽，包裹其它表單標(biāo)簽

<form>
    // 表單
</form>

form標(biāo)簽的常用屬性

name屬性

一個(gè)頁(yè)面中，表單可能不止一個(gè)。name屬性，用來(lái)區(qū)分不同的表單

<form name="myForm"></form>

method屬性

用來(lái)指定表單數(shù)據(jù)使用哪種提交方式給后端

<form method="get"></form>

action屬性

用來(lái)指定表單數(shù)據(jù)提交到哪個(gè)地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target屬性

該屬性跟a標(biāo)簽的target屬性一樣，其屬性值也是四個(gè)，一般情況只用到_blank屬性值，默認(rèn)也是這個(gè)值

<form target="_blank"></form>

enctype屬性

<form enctype="multipart/form-data"></form>

10.2 input標(biāo)簽

input是單標(biāo)簽

<input type="表單類型">

單行文本框常用屬性

<form>
    <input type="text" value="默認(rèn)值" size="長(zhǎng)度" maxlength="可輸入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密碼文本框常用屬性

密碼文本框常用屬性和單行文本框常用屬性相同

<input type="password" value="默認(rèn)值" size="長(zhǎng)度" maxlength="可輸入字符">

<form>
    <label>密碼：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

單選框

<input type="radio" name="組名" value="取值" checked="checked">

<form>
    性別：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

復(fù)選框

復(fù)選框和單選框的屬性都相同，區(qū)別復(fù)選框可以多選

<form>
    愛(ài)好：
    <input type="checkbox" name="hobby" value="籃球" checked>籃球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="臺(tái)球">臺(tái)球
</form>

普通按鈕

<input type="button" value="取值">

<form>
    <input type="button" value="普通按鈕">
</form>

<button>普通按鈕</button>

區(qū)別：

1、input是單標(biāo)簽，button是雙標(biāo)簽

2、button標(biāo)簽的信息除了文本，還可以是圖像、其它標(biāo)簽等

3、button有type屬性，屬性值可以是button、submit、reset等

提交按鈕

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把對(duì)應(yīng)表單數(shù)據(jù)提交給后端服務(wù)器

重置按鈕

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

點(diǎn)擊重置后，所在form表單里所有內(nèi)容被清空了

文件上傳

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名稱" cols="列數(shù)" rows="行數(shù)"></textarea>

<form>
    <textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>選項(xiàng)內(nèi)容</option>
    <option>選項(xiàng)內(nèi)容</option>
</select>

下拉列表標(biāo)簽是為了節(jié)省頁(yè)面空間

select標(biāo)簽屬性

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18歲以下</option>
        <option>18-28歲</option>
        <option>28-38歲</option>
        <option>38歲以上</option>
    </select>
</form>

option標(biāo)簽屬性

<form>
    <select name="age" size="5">
        <option value="1">18歲以下</option>
        <option value="2" disabled="disabled">18-28歲</option>
        <option value="3" selected="selected">28-38歲</option>
        <option value="4">38歲以上</option>
    </select>
</form>

11 框架標(biāo)簽

<iframe src="URL" width="數(shù)值" height="數(shù)值"></iframe>

框架標(biāo)簽常用屬性

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文檔禁止被嵌入

12 標(biāo)簽類型

HTML標(biāo)簽分為三種，行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽和行內(nèi)塊級(jí)標(biāo)簽。

12.1 行內(nèi)標(biāo)簽

特點(diǎn)：

1、在頁(yè)面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間

2、沒(méi)有寬高，內(nèi)容多大就多大，行內(nèi)標(biāo)簽不能嵌套塊級(jí)標(biāo)簽（a標(biāo)簽除外）

3、行內(nèi)標(biāo)簽設(shè)置寬高無(wú)效，可以對(duì)行高line-height進(jìn)行設(shè)置

4、可以設(shè)置外邊距margin和內(nèi)邊距padding，但只對(duì)左右邊距有效果，上下無(wú)效

5、常見(jiàn)行內(nèi)標(biāo)簽span、a、strong、ins、del、br等

span標(biāo)簽

雙標(biāo)簽，行內(nèi)標(biāo)簽，本身沒(méi)有固定樣式

<p>我是<span>中國(guó)人</span></p>

12.2 塊級(jí)標(biāo)簽

特點(diǎn)：

1、獨(dú)占一行

2、高度、寬度、外邊距、內(nèi)邊距都可以設(shè)置生效

3、寬度默認(rèn)是父級(jí)寬度的100%

4、是一個(gè)容器盒子，可以嵌套多層子級(jí)行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽，文本類塊級(jí)標(biāo)簽除外

5、常見(jiàn)塊級(jí)標(biāo)簽div、p、h1~h6、ol、ul、li等

div標(biāo)簽

雙標(biāo)簽，塊級(jí)標(biāo)簽，本身沒(méi)有固定樣式

<!-- 頭部區(qū)域 -->
<div></div>
<!-- 內(nèi)容區(qū)域 -->
<div></div>

12.3 行內(nèi)塊級(jí)標(biāo)簽

特點(diǎn)

1、在頁(yè)面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間

2、高度、寬度、外邊距、內(nèi)邊距都可以設(shè)置生效

3、常見(jiàn)塊級(jí)標(biāo)簽img、input、td

12.4 標(biāo)簽類型轉(zhuǎn)換

通過(guò)css樣式display屬性轉(zhuǎn)換，這是css的內(nèi)容