整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前，浏览器只能展示本地安装的字体。如果字体未安装，网页显示效果会大打折扣。
为了解决这个问题，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小时内与您取得联系。
