标签属性：书写在标签自身 可以为标签提供一些额外信息或者对标签进行修饰 由属性名等于属性值组，
多个属性之间要使用一个空格分隔开
<h1 属性名="属性值" 属性名="属性值"></h1>
<img 属性名="属性值">
html根元素 包含整个页面的所有信息
head所有头部元素的容器 描述了文档的各种属性和信息 比如文档的标题
文档引用的样式表和js脚本文件，绝大多数文档头部包含的数据都不会真正作为内容显示给浏览者
title描述页面被加入书签或收藏时的标题
有损压缩 是对图像本身的改变，在保存图像时保留了较多的亮度信息，
而讲色相和饱和度的信息和周围的像素进行合并，合并的比例不同，压缩的比例也不同，
由于信息量减少了，所以压缩比可以提高，图像的质量也会相应的下降，
有损压缩可以减少图像在内存和磁盘中占用的空间，在屏幕上观看图像时，
不会发现对图像的外观产生河很的不利影响
无损压缩是对文本本身的压缩，和其他数据文件的压缩一样，
对于数码图像而言也就是不会是图像细节有任何损失，是可以完全复原的，
无损压缩不能减少图像在内存和磁盘中占用的空间，压缩率也比较低
可以在网页中使用图片的格式 gif ipg jpeg png bmp webb svg
gif格式的图片是以8位颜色或2556位颜色存储的图像数据 #FFFFFFFF 0-255
支持图片透明 压缩 交错 和多图像图片 gif是一种无损压缩格式，
这意味着当你修改并且保存了图片了的时候，
它的质量不会有任何损耗，缺点是最多256色，画质差
jpg或者是JPEG格式的图片是采用高压缩比技术的图片存储格式，
与平台无关，支持最高级别的压缩，支持上百万中农颜色，从而可以用来表现照片
因为jpeg是有损压缩格式可以使图片下载时间更短 但图像的压缩比例非常大时 会使图片失真，品质下降
png格式的图片是一种新的无显示质量损耗的文本格式，png格式汲取了gif和jpeg二者的优点 存储形式丰富
兼有gif和ipeg的色彩模式 png格式还能把图像文本大小压缩到极限
，以利于网络的传输却不失真
bmp格式的图片常用于网站注册或登录页面中的的验证码。其实它一般是由网站程序自动生成的bmp格式小图片
bmp文件通常是不压缩的，所以要大很多
webp格式的图片是一种同时提供了有损压缩和无损压缩的图片文件格式，
是由谷歌公司专门针对谷歌浏览器研发出来的一种图片格式
有序列表 <ol type=""></ol> 项目符号种类 A a | i 1 start取值是数字序号
无序列表 <ul type=""></ul> 项目符号种类 disc circle none square
自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
&emsp 一个字的空格
ALT + 上 或 下 能将选中的行上 下 移动
ol>li*4>a[href]
4行5列 table>tr*4>td*5
th自带文字加粗 文字居中的效果 作为表头
cellspacing 定义是单元格之间的距离
cellpadding 定义单元格边框和文本之间的距离
bgcolor=""修饰表格的背景颜色
bordercolor=""修饰表格的表框颜色
浏览器就近渲染
后代标签属性渲染的优先级是高于父级标签的
tr中的 align属性用来设置tr内部所有单元格内容的水平对齐方式 left center right
valign属性用来设置tr内部所有单元格内容的垂直对齐方式 top middle bottom
tr和td
tr设置bgcolor一整行都是那个颜色
td设置bgcolor只有自己是有颜色的
colspan =“5” 跨列 横向占5个单元格的空间
表格练习一 课程表
``<!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>
<table
width="540"
hight="385"
border="1"
cellspacing="0"
cellpadding="0"
align="center"
>
<tr bgcolor="deepskyblue">
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr bgcolor="skyblue ">
<td>早自习</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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<table width="600" height="400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4">第一行</td>
</tr>
<tr>
<td>第二行</td>
<td>第二行</td>
<td>第二行</td>
<td>第二行</td>
</tr>
<tr>
<td rowspan="2">第三行</td>
<td>第三行</td>
<td>第三行</td>
<td>第三行</td>
</tr>
<tr>
<td>第四行</td>
<td rowspan="3">第四行</td>
<td>第四行</td>
</tr>
<tr>
<td colspan="2">第五行</td>
<td>第五行</td>
</tr>
<tr>
<td>第六行</td>
<td>第六行</td>
<td>第六行</td>
</tr>
</table>
</body>
</html>
单选框控件必须成组使用才有意义，每组至少需要两个单选框
组是通过name属性来劲里的，凡是name值相同的就是一组
同组的单选框，只有一个会处在选中状态 其他的会自动呈现为未选中状态
select里面只有option标签 默认是第一个option 给option标签加上selected改变默认
给select加上multiple属性可以实现多选 ctrl+鼠标 size可见行数
Emmet语句 option{199$}*9
按着Alt+Shift 不放 再按下箭头 会赋值当前行
字段集 <fieldset>
<legend>标题</legend>说明
</fieldset> 表单控件分组
iframe src width height frameborder scrolling
frameborder是边框 一般设为0
scrolling auto在需要的情况下出现滚动条 yes始终显示滚动条 no 从不显示滚动条就不能看到吟唱内容了
iframe也可以作为一个连接的目标目标框架 连接的target属性必须设置为iframe的name属性
（a[href target=iframe_a]>b）*3
a连接的地址可以是互联网的网站地址，也可以是你自己制作的本地页面地址 这些页面都可以在iframe中显示
解决网站图标问题的最佳方案SVG
SVG是一种基于XML语法的图像格式 即可缩放矢量图
手机拍的照片 图片格式一般都是基于像素处理的 图片放大会模糊失真
SVG则是属于对图像的形状描述 本质上是文本文件，体积较小 且不管放大多少倍都不会失真
png图片是基于像素吹得，我们不能在vscode中直接编辑
svg图片是用类似html的代码绘制出来的，可以通过html元素来绘制svg图片 可以通过svg标签实现它
svg标签是SVG图形的一个容器 双标签 绘制图形的画布 有宽高 值都是数字
rect矩形 circle圆形 eellipse椭圆 line线条 polyline多线条 polygon 多边形 path路径
svg所有图形绘制起点都在画布的左上角 向右为x轴 向下为y轴 屏幕坐标系
rect矩形 <rect/> 宽高 fill矩形的填充颜色 可以是任意合法的颜色值你如颜色名称 rgb颜色值 十六进制颜色值
stroke-width笔画宽度边框宽度 stroke定义矩形边框的颜色 x坐标 y纵坐标 fill-opacity
填充透明度 stroke-opacity边框透明度 也可以设置opacity属性
rx属性 ry属性 圆角 单标签
circle圆 cx圆心x坐标 cy圆心y坐标 r定义圆的半径 单标签
ellipse椭圆 椭圆x和y半径不同 rx定义水平半径 ry定义垂直半径 单标签
line 直线 起始坐标 x1 y1 终点 x2 y2
polygon 多边形 points至少有三对x和y x和y之间用逗号隔开 坐标之间用空格隔开
按照坐标点定义的顺序把点连接起来 最后回到起始点 这些线条就围起来了一个多边形 fill="lime"
绘制五角星
<!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>
<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>
</body>
</html>
绘制多线条
polyline 两个及以上的坐标对
text绘制文本 x和y是文本坐标
<text transfrom="rotate(30 20,40)">asdfghjkl</text> 前一个参数是角度 后两个是坐标
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">asdfghjkl</text>
<svg xmlns:xlink="">
<a xlink:href="" target="">
<text></text>
</a>
</svg>
应用路径可以绘制任意形状的图形path d绘制
大写字母起点绝对定位相对于svg源点 小写字母相对定位 相对于上一个绘制点的位置上
默认的黑色三角形
<svg width="400" height="210">
<path d="M150 0 L75 200 L225 200"/>
</svg>
贝塞尔曲线 q命令 绘制二次贝塞尔曲线 控制点 终点的坐标
<svg width="400" height="400">
<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="blue" stroke-width="5" fill="none"/>
<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>
path中的 stroke笔画属性 轮廓颜色 合法颜色值
stroke-width笔画宽度属性 轮廓厚度
stroke-linecap笔画线冒属性 butt没有线冒 round圆形线冒 square方形线冒
stroke-dasharray虚线笔画属性 数字序列 至少写两个值 一个是虚线宽度 一个是虚线空格
filter 给图像较模糊效果 双标签 包含一个或多个效果滤镜
有一个必要的id属性 用于识别过滤器 图形使用id只使用对应id的过滤器
feOffset 偏移量 dx dy in阴影图像的来源 SourceGraphic原始图像作为阴影 SourceAlpha黑色阴影
<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>
垂直渐变 x1=x2
径向渐变 y1=y2
<svg width="400" height="150">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="00%" id="f3">
<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(#f3)"/>
<text fill="#ffffff" font-size="45" x="150" y="86">SVG</text>
</svg>
锚点连接用来实现统一页面中不同区域的跳转
文字加粗strong和b标签 strong语义化更强 表示改文本比较重要
斜体i和em标签 em还可以加强语气 对搜索引擎友好 优先显示em里面的内容
删除线 s和del h5不支持s
下划线 u
sup上角标 sub下角标
Emmet语句 table>tr*8>td*7{内容}
一个表格只允许使用一个thead和一个tfoot，但是允许使用的多个tbody
<table
align="center"
width="600"
border="1"
algin="center"
cellspacing="0"
bgcolor="#CDE7ED"
cellpadding="0"
bordercolor="#ffffff"
>
<caption>
阿里职级薪资
</caption>
<colgroup span="1" bgcolor="#91C5D4"></colgroup>
<thead bgcolor="skyblue">
<tr>
<th rowspan="2">序号</th>
<th colspan="6">技术岗与管理岗的职级薪资</th>
</tr>
<tr align="center" bgcolor="#91C5D">
<th>P序列</th>
<th>P级名称</th>
<th>M序列</th>
<th>M级名称</th>
<th>薪资</th>
<th>股票</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>P6</td>
<td>资深工程师</td>
<td>M1</td>
<td>主管</td>
<td>20W-35W</td>
<td>几乎不授予</td>
</tr>
<tr>
<td>2</td>
<td>P7</td>
<td>技术专家</td>
<td>M2</td>
<td>经理</td>
<td>30W-50W</td>
<td>2400股</td>
</tr>
<tr>
<td>3</td>
<td>P8</td>
<td>高级专家</td>
<td>M3</td>
<td>高级经理</td>
<td>45W-80W</td>
<td>6400股</td>
</tr>
<tr>
<td>4</td>
<td>P9</td>
<td>资深专家</td>
<td>M4</td>
<td>总监</td>
<td>80W-100W</td>
<td>16000股</td>
</tr>
<tr>
<td>5</td>
<td>P10</td>
<td>研究员</td>
<td>M5</td>
<td>高级总监</td>
<td>150W+</td>
<td>20000股</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#D7E1C5">
<th bgcolor="#B0CC7F">说明</th>
<th colspan="6">P-Profession M-Manage， 马云在阿里的级别是M10</th>
</tr>
</tfoot>
</table>
表单获取焦点
<from>
<label for="username">请输入用户名</label>
<input type="text" id="username">
</from>
readyonly只读属性
disabled禁用属性
input[type="radio" name=gender]*3
提交按钮 页面刷新 输入框个的内容消失 浏览器地址栏里多了一个问号
不写action 浏览器会把当前的页面当作是跳转地址 提交给自己 又打开了一个页面 页面刷新了 原来天的表单填写的内容够不见了
<input type="image" src="logo.png" width>
多行文本输入框里面的默认文本 需要在textarea里面添加 不能哦通过gettextArea定义valye属性实现
、给表单空间添加name属性 有了name属性 浏览器会自动为我们收集表单的控件数据
get是默认值 浏览器会把收集好的表单数据，加到服务器地址的后面 提交给服务器器
post值不但能够收集表单的额数据，而且不会在地址栏里暴露隐私数据
