整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網頁顯示效果會大打折扣。
為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務器下載字體，下載完成后再重新渲染字體。
使用 web 字體前，需要了解常用的字體文件格式。
TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀 80 年代末開發的字體標準。它是 macOS 和 Windows 操作系統使用最廣泛的字體格式。
OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎上，是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。
WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網頁的字體格式，2009 年開發，如今是 W3C（萬維網聯盟）的推薦標準。WOFF 本質是 OpenType 或 TrueType 字體，但是經過壓縮并附加額外的元數據。在帶寬受限的網絡中，WOFF 能更好的支持從服務器到客戶端的字體傳輸。
WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。
SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規范定義了一個字體規范，允許在 SVG 文檔中創建字體。
EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設計的一種用于網頁的嵌入式字體，它是 OpenType 字體的緊湊形式。
不同字體格式的瀏覽器兼容性下圖所示：
不同字體格式的瀏覽器兼容性，截圖數據來自 w3schools.com
使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務器目錄，然后定義新的字體名稱，并指向字體所在位置。
以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。
下載字體文件
在 @font-face 指令內，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。
定義 web 字體
然后，像使用普通字體一樣，使用自定義字體樣式：
使用 web 字體
完
tml作為web編程的入口，因為其元素眾多，所以導致很多新手都無法堅持，今天我們就來聊聊怎么簡單的學習html知識。
一個推薦的學習順序
學習順序圖
下面來說明一下上面的圖，首先學習不可見元素部分，然后學習標題和列表元素部分，然后是表單元素，依次類推，直到學到其他元素，其次，上面的圖已經理清了部分邏輯關系的，比如select的子元素就只有option,ul和ol的共同子元素就只有li等等。
實現一個簡單的頁面
輪廓轉化流程圖
頁面輪廓
實現一個頁面前，我們首先劃出一個大概的輪廓，這里一般采用從整體全局出發的思路，也就是結構化程序設計的思想，自頂向下，逐步求精；首先將頁面分為很大的幾塊，然后對每個分割的塊分別進行再分，直到你已經對該頁面非常熟悉了，這樣基于視角的頁面輪廓就出現了。
用區域元素實現輪廓
有了頁面輪廓，我們接下來需要做的事情就是，用區域元素表示這些分割的塊，這樣我們就能夠得到基于HTML的頁面輪廓，也就是一個頁面的大體情況已經用代碼實現了。
填充區域
上面說到已經用HTML實現了頁面的一個大體輪廓，接下來就是用其他HMTL元素去填充每個區域塊的內容，最后得到我們最終頁面結構，有了這個結構，之后用CSS來美化頁面就可以了，當然為了做一些更酷的效果，比如動畫、旋轉等等，可以用一些高級的CSS3或JavaScript（框架）來實現。
語義化
思考用什么元素
通過實現一個簡單頁面的實踐，你雖然實現了一個簡單的頁面，但是有個問題會出現在你的腦子里面，就是那么多區域元素，我們怎么知道選擇那個區域元素來表示頂部、中部和底部區域呢？別擔心，語義化就是為了解決這個問題的，比如在文章里面，我們就應該用article來布局文章區域部分，而版權等信息可以用address或footer來布局這些區域，對于其他非區域元素，也是一樣，該用表格的部分就用表格，該用表單的部分就用表單來表示，不要亂用，至于為什么要將語義化放在最后來講，是因為語義化是在你已經非常熟悉HTML的時候，才更容易理解，如果一開始就談語義化，估計你會遇到很多不理解的。
通過上面的講解，如果還有什么疑問，在評論中留下，我會單獨解答的，這里推薦一個中文的學習網站w3school，相信你帶著本文中介紹的思路去學習這個網站里面的知識，思路會更清晰一些。
HTML結構
HTML結構
<!DOCTYPE html> - 聲明:當前頁面使用的是哪個HTML版本
<html lang="en">- 根標簽:有且僅有一個
<head>- 用于設置當前頁面的信息
<meta charset="UTF-8"> - 設置當前頁面的編碼
<title>Title</title> - 當前頁面的標題
</head>
<body>- 用于顯示在瀏覽器中
</body>
</html>
聲明
根標簽
<meta>元素
HTML屬性
HTML頁面被搜索引擎抓取
分類
HTML標題
HTML列表
<ol>
<li></li>
</ol>
<ul>
<li></li>
</ul>
<dl>
<dt>列表名稱</dt>
dd>列表項</dd>
</dl>
<a href="地址"></a>
鏈接元素<a>
C:07\DAY02\CODE>C:\0507\DAY02\CODE\00.html<.html
圖片元素
可選屬性
HTML表格
分類
打算深入了解這個行業的朋友，可以私信我“前端” ，不論你是學生還是想轉行的朋友，我都歡迎，不定期分享干貨，整理的一份2019最新的web前端學習資料和0基礎入門教程分享給大家
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
