CSS樣式更改-列表、表格和輪廓

篇文章主要介紹了CSS樣式更改篇中的字體設(shè)置Font&邊框Border設(shè)置，這篇文章分享列表、表格和輪廓，一起來(lái)看看吧。

1.列表List

1).列表的類(lèi)型

<ul style='list-style-type:square'><li></li></ul>
none      無(wú)標(biāo)記
disc      實(shí)心圓
circle    空心圓
square    實(shí)心方塊
decimal   數(shù)字
none      無(wú)

2).列表的圖像

<ul><li style='list-style-image:url(1.png)'></li></ul>

3).列表的位置

<ul><li style='list-style-position:inside'></li></ul>
inside 列表項(xiàng)目標(biāo)記放置在文本以?xún)?nèi)
outside 列表項(xiàng)目標(biāo)記放置在文本以外

這三者屬性可以放在list-style中統(tǒng)一設(shè)置。

2.表格Table

1).折疊表格邊框

table
  {
  border-collapse:collapse
  }
separate 邊框會(huì)被分開(kāi)
collapse 邊框合并為一個(gè)單一的邊框

2).表格文本對(duì)齊

設(shè)置水平對(duì)齊方式，比如左對(duì)齊、右對(duì)齊或者居中
td
  {
  text-align:right
  }
設(shè)置垂直對(duì)齊方式，比如頂部對(duì)齊、底部對(duì)齊或居中對(duì)齊
td
  {
  vertical-align:bottom
  }

3).單元格邊框間距

table
  {
  border-spacing:10px 50px
  }
可以使用像素，不允許負(fù)值。
如果定義一個(gè)length 參數(shù)，那么定義的是水平和垂直間距
如果定義兩個(gè)length 參數(shù)，那么第一個(gè)設(shè)置水平間距，而第二個(gè)設(shè)置垂直間距

4).表格標(biāo)題的位置

caption
  {
  caption-side:bottom
  }
top     表格標(biāo)題定位在表格之上
bottom  表格標(biāo)題定位在表格之下

5).顯示表格中的空單元格

table
  {
  empty-cells:hide
  }
hide 不在空單元格周?chē)L制邊框
show 在空單元格周?chē)L制邊框

6).設(shè)置表格布局算法

table
  {
  table-layout:fixed;
  }
automatic 列寬度由單元格內(nèi)容設(shè)定
fixed     列寬由表格寬度和列寬度設(shè)定

3.輪廓 Outline

1).設(shè)置輪廓顏色

div
 {
  outline-color:red
}

2).設(shè)置輪廓樣式

div
  {
  outline-style:dotted
  }
和邊框的風(fēng)格是一樣的

3).設(shè)置輪廓寬度

div
  {
  outline-width:1px
  }

總結(jié)

這篇文章主要介紹了CSS樣式更改篇中的列表、表格和輪廓，希望讓大家對(duì)CSS選擇器有個(gè)簡(jiǎn)單的認(rèn)識(shí)和了解。
****看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人****

IT共享之家

想要學(xué)習(xí)更多，請(qǐng)前往Python爬蟲(chóng)與數(shù)據(jù)挖掘?qū)Ｓ镁W(wǎng)站：http://pdcfighting.com/

家好，我是 Echa。

今天來(lái)分享 50 個(gè)超實(shí)用的 Chrome 瀏覽器擴(kuò)展！

JSON

1. JSON Viewer Pro

JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：

支持將JSON數(shù)據(jù)進(jìn)行格式化，并使用屬性或者圖表進(jìn)行展示；
使用面包屑深入遍歷 JSON 屬性；
在輸入?yún)^(qū)寫(xiě)入自定義 JSON；
導(dǎo)入本地 JSON 文件；
使用上下文菜單下載 JSON 文件；
網(wǎng)址過(guò)濾器；
改變主題；
自定義 CSS ；
復(fù)制屬性和值；

輸入界面如下：

格式化之后：

2. JSONVue

JSONVue 是一個(gè)JSON數(shù)據(jù)查看器，主要用來(lái)格式化JSON數(shù)據(jù)：

網(wǎng)站技術(shù)

3. Library Sniffer

