文章目录
- 一、HTML、CSS系列之导学
- 二、什么是HTML和CSS
- 三、宇宙第一编辑器 VS Code
- 四、chrome浏览器
- 五、深入了解网站开发
- 六、web前端的三大核心技术
- 七、HTML基础结构与属性
- 八、HTML初始代码
- 九、HTML注释
- 十、HTML语义化
- 十一、标题与段落
- 十二、文本修饰标签
- 十三、图片标签与图片属性
- 十四、引入文件的地址路径
- 十五、跳转链接
- 十六、跳转锚点
- 十七、特殊符号
- 十八、无序列表
- 十九、有序列表
- 二十、定义列表
- 二十、嵌套列表
- 展示
- 二十二、表格标签
- 二十三、表格属性
- 二十四、表单标签1
- 二十五、表单标签2
- 二十六、表格表单组合实例
- 二十七、`<div>`与`<span>`
- 二十八、CSS基础语法
- 二十九、内联样式与内部样式
- 三十、外部样式及两种写法
- 三十一、css中的颜色表示法
- 三十二、CSS背景样式
- 三十三、背景实现视觉差效果
- 三十四、CSS边框样式
- 三十五、边框实现三角形
- 三十六、family字体类型
一、HTML、CSS系列之导学
1.拨云见日
- 基础:HTML、CSS
- 切图流程:传统、智能
- 实战阶段:PC企业站布局、PC游戏站布局
2.溯本求源
- 扩展:HTML、CSS
- HTML5和CSS3新语法:在浏览器中很成熟
- 不同浏览器的兼容问题与解决方案hack
3.风生水起
- 流行布局:弹性布局、网格布局、移动布局、响应式布局(Bootstrap)
4.巧夺天工
- 工程方面:预编译CSS、postcss、CSS架构
- 高级功能、CSS与JS交互
二、什么是HTML和CSS
- 它们是两种编程语言,一般情况下需要配合使用,是作为网站开发的基础语言。
1.查看网站原始代码的方法:
- 鼠标右键选择查看网页源代码
2.一个网站是由N多个网页组成的
电视剧可以看作一个网站
每一集可以看作一个网页
播放 .mp4文件
网页 .html文件
3.如何创建.html文件并看到效果
- 在指定目录下,点击鼠标右键,在新建中创建文本文档(.txt),将其重新命名为.html
- 输入代码后,拖拽/双击该文件,在浏览器中打开
三、宇宙第一编辑器 VS Code
- VS Code,全称Visual Studio Code,来自微软,是一个开源的、基于Electron的轻量代码编辑器
- 下载地址:https://code.visualstudio.com/
1.安装插件
- 语言包、open in browser、view in browser(方便直接进入网页)
2.学习编辑器使用
- 设置:文件 --> 首选项 --> 设置(大小、是否换行 word warp)
- 新建文件/文件夹(对应目录上也会显示)、重命名、删除、搜索
- ctrl+s:保存
- ctrl+a:全选
- ctrl+x:剪切
- ctrl+c:复制
- ctrl+v:粘贴
- ctrl+z:撤销
- ctrl+y:前进
- shift+end:从开头选中一行(光标放在开头位置)
- shift+home:从尾部选中一行(光标放在尾部位置)
- shift+alt+ ↓ :快速复制一行
- alt+ ↑ 或 ↓:快速移动一行
- tab:向后缩进
- tab+shift:向前缩进
- alt+鼠标左键:多光标(同时进行修改)
- crtl+d:选中相同元素的下一个
四、chrome浏览器
-
谷歌浏览器(Google Chrome)是一款可让您更快速、轻松且安全的使用网络的浏览器。市场分额占比过半。
-
Chrome下载地址:https://www.google.cn/intl/zh-CN/chrome/
百度统计浏览器市场份额:https://tongji.baidu.com/data/browser chrome:68.88% -
五大浏览器:
-
Internet Explorer浏览器(IE)
-
Opera浏览器(欧朋)
-
Safari浏览器(苹果)
-
Mozilla Firefox浏览器(火狐)
-
Google Chrome浏览器(谷歌)
五、深入了解网站开发
- 一个大型网站的开发,需要团队的配合,各个岗位不可或缺。
1.职务
-
UI设计师:提供图片、设计稿
-
web前端开发工程师(H5开发):
设计稿–>代码
数据库里的数据–>显示到页面
HTML(结构)+CSS(样式美化渲染) -
web后端开发工程师
数据库数据的管理、存储
2.JavaScript,与HTML、CSS之间的关系
- HTML与CSS、JS是不同的技术,可以独立存在;
- HTML一般需要CSS和JS来配合使用,否则单一HTML文档无论是功能还是展示上效果都不理想;
- CSS一般是不能脱离HTML的,如果CSS脱离了HTML,那就没有存在的必要的;
- JS可以脱离HTML和CSS而独立存在;
- JS可以操作HTML和CSS
HTML是骨架,CSS是皮肤,JS是肌肉
六、web前端的三大核心技术
- HTML:结构
- CSS:样式
- JavaScript:行为(同用户交互的行为)
1.如何去掉网站的JS
- 点击Chrome浏览器中“设置”–>“高级”–>“内容设置”–>“JavaScript”–>关闭“已允许”
七、HTML基础结构与属性
- HTML超文本 标记 语言,标记通用标记语言的下一个应用,是网页制作必备的编程语言。
1.超文本
- 文本内容+非文本内容(图片、视频、音频等)
2.语言
- 编程语言(语法格式、书写格式)
3.标记(标签)
- <单词>比如:
<header><footer>
- 写法分为两种:
单标签、双标签
1)创建标签的快捷键:单词+Tab–> <单词>
2)标签可以上下排列,也可以组合嵌套
<header>
hello world
<div>
1
<div>a</div>
<div>b</div>
<div>c</div>
</div>
<div>2</div>
<div>3</div>
<div>4</div>
</header>
3)HTML5标签含义之元素周期表
4)标签的属性
- 修饰标签,设置当前标签的一些功能
- 语法格式
<标签 属性 ="值" 属性2 ="值2"> 一个标签可以加若干属性
<header title="hello">hello world</header>
<footer title="hi">hi HTML<footer>
鼠标移入会显示提示层
八、HTML初始代码
- 每一个html文件都需要添加初始代码,,初始代码就是无论你你写什么样的代码,这些代码都是有的,要符合html文件的规范写法。
- !+Tab键:快速创建html的初始代码,不添加初始代码也能正常解析
格式
<!DOCTYPE html> 文档声明︰告诉浏览器这是一个html文件
<html lang= "en" > html文件的最外层标签:包裹着所有html标签代码
lang ="en"表示是一个英文网站lang-"zh-CN"表示一个中文网站 规范不易出问题
<head>
<meta charset="UTF-8"> 元信息:是编写网页中的一些赋值信息
<title>Document</title> 设置网页标题
</head>
<body>
显示网页内容的区域
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
九、HTML注释
- 注释的代码只有在文件代码中看得到,但是浏览器显示不出来。
1.写法:<!--注释内容-->
2.意义:
- 把暂时不不用的代码的代码注释起来,方便以后使用。
- 对开发人员进行提示
3.快速添加注释与删除注释:
- ctrl+/ 光标移动到初始位置
- shift+alt+a 需要选中
十、HTML语义化
- 所谓HTML语义化指的是根据网页中内容结构,选择适合的HTML标签进行编写。
- 好处:
1.在没有CSS的情况下,页面也能呈现出很好的内容结构。
2.有利于SEO,让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
4.便于团队开发与维护。
屏幕阅读器:网址(网页标题提取,提炼出标题,整理成大纲)
在Chrome浏览器下–>书签–>显示书签栏
将H5O v0.12.4直接拖拽至书签栏
十一、标题与段落
1.h标签:标题
双标签:
<h1></h2>...<h6></h6>...
- 网页内容区域的标题中的title(与head不同)。
- 在一个网页中,h1标题是最重要,并且一个.html文件中,只能出现一次h1标签(其他可以出现多次)。
2.p标签:段落
双标签:
<p></p>
- Chrome浏览器中自带调试器:右键–>检查
- 不要把很多段落全写在一个p标签上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<h1>一标题</h1>
<h2>二级标题</h2>
<p>啥啥啥是啥......</p>
<h2>三级标题</h2>
<p>啥啥啥又是啥......</p>
<h3>四级标题</h3>
<p>啥啥啥又又是啥......</p>
</body>
</html>
十二、文本修饰标签
<strong></strong>
:表示强调,强调性更强,双标签,会对文本进行加粗。<em></em>
:也表示强调,但与<strong>
:相比稍弱,双标签,会对文本进行斜体。<sub></sub>
:下标文本
<p> a<sub>2</sub> </p>
<sup></sup>
:上标文本
<p> H<sup>2</sup>O </p>
<del></del>
:删除文本<ins></ins>
:插入文本
<p> 原价<del>300</del>,现价<ins>100</ins>。</p>
十三、图片标签与图片属性
<img>
:图片 单标签 img+"Tab"生成
属性
- src:引入图片地址
- alt:当图片出现问题,显示不出来的时候,可以显示一段友好的提示文字。(若图片没问题,则不会出现文字)。
- title:提示信息(所有HTML标签都具有的属性)
- width、weight:图片大小(数值 单位像素 在CSS中详细讲解)
查看图片:右击图片–>在新标签页中打开图片–>将网址复制到代码中
查看图片原始大小:右击图片–>检查–>将鼠标移到到代码上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fcms-bucket.ws.126.net%2F2022%2F1019%2Fa8761f58j00rjzes2004vc001hc00u0c.jpg&thumbnail=660x2147483647&quality=80&type=jpg" alt="货轮 CCTV-13"title="这是一张图片的提示信息"width="300" height="300">
</body>
</html>
十四、引入文件的地址路径
1.相对路径(相对于某一个文件来进行引入的)
- 在路径中表示当前路径
- 在路径中表示上一级路径
<body>
<img src="./文件名" alt="" >
<img src="./文件夹名/文件名" alt="" > 在当前文件的子元素
<img src="../文件夹名/文件名" alt="" > 在文件夹外部
</body>
2.绝对路径
- 指文件的完整路径(可以自动寻找盘符),不会参照某一个参照物进行引入,是真真实实的一个绝对的地方
- 盘符可以不写(自动识别)
- 在windows下斜线反斜线均通用(尽量避免使用反斜线)
- 网络地址必须斜线
十五、跳转链接
1.a标签–>双标签`
- href属性:链接地址
- target:可以改变打开链接的方式(默认在当前页面打开:_self 新窗口打开:_blank)
- base标签:可以改变链接的默认行为(单标签),通常嵌套于
<head>
中
<a href="http://www.baidu.com">访问百度</a>
<a href="图片中的目标地址">
<img src="图片地址" alt="">
<a href="http://www.baidu.com"target="_blank">访问百度</a>
<head>
<!--<meta charset="UTF-8">-->
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge"-->>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>-->
<base target="_blank">
</head>
十六、跳转锚点
- 在一个页内进行跳转
实现一
- #号
- id属性
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
<h2 id="html">HTML超文本标记语言</h2>
<p>模拟段落</p>
<h2 id="css">CSS层叠样式表</h2>
<p>模拟段落</p>
<h2 id="js">js脚本</h2>
<p>模拟段落</p>
实现二
- #号
- name属性(注意name属性加给的是a标签)
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<p>模拟段落</p>
<a name="css"></a>
<h2>CSS层叠样式表</h2>
<p>模拟段落</p>
<a name="js"></a>
<h2>js脚本</h2>
<p>模拟段落</p>
name可以实现回到页面顶部
十七、特殊符号
- 编写一些文本时,经常会遇到输入法无法输入的字符,如R(注册商标)、C(版权符)等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码。
空格符:
©版权:©
®注册商标:®
<小于号:<
大于号>:>
和号:&
¥人民币:¥
°摄氏度:°
大于号、小于号要与html代码区分开
1.&+字符
2.解决冲突(左右尖括号、添加多个空格的实现)
十八、无序列表
<ul>、<li>
:列表的最外层容器、列表项- 注:ul和li必须是组合出现的,它们之间是不能有其他标签的,符合嵌套的规范(li內部可以有其他标签)
- type属性:改变前面标记的样式(一般都是用CSS去控制)
标签格式
<ul type="样式"></ul>
( http://www.w3school.com.cn/tags/att_ul_type.asp )
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
</ul>
<ul>
<li><a href="#"><strong>第三项</strong></a></li>
<li><a href="#">第四项</a></li>
<li><a href="#">第五项</a></li>
</ul>
十九、有序列表
<ol>、<li>
:列表的最外层容器、列表项
注:有序列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表。一般用的比较少。
标签格式
<ol type="a"></ol>
( http://www.w3school.com.cn/tags/att_ol_type.asp )- 代码基本上同无序列表
二十、定义列表
- 列表项需要添加标题和对标题进行描述的内容
<dl>
:定义列表<dt>
:定义术语或名词<dd>
:对名词进行解释和描述
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
二十、嵌套列表
- 嵌套列表之间可以互相嵌套形成多层级列表
<ul>
<li>
江苏省
<ul>
<li>南京市</li>
<li>扬州市</li>
<li>苏州市</li>
</ul>
</li>
<li>
山东省
<ul>
<li>烟台市</li>
<li>青岛市</li>
<li>烟台市</li>
</ul>
</li>
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>江苏省</dt>
<dd>南京市</dd>
<dd>扬州市</dd>
<dd>苏州市</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>烟台市</dd>
<dd>青岛市</dd>
<dd>烟台市</dd>
</dl>
</dd>
</dl>
</ul>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<strong>好美味小吃</strong>
</head>
<body>
<ul>
<li>
小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
</ul>
<ul>
<li>
卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
</ul>
<ul>
<li>
套餐类
<ul>
<li>卤面筋饭</li>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪舌头饭</li>
</ul>
</li>
</ul>
<ul>
<li>
炖罐类
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心枸杞</li>
<li>羊肉枸杞</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
</body>
</html>
展示
二十二、表格标签
<table>
:表格的最外层容器<tr>
:定义表格行<th>
:定义表头<td>
:定义表格单元<caption>
:定义表格标题
注:之间是有嵌套关系的,要符合嵌套规范。
- 语义化标签:
<tHead>
、<tBody>
、<tFoot>
(不会对网页造成效果的影响,使表格更加规范)
注:在一个table中,tBody是可以出现多次的,但是tHead、tFoot只能出现那一次。
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年6月21日</td>
<td>晴朗</td><!--通过img标签插入图片-->
<td>适合出行</td>
</tr>
<tr>
<td>2022年6月22日</td>
<td>小雨</td><!--通过img标签插入图片-->
<td>出门请带伞</td>
</tr>
</tBody>
<tFoot>
<!--也是tr,td的语句-->
</tFoot>
</table>
二十三、表格属性
<border>
:表格边框<cellpadding>
:单元格内的空间<cellspacing>
:单元格之间的空间<rowspan>
:合并行<colspan>
:合并列<align>
:左右对齐方式 left,right,center<valign>
:上下对齐方式 top,middle,bottom
二十四、表单标签1
1.重要标签
-
<form>
标签:表单最外层容器 -
<input>
(单)标签:标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,比如输入框、密码框、复选框等。 -
嵌套关系没有太严格的限制
type属性及含义
<test>
:普通的文本输入框<password>
:密码输入框<checkbox>
:复选框<radio>
:单选框<file>
:上传文件<submit>
:提交按钮<reset>
:重置按钮
<form action="提交地址">
<h2>输入框:</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" (checked)>苹果 checked 表示已选中
<input type="checkbox" (checked)>香蕉
<input type="checkbox" (disabled)>葡萄 diasbled 表示不可选中
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
二十五、表单标签2
<textarea>
:多行文本框<select>、<option>
:下拉菜单<label>
:辅助标签
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>苏州</option>
<option>南京</option>
</select>
<input type="radio" name="gender" id=""><label for="man">男</label>
<input type="radio" name="gender"><label for="womam">女</label>
> <select size="3"> 让下拉菜单项数具体指向几项,默认为一项
> <select multiple> 主要表示多选(通过鼠标滑动或crtl+鼠标左键)
> <input type="file" multiple> 可以多选文件
二十六、表格表单组合实例
- 表格表单之间可以互相组合形成数据展示效果(先写表单)
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr align="right">
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
二十七、<div>
与<span>
- div(块):
div全称为division,“分割、分区”的意思,<div>
标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中多数的标签都可以嵌套在标签中,<div>
中还可以嵌套多层<div>
,用来将网页分成独立的、不同的部分,来实现网页的规划和布局。 - span(内联):
用来修饰文字的,div与span都是没有任何默认样式的,需要配合CSS才行
<body>
<div>这是一个块</div>
<span>这是一个内联</span>
</body>
二十八、CSS基础语法
- 格式:选择器{属性1:值1;属性2:值2}(最后一组可以不加“;”)
- 单位:px -->像素(pixel)、%–>百分比
- 基本样式:width(宽)、height(高)、background-color(背景颜色)
- CSS注释:/CSS注释的内容/(shift+alt+a或ctrl+/)
<head>
<style>
div {width:25%;height:100px;background-color: red;}
span{background-color: blue;}
</style>
</head>
<body>
<div>这是一个块</div>
<div>又是一个块</div>
<spam>这是一个内联</span>
</body>
二十九、内联样式与内部样式
- 内联(行内、行间)样式
在html标签上添加style属性来实现的 - 内部样式
在style标签内添加样式
注:内部样式的优点,可以复用代码,复合W3C的规范标准,进而让结构和样式分开处理。
<head>
<style>
div {width:100px;height:100px;background-color: red;}
</style>
</head>
<body>
<!-- <div style="width:100px;height:100px;background-color:red">这是一个块</div> -->
<!-- <div style="width:100px;height:100px;background-color:red">这是另一个块</div> -->
<div>这是一个块</div>
<div>这也是一个块</div>
三十、外部样式及两种写法
引入一个单独的css文件,name.css
<link>
标签:引入外部资源
rel:指定资源和页面的关系
href:资源的地址- @import(这种方式有很多问题,不建议使用)
<head>
<link rel="stylesheet" href="./common.css">
<style>
@import url('./common.css');
</style>
</head>
<body>
<div>这是一个块</div>
三十一、css中的颜色表示法
- 单词表示法:red blue green yellow(有局限性)
- 十六进制表示法:#000000 最小值 黑色,#ffffff 最大值 白色
- RGB三原色表示法:rgb( , , )取值范围为0-255
获取颜色的工具:photoshop吸管工具
三十二、CSS背景样式
- background-color:背景颜色
- background-image:背景图片
- background-repeat:背景图片的平铺方式
repeat-x:x轴平铺
repeat-y:y轴平铺
repeat:x,y都进行平铺,默认值
no-repeat:都不平铺
url(背景地址)
默认:会水平垂直都铺满背景图
- background-position:背景图片的位置(正数:右下;负数:左上)或(x:left、center、right
y:top、center、bottom) - background-attachment:背景图片随滚动条的移动方式
scroll:默认值(背景位置是按照当前元素进行偏移的)
fixed(背景位置是按照浏览器进行偏移的)
<style>
body{ height: 2000px ;} 滚动条
div {width:300px;height:300px;background-color: red;}
background-image: url(图片路径)
background-repeat: no-repeat;
background-position: 100px 50px;(50% 50%)
background-attachment: scroll; 滚动条
}
</style>
三十三、背景实现视觉差效果
<head>
<style>
#div1{width:1440px;height:800px;background-image:url(图片路径);}
</style>
</head>
<body>
<div id="div1"></div>
</body>
三十四、CSS边框样式
- border-style:边框的样式
solid 实线
dashed 虚线
dotted 点线
-
border-width:边框的大小(px)
-
border-color:边框的颜色(注:针对一条边进行单独设置)
-
边框也可以针对某一条边进行单独设置:border-left-style:中间是方向 left、right、bottom、top
<style>
div{width:300px;height:300px;border-style: solid;border-color:red;border-width: 1px;}
div{width: 300px;height: 300px;border-right-style:dashed;border-color:red;border-width: 30px;}
div{width: 300px;height: 300px;border-right-style: dotted;border-right-width:10px;border-right-color: green;} /* 针对不同的边可以分别更改样式 */
</style>
三十五、边框实现三角形
- width:0px;height:0px
- 颜色:透明文字 transparent
隐藏的边框要与背景色同色
三十六、family字体类型
CSS文字样式
- font-family:字体类型
英文字体:Arial,‘Times New Roman’ (注:字体出现空格时用单引号) - 中文字体的英文名称
微软雅黑:‘Microsoft YaHei’
宋体:SimSun
<style>
div{font-family: 宋体;}
</style>
- 衬线体与非衬线体
衬线体:端点有棱角,如宋体
非衬线体:字体平滑,如微软雅黑
非衬线体采用了扁平化设计,简单直观。
注意事项
1.设置多字体方式
2.引号的问题