一、了解html
1、C:client(客户端)
S:server(服务器)
B:browser(浏览器)
C/S构架:安装 更新 不跨平台(windows mac linux) 大型专业应用 安全性要求高的 英雄联盟 航天相关 军事相关
B/S构架:不安装 无需更新 跨平台----写网页
2、前端代码通过浏览器(渲染解析)转换成网页;
浏览器:网页显示、运行的平台
3、网页基础认知:
网站:因特网上根据一定的规则,用html等制作的用于展示特定内容相关的网站集合
网页:构成网站基本元素
结构、表现、行为——html/css/javascript
4、什么是html?
超文本标记语言,描述网页的语言
超:超链接
二、html基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
1、如何快速生成基本骨架:shift+!
2、注释:ctrl+/
3、基本标签(元素)
1)、标题标签
<h1>到<h6>字体依次减小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<!-- 标题标签 h1-h6逐渐变小 独占一行-->
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
</body>
</html>
2)、段落标签
<p>会跳行并且隔一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。</p>
<p>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
</p>《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
</body>
</html>
3)、 换行水平标签
<hr />水平标签
<br />换行标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>戴尔·卡耐基</h2>
<hr />
戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
</body>
</html>
4)、文本格式标签
<strong></strong>加粗字体==<b style="color: pink;"></b>
<em></em>字体倾斜==<i style="color: pink;"></i>
<ins></ins>下划线==<u style="color: pink;"></u>
<del></del删除线==<s></s>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>戴尔·卡耐基被誉为美国<strong>“成人教育之父”</strong>,他所著的<b>《人性的弱点》</b>汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。</p>
<p>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如<em>卡耐基</em>所言:“一个人的成功,只有15%归结于他的专业知识。还有<i
style="color: pink;">85%</i>归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
</p>《人性的弱点》<ins>"身带穷气,一看便知"</ins>:<u>犯了这些事情,贵人之气会减少</u>
<del>2999</del> 9.9<br />
<s>11.0 </s> 11.0
</body>
</html>
5)、无语义标签
<div></div>:独占一行,可以任意存在
块元素:独占一行 div 宽、高、内外边距可以设置
<span></span>:一行可存在多个
行内元素:一行可以存在多个 span 宽、高、内外边距不可以设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
nkdscldscdscdcnkdcds
</div>
<div>
nkdscldscdscdcnkdcds
</div>
<div>
nkdscldscdscdcnkdcds
</div>
<!-- span一行可存在多个 -->
<span>a</span>
<span>a</span>
<span>a</span>
</body>
</html>
6)、图片标签(img)
src指向图片位置
alt:图片地址发生错误时,用来提示的字
title:鼠标经过时,显示的文字
border: 边框
width:宽度
height:高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<img src="../images/dog.gif" alt="我是一只最好看的猫咪" title="我是一只狗" height="700px" border="20">
<img src="C:\Users\21195\Desktop\7-5\day1\images\dog.gif">
<img src="https://img1.baidu.com/it/u=3113560374,3342883877&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt="">
</body>
</html>
7)、视频标签(video)
width="1800px" height="50px"
controls:控件
autoplay:自动播放
muted:静音播放
poster:等待加载时的显示图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频标签</title>
</head>
<body>
<video src="./images/video.mp4" controls autoplay muted poster="./images/map.jpg"></video>
</body>
</html>
8)、音频标签(audio)
loop:循环播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="./images/music.mp3" controls muted autoplay loop></audio>
</body>
</html>
9)、链接标签(<a href=" "></a>
target="_blank":开新窗口打开
默认为本窗口打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 默认当前窗口打开 -->
<a href="http://www.xianoupeng.com/" target="_blank">去鸥鹏</a>
<a href="https://www.baidu.com" target="_blank">去百度</a>
<a href="./09-视频.html">去看小视频了</a>
<a href="https://www.baidu.com"><img src="./images/dog.gif"></a>
<a href="http://www.xianoupeng.com"><img src="./images/cat.gif"></a>
</body>
</html>
10)、锚链接标签(在本页查找文本)
d属性------身份证号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚链接</title>
<style>
body {
font-size: 20px;
}
</style>
</head>
<body>
<a href="#one">个人经历</a>
<div id="one">个人经历</div>
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
</body>
</html>
11)、有序列表标签
<ol> <li></li> <ol>
type可以修改序号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 有序列表 ol li-->
喜欢的食物
<ol type="a">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>奶茶泡饭</li>
</ol>
</body>
</html>
12)、无序标签
<ul> <li></li> <ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你喜欢的明星是?
<ul type="circle">
<li>丁真</li>
<li>法外狂徒张三</li>
<li>华晨宇</li>
<li>罗翔</li>
</ul>
</body>
</html>
13)、自定义顺序标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>
你们喜欢的明星是?
<dd>
张三
</dd>
<dd>
里斯
</dd>
<dd>
张三
</dd>
</dt>
</dl>
</body>
</html>
14)、iframe框架标签
它能够将另一个 HTML 页面嵌入到当前页面中。
frameborder:边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
这是我的主页面
<iframe src="https://www.baidu.com" width="900px" height="600px"></iframe>
<a href="https://www.taobao.com" target="nn">去淘宝</a>
<iframe name="nn" frameborder="0" width="800px" height="200px"></iframe>
</body>
</html>
15)、特殊字符
<小于 >大于 空格 °°
16)、details标签
可创建一个组件,仅在被切换成展开状态时,它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。
展现组件通常在屏幕上使用一个小三角形,旋转(或扭转)以表示打开/关闭的状态,三角形旁边有一个标签。<summary>
元素的内容被用来作为展示小部件的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- details:详情标签 配合summary使用 -->
<details>
<summary>有志青年</summary>
我们这里都是优秀的有志青年
</details>
</body>
</html>
17)、tabindex标签
tabindex:让本不能tab遍历获取焦点的元素可以获取 可以为负数,0,正数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<a href="#">去百度</a>
<div>我是第一个盒子</div>
<div tabindex="0">我是第2个盒子</div>
<div>我是第3个盒子</div>
<div>我是第4个盒子</div>
</body>
</html>
18)、h5语义标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="head">啦啦啦啦</div>
<div class="body">
<div class="nav">噢噢噢噢</div>
</div>
<div class="footer">呃呃呃</div>
</body>
</html>
4、表格<table>
1)、主体
<caption>主题</caption>
<thead> <tr>(r行)<th>(列)
<tbody> <tr>(行) <td>(列)
<tfoot> <tr>(行) <td>(列)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
2)、属性
table:border(只控制最外围大小)、width、height(tbody值是底线,只高不低)、单元格与单元格之间距离
caption:通过css修改
thead、tr、tbody、tfoot:height、valign(水平)、valign(垂直)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="10px" width="900px" height="400px" cellspacing="0">
<caption>学生信息</caption>
<thead height="200px" align="center" valign="middle">
<tr height="400px" align="center" valign="center">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="600px" align="center" valign="middle">
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot height="600px" align="center" valign="middle">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
3)、单元格合并
<td>
跨行:rowspan
跨列:colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" width="800px" cellspacing="0">
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr align="right">
<td colspan="5">共计:4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
5、单表<form>
1)、单表的基本结构
表单:网页交互区,收集用户信息
action:将数据交给谁处理
name:必有属性
method:提交方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单的基本结构</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>提交</button>
</form>
</body>
</html>
2)、单表的常见元素
anction="#":指跳转在本页,不创建新的窗口
input type="text(maxlength最大长度)、password(密码)、radio(单选框)、chackbox(多选框)、chacked(默认选中)、label(扩大选中面积)、hidden(隐藏域)、submit(确认按钮,button也可以作为确认按钮<button type="submit"></button>)、reset(重置按钮)、button(普通按钮)"
<textarea>文本域
<select>下拉菜单(selected默认选中)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见的表单元素</title>
</head>
<body>
<form action="#">
<!-- 文本框 maxlength:最大长度-->
用户名:<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名:"><br />
<!-- 密码 -->
密码:<input type="password" name="pwd"><br />
<!-- 单选框 -->
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br />
<!-- 多选框 label标签-->
<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
<label><input type="checkbox" name="food">吃臭豆腐</label>
<!-- checked默认选中 -->
<input type="checkbox" name="food" checked>吃肥肉
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="南德斯才能使调查">
<!-- 确认按钮 -->
<!-- <button type="submit"></button> -->
<input type="submit" value="确认">
<!--重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button">
<!-- 文本域 -->
<textarea cols="20" rows="10" maxlength="200
">
</textarea><br />
<!-- 下拉菜单 -->
<select name="jiguan" id="">
<option value="南京">南京</option>
<!-- selected下拉菜单的默认选中 -->
<option value="成都" selected>成都</option>
<option value="西安">西安</option>
</select>
<input type="submit">
</form>
</body>
</html>
3)、h5表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="number">
<input type="color">
<input type="time">
<button>tijaio</button>
</form>
</body>
</html>
6、html的全局属性
id身份证号,在一个页面中只能出现一次
class一类,可以多个出现
accesskey设置快捷键
style要注意样式最好定义在单独的文件中,主要目的是快速装饰
hidden被用来隐藏一个页面元素,如果一个元素设置了这个属性,它就不会被显示。
tabindex以及它是否/在何处参与顺序键盘导航(通常使用Tab键)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pink {
color: pink;
}
</style>
</head>
<body>
<div id="one"></div>
<div class="pink" style="font-size: 40px;">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<form action="#">
<input type="text" name="a" id="">
<button accesskey="s">提交</button>
</form>
</body>
</html>
三、css
1、CSS 是一门样式表语言
以用它来选择性地为 HTML 元素添加样式。
2、css的三种引入方式
1)、外部样式
使用链接的方式
2)、内部样式
在style里面设置
3)、内行样式
在主体标签里面设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式 推荐!!!!! -->
<link rel="stylesheet" href="./14-样式.css">
<!-- 内部样式 -->
<style>
.box1 {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">我是盒子</div>
<!-- 行内样式:不推荐 -->
<div style="width: 300px; height: 300px; background-color: green;"></div>
<div class="box2">我是box2</div>
</body>
</html>
<!--./14-样式.css-->
.box2 {
width: 300px;
height: 300px;
background-color: blue;
}
3、css基本结构
选择器{
属性名: 属性值;
属性名: 属性值;
}
4、css选择器
它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值
的方式。选择器所选择的元素,叫做“选择器的对象”。
1)、基本选择器
标签选择器 :选中所有的选择的标签(标签)
id选择器:(*id)
类选择器:(.类名)
通配符选择器:all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 标签选择器 选中所有的p标签*/
p {
color: aqua;
}
/* id选择器 */
#box1 {
color: pink;
}
/* 类选择器 */
.box2 {
color: blueviolet;
}
/* 通配符选择器
*{
}
*/
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>
2)、包含选择器
子代选择器:选中亲儿子(.类名>li)
后代选择器:找到后代所以元素(.类名 li)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 子代选择器 选中亲生儿子*/
.a>li {
background-color: pink;
}
/* 后代选择器 找到后代所有要找的元素*/
.a li {
color: blueviolet;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</body>
</html>
3)、复合选择器
用逗号链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,
p,
span {
color: red;
}
</style>
</head>
<body>
<div>wisjiajsskmx</div>
<p>cndklcdsmc</p>
<span>jnckdsmc</span>
<ul>
<li>吃饱穿暖CNBCCDC</li>
</ul>
</body>
</html>
4)、属性选择器
input[type="xx"]指input中有xx属性值的被选中
div[xx]指div中有xx属性的被选中
input[type^="xx"]指input中属性值以xx开头的被选中
input[type$="xx"]指input中属性值以xx结尾的被选中
input[type*="xx"]指input中属性值含有xx的被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
background-color: pink;
}
input[type="password"] {
background-color: aquamarine;
}
div[id] {
width: 300px;
height: 300px;
background-color: blue;
}
input[type^="te"] {
background-color: red;
}
input[type$="l"] {
background-color: green;
}
input[type*="e"] {
background-color: chartreuse;
}
</style>
</head>
<body>
<input type="text"><br />
<input type="password"><br />
<input type="search"><br />
<input type="url"><br />
<input type="number"><br />
<div id="aquamarine">1</div>
<div>2</div>
</body>
</html>
5、字体的样式(加;)
font-weight:字体粗细(100-900越来越粗,400=normal,800=bold)
font-size:字体大小
font-style:italic(倾斜)
font-family:"字体名称"
**font:italic 900 70px "字体名称"(注:italic 900可省略,字体大小,font-family必须存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体</title>
<style>
div {
font-size: 40px;
font-weight: bold;
/* font-weight: 900; */
font-style: italic/normal;
font-family: "微软雅黑";
font: italic 900 70px "微软雅黑"
}
</style>
</head>
<body>
<div>
我是图图小淘气,面对世界很好奇
</div>
</body>
</html>
6、首行缩进
text-indent:2em;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* text-indent: 32px; */
font-size: 20px;
text-indent: 2em;
}
</style>
</head>
<body>
<p>
戕害美的行径,在人类社会中从未消失过,只是从未像今天这样严峻:
</p>
</body>
</html>