Library Sniffer 是一款給開(kāi)發(fā)者使用的工具，能夠探測(cè)當(dāng)前網(wǎng)頁(yè)所使用的類(lèi)庫(kù)、框架和服務(wù)器環(huán)境，為開(kāi)發(fā)者提供了方便。

4. Wappalyzer

Wappalyzer 擴(kuò)展可以用來(lái)識(shí)別網(wǎng)站背后的底層技術(shù)。通過(guò)此擴(kuò)展，可以了解特定應(yīng)用程序是否是用 React、Vue、Angular、PHP等編寫(xiě)的。還可以訪問(wèn)有關(guān) Web 服務(wù)器、編程語(yǔ)言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫(kù)等。

5. WhatRuns

WhatRuns 擴(kuò)展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術(shù)。

開(kāi)發(fā)調(diào)試

6. PerfectPixel by WellDoneCode

使用PerfectPixel插件可以將設(shè)計(jì)圖加載至網(wǎng)頁(yè)中，與已成型的網(wǎng)頁(yè)進(jìn)行重疊對(duì)比，以幫助開(kāi)發(fā)和設(shè)計(jì)人員規(guī)范網(wǎng)頁(yè)像素精度。這是一款可以?xún)?yōu)化前端頁(yè)面顯示的Chrome插件。

7. Clear Cache

可以使用此擴(kuò)展程序快速清除緩存，無(wú)需任何確認(rèn)對(duì)話(huà)框、彈出窗口等。可以在選項(xiàng)頁(yè)面上自定義要清除的數(shù)據(jù)和數(shù)量，包括：應(yīng)用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫(kù)、本地存儲(chǔ)、插件數(shù)據(jù)、密碼和 WebSQL。

8. VisBug

VisBug 是一個(gè)使用 JavaScript 構(gòu)建的開(kāi)源網(wǎng)頁(yè)設(shè)計(jì)調(diào)試工具，它可以讓用戶(hù)使用點(diǎn)擊式和拖放式界面來(lái)查看網(wǎng)站的元素。

9. Debug CSS

Debug CSS 是一個(gè)幫助調(diào)試CSS的插件。他可以顯示出頁(yè)面元素的輪播，按住Ctrl，并將鼠標(biāo)懸浮在元素上，即可查看其信息：

10. CSS Viewer

CSS Viewer 是一款適用于 Web 開(kāi)發(fā)人員的高效 Chrome 擴(kuò)展。顧名思義，CSS 查看器可以顯示將鼠標(biāo)懸停在任何網(wǎng)頁(yè)上的元素的 CSS 屬性。

11. EditThisCookie

EditThisCookie 是一個(gè) cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。

12. React Developer Tools

React Developer Tools 是開(kāi)源 JavaScript 庫(kù) React 的 Chrome DevTools 擴(kuò)展。它允許我們?cè)?Chrome 開(kāi)發(fā)者工具中檢查 React 組件層次結(jié)構(gòu)。安裝此插件之后，將在 Chrome DevTools 中獲得兩個(gè)新選項(xiàng)卡："?? Components" 和 "?? Profiler"：

Components 選項(xiàng)卡顯示了在頁(yè)面上呈現(xiàn)的根 React 組件，以及它們最終呈現(xiàn)的子組件；
Profiler 選項(xiàng)卡用來(lái)記錄性能信息。

13. Vue.js devtools

Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應(yīng)用程序的插件，可以使得開(kāi)發(fā)人員大大提高調(diào)試效率。支持用戶(hù)對(duì)DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試功能。

14. Augury

Augury 可以幫助開(kāi)發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應(yīng)用程序。

15. Firebug Lite for Google Chrome

Firebug Lite是火狐瀏覽器中著名的開(kāi)發(fā)者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開(kāi)發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來(lái)調(diào)試網(wǎng)頁(yè)內(nèi)容，其包含了基本的HTML、CSS以及Javascript的調(diào)試功能，用于幫助網(wǎng)頁(yè)前端開(kāi)發(fā)工程師快速地調(diào)試網(wǎng)頁(yè)，以便及時(shí)地找到網(wǎng)頁(yè)中的BUG并及時(shí)修復(fù)。

16. HTML Validator

