初始HTML
写在前面
一个好的网页，应该是结构，样式，行为分离的，下面展示的仅是学习使用，工作中请尽量分开_
自闭合标签建议添加上斜杠
/，这样更加严谨
一些vscode的快捷键
这些快捷键都是基于Emmet语法
按住alt 然后按住鼠标的上下键，就可以快速移动该行
按住Ctrl alt 上下键，可以快速选中多行光标，然后可以配合shift按住，然后左右增减选择的区域
快速复制一段文件，然后根据刚刚选中的多行光标，按住Ctrl V 可以快速粘贴多行文本
lorem 可以快速生成一段文字
标签名{需要填入的内容} 然后按tab键补全即可
h1{你好！欢迎来到小满的博客}
标签名{需要填入的内容}*次数 不能有空格
h2{ヾ(✿ﾟ▽ﾟ)ノ}*4
标签${标题$文本内容}*次数
ul>li{这是第$次}*5
h${想大乔的第$天}*6
标签>兄弟标签+兄弟标签*次数
dl>dt+dd*4
也可以通过括号去创建
(a[href target=iframe-a]>b)*3
将emmet语法生成的结果换行显示 ，vscode里面打开设置， 搜索 syntax profiles 点击左侧的 Emmet 然后点 edit in settings.json 添加下面的语句即可
"html":{
"inline_break": 2,
}
HTML基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML的注释
<!-- 单行注释 -->
<!--
多行注释
-->
标题和段落标签
<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h3>这是3级标题</h3>
<h4>这是4级标题</h4>
<h5>这是5级标题</h5>
<h6>这是6级标题</h6>
<p>这是一个段落</p>
如果要给一个段落加上几个空格，可以使用实体
。不过更推荐使用实体 一个 占据一个中文位置。
<p> 一来二去，看你三四五六眼，想你七八九十遍。</p>
图片标签
<!-- title属性定义的内容是不占据页面空间的，默认是隐藏的，只有鼠标滑动才会显示对应的效果 -->
<img src="图片的地址信息" alt="当图片加载失败时候的描述信息" title='鼠标滑过显示的文本'>
<img src="https://c.wallhere.com/images/de/8d/84f5dfe678f5942e2c1fddea190b-1440559.jpg!d" alt="这是一张好看的动漫图片" width="500">
相对路径
. 就表示当前路径
绝对路径
.. 就表示绝对路径
<!-- 如果图片在本地和HTML文件是同级目录，那么引用这张图片就可以使用 pic.png -->
<img src="pic.png" alt="这是一张好看的动漫图片">
<img src="./pic.png" alt="这是一张好看的动漫图片">
<!-- 如果引用的图片在上一层 img 文件夹下面， 那么可以使用下面的方式去引用图片 -->
<img src="../img/pic.png" alt="这是一张好看的动漫图片">
图片格式
常见的图片格式
- gif
- 无损压缩
- jpg
- 有损压缩
- png
- 网页图片中是以最多的，吸取了gif和jpg的优点
- bmp
- 一般用于网页的验证码
- webp
- 一般是针对Chrome浏览器，支持无损压缩以及有损压缩
超链接
<!-- href的路径可以使用相对路径，也可以使用绝对路径， target默认是_self ，如果新标签也没打开，可以使用_blank -->
<a href="要跳转的地址" target="打开的方式"></a>
<a href="https://www.cnblogs.com/ccsvip" target="_blank">点我查看小满的博客园</a>
超链接的锚点链接
<!--
要实现一个超链接锚点链接需要两步
1. 跳转目标的定义
2. 锚点的定义
-->
<a href="#title77">点击查看第77章的内容</a>
...
<a id="title77">一段很长的内容。。</a>
文本修饰常用标签
<strong>strong标签表示强调，语义化会比b标签更强</strong><br/>
<em>em标签表示斜体文本，语义化比i标签更强</em><br/>
<del>del标签表示删除线，语义化比s标签更强</del><br/>
<u>u标签表示下划线</u><br/>
<sup>上标标签</sup><br/>
<sub>下标标签</sub>
<!--
总结：
推荐使用 strong标签 不推荐使用b标签
推荐使用 em标签 不推荐使用i标签
推荐使用 del标签 不推荐使用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><em>圆的面积公式是：</em>s = π * r<sup>2</sup></strong></p>
<p><strong>水和二氧化碳发生化学反应的方程式：CO<sub>2</sub> + H<sub>2</sub>O = H<sub>2</sub>CO3</strong></p>
<p>小满的博客地址是：<a href="https://www.cnblogs.com/ccsvip" target="_blank">点我打开</a></p>
<p>小满喜欢的水果：<strong><u>香蕉</u></strong>、<del><em>榴莲</em></del></p>
</body>
</html>
列表标签
根据
W3C的标准，有序列表或者无序列表里面，只能嵌套li标签，如果要嵌套其他的标签，需要放在li标签的里面。
有序列表
ol是order list的缩写，li是list item的缩写。
<p>要把大象装冰箱，总共分几步？</p>
<!-- 有序列表的type属性有5种 分别是A a I i 1 -->
<!-- start属性表示从第几个开始 默认是1 -->
<ol type="1" start="6">
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>关闭冰箱门</li>
</ol>
无序列表
ul是unorder list的缩写，li是list item的缩写。
<!--
有序列表的type属性包括下面四种
disc 实心圆点 默认样式
circle 空心圆点
none 隐藏项目符号
square 实心方块
-->
<ul>
<li>python</li>
<li>JavaScript</li>
<li>TypeScript</li>
</ul>
自定义列表
<!--
dt和dd是兄弟标签，不能嵌套使用
dt和dd标签也不能脱离dl使用
-->
<dl>
<dt>你喜欢的编程语言</dt>
<dd>Python，JavaScript，Dart</dd>
</dl>
表格
注意，不要再
table和tr中包括其他的标签。如果需要放置这些标签，可以嵌套在
td标签里面。快速制作一个四行四列的表格
table>tr*4>td*4
<!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>
<!-- border=1定义的是表格的边框 width定义的是表格的宽度 height定义的是表格的高度 -->
<!-- cellspacing: 定义的是单元格之间的间距 -->
<!-- cellpadding：定义单元格边框和文本之间的距离 -->
<!-- align：对齐方式 left right center -->
<!-- bgclolor：表格的背景 -->
<table border="1" width="500px" height="150px" cellspacing="0" cellpadding="0" align="center" bgcolor="tomato">
<!-- valign 垂直对齐方式 top顶部 bottom底部 middle居中对齐 -->
<!-- 单元格默认的对齐方式为水平左右对齐 垂直居中对齐 即align:left valign:middle -->
<tr align="center" bgcolor="yellow" valign="middle">
<th>姓名</th>
<th>性别</th>
<th>定位</th>
<th>详情</th>
</tr>
<tr>
<td>小满</td>
<td>女</td>
<td>战士</td>
<td>
<a href="">点击查看详情</a>
</td>
</tr>
<tr>
<td>大乔</td>
<td>女</td>
<td>辅助</td>
<td>
<a href="">点击查看详情</a>
</td>
</tr>
<tr>
<td>阿珂</td>
<td>女</td>
<td>刺客</td>
<td>
<a href="">点击查看详情</a>
</td>
</tr>
</table>
</body>
</html>
单元格属性
<!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 width="300" height="300" border="1">
<tr>
<!-- 属性同tr -->
<td bgcolor="red" height="150" width="150" align="right" valign="bottom">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
合并单元格
单元格的合并，必定会跨行或者跨列，分为垂直合并单元格，水平合并单元格。
<!-- 课程表案例 -->
<!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="1" width="540" height="385" cellspacing="0" cellpadding="0">
<!-- 第一行 -->
<tr bgcolor="deepskyblue">
<th>日期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<!-- 第二行 -->
<tr bgcolor="skyblue">
<td bgcolor="skyblue" align="center">早自习</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第三行 -->
<tr>
<td rowspan="4" bgcolor="skyblue" align="center">上午</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第四行 -->
<tr bgcolor="skyblue">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第五行 -->
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第六行 -->
<tr bgcolor="skyblue">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第七行 -->
<tr>
<td rowspan="4" bgcolor="skyblue" align="center">下午</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第八行 -->
<tr bgcolor="skyblue">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第九行 -->
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第十行 -->
<tr bgcolor="skyblue">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第十一行 -->
<tr>
<td bgcolor="skyblue" align="center">晚自习</td>
<td colspan="5"></td>
</tr>
</table>
</body>
</html>
表格的标题和结构分组
<!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 width="600" border="1" align="center" bgcolor="#cde7ed" cellpacing="0" cellpadding="0" bordercolor="#fff">
<caption>阿里职级薪资</caption>
<!-- W3C规定，一个表格只允许有一个thead以及一个tfoot 不过可以有多个tbody -->
<!-- 给tr添加align属性，可以让单元格内的文字居中显示 -->
<!-- colgroup 列分组 span表示多少列分为1组 一般用于设置颜色 -->
<!-- 如果要划分多组，则需要使用多个colgroup -->
<colgroup span="1" bgcolor="#91c5d4"></colgroup>
<thead>
<tr align="center" bgcolor="#66a9bd">
<th rowspan="2">序号</th>
<th colspan="6">技术岗与管理岗的职级薪资</th>
</tr>
<tr align="center" bgcolor="#91c5d4">
<th>P序列</th>
<th>P级名称</th>
<th>M序列</th>
<th>M级名称</th>
<th>薪资</th>
<th>股票</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>P6</td>
<td>资深工程师</td>
<td>M1</td>
<td>主管</td>
<td>20W-35W</td>
<td>几乎不授予</td>
</tr>
<tr align="center">
<td>2</td>
<td>P7</td>
<td>技术专家</td>
<td>M2</td>
<td>经理</td>
<td>30W-50W</td>
<td>2400股</td>
</tr>
<tr align="center">
<td>3</td>
<td>P8</td>
<td>高级专家</td>
<td>M3</td>
<td>高级经理</td>
<td>45W-80W</td>
<td>6400股</td>
</tr>
<tr align="center">
<td>4</td>
<td>P9</td>
<td>资深专家</td>
<td>M4</td>
<td>总监</td>
<td>80W-100W</td>
<td>16000股</td>
</tr>
<tr align="center">
<td>5</td>
<td>P10</td>
<td>研究员</td>
<td>M5</td>
<td>高级总监</td>
<td>150W+</td>
<td>20000股</td>
</tr>
</tbody>
<tfoot>
<tr align="center" bgcolor="#d7e1c5">
<th rowspan="2" bgcolor="#b0cc7f">说明</th>
<th colspan="6">P-Profession M-Manage, 马云在阿里的级别是M10</th>
</tr>
</tfoot>
</table>
</body>
</html>
颜色值和长度单位
一般分为颜色名称，
rgb值，十六进制值颜色名称有140个标准的英文单词名称，比如red green
deeppink等，需要注意的是，中文汉字是不能作为颜色值的。
<!-- rgb(红, 绿, 蓝) 括号里面的取值数字分别是0-255 -->
<!-- #ffffff 十六进制表示数字 每两个相组合表示一个颜色 -->
<!-- 比如#0000ff 可以表示蓝色，因为蓝色的颜色值最高，如果两个单位是一样的，也可以简写#00f 也表示蓝色 -->
<!-- 长度width以及高度height 可以使用px 或者 % 来做单位 -->
<!-- 长度单位又分为绝对长度单位，以及相对长度单位 -->
<!-- 绝对长度单位的值是固定的，用这些单位表示的长度会显示为设置的尺寸 厘米cm 毫米mm 像素px 英寸in-->
<!-- 最常用的就是将px作为像素单位了 -->
<!-- 相对长度指相对于一个长度计算出来的长度，一般用来适配不同的设备，单位一般是百分比，例如父元素的长度为200px 那么自己设置一个50% 结果就是100px -->
块级元素和内联元素
块级元素可以独占一行，默认自上而下排列，可以设置宽高。
<!-- block-level块级 就是块元素 -->
<!-- inline 内联元素，也称行内元素 -->
<!-- 块级元素总是从新行开始，浏览器会自动在元素的前后添加一些边距，块级元素总是占用可用的全部宽度，尽可能的向左向右伸展 -->
<!-- div就是最常用的一个块级元素 -->
<!-- 内联元素里面是不能嵌套块级元素的 -->
<!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 align="center">
<h2>你对自由的理解是什么</h2>
<p>自由不是你想干什么就能干什么</p>
<p>而是你不想干什么，就能不干什么</p>
</div>
<div>
<h2>什么是佛系</h2>
<!-- 给指定文本添加一个title -->
<p><span title="inline">所谓佛系</span>是对无法改变的事实不强求，而不是浑浑噩噩的代名词。</p>
</div>
</body>
</html>
| 标签名称 | 描述 |
|---|---|
h1 ~ h6 |
一级标题 ~ 六级标题 |
| p | 段落标签，用来描述网页中的段落内容 |
| div | 用于页面区域的划分。它就像一个容器，用来放某一个区域的内容 |
ul，ol |
定义无序列表，定义有序列表 |
li |
定义列表项，与 ul 或者 ol 配合使用 |
dt，dd |
定义列表中的项目， 描述列表中的项目 |
| figure | 定义一段独立的内容（不常用，了解即可） |
figcaption |
定义 figure 元素的标题（不常用，了解即可） |
| form | 表单标签，里面包含很多搜集信息的表单元素，如输入框，复选框等 |
| table，canvas | 定义 HTML 表格，通过脚本（通常是 JavaScript）来绘制图形 |
pre |
预格式化的文本 |
内联元素不会自占一行，与其他内联元素在同一行显示，且宽高由内容撑起。
| 标签名称 | 描述 |
|---|---|
| a | 超链接标签，用于从一张页面链接到另一张页面 |
| span | 用来组合文档中的行内元素，一般用来包裹文字 |
| label | 为 input 元素定义标注（标记）label 可设置 for 属性 |
| b，u | 字体加粗标签，下划线文本标签（不常用，了解即可） |
| i，strong | 斜体文本标签，用于强调文本的标签字体会加粗（不常用，了解即可） |
| em | 用于强调文本的标签，字体变成斜体（不常用，了解即可） |
| mark | 突出显示文本的标签，字体会有背景颜色，默认的是黄色（不常用，了解即可） |
datalist |
标签/控件，需要结合 option 标签使用（不常用，了解即可） |
初始表单
表单的作用就是用来收集用户信息的，例如各种登录注册也没，
如果把表单比作一张渔网，那么上面的各种表单元素比如input button
textarea就相当于各种小鱼，把渔网收紧之后就带回家。采集用户信息需要通过表单控件来完成，input输入控件数据采集的方式，是通过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>
<form action="">
<!-- 文本框就是让用户输入文本的一个控件，不支持折行显示，只能在一行输入 -->
<!-- 如果输入的文本超过了文本框的大小，可以通过又箭头查看余下的文本内容 -->
<!-- 文本框默认的type值就是text -->
请输入用户名：<input type="text"><br>
请输入密码：<input type="password">
</form>
</body>
</html>
多行文本框（文本域）
需要注意的是，多行文本框的默认内容，需要在
textarea里面添加，不能通过value值去添加。
<!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="">
<!-- 多行文本框相对于单行文本框而言，支持多行输入，当文本超过边界会自动折行，文本超过底部边界会自动产生滚动条，然后可以通过鼠标的滚轮查看完整的信息 -->
<!-- 通过cols=数字来设置宽度，rows=数字来设置行数 -->
<!-- 下面展示的就是3行 10列 -->
你最喜欢的一句话是什么：
<textarea cols="10" rows="3"></textarea>
</form>
</body>
</html>
单选和多选
单选框控件必须成组使用才有意义，每组至少需要两个单选框。
“组”是通过name属性来建立的，凡是name值相同就是一组。
同组单选框，只有一个会处在选中状态，其他会自动呈现为未选中状态。
<!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="">
<!-- check属性可以设置默认选择状态，只要不为空都可以默认选择，一般设置为checked=checked -->
<!-- 在HTML5只设置成checked即可 -->
请选择性别：
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="radio" name="gender">保密
<br>
前端基础包括
<input type="checkbox" name="learn" checked>HTML
<input type="checkbox" name="learn">CSS
<input type="checkbox" name="learn">JavaScript
</form>
</body>
</html>
下拉菜单
通过
select定义下拉菜单，它可以包括1个或者多个option选项。需要注意的是：
select标签里面只能放置option标签。
<!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="">
<!-- select>option{199$}*9 -->
<!-- 如果要设置为多选 给select设置一个multiple属性即可 -->
出生日期：
<select>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<!-- 可以通过selected来默认选中 -->
<option selected>1999</option>
</select>
<br>
<!-- 设置成多选之后，就可以通过按住Ctrl然后鼠标点选多选即可 -->
<!-- 通过size=数字 来设置可见行数，默认是显示4行 -->
<select multiple size="7">
<option>音乐</option>
<option>电影</option>
<option>短视频</option>
<option>盲盒</option>
<option>漫画</option>
<option>小说</option>
<option>前端</option>
</select>
</form>
</body>
</html>
选择文件
上传图片设置头像，各种附件等操作。
<!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="">
请选择文件：
<!-- 需要结合button去提交才可以真正上传 -->
<input type="file">
</form>
</body>
</html>
label标签和只读禁用属性
只读标签内容不能被修改，不过可以选择复制文本，只读控件的值可以被收集发送给后端。
当提交表单的时候，禁用的表单是无法被提交给后端的。
disable禁用属性，可以设置给任何表单控件
表单分组
边框的作用是为了让相关字段进行视觉上的区块划分，
fieldset需要和legend一起使用。其他标签需要放到
legend标签之后，一样作为fieldset的子标签
<!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="">
<fieldset>
<legend>基本信息</legend>
用户名：<input type="text">
密码：<input type="password">
</fieldset>
</form>
</body>
</html>
表单按钮
<!-- 按钮分类
具有点击确认提交信息的同事发送表单数据给后台的功能 input type='submit'
-->
<!-- 提交按钮 -->
<!-- 重置按钮 -->
<!-- 普通按钮 -->
<!-- 图像按钮 -->
<!-- 双标签button按钮 -->
<!--
当点击提交按钮的时候发生了三件事情
1. 页面消失了
2. 输入框的内容消失了
3. 浏览器的地址栏里多了一个问号
form的action值，就是后台的地址
如果不定义action的值，那么默认就是当前页面当做action的值
-->
提交按钮，重置按钮，普通按钮
普通按钮一般结合JavaScript去使用控制行为
<!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="text"><br>
邮箱：<input type="email"><br>
<!-- type='submit' 就是提交按钮 默认文本就是提交 可以通过value属性去修改文本-->
<input type="submit" value="注册">
<!-- type='reset'就是重置按钮 默认为本就是重置 可以通过value属性去修改文本-->
<input type="reset" value="危险别点我">
<!-- type='button'几居室重置按钮 默认没有任何文本 需要通过value去指定文本 -->
<input type="button" value="普通按钮">
</form>
</body>
</html>
图像按钮和普通按钮
<!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="text"><br>
密码：<input type="password"><br>
<!-- 将type属性设置为image就表示这个按钮是一个图像按钮 -->
<!-- src表示图片的地址 alt表示图片失效时候的描述信息 -->
<!-- 如果图片太大，可以通过添加width以及height属性来控制图片按钮的大小，如果只设置（width，height）的其中一个，另外一个则会等比缩放 -->
<input type="image" src="https://www.shareicon.net/data/32x32/2015/09/24/106388_add_512x512.png" alt="button按钮" width="20">
<!-- 双标签button默认就具有提交表单的功能，如果为他的type设置为button，那它就变成了一个普通的按钮了 -->
<!-- 普通按钮，无法提交 -->
<button type="button">提交表单</button>
<!-- 可以正常提交数据 -->
<button>提交表单</button>
</form>
</body>
</html>
小练习
<!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 align="center">社区疫情流调信息表</h1>
<p>  请大家做好个人防护，如去过风险地区，请及时向社区和公司报备;如您的身体状况异常(出现新冠病毒典型症状如发热、咳嗽等)，请及时上报异常情况，并按照通知，前往指定医院进行核酸检测，在去检测的路上请戴好口罩，做好个人防护，等待检测结果期间勿前往人多汇集的地方。</p>
<fieldset>
<legend>基本信息</legend>
<h4>1、您的姓名</h4>
<input type="text">
<h4>2、您的手机号</h4>
<input type="text" value="133****4457" readonly>
<h4>3、您的性别</h4>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" disabled>保密
<h4>4、家庭地址</h4>
<select name="" id="">
<option value="">===哪一个省/直辖市===</option>
</select><select name="" id="">
<option value="">===市/区</option>
</select><select name="" id="">
<option value="">===县===</option>
</select><select name="" id="">
<option value="">===乡===</option>
</select>
<br>
<br>
<textarea name="" id="" cols="65" rows="4">请输入详细地址</textarea>
<h4>五、您现在的身体状况</h4>
<input type="checkbox" name="health">健康<br>
<input type="checkbox" name="health">发热<br>
<input type="checkbox" name="health">干咳<br>
<input type="checkbox" name="health">乏力<br>
<input type="checkbox" name="health">呼吸困难<br>
<input type="checkbox" name="health">咽痛<br>
<input type="checkbox" name="health">胸痛<br>
<input type="checkbox" name="health">肌肉酸痛/关键痛<br>
<input type="checkbox" name="health">呕吐<br>
<input type="checkbox" name="health">腹泻<br>
<input type="checkbox" name="health">味觉异常<br>
<input type="checkbox" name="health">嗅觉异常<br>
<h4>六、您的健康码目前的颜色是</h4>
<input type="radio" name="color">红色
<input type="radio" name="color">黄色
<input type="radio" name="color">绿色
<h4>七、您是否在14天内有过中高风险地区旅游史，或与确诊人员有过较为密切的接触？</h4>
<input type="radio" name="travel">是
<input type="radio" name="travel">否
<h4>八、疫苗接种情况</h4>
<input type="radio" name="needle">已接种第一针
<input type="radio" name="needle">已接种第二针
<input type="radio" name="needle">已接种第三针
</fieldset>
<fieldset>
<legend>保密信息</legend>
<h4>1、身份证信息</h4>
正面：<input type="file">
<br>
反面：<input type="file">
<h4>2、学历信息（最高）</h4>
<select name="" id="">
<option value="">研究生</option>
<option value="">本科</option>
<option value="">专科</option>
<option value="">高中</option>
<option value="">高中以下</option>
</select>
<h4>3、是否服兵役</h4>
<input type="radio" name="islimitary" id="yes">
<label for="yes">是</label>
<input type="radio" name="islimitary" id="no">
<label for="no">否</label>
<h4>个人意见</h4>
<textarea cols="60" rows="5">在此处输入</textarea>
<br>
<input type="submit" value="上传信息">
<input type="reset" value="清空信息">
<input type="image" src="https://www.shareicon.net/data/16x16/2016/03/14/337130_camera_128x128.png" alt="提交按钮">
</fieldset>
</body>
</html>
网页截图工具右侧的没截取到，代码是没问题的
表单数据采集和提交
通过name属性去收集，有了
name属性，浏览器就会自动去收集表单数据。method的属性的两个值
get是默认值，浏览器会把收集好的表单数据，加到服务器地址栏的后面，提交给服务器。
post值不但能收集表单数据，而且不会在地址栏里暴露隐私数据。
<!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="" method="post">
<!-- 如果form表单的method方法为get(默认就是get)，添加了name属性的input标签的数据会直接显示在地址栏 -->
<!-- ?phone=xxx&password=xxx 通过查询字符串方式，&去链接数据-->
手机号：<input type="text" name="phone"><br>
密码框：<input type="password" name="password"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
其他实用标签
<!--
hr 水平线标签
可以在视觉上将文档分割成多个部分
hr标签的五个重要属性
width/size: 分别控制水平线的宽度和高度，如果没有设置宽度，默认的水平线是横跨整个屏幕 高度为2px
noshade: 属性是没有影子的意思，用来去掉水平线的阴影
color: 用于定义水平线的颜色。
align: 用来调整水平线水平对齐方式，使用该属性的前提是，水平线需要有宽度，默认对齐方式为水平居中对齐
pre标签会保留标签内部的空格和空行
map标签相关
map标签定义一个图片的映射，图片映射也就是热点链接，点击图片的不同区域，实现链接的跳转。
map标签有一个必须定义的属性name 它与img标签的usemap属性进行关联，在图像和地图之间创建关系
map的子标签area 用来定义图片上的热点区域，实现相应区域的目标跳转，通过area标签，可以设置热点区域的 位置 大小 形状
area是一个自闭合标签，有三个重要的属性
href: 用来定义热点区域链接的目标地址，本地图片以及互联网的图片都可以
shape：用来定义图片的形状，有四个属性：
default 所有区域
rect 矩形
circle 圆形
poly 多边形
coords: 用来定义可点击区域的坐标，需要与shape属性配合使用
比如<area shape='circle' coords="x,y,r"> x y定义了坐标 r定义了半径
比如<area shape='poly' coords="x1,y1,x2,y2,x3,y3,...xn,yn"> 每一对xy都定义了多边形的一个顶点，多边形会自动封闭，因此，不需要在最后一个坐标重复第一对坐标对
比如<area shape='rect' coords='x1,x2,x3,x4'> 对应四个点 的坐标，定义矩形实际上是定义了带有四个顶点的多边形的一种简化方法
-->
<!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>
朝辞白帝彩云间，千里江陵一日还。
<hr size="10" width="300" align="left" noshade color="deeppink">
两岸猿声啼不住，轻舟已过万重山。
<pre>
床前明月光，
疑似地上霜。
举头望明月，
低头思故乡。
</pre>
<img src="https://htmlreference.io/images/world-continents.png" width="320" height="160" orgwidth="320" orgheight="160" usemap="#world-continents">
<map name="world-continents">
<area title="North America" href="https://en.wikipedia.org/wiki/North_America" shape="poly" coords="48,89,67,69,77,49,140,0,68,0,6,10,4,31,16,69">
<area title="South America" href="https://en.wikipedia.org/wiki/South_America" shape="poly" coords="48,88,61,74,119,99,95,160,66,159">
<area title="Europe" href="https://en.wikipedia.org/wiki/Europe" shape="poly" coords="124,49,145,46,158,50,187,43,198,6,146,1,115,21">
<area title="Africa" href="https://en.wikipedia.org/wiki/Africa" shape="poly" coords="121,53,140,47,169,51,186,77,196,80,188,137,156,136,138,97,118,86">
<area title="Asia" href="https://en.wikipedia.org/wiki/Asia" shape="poly" coords="166,50,184,77,201,74,215,91,258,108,263,87,283,74,297,8,192,3,191,29,187,46,170,42">
<area title="Australia" href="https://en.wikipedia.org/wiki/Australia_(continent)" shape="poly" coords="257,107,263,85,314,89,316,137,294,151,249,132,248,114">
</map>
</body>
</html>
iframe
iframe的作用，用来在一个网页中，显示另外一个网页
<!--
语法： <iframe></iframe>
iframe的五个基本属性
src : 资源的路径地址，同href
width：宽度的意思 值是一个数字
height：高度的意思 值是一个数字
frameborder： 框架边框的意思，默认引入的框架带有边框，通常情况下，该属性的值设置为0 即无边框
scrolling: 滚动的意思，用来控制是否显示滚动条
值有三个auto（需要出现滚动条的时候会自动触发）也是默认值
yes 始终显示滚动条
no 从不显示滚动条 即无法查看隐藏的内容
-->
<!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>
<!-- a链接的地址可以是互联网的地址，也可以是本地的地址，这些页面都可以在iframe上显示 -->
<a href="https://www.17sucai.com/" target="iframe-a"><b>17素材网</b></a>
<a href="https://hao.uisdc.com/" target="iframe-a"><b>优设导航</b></a>
<a href="https://zh.learnlayout.com/no-layout" target="iframe-a"><b>学习CSS</b></a>
</div>
<iframe width="800" height="600" name="iframe-a"></iframe>
</body>
</html>
初始SVG
解决网站图标问题的最佳方案
SVG是一种基于XML语法的图像格式，即可缩放矢量图，是W3C的一项建议，用手机拍摄的照片，一般是基于像素处理的，图像放大则会失真，SVG这是属于对图像的形状描述，所以本质上是文本文件，体积较小，且不管放大多少倍，都不会失真。
SVG图像的绘制，所有的起点都位于画布左上角
<!--
SVG图片怎么制作
如果用vscode打开一张png图片，发现无法直接编辑，如果用VSCODE打开一张SVG图片，发现是用代码绘制出来的
SVG标签
SVG标签是SVG图形的一个容器，是一个双标签，基本语法<SVG>...</SVG> 里面包含了各种子标签用来绘制各种图形
SVG也可以理解为绘制图形的画布，具有两个重要的属性， width定义画布的宽度，height定义画布的高度，他们的值都是数字
-->
<!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>
<svg width="800" height="600"></svg>
</body>
</html>
SVG绘制矩形、圆形、椭圆形
<!--
SVG有一些预定义的图形元素，可以供开发者使用
这些元素分别是
矩形：rect
width定义矩形的宽度 值为数字
height定义矩形的高度 值为数字
fill 定义填充颜色，可以是任意合法的颜色值（颜色名称，rgb颜色，16进制颜色）均可
stroke-width 定义了矩形的边框宽度，值是一个数字
stroke 描边，定义了矩形边框的颜色
圆形：circle
椭圆：cllipse
线条：line
多条线：polyline
多边形：polygon
路径：path
-->
<!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>
<svg width="400" height="110">
<rect width="300" height="100" fill="blue" stroke-width="3" stroke="black"/>
</svg>
<br>
<svg width="400" height="180">
<!-- 绘制一个边长为150 描边为番茄色 并带有一定透明度的矩形 -->
<!-- widthd定义宽度，值为数字，x定义矩形距离左边的位置，值是一个数字，y定义矩形距离顶部的位置，值也是一个数字
fill-opacity定义填充颜色的不同明度，合法值的范围为0-1，stroke-opacity定义描边颜色的不透明度，合法值的范围也是0-1
透明度的值越小，透明度越高，如果为0就表示完全透明
-->
<rect x="50" y="20" width="150" height="150" fill="blue" stroke="tomato"
stroke-width="5" fill-opacity="0.1" stroke-opacity="0.9"/>
</svg>
<br>
<svg width="400" height="180">
<!--
绘制一个圆角矩形，圆角矩形通过给rect定义rx,ry两个属性值来实现
rx定义圆角x轴方向的半径长度，值是一个数字
ry定义圆角y轴方向的半径长度，值是一个数字
如果两个值相等，那么它就是一个圆形的角，两个值不相等，就是一个椭圆形的角
-->
<rect x="50" y="20" width="150" height="150" fill="red" stroke="black"
stroke-width="5" opacity="0.5" rx="20" ry="20"/>
</svg>
<br>
<svg width="100" height="100">
<!--
使用circle绘制圆形
绘制圆形circle 有三个重要的属性，cx 定义圆形中心的x坐标，xy定义圆形中心的y坐标，如果省略了x和y那么x和y就是0和0，即圆的中心坐标
r属性定义圆的半径和rect属性一样，通过设置stoke设置边框颜色，stroke-width设置边框宽度，fill设置背景颜色填充
需要注意的是：stroke、stroke-width、fill 这几个属性，常见的图形绘制都可以使用他们
-->
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>
<br>
<svg width="500" height="140">
<!--
使用ellipse绘制椭圆形
他有四个重要的属性 cx 定义椭圆中心的x坐标
cy 定义椭圆中心的y坐标
rx 定义水平半径
ry 定义垂直半径
-->
<ellipse cx="200" cy="80" rx="100" ry="50" fill="yellow" stroke="purple" stroke-width="2"/>
</svg>
<br>
<svg width="500" height="150">
<!-- 结果并不是按照HTML的书写顺序决定的，位置和大小是由cx cy rx ry来决定的 -->
<ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" fill="yellow" />
</svg>
<br>
<!-- 根据上面的特点制作一个视觉上空心的椭圆 -->
<svg width="500" height="100">
<ellipse cx="240" cy="50" rx="220" ry="30" fill="yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20" fill="white"/>
</svg>
</body>
</html>
SVG绘制线条，多边形，多线条
<!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>
<!-- 绘制一条红色的线 -->
<svg width="500" height="210">
<line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2"></line>
</svg>
<!--
绘制多边形，使用polygon标签
poly 许多 gon 角度 是一个单标签
基础语法为<polygon/> 用来创建一个至少包含三个边的多边形，多边形是直线的，形状是封闭的
它有一个重要的属性 points 就是多个点的意思，points属性定义了每一个角的x坐标和y坐标
它的值至少需要三个坐标，每一对的x和y的值，用逗号隔开，坐标之间用空格隔开
我们可以这样理解：
拿起一支笔，从第一个坐标点开始，按照坐标定义的顺序，将各个坐标点连接起来，最后要回到起始点，这些线条就围起来了一个多边形。
-->
<br>
<!-- 绘制一个三角形 -->
<svg width="500" height="210">
<polygon points="200,20 250,190 160,210" fill="lime" stroke="purple" stroke-width="1"/>
</svg>
<br>
<!-- 绘制一个四边形 -->
<svg width="500" height="250">
<polygon points="220,10 300,210 170,250 123,234" fill="lime" stroke="purple" stroke-width="1"/>
</svg>
<br>
<!-- 绘制一个五角星 -->
<svg width="500" height="210">
<polygon points="100,10 40,198, 198,78, 10,78, 160,198" fill="lime" stroke="purple" stroke-width="5"/>
</svg>
<!--
绘制多线条 使用polyline标签
基本语法为 <polyline /> 也是一个单标签，一般是把几个点连接起来，不要求封闭
它也有一个重要的属性points 定义绘制折线所需要的点，也就是两个以上的x和y的坐标对
-->
<br>
<!-- 绘制一个普通的基础的折线 -->
<svg width="500" height="200">
<!-- fill=none 是一个特殊值，表示不填充任何颜色 -->
<polyline points="20,20 40,25, 60,40, 80,120 120,140 200,180" fill="none" stroke="black" stroke-width="3"/>
</svg>
<br>
<!-- 绘制一个楼梯的剖面图 -->
<svg width="500" height="180">
<polyline points="0,40 40,40 40,80 80,80 80,120, 120,120 120,160" fill="none" stroke="red" stroke-width="4"/>
</svg>
</body>
</html>
使用svg绘制文本
<!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>
<!--
在svg中，通过text来绘制文本，它是一个双标签，
基本语法为<text x='0' y='15'>填写文本的内容</text>, x和y用来定义文本的坐标位置，值为数字
它有两个重要的属性，font-size定义文本的大小
text-anchor定义文本的对齐方式，start以文本左端对齐，middle以文本中间对齐，end以文本末尾对齐
-->
<svg width="300" height="30">
<text x="0" y="15" fill="red">i love svg!</text>
</svg>
<!--
为什么svg不在p标签里绘制文本呢？
我们知道，svg是在一个画布里面绘制图形，text是绘制对象，这样就可以使用svg一些专有特性控制文本了，比如旋转文本等。
<text transform=rotate(30 20,40) transform定义旋转，第一个值为旋转角度，第二个值为旋转的中心点坐标，缺省值为0,0,两个参数用空格分开
-->
<br>
<svg width="200" height="60">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">i love svg!</text>
</svg>
<!--
text可以包裹多个tspan子元素，每个tspan元素都可以包含不同的格式和位置
-->
<br>
<svg width="200" height="90">
<text x="10" y="20" fill="red">
Several lines
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">First line</tspan>
</text>
</svg>
<!--
text绘制的文本可以添加连接吗？
答案是可以的，添加连接的方法就是把text标签用a标签包裹起来，给a标签添加xlink:href属性，属性值就是连接的地址，也可以定义target属性
为什么这里不使用href属性呢？
实际上svg是应用xml语法定义元素的，我们还要在svg标签上定义一个命名空间的属性xmlns:xlink='http://www.w3.org/1999/xlink',属性值一般都是固定的w3c网址
-->
<br>
<svg width="200" height="30" xmlns:xlinks="https://w3.org/1999/xlink">
<a xlink:href="https://www.cnblogs.com/ccsvip" target="_blank">
<text x="10" y="15" fill="red">小满三岁啦！</text>
</a>
</svg>
</body>
</html>
使用svg绘制路径
<!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>
<!--
在svg中使用path来绘制路径，基本语法为<path/> 单标签，使用路径可以绘制任意形状的图形
path有一个重要的属性d 用来定制绘制路径的命令(draw的缩写)
绘制的命令有很多，下面是两个常用的命令
M 命令，就是moveto的缩写，定义绘制图形的起点坐标(x,y)例如 M 150 0, 也可以写成M150 0, 表示从屏幕的x=150 y=0这个坐标开始绘制
L 命令，就是lineto的缩写，用来绘制一条直线，例如l 70 200, 也可以写成l75 200，表示从上一个点结束到x=75,y=200这个点绘制一条直线
需要注意的是，命令的大小表示的意义是不同的，大写字母表示绝对定位，小写字母表示相对定位
绝对定位：是相对于屏幕坐标原点的位置
相对定位：是相对于上一个绘制点的位置
-->
<svg width="400" height="210">
<!-- 默认的填充颜色是黑色 -->
<path d="M150 0 L75 200 L225 200"/>
</svg>
<!--
为什么使用path不用ploygon呢，因为path的绘制能力更强，比如绘制贝塞尔曲线
在path中绘制贝塞尔曲线使用q命令 (quadratic的缩写)来绘制二次贝塞尔曲线，需要定义控制点和终点的坐标，例如q 150 -300 300 0
表示控制点坐标是(150,-300)终点坐标是(300,0)
-->
<br>
<svg width="450" height="400">
<!-- 绘制AB -->
<path d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none"/>
<path d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none"/>
<!-- 绘制第三条线 -->
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none"/>
<!-- 绘制贝塞尔曲线 -->
<path d="M 100 350 q 150 -300 300 0" stroke="green" stroke-width="3" fill="none"/>
<!-- 在svg中可以使用g标签把多个绘制元素包裹起来，在g标签上定义公共的属性 -->
<g fill='black'>
<circle cx="100" cy="350" r="3"/>
<circle cx="250" cy="50" r="3"/>
<circle cx="400" cy="350" r="3"/>
</g>
<g font-size="30" fill="black" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dx="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
</body>
</html>
SVG描边属性
<!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>
<!--
stroke 笔画属性 定义了线条、文本或轮廓的颜色，值是任何合法的颜色值
stroke-width 笔画宽度属性 定义了线条、文本或轮廓的厚度，值是一个数字
stroke-linecap 笔画样式属性
值有三个 butt 没有线帽 （默认）
round 圆形线帽
square 方形线帽
stroke-dasharray 虚线笔画属性 值为数字序列，至少要定义两个值
所有的描边属性都可以应用于任何的线条 文本 线条的轮廓等
-->
<svg width="300" height="80">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
<br>
<svg width="300" height="80">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0"/>
<path stroke-width="4" d="M5 40 l215 0"/>
<path stroke-width="6" d="M5 60 l215 0"/>
</g>
</svg>
<br>
<svg width="300" height="80">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0"/>
<path stroke-linecap="round" d="M5 40 l215 0"/>
<path stroke-linecap="square" d="M5 60 l215 0"/>
</g>
</svg>
<br>
<svg width="300" height="80">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0"/>
<path stroke-dasharray="10,10" d="M5 40 l215 0"/>
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0"/>
</g>
</svg>
</body>
</html>
SVG模糊和阴影效果
<!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>
<!--
给svg图像添加特殊效果，需要通过filter来实现
filter是过滤器的意思，里面包含一个或者多个滤镜
filter的作用是对图像进行滤镜处理,有一个必要的属性id 用来识别过滤器，图形通过这个id来指定要识别的过滤器
filter元素都是在defs元素中定义的，defs也是一个双标签
模糊效果可以通过feGaussianBlur 这是一个高斯模糊效果，需要定义在filter里面，是一个单标签
它有一个stdDeviation的属性，值是一个数字，值越大，模糊程度越高
-->
<svg width="110" height="110">
<defs>
<!-- 定义起始坐标 -->
<filter x="0" y="0" id="f1">
<feGaussianBlur stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"></rect>
</svg>
<!--
实现阴影效果可以通过feOffset和feBlend滤镜来实现，其原理是将一个SVG图形、图像或元素
在x,y平面上做一定的偏移，它需要定义在filter标签里面，是一个单标签
feOffset dx="" dy="" dx表示在x轴的偏移量 dy表示在y轴的偏移量 值都是一个数字
可以定义一个in属性，表示阴影图像的来源，如果将in的值定义为SourceAlpha，表示一个黑色的阴影
如果使用原始图像作为阴影，值可以使用SourceGraphic
最后，还需要在偏移的图像上，混合原始图像，要应用feBlend标签，是一个单标签，需要定义一个in属性，值为原始图像SourceGraphic
-->
<br>
<svg width="140" height="140">
<defs>
<filter x="0" y="0" width="200" height="200" id="f2">
<feOffset in="SourceAlpha" dx="20" dy="20"/>
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"></rect>
</svg>
</body>
</html>
SVG线性渐变和径向渐变
渐变是一种颜色向另一种颜色的平滑过渡，此外，几种颜色的过度可以应用于同一元素
<!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>
<!--
SVG中主要有两种渐变类型，线性渐变和镜像渐变
线性渐变应用linearGradient来定义，必须嵌套在defs标签中，可以实现水平渐变，垂直渐变或角度渐变
linearGradient是一个双标签，有两组坐标属性(x1, y1) （x2, y2）用来定义线性渐变的开始和结束位置
当y1=y2 x1 != x2 时，就会产生水平渐变
当x1=x2 y1!= y2 时，就会产生垂直渐变
当x1 != x2 y1!= y2时，就会产生角度渐变
线性渐变的颜色范围可以由两种或多种颜色组成，每种颜色都通过stop来指定，是一个单标签
一般需要定义两个属性，offset的值为描述相对位置的百分比
stop-color用来描述渐变的颜色，取值是任意合法的颜色值
-->
<svg width="400" height="150">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="grad1">
<!-- <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="grad1"> -->
<stop offset="0%" stop-color="rgb(255,255,0)"/>
<stop offset="100%" stop-color="rgb(255,0,0)"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
<text fill="#ffffff" font-size="45" x="150" y="86">SVG</text>
</svg>
<!--
径向渐变应用radialGradient来定义，它也必须嵌套在defs标签中
它是一个双标签，包含了几个重要的属性id定义了渐变的唯一名称cx cr cy定义了最外面的圆fx和fy定义了最里面的圆
径向渐变的颜色范围可以由两种或多种颜色组成，每种颜色通过一个stop标签来指定。
和线性渐变一样，也需要指定offset以及stop-color属性
-->
<br>
<svg width="500" height="150">
<defs>
<radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="grad2">
<stop offset="0%" stop-color="rgb(255,255,255)"/>
<stop offset="100%" stop-color="rgb(0,0,255)"/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)"/>
</svg>
</body>
</html>
本文作者：小满三岁啦
本文链接：https://www.cnblogs.com/ccsvip/p/18022016
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步