一、了解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>
扫一扫
2212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