HTML Validator 在 Chrome 的開(kāi)發(fā)者工具中添加了 HTML Validator。HTML 頁(yè)面的錯(cuò)誤數(shù)通過(guò)瀏覽器狀態(tài)欄中的圖標(biāo)顯示，詳細(xì)信息可以在瀏覽器的開(kāi)發(fā)者工具中查看。

17. Web Developer

Web Developer 擴(kuò)展為帶有各種 Web 開(kāi)發(fā)工具的瀏覽器添加了一個(gè)工具欄按鈕。該擴(kuò)展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺(tái)上運(yùn)行，包括 Windows、macOS 和 Linux。

18. Requestly

Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉(zhuǎn)發(fā)、修改HTTP請(qǐng)求和結(jié)果、插入腳本等功能。

19. Window Resizer

Window Resizer 主要用來(lái)調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。

20. Responsive Viewer

Responsive Viewer 是在一個(gè)視圖中顯示多個(gè)屏幕的 Chrome 擴(kuò)展程序。該擴(kuò)展將幫助前端開(kāi)發(fā)人員在開(kāi)發(fā)響應(yīng)式網(wǎng)站/應(yīng)用程序時(shí)測(cè)試多個(gè)屏幕。

21. Moesif Origin & CORS Changer

此插件允許直接從瀏覽器發(fā)送跨域請(qǐng)求，而不會(huì)收到跨域錯(cuò)誤。可以使用此插件覆蓋 Request Origin 標(biāo)頭，并將 Access-Control-Allow-Origin 設(shè)置為 *.

22. ColorPick Eyedropper

ColorPick Eyedropper 是一個(gè)放大的吸管和顏色選擇器工具，可讓從網(wǎng)頁(yè)等中選擇顏色值。

23. CSSPeeper

CSS Peeper 用于檢查和復(fù)制元素樣式的優(yōu)秀工具，使用 CSSPeeper 可以將鼠標(biāo)懸停在網(wǎng)頁(yè)中的任何元素上，然后單擊鼠標(biāo)即可復(fù)制元素的樣式。

24. Dimensions

Dimensions是一款能幫助使用者對(duì)網(wǎng)頁(yè)上各種元素屬性之間的距離進(jìn)行測(cè)量的Chrome頁(yè)面元素測(cè)量插件，該插件在點(diǎn)擊啟動(dòng)插件圖標(biāo)后，可以對(duì)頁(yè)面中圖像、輸入字段、按鈕以及視頻等頁(yè)面元素之間上下左右的方位尺寸進(jìn)行測(cè)量，同時(shí)還可以通過(guò)使用快捷鍵來(lái)快速啟用或關(guān)閉該插件的功能，簡(jiǎn)單實(shí)用。

25. Site Palette

Site Palette 用于生成調(diào)色板。設(shè)計(jì)師和前端開(kāi)發(fā)人員必備的工具。可以通過(guò)這款插件輕松獲取網(wǎng)站的配色方案。

26. ColorZilla

ColorZilla 是一款功能強(qiáng)大地提取網(wǎng)頁(yè)色彩的工具；也是個(gè)快速的對(duì)顏色進(jìn)行調(diào)節(jié)的Chrome插件，許多的用戶(hù)將這款軟件稱(chēng)呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產(chǎn)css顏色的代碼等。

吸管器-獲取頁(yè)面上任何像素或區(qū)域的顏色；
一個(gè)先進(jìn)的顏色選擇器類(lèi)似于可以在Photoshop和Paint Shop Pro中找到的；
網(wǎng)頁(yè)顏色分析器-分析任何網(wǎng)頁(yè)上的DOM元素顏色，找到相應(yīng)的元素；
終極CSS梯度發(fā)生器；
調(diào)色板查看器與7預(yù)先安裝調(diào)色板；
顏色歷史最近挑選的顏色；
顯示標(biāo)簽名稱(chēng)，類(lèi)別，編號(hào)，大小等元素信息；
光標(biāo)下的輪廓元素；
自動(dòng)將生成或采樣的顏色復(fù)制到CSS RGB，Hex和其他格式的剪貼板；
使用鍵盤(pán)快速采樣頁(yè)面顏色的鍵盤(pán)快捷鍵。

字體

27. WhatFont

