整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實用視頻。
主要內(nèi)容：這是HTML課程的第四課，主要講解HTML的文字標簽和格式標簽。在今天我們做一個屬于自己的簡歷。
在上一節(jié)中主要講解了HTML的標題標簽（h1~h7）以及加粗、斜體、下劃線、上下標等格式的標簽。上節(jié)請戳→HTML電腦編程03 標題物理字體標簽的使用，大學(xué)生學(xué)編程
HTML
font標簽通過字面意思來看，就是字體的意思。是的這是一個用來顯示文字的標簽。不過值得說的是，這個文字可以通過屬性的方式，指定顏色和字體大小。比如：
font標簽的寫法
效果：
font標簽的顯示效果
從書寫的HTML代碼可以看出，font標簽包括兩個參數(shù)：
color（字體的顏色）：顏色的值可以為英文，也可以為RGB數(shù)值。
size（字體的大小）：通過數(shù)字1~7可以控制字體的大小。
face（文字的顯示字體）：這個屬性可以設(shè)置顯示的字體。如可以寫為：face="楷體"
在HTML中包括兩種顏色體系。一種就是直接寫顏色的英文，如：red（紅色）、blue（藍色）、green（綠色）等。
不同顏色
另外一種顏色體系是RGB。由R（Red）、G（Green）、B（Blue）三種顏色組成。相信小時候很多人都知道兩種不同的顏料，可以轉(zhuǎn)換為不同的顏色。RGB就是通過紅綠藍不同的明暗程度。來表示所有的顏色的。
RGB
RGB中的每一個顏色都是以六位十六進制進行表示。數(shù)值越大顏色越深。如：000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#號。
段落標簽為p。會為里面的文字自動分段顯示：
p標簽自動分段
換行標簽為br，這是個單標簽。寫法為：<br/>。
br標簽的形式
效果：
換行標簽的效果
默認情況下，HTML的文檔排列形式為自上而下，自左而右。標簽包括行級標簽和塊級標簽。如果想要對塊級標簽進行換行，你就需要使用br標簽。
下面是幾個標簽，大家直接Sublime中寫入看一下效果哦。在以后就直接使用啦
居中預(yù)格式化標簽
今天我們一起來了解下HTML，
首先HTmL包含三層結(jié)構(gòu)，分別是結(jié)構(gòu)層，表現(xiàn)層，行為層。
結(jié)構(gòu)層：html => 網(wǎng)頁上有什么，比如說文字啊、按鈕啊、圖片啊等等。
表現(xiàn)層：css => 顯示成什么樣子，比如說文字的大小啊，位置啊，顏色啊等等。
行為層：JavaScript => 具體怎么操作，比如說點擊按鈕讓圖片放大縮小等等。
===============================
在了解了html的三層結(jié)構(gòu)之后，我們來學(xué)習(xí)如何寫html。html不是編程語言，它是一套標簽。最簡單的html文本是下圖1這個樣子。我們可以在電腦桌面上新建一個記事本文件，然后把后綴名改一下（.txt=>.html），把這段標簽代碼粘貼到html文件里，這樣一個空白的網(wǎng)頁就做成了。如果需要在網(wǎng)頁上添加內(nèi)容，我們只需要在第10行的位置添加各種各樣的標簽即可。比如我在圖二添加了一個按鈕標簽和一段文字標簽，雙擊html文件，頁面上就從左到右，從上到下顯示對應(yīng)的內(nèi)容。是不是很簡單。我們?nèi)粘g覽的網(wǎng)頁都是這樣一個標簽一個標簽畫上去的。
我給大家總結(jié)了一張圖，基本上覆蓋了工作中常用的知識點。同時分享幾個小技巧。
1.最簡單的網(wǎng)頁寫成什么樣子，也就是html模板不需要記憶，下圖也說了，去百度下載一個VSCode軟件（類似于記事本，是現(xiàn)在主流的前端代碼編輯器），用它打開我們的html文件，輸入英文嘆號回車就自動生成了，學(xué)編程不要死記硬背。
2.控件的標簽不需要記憶，直接百度html XXX標簽，例如：百度搜“html按鈕標簽”，他就會告訴我們是<button>，用的時間長了自然就記住了。是不是省力。
3.標簽的屬性很重要，可以不去記他的寫法，因為寫可以百度，重要的是你需要記住標簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因為工作中，有的時候會遇到這樣一種情況，明明設(shè)置一個屬性可以完成的功能，我們不知道，花費了大力氣用css和js去實現(xiàn)，結(jié)果還存在著特定場合的bug，讓人很無奈。
4.對于html還有兩個標簽<canvas>和<svg>，他們是用來繪圖的，做特殊效果的。我們可以先跳過，等框架啥的都學(xué)完了，有興趣，學(xué)習(xí)一下。
5.給大家推薦一個小白學(xué)習(xí)html的網(wǎng)站，w3cschool，圖里不明白的可以去上邊學(xué)學(xué)練練。
6.如果覺得一個人學(xué)習(xí)前端有難度，我建了一個小白前端學(xué)習(xí)交流群，可以私聊我，大家在群里多多交流，我會經(jīng)常給大家答疑，組織大家練習(xí)，一起做小項目。有方向，少走彎路。
前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網(wǎng)頁顯示效果會大打折扣。
為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務(wù)器下載字體，下載完成后再重新渲染字體。
使用 web 字體前，需要了解常用的字體文件格式。
TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀 80 年代末開發(fā)的字體標準。它是 macOS 和 Windows 操作系統(tǒng)使用最廣泛的字體格式。
OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎(chǔ)上，是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。
WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網(wǎng)頁的字體格式，2009 年開發(fā)，如今是 W3C（萬維網(wǎng)聯(lián)盟）的推薦標準。WOFF 本質(zhì)是 OpenType 或 TrueType 字體，但是經(jīng)過壓縮并附加額外的元數(shù)據(jù)。在帶寬受限的網(wǎng)絡(luò)中，WOFF 能更好的支持從服務(wù)器到客戶端的字體傳輸。
WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。
SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規(guī)范定義了一個字體規(guī)范，允許在 SVG 文檔中創(chuàng)建字體。
EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設(shè)計的一種用于網(wǎng)頁的嵌入式字體，它是 OpenType 字體的緊湊形式。
不同字體格式的瀏覽器兼容性下圖所示：
不同字體格式的瀏覽器兼容性，截圖數(shù)據(jù)來自 w3schools.com
使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務(wù)器目錄，然后定義新的字體名稱，并指向字體所在位置。
以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。
下載字體文件
在 @font-face 指令內(nèi)，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。
定義 web 字體
然后，像使用普通字體一樣，使用自定義字體樣式：
使用 web 字體
完
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