當(dāng)我們想查看網(wǎng)頁(yè)中文字的字體時(shí)，最常用的方法就是在控制臺(tái)查看文字的字體樣式。那還有沒(méi)有更簡(jiǎn)單的方法呢？WhatFont 就是一個(gè)查看網(wǎng)頁(yè)字體的Chrome擴(kuò)展。只需要的點(diǎn)擊擴(kuò)展圖標(biāo)，再點(diǎn)需要查看為文字即可：

28. Fonts Ninja

Fonts Ninja 可以從任何網(wǎng)站識(shí)別字體、添加書(shū)簽、試用并購(gòu)買(mǎi)它們。

標(biāo)簽頁(yè)

29. BrowserStack

使用 BrowserStack 快速啟動(dòng)擴(kuò)展在任何瀏覽器中啟動(dòng)一個(gè)新的測(cè)試會(huì)話(huà)。最多可設(shè)置 12 個(gè)瀏覽器以實(shí)現(xiàn)快速訪問(wèn)并最大限度地減少切換瀏覽器所花費(fèi)的時(shí)間。

30. Toby

Toby 是一款 Chrome 新標(biāo)簽頁(yè)工具，能夠?qū)⑽醋x的標(biāo)簽頁(yè)分組顯示在新標(biāo)簽頁(yè)中，這樣就能把所有未看完的標(biāo)簽頁(yè)都關(guān)閉了。分組相當(dāng)于多個(gè) Chrome 窗口，將你的標(biāo)簽頁(yè)都拖進(jìn) Toby 中，就不需要實(shí)時(shí)開(kāi)著占地方了。

31. daily.dev

該擴(kuò)展提供了每日熱門(mén)開(kāi)發(fā)者新聞，不需要再浪費(fèi)時(shí)間搜索高質(zhì)量的文章了。

32. Momentum

Momentum 擁有漂亮的新標(biāo)簽頁(yè)面，每日更新精彩背景壁紙圖片，可設(shè)置每日新鮮事焦點(diǎn)以及跟蹤待辦事項(xiàng)，無(wú)廣告，無(wú)彈窗。

33. The Great Suspender

The Great Suspender 是一個(gè)輕量級(jí)的擴(kuò)展用來(lái)減少 Chrome 的內(nèi)存占用。如果同時(shí)打開(kāi)許多選項(xiàng)卡，在可配置的時(shí)間之后未查看的選項(xiàng)卡將在后臺(tái)自動(dòng)掛起，從而釋放該選項(xiàng)卡消耗的內(nèi)存和 CPU。

34. Session Buddy

Session Buddy是一個(gè)可以幫助用戶(hù)查看、新增、編輯當(dāng)前網(wǎng)站Session狀態(tài)的Chrome插件。用戶(hù)可以利用該插件保存網(wǎng)站當(dāng)前的狀態(tài)以便在關(guān)閉Chrome或關(guān)閉計(jì)算機(jī)后恢復(fù)，從而達(dá)到節(jié)省內(nèi)存的作用。

Github

35. Octotree

Octotree 旨在讓 GitHub 體驗(yàn)更好。通常，為了檢查 Github 中的子文件夾，需要手動(dòng)單擊文件夾并導(dǎo)航。Octotree 擴(kuò)展解決了這個(gè)問(wèn)題。此擴(kuò)展在項(xiàng)目的左側(cè)顯示存儲(chǔ)庫(kù)的目錄結(jié)構(gòu)，這有助于更好地理解文件夾結(jié)構(gòu)。

1_EKF88oqIyX6FzgueCKdtXg.gif

36. File Icons for GitHub and GitLab

File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標(biāo)替換為特定文件類(lèi)型的圖標(biāo)。

網(wǎng)頁(yè)測(cè)試

37. axe DevTools

ax DevTools 是一個(gè)快速、輕量級(jí)但功能強(qiáng)大的測(cè)試工具，由 Deque 開(kāi)發(fā)的世界上最值得信賴(lài)的可訪問(wèn)性測(cè)試引擎 axe-core 驅(qū)動(dòng)。使用 ax DevTools 在網(wǎng)站開(kāi)發(fā)過(guò)程中查找并修復(fù)更多可訪問(wèn)性問(wèn)題。

38. OctoLinker

OctoLinker 可以將特定語(yǔ)言的語(yǔ)句（如 include、require 或 import）轉(zhuǎn)換為鏈接。當(dāng)打開(kāi)一個(gè)包含多個(gè)導(dǎo)入語(yǔ)句的文件并且想要快速打開(kāi)它時(shí)，只需將鼠標(biāo)懸停在鏈接的文件上并單擊即可打開(kāi)。

39. Web Developer Checklist

此擴(kuò)展可幫助 Web 開(kāi)發(fā)人員分析網(wǎng)頁(yè)是否違反最佳實(shí)踐。

40. Check My Links

Check My Links 是一個(gè)鏈接檢查器，它可以抓取網(wǎng)頁(yè)并查找損壞的鏈接。

41. Checkbot

Checkbot 是用于驗(yàn)證一組HTML頁(yè)面上的鏈接的工具。Checkbot可以檢查一個(gè)或多個(gè)服務(wù)器上的單個(gè)文檔或一組文檔。它會(huì)創(chuàng)建一個(gè)報(bào)告，該報(bào)告匯總了引起某種警告或錯(cuò)誤的所有鏈接。

42. PageSpeed Insights

Google Page Speed Insighs 是一款旨在優(yōu)化所有設(shè)備上的網(wǎng)頁(yè)、提高網(wǎng)頁(yè)加載速度的工具。

43. Meta SEO Inspector

META SEO inspector是一款可以幫助用戶(hù)分析網(wǎng)頁(yè)的meta信息并得到SEO評(píng)估的谷歌瀏覽器插件。

隱私廣告

44. Ghostery

Ghostery 是強(qiáng)大的隱私保護(hù)擴(kuò)展程序。其主要有以下功能：

攔截廣告：Ghostery 內(nèi)置的廣告攔截工具可以移除網(wǎng)頁(yè)上的廣告，防止網(wǎng)頁(yè)雜亂無(wú)章，讓你專(zhuān)注于想看的內(nèi)容。
保護(hù)隱私：利用 Ghostery 可以查看和攔截所瀏覽的網(wǎng)站上的跟蹤器，控制收集數(shù)據(jù)的跟蹤器。增強(qiáng)反跟蹤功能還能將數(shù)據(jù)匿名化，進(jìn)一步保護(hù)隱私。
提高瀏覽速度：Ghostery 的智能攔截功能可以自動(dòng)攔截和取消攔截跟蹤器來(lái)滿(mǎn)足網(wǎng)頁(yè)質(zhì)量標(biāo)準(zhǔn)，提高網(wǎng)頁(yè)加載速度，優(yōu)化網(wǎng)頁(yè)性能。

45. AdBlock

AdBlock 用來(lái)在YouTube、Facebook、Twitch和其他你喜愛(ài)的網(wǎng)站上攔截廣告和彈窗。

效率工具

46. Marinara

番茄工作法（Pomodoro?）時(shí)間管理助理。? 長(zhǎng)短兩種休息時(shí)間 ? 帶有倒計(jì)時(shí)顯示的工具欄圖標(biāo) ? 追蹤Pomodoro歷史和統(tǒng)計(jì)訊息 ? 可配置的長(zhǎng)休間隔 ? 可配置的定時(shí)器時(shí)長(zhǎng) ? 桌面與新標(biāo)簽頁(yè)通知 ? 超過(guò)20種音效可選的聲音通知 ? 計(jì)時(shí)器秒針走動(dòng)音效

47. Loom

Loom 可以用來(lái)快速錄制視頻，并且能夠?qū)浿频囊曨l上傳到指定的網(wǎng)頁(yè)中，Loom還支持在用戶(hù)點(diǎn)擊啟動(dòng)插件時(shí)，立即捕捉屏幕圖像，同時(shí)開(kāi)始視頻錄制操作，還可以將錄制好的視頻復(fù)制到粘貼板中存儲(chǔ)。

48. GoFullPage

GoFullPage 是一款全屏截圖插件（整個(gè)網(wǎng)頁(yè)截圖），完整捕獲您當(dāng)前頁(yè)面的屏幕，進(jìn)行滾動(dòng)截圖，而無(wú)需任何額外的權(quán)限。單擊擴(kuò)展程序圖標(biāo)，然后將其傳輸?shù)狡聊豢煺盏男聵?biāo)簽頁(yè)中，可以在其中將其下載為圖像或PDF，甚至只需拖動(dòng)即可，保存到桌面。

49. BetterViewer

BetterViewer 可以提供更好的圖像查看體驗(yàn)，旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時(shí)，只需在頁(yè)面右鍵點(diǎn)擊圖片，選擇“在新標(biāo)簽頁(yè)中打開(kāi)圖片”即可。

50. svg-grabber

svg-grabber 是一個(gè)快速預(yù)覽并從網(wǎng)站獲取所有 svg 的工具。可以用來(lái)預(yù)覽、下載和復(fù)制網(wǎng)站中所有 SVG 圖標(biāo)和插圖的代碼。

樣的地方，同樣的時(shí)間，又跟大家見(jiàn)面了。

很多人問(wèn)我，前端開(kāi)發(fā)入門(mén)怎么開(kāi)始？這里呢，先看下我之前發(fā)的文章有大體的概括思路跟流程在里面。今天主要分享入門(mén)第一篇： HTML。

由于時(shí)間有限，空間有限，關(guān)于HTML歷史我就不嘮叨了，大家去w3c，菜鳥(niǎo)教程都可以查看的到，我主要是跟大家講講怎么快速理解并且掌握HTML。在文章最后我會(huì)給出總體輪廓圖，讓大家看完能夠清晰的帶著思路收藏起來(lái)。

一樣的老規(guī)矩，列出熟悉的流程：

1.HTML是什么

2.它跟瀏覽器有著什么樣的關(guān)系

3.HTML在工作中常用的東西是哪些

這四個(gè)流程講下來(lái)，你就知道我們打開(kāi)的網(wǎng)頁(yè)原來(lái)就是這個(gè)樣子。

繼續(xù)，長(zhǎng)篇大論我就不講了，感覺(jué)有點(diǎn)虛，直接進(jìn)入主題關(guān)鍵是“懂”。那么首先第一步，HTML是什么？

這樣理解吧，我們可以把瀏覽器，屏幕當(dāng)成一張A4紙，你在紙上面寫(xiě)個(gè)人獎(jiǎng)勵(lì)，有頭有尾，還有中心，那么網(wǎng)頁(yè)也是一樣，它也有頭，有尾，組合在一起的。我們只不過(guò)換了個(gè)地方，換了種方法在寫(xiě)東西而已。這樣在你的大腦里，HTML就相當(dāng)于是A4紙了，正如HTML的定義也是相當(dāng)如此，即：它是超文本標(biāo)記語(yǔ)言（相當(dāng)于可以理解為很高級(jí)的A4紙）。帶著這種理解去開(kāi)HTML的定義，你肯定收獲很大，比起你腦袋一片空白去看代碼要事半功倍的多。

第二點(diǎn)，這個(gè)HTML跟瀏覽器是怎么配合的？我們可以簡(jiǎn)單理解為，你的A4紙，寫(xiě)出來(lái)的東西，得讓人看的懂吧，別人在看的時(shí)候是不是在分析你的文字或者圖片。那么同樣的，瀏覽器它作用于幫助大家把代買(mǎi)看懂，然后用大家看的懂得形式展現(xiàn)出來(lái)。起到一個(gè)解析你的HTML作用。那么總結(jié)下來(lái)就是你寫(xiě)的HTML，瀏覽器幫助你解析展現(xiàn)給大家。

到這里，說(shuō)了這么多，一個(gè)代買(mǎi)沒(méi)見(jiàn)著？笑話(huà)，這怎么分享啊！不，我覺(jué)得大家先大腦有個(gè)概念，這樣下面的代碼就幾分鐘理解透徹。

好了，小二，來(lái)份HTML！。。。好嘞客觀稍等片刻。。。熱騰騰的HTML上來(lái)了

菜名：HTML

這是一個(gè)標(biāo)準(zhǔn)的HTML5文檔（不要怕，其實(shí)還是HTML，只是版本不同而已，不要想的太復(fù)雜），我們來(lái)用A4紙的例子解釋下。首先第一行，文本類(lèi)型HTML的意思，直接翻譯就好，因?yàn)闉g覽器不只會(huì)讀懂HTML，還會(huì)有其他的。第二行是這個(gè)文檔解析標(biāo)準(zhǔn)英文。第三行head的意思就是頭咯，那么這就是文檔的頭，相當(dāng)于A4紙的title，里面有meta告訴瀏覽器用的，說(shuō)我是中文，不要給我解析成什么俄羅斯語(yǔ)言。。。繼續(xù)下面body，身子的意思，A4紙正文的意思。

為什么我不跟大家先說(shuō)這些是標(biāo)簽?zāi)兀?-因?yàn)椋瑐€(gè)人認(rèn)為，先知道這些代表什么，然后再知道怎么組裝他們更適合理解。

那么看完上面現(xiàn)在跟大家講：標(biāo)簽是什么，其實(shí)理解簡(jiǎn)單點(diǎn)就是組合HTML的規(guī)則，比如這個(gè)標(biāo)準(zhǔn)的HTML文檔，你要組合它，你的按規(guī)則來(lái)，不能亂寫(xiě)。那么組合方法是什么，其實(shí)呀，用HTML規(guī)定的東西拼接起來(lái)，HTML規(guī)定標(biāo)簽有兩種，單標(biāo)簽跟雙標(biāo)簽，單的就是上面的meta，雙的就是head，成雙成對(duì)出現(xiàn)的就是雙的，單個(gè)出現(xiàn)的就是單的。這還不好理解呀，那么問(wèn)題來(lái)了，有多少標(biāo)簽？網(wǎng)上搜索你就知道了，帶著這樣的理解思路，一看就懂咯。

現(xiàn)在回到流程第三步，最常用的在開(kāi)發(fā)過(guò)程中的有哪些除了上面標(biāo)準(zhǔn)的格式。

以上就是最常用的了，仔細(xì)看可以看到有單標(biāo)簽，有雙標(biāo)簽。這些標(biāo)簽組合上HTML標(biāo)準(zhǔn)格式，就是我們看到的網(wǎng)頁(yè)了。

那么，有人就問(wèn)了，我該怎么寫(xiě)呢？不急，繼續(xù)往下看。

仔細(xì)重回上面看，可以看到body里面什么也沒(méi)有，這里就是你可以寫(xiě)常用標(biāo)簽的地方，網(wǎng)頁(yè)標(biāo)簽組合的規(guī)則是：由外到內(nèi)。也就是說(shuō)它們存在包含關(guān)系，比如：一個(gè)框框里面有文字

div就是框，就是拼接的磚塊，它包含著你想表達(dá)的東西。那么，整個(gè)網(wǎng)頁(yè)外層就是一個(gè)大大的div框，里面包含了文字，圖片，選擇框等等我們看到的東西。

理解方法思路大概就是這個(gè)樣子，這些里面還有數(shù)多標(biāo)簽，大家可以去網(wǎng)上查查，然后這樣去理解，基本一看就懂了。哦？原來(lái)網(wǎng)頁(yè)就是這個(gè)樣子。。。下面是我畫(huà)的一張大體圖片。

用HTML解釋下上圖（基本簡(jiǎn)單的網(wǎng)站模型），這個(gè)外面粉色的框是個(gè)大的DIV，包含了里面的頭部，輪播圖，還有三塊內(nèi)容．頭部也是一個(gè)DIV塊，里面包含了我們可以選擇進(jìn)入的導(dǎo)航。輪播圖也是一個(gè)DIV，包含了我們看到的圖片。下面三塊內(nèi)容也是一個(gè)DIV，包含了三塊內(nèi)容，三塊內(nèi)容分別又有DIV包含著。這下明白了，從最外層包含到最內(nèi)層，就是前面講的：由外到內(nèi)。這樣整個(gè)的結(jié)構(gòu)清晰了，大家再去看些資料，就OK了。HTML文檔其實(shí)就這么簡(jiǎn)單，沒(méi)有邏輯成分，只要找到理解技巧，看下就會(huì)了，比起看幾個(gè)小時(shí)的視頻而且還很多的專(zhuān)業(yè)名詞去理解要來(lái)的輕松些。

那么這些磚磚瓦瓦都砌上了，怎么把它們放到理想的位置上呢？其實(shí)呀，就是下一篇將要分享的CSS在搞的鬼！

在線咨詢(xún)

上一篇：Markdown小知識(shí)-標(biāo)題、段落、分割線
下一篇：JavaScript開(kāi)發(fā)中this給程序員挖的坑，你

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商