html 基础
1 标题标签。
h1在最大,h6最小。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
...
<h6>这是一个标题</h6>
2 段落标签。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
3 图片标签。
属性 | 描述 |
---|---|
src | 图片路径 |
alt | 当图片加载失败的时候才会显示 |
title | 鼠标滑过时才会显示,不占据页面空间 |
<img
src='图片路径'
alt='当图片加载失败的时候才会显示'
title='鼠标滑过时才会显示,不占据页面空间'
/>
<img src="/images/logo.png" width="258" height="39" />
相对路径
:根据文件和文件夹之间的关系,来确定文件查找途径。
绝对路径
:从根目录开始通过完整的路径定义来查找资源的。
计算机中图片的 存储格式
有很多种:
bmp、jpg、jpeg、png、tif、gif、svg、psd、wmf、webp等
实际开发中,网页能够使用的图片格式是有限的:
图片格式 | 描述 |
---|---|
gif | 是以8位颜色和256位颜色存储的图像数据,gif图片支持透明、压缩、交错和多图像图片。是无损压缩,缺点是最多256色,画质查。 |
jpg | 支持最高级别的压缩,支持上百万种颜色。从而用来表现照片。 |
jpeg | 是一种有损压缩格式,可以 使图片下载时间更短。但图像的压缩比例非常大时,会使图片失真质量下降。 |
png | 是一种新的无显示质量损耗的文件格式,汲取了GIF和JPEG二者的优点,存储形式丰富,兼有GIF和JPEG的色彩模式,PNG格式还能把图像文件大小压缩到极限。利于网络的传输却不失真。 |
bmp | 常用于网站注册或登录时页面中的验证码,一般是由网站程序自动生成的bmp格式小图片。bmp文件通常是不压缩的,所以文件要大很多。 |
webp | 是一种同事提供了有损压缩和无损压缩的图片文件格式,是由谷歌公司专门针对谷歌浏览器研发出来的一种图片格式,在谷歌 浏览器中经常使用。 |
这些图片格式的区别和应用场景:
最终要的区别就是图片存储的时候
是否进行压缩
,是有损压缩还是无损压缩。
有损压缩
:是对图像本身的改变,在保存图像时保留了较多的亮度信息,而将色相饱和度的信息和周围的像素进行合并。合并的比例不同,压缩的比例也不同。由于信息量减少了,所以压缩比可以很高。图像的质量也会响应的下降。有损压缩可以减少图像在内存和磁盘中占用的空间。在屏幕上观看时,不会发现对图像的外观产生很大的不利影响。
无损压缩
:是最文件本身的压缩,和其它数据文件的压缩一样,对于数码图像而言也就不会使图像细节有任何损失。是可以完全还原的。无损压缩不能减少图像在内存和磁盘中占用的空间,压缩率也比较低。
4 超链接。
又称为:a标签(anchor)
属性 | 描述 |
---|---|
href | 带有 href 属性的a标签默认样式是蓝色的,并且带有下划线效果。 鼠标滑过时指针编程小手,点击页面即会跳转至href中的目标地址 |
target | 作用的定义超链接页面的打开方式。_self 代表在当前页面打开。_blank 代表在空白页面打开(新的页面)。 |
<a href = '目标页面的地址' target = '_blank'> 双标签内的内容就是显示在页面中的内容 </a>
5 锚点。
又称为:命名标记。就像一个定个位器,是页面内的超链接,用来实现同一个页面中不同区域的跳转。
需要两个步骤:
5.1 跳转目标的定义(给目标位置 添加 id
)
<p id = 'box1'>
在跳转目标的位置处,给对应的标签添加一个 id 属性,并且添加属性值,属性值即是 锚点的名字。
名字要遵循文件和文件夹的命名规则。
需要注意的是:以为一个锚点只能跳转到一个位置,所以 id 的属性值不能重复出现。
</p>
5.2 锚点的定义( 添加 href
)
<a href = '#box1'>
需要给跳转目标定义一个相应的超链接。
并且给他添加 href 属性,属性值是: # + 锚点的名称
</a>
6 文本修饰常用标签。
6.1 文本加粗:
<b>
b 标签仅仅是为了加粗显示文本。
</b>
<strong>
strong 语义化更强,表示该文本比较重要。(阅读设备阅读网页时,strong会重读。)
</strong>
6.2 文本倾斜:
<i>
i 标签仅仅为了让文字倾斜。
</i>
<em>
em 标签不仅能让文字倾斜,还可以加强语气。
百度等搜索引擎的爬虫爬取我们的页面时,特别收录em中的文本,以便别人从百度搜索em里包含的关键词时,让我们的页面优先曝光。
</em>
6.3 删除线:
<s>
HTML5 已经不支持 s 标签了,所以建议使用 del 标签。
</s>
<del>
建议使用 del 标签。
</del>
6.4 下划线:
<u>
下划线
</u>
6.5 上、下角标标签:
<sup>
上角标签。
</sup>
<sub>
下角标签
</sub>
7 快速创建标签。
Emmet语法
<!-- 1. 创建一个标签并且标签里面有文本:h1{这是一级标签} -->
<h1>这是一级标签</h1>
<!-- 2. 创建多个相同的标签,并且标签里面有文本:h1{这是多个一级标签}*4 -->
<h1>这是多个一级标签</h1>
<h1>这是多个一级标签</h1>
<h1>这是多个一级标签</h1>
<h1>这是多个一级标签</h1>
<!-- 3. 创建多个不同标题标签并且里面有文本:h${这是$级别的标题}*6 -->
<h1>这是1级别的标签</h1>
<h2>这是2级别的标签</h2>
<h3>这是3级别的标签</h3>
<h4>这是4级别的标签</h4>
<h5>这是5级别的标签</h5>
<h6>这是6级别的标签</h6>
<!-- 4. 嵌套结构标签:ul>li{这是ul里面的li}*5 -->
<ul>
<li>这是ul里面的li</li>
<li>这是ul里面的li</li>
<li>这是ul里面的li</li>
<li>这是ul里面的li</li>
<li>这是ul里面的li</li>
</ul>
8 有序列表。
有顺序的列表 。
属性 | 描述 |
---|---|
type | 属性设置列表的项目符号种类 ,五种 type 属性: |
A 大写英文字母顺序:A、B、C、D… | |
a 小写英文字母顺序 | |
I 罗马数字顺序 | |
i 罗马数字顺序 | |
1 阿拉伯数字顺序 | |
start | 属性修改起始序号 |
<ol type='A' start='6'>
<l1>把冰箱门打开</l1>
<l1>把大象装进去</l1>
<l1>把冰箱门关上</l1>
</ol>
ol 只能嵌套 li,如果需要嵌套其他标签,则需要放到 li里面。
9 无序列表。
属性 | 描述 |
---|---|
type | 属性用来设置无序列表的项目符号,属性值有四个: |
disc 实心圆点,默认值为 disc | |
circle 空心圆点 | |
square 实心方块 | |
none 隐藏项目符号 |
<ul>
<l1>无顺序</l1>
<l1>无顺序</l1>
<l1>无顺序</l1>
</ul>
10 自定义列表。
<dl>
<dt>列表标题</dt>
<dd>列表元素</dd>
<dd>列表元素</dd>
<dd>列表元素</dd>
</dl>
> dt 一般定义一个,为标题标签。dd 可以定义多个
> dt 和 dd 为兄弟标签
> dt 或 dd 标签是不能脱离 dl 单独使用的。
11 表格。
11.1 表格 table
属性:
属性 | 描述 |
---|---|
border | 定义表格线条的粗细 |
width | 定义表格宽度 |
height | 定义表格高度 |
cellspacing | 定义单元格之间的距离 |
cellpadding | 定义单元格边框和文本之间的距离 |
align:left \ center \ right | 定义表格在页面中水平方向 的对齐方式 |
bgcolor | 定义表格的背景颜色 |
bordercolor | 修饰边框的颜色 |
11.2 行 tr
属性:
属性 | 描述 |
---|---|
height | 行的高度 |
aligh:left \ center \ right | 设置 tr 内部所有单元格的 水平对齐 方式 |
valigh:top \ middle \ bottom | 设置 tr 内部所有单元格的 垂直对齐 方式 |
没有宽度属性 |
11.3 单元格 td
属性:
属性 | 描述 |
---|---|
width | 单元格的宽度 |
height | 单元格的高度 |
aligh:left \ center \ right | 单元格内容的 水平对齐 方式 |
valigh:top \ middle \ bottom | 单元格内容的 垂直对齐 方式 |
bgcolor | 单元格的背景颜色 |
<table
border='1'
width='500'
height='400'
cellspacing='0'
cellpadding='0'
align='center'
>
<tr
height='100'
aligh='right'
valigh='bottom'
>
<th>表格标题,样式加粗居中显示</th>
<th>表格标题,样式加粗居中显示</th>
<th>表格标题,样式加粗居中显示</th>
</tr>
<tr>
<td
height='100'
aligh='left'
valigh='top'
>第一个单元格</td>
<td>第二个单元格</td>
<td>第三个单元格</td>
</tr>
</table>
11.4 合并单元格:td
rowspan
合并 行
colspan
合并 列
<table width='600' height='400' border='1'>
<tr>
<td rowspan='4'></td>
...
</tr>
...
</table>
11.5 表格 caption 标题:
一般习惯放在第一个 tr 标签之前
<table>
<caption>表格标题</caption>
<tr></tr>
</table>
11.6 结构分组:thead tbody tfoot
行分组:
一个表格只允许使用一个 thead 和一个 tfoot,但允许使用多个 tbody
<table>
<caption>表格标题</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
列分组:
span 属性表示规定多少列为1组。
如果需要划分多组,则需要使用多个 colgroup 标签 。
<table>
<caption>表格标题</caption>
<colgroup span='1' bgcolor='blue'></colgroup>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
12 颜色值。
颜色是结合 红
、绿
、蓝
三色光来显示的。
在网页中表示颜色的方式有多种:颜色名称、十六进制值、RGB值等等。
表示颜色的方式 | 描述 |
---|---|
颜色名称 | 是指使用颜色的 英文单词 来定义颜色值。如:Red(红色)、Blue(蓝色)、Tomato(番茄色)等等有140种标准的颜色名称。 |
十六进制值 | 指使用 #RRGGBB 的形式来定义的颜色值。如:#0000FF(蓝色)。 |
RGB值 | 指使用 RGB(red, green, blue) 的形式来定义的颜色值。如:RGB(0, 0, 255),也是蓝色,每个参数都定在0-255之间的整数,中间以逗号隔开。 |
13 长度单位。
13.1 绝对长度单位
固定的
,用这些单位表示的长度会显示为设置的尺寸。
如:厘米(cm)、毫米(mm)、英寸(in)、px(pixel)。其中,
px 表示像素
,是网页中最常用的长度单位。
对于 低分辨率设备,1px 就是显示器的一个设备像素。
对于 高分辨率设备,1px 意味着多个设备像素。
13.2 相对长度单位
指相对于一个长度
计算出来的长度,一般用于适配不同的设备
。
比如 百分比(%):是相对于父元素的长度,根据设置的百分比计算出来的新值。
14 块级元素和内联元素。
每个HTML元素都有两个显示值:block(块)、inline(内敛)
元素类型 | 描述 |
---|---|
块级元素 | 独占一行 ,占据可用的全部宽度。例如:P标签、div等等 |
内联元素 | 不会独占有一行 。例如:span、b、i、em、strong等等 |
15 表单。
15.1 单行文本框 input
常见的文本框和密码框都是使用的单行文本框控件。 文本框,即是让用户输入内容的区域。
input
属性:
属性 | 描述 |
---|---|
type | text \ password \ number 等等 |
<form >
请输入用户名:<input type="text" />
<br />
请输入密码:<input type="password" />
</form>
15.2 多行文本框 textarea
多行文本框控件也称为文本域
。
多行文本框相对于单行文本框而言,允许用户输入多行文本,文本触达右侧边界后会自动换行,文本超出底部边界后会产生滚动条。
textarea
属性:
属性 | 描述 |
---|---|
cols | 指定一个文本区域的可见宽度(文字的个数 ) |
rows | 指定一个文本区域的可见行数 |
<form >
个人信息:<textarea cols="10" rows="3"></textarea>
</form>
15.3 单元和多选 radio
| checkbox
通过设置 input 标签的 type 属性值来实现单选和多选。
单选框控件必须成组使用才有意义,每组至少需要两个单选框。
“组“ 是通过 name 属性来建立的,凡是 name 值相同的就是一组。
同组的单选框,只有一个会处在选中的状态,其他的会自动呈现为未选中状态。
如果没有给单选框设置 name 属性,则会默认每个单选框自成一组。
input 属性:
属性 | 描述 |
---|---|
type | 'radio' 单选 |
'checkbox' 多选 | |
checked | 默认选中 。属性值只要是非空字符串都可以,或者不加属性值也可 |
<form >
性别:<input type="radio" name="gender" checked = "checked " />男
<input type="radio" name="gender" />女
前端基础:<input type="checkbox" checked>HTML
<input type="checkbox">CSS
<input type="checkbox">JS
</form>
15.4 下拉菜单 select
> option
select 属性:
属性 | 描述 |
---|---|
mutiple | 允许用户选择一个以上的值。使用 ctrl 配合鼠标键,选择多个值 。 |
size = "8" | 定义控件的默认可见行数。 |
option 属性:
属性 | 描述 |
---|---|
selected | 可以指定默认显示某一项。默认显示第一个。 |
<form >
<select>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option selected>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
</select>
<select multiple>
<option>音乐</option>
<option>电影</option>
<option>滑板</option>
<option>台球</option>
<option>钓鱼</option>
<option>旅游</option>
<option>上班</option>
</select>
</form>
15.5 文件选择 file
input 属性:
属性 | 描述 |
---|---|
type = 'file' | 文件选择 |
<form >
附件:<input type="file">
</form>
15.6 label
标签
label 作用:点击 label
内的文本时,光标会切换
到与label关联的表单控件 。
label 属性:for <==> id
属性 | 描述 |
---|---|
for | 用来定义与 label 关联的表单控件,值为表单控件的 id 属性值。 |
<form >
<label for="username">请输入用户名:</label>
<input id="username" type="text" />
</form>
15.7 只读和禁用 redonly
| disabled
input 属性:
属性 | 描述 |
---|---|
value | 作用是给输入框一个默认值 |
redonly | 只读 |
disabled | 禁用 |
<form >
您的手机号:<input type="text" value="15577778888" readonly />
性别:<input type="radio" name="gender" checked="checked " />男
<input type="radio" name="gender" />女
<input type="radio" name="gender" disabled/>保密
</form>
15.8 表单分组 fieldset
> legend
fieldset 字段集的意思,legend 说明的意思。
<fieldset>
<legend>基本信息</legend>
请输入用户名:<input id="username" type="text" />
<br />
请输入密码:<input type="password" />
</fieldset>
15.9 表单按钮
共分为五类:提交按钮、重置按钮、普通按钮、图像按钮、双标签button按钮。
input 属性 type 值:
属性 | 描述 |
---|---|
submit | 提交按钮 |
reset | 重置按钮 |
button | 普通按钮 |
image | 图像按钮 |
<button></button> | 双标签button按钮 |
15.9.1 提交按钮
<input type="submit" />
15.9.2 重置按钮
点击重置按钮,表单内输入的数据就会清空了。
<input type="reset" />
15.9.3 普通按钮
一个普通按钮是没有任何功能的。
<input type="button" value="普通按钮"/>
默认该按钮是没有名称的,value属性可以设置按钮的名称。其他类型按钮也可以
15.9.4 图片按钮
该按钮的功能和提交按钮一样,只是用图片代替了提交按钮的外观。
<input type="image" src="../beyou.jpeg"/>
15.9.5 双标签 button
按钮
也能实现表单的提交功能。
<button>button按钮</button>
<button type="button">button按钮</button>
<button type="reset">button按钮</button>
<button type="submit">button按钮</button>
双标签button按钮在form里,默认具备提交表单的功能。
如果为它添加了type属性,值为button,就变成了普通按钮。
15.10 form 属性:
属性 | 描述 |
---|---|
action | 行动的意思,点击提交按钮后做什么动作,事实上值就是服务器的地址。如果不定义action,浏览器默认会将当前的页面地址当成action的值。 |
target | 属性值和链接的target属性值一样。可以是_blank 也可以是 _self |
method | 指定提交请求的方式 。 |
get 是默认值,浏览器会把收集好的表单数据,加到服务器地址的后面,提交给服务器。 | |
post 值不但能收集表单的数据,而且不会在地址栏里暴露隐私数据。 |
<form action="http://www.baidu.com" target="_blank">
姓名:<input type="text" />
<br />
邮箱:<input type="text" />
<br />
<input type="submit" />
</form>
当点击提交按钮时,发生了三件事:
1 页面刷新了
点击提交按钮,数据提交给了网站的后台服务器,后台服务器再将数据保存到数据库中,
这里的服务器会给网页的表单提供一个访问地址。
2 输入框的内容消失了
3 浏览器地址栏里多了一个问号
15.11 表单数据采集和提交
<form action="" method="post">
手机号:<input type="text" name="pnumber">
密码:<input type="password" name="password">
<input type="submit" value="登录">
</form>
16 实用的标签。hr
pre
map
16.1 hr
水平线
作用是在网页上画出一条水平分割线。
属性 | 描述 |
---|---|
width | 控制水平线的宽度 |
size | 控制水平线的高度 |
color | 定义水平线的颜色 |
align | 调整水平线水平对齐方式 |
noshade | 用来去掉水平线阴影 |
<hr
width='控制水平线的宽度'
size='控制水平线的高度'
color='定义水平线的颜色'
align='调整水平线水平对齐方式'
noshade='用来去掉水平线阴影'
>
16.2 pre
预格式化的文本
pre 元素里的文本以固定宽度的字体显示。(编辑器里显示的什么样页面中就显示什么样)
<pre>
床前明月光,
疑是地上霜。
举头望明月,
低头思故乡。
</pre>
16.3 map
定义一个图像映射
图像映射就是一个图片的热点链接,点击图片不同区域实现链接页面的跳转。
map 属性:
属性 | 描述 |
---|---|
name | 是必须的,与img标签 的usemap属性相关联,在图像和地图之间创建关系。 |
area
标签,是一个单标签。用于定义图片上的热点区域,实现相应区域的目标跳转。
通过 area 标签,可以设置热点区域的位置、大小及形状。
area 属性:
属性 | 描述 |
---|---|
href | 用来定义热点区域链接的目标地址 |
shape | 用来定义区域的形状。default、rect、circle、poly |
coords | 用来定义 可点击区域的坐标,需要配合shape使用 |
<map >
<area href = "用来定义热点区域链接的目标地址"
shape = "用来定义区域的形状。default、rect、circle、poly"
coords = "用来定义 可点击区域的坐标,需要配合shape使用"
>
</map>
17 iframe
内嵌页面
作用:用来在一个网页中显示另一个网页。(嵌套页面)
属性:
属性 | 描述 |
---|---|
src | 资源,用于引入其他网站的页面。值是一个页面的路径 。 |
width | 宽度 ,用来控制引入页面的宽度。值是一个数字。 |
height | 高度 |
frameborder | 框架边框的意思,默认引入的框架带有边框。将该属性值设置为 0,取消框架的边框。 |
scrolling | 滚动 ,用来控制是否显示框架的滚动条。值有三个: |
anto 在需要的情况下出现滚动条,也是默认值 | |
yes 始终显示滚动条 | |
no 从不显示滚动条 |
<div>
<a href="https://arco.design/" target="iframe_a"><b>arco.design</b></a>
<a href="https://www.bilibili.com/" target="iframe_a"><b>哔哩哔哩</b></a>
<a href="https://www.mgtv.com/?lastp=so_result" target="iframe_a"><b>芒果tv</b></a>
</div>
<iframe
src="https://arco.design/"
frameborder="0"
width="800"
height="600"
name="iframe_a"
></iframe>
18 SVG
。
18.1 初始 SVG
SVG 是基于XML语法
的图像格式。即 可缩放矢量图
。
用手机拍摄的照片,图片格式一般都是基于像素处理的,图片放大,会模糊失真。
SVG 则是属于对图像的
形状描述
,本质上是文本文件,体积较小。
无论放大多少遍,都不失真
。
SVG 标签是 SVG 图形的一个容器,是一个双标签,定义画布。
svg
属性:
属性 | 描述 |
---|---|
width | 定义画布的 宽度 |
height | 定义画布的 高度 |
<svg width="800" height="600"></svg>
svg 有一些预定义的形状元素:
18.2 rect
矩形
属性 | 描述 |
---|---|
width | 宽度 |
height | 高度 |
fill | 矩形的填充颜色 |
fill-opacity | 填充颜色的不透明度,值范围0到1 |
stroke | 边框的颜色 |
stroke-width | 边框宽度 |
stroke-opacity | 描边颜色的不透明度,值范围0到1 |
x | 矩形的左边位置 |
y | 矩形的顶部位置 |
opacity | 整个图形的透明度 |
rx | 圆角x轴方向的半径长度 |
ry | 圆角y轴方向的半径长度 |
rx 和 ry 两个值若相等 | 则是一个圆角;否则是一个椭圆形的角 |
<svg width="400" height="110">
<rect
width="300"
height="100"
fill="blue"
stroke-width="3"
stroke="black"
/>
</svg>
<br>
<svg width="400" height="180">
<rect
x="50"
y="20"
width="150"
height="150"
fill="blue"
fill-opacity="0.1"
stroke="tomato"
stroke-opacity="0.9"
stroke-width="5"
/>
</svg>
圆角矩形
<svg width="400" height="180">
<rect
x="50"
y="20"
width="150"
height="150"
fill="red"
stroke="black"
stroke-width="5"
opacity="0.5"
rx="20"
ry="20"
/>
</svg>
18.3 circle
圆形
属性 | 描述 |
---|---|
cx | 圆形中心的 x 坐 |
cy | 圆形中心的 y 坐标 |
如果省略了 cx 和 cy 圆形的中心会被设置为 (0,0) | |
r | 圆的半径 |
fill | 背景色填充 |
stroke | 边框颜色 |
stroke-width | 边框宽度 |
<svg width="100" height="100">
<circle
cx="100"
cy="100"
r="40"
stroke="red"
stroke-width="3"
fill="pink"
/>
</svg>
18.4 ellipse 椭圆
属性 | 描述 |
---|---|
cx | 椭圆中心的 x 坐标 |
cy | 椭圆中心的 y 坐标 |
rx | 水平半径 |
ry | 垂直半径 |
<svg width="600" height="240">
<ellipse
cx="160"
cy="100"
rx="100"
ry="80"
stroke="purple"
stroke-width="3"
fill="yellow"
/>
</svg>
将多个椭圆堆叠在一起
<svg width="500" height="150">
<ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
<ellipse cx="220" cy="70" rx="180" ry="20" fill="lime" />
<ellipse cx="200" cy="40" rx="160" ry="15" fill="pink" />
</svg>
空心椭圆
<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>
18.5 line
线条
属性 | 描述 |
---|---|
x1 | x 轴上直线的起点坐标 |
x2 | x 轴上直线的末端坐标 |
y1 | y 轴上直线的起点坐标 |
y2 | y 轴上直线的末端坐标 |
stroke | 线条的颜色 |
stroke-width | 线条颜色的宽度 |
<svg width="500" height="210">
<line x1="0" x2="200" y1="0" y2="200" stroke="blue" stroke-width="4" />
</svg>
18.6 polyline
多线条
可以创建任何只由直线组成的形状,一般是把几个点链接起来,不要求封闭。
属性 | 描述 |
---|---|
points | 定义绘制图线所需要的点,也就是两个以上的 x 和 y 坐标对。 |
fill = "none" | 表示不填充任何颜色 |
<svg width="500" height="210">
<polyline
points="20,20 40,25 60,40 80,120 120,140 200,180"
fill="none"
stroke="purple"
stroke-width="1"
/>
</svg>
<svg width="500" height="180">
<polyline
points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 160,160"
fill="none"
stroke="purple"
stroke-width="4"
/>
18.7 polygon
多边形
用来创建一个至少有 3 条边的图像,多边形是由直线组成的,形状是封闭的。
属性 | 描述 |
---|---|
points | 定义了多边形每个角的 x和 y 的坐标。值至少要三对坐标。 |
三边形
<svg width="500" height="210">
<polygon
points="200,20 250,190 160,210"
fill="lime"
stroke="purple"
stroke-width="1"
/>
</svg>
四边形
<svg width="500" height="210">
<polygon
points="200,20 250,190 160,210"
fill="lime"
stroke="purple"
stroke-width="1"
/>
</svg>
五角星
<svg width="500" height="210">
<polygon
points="100,10 40,198 198,78 10,78 160,198"
fill="lime"
stroke="purple"
stroke-width="1"
/>
</svg>
18.8 text
绘制文本
属性 | 描述 |
---|---|
x 和 y | 定义文本的坐标 |
text-anchor | 文本的对齐方式:star middle end |
<svg width="300" height="30">
<text x="0" y="15" fill="red">I Love SVG</text>
</svg>
文本倾斜
<svg width="300" height="200">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)"> I Love SVG </text>
</svg>
text 元素可以包括多个 tspan
元素。
每个 tspan 元素可以 包含不同的格式和位置。
<svg width="300" height="200">
<text x="10" y="20" fill="red">
I Love SVG
<tspan x="10" y="45">1111</tspan>
<tspan x="10" y="70">2222</tspan>
</text>
</svg>
也可以给文本添加链接,使用 a 标签包括起来。
<svg width="200" height="30" xmlns:xlink="https://www.w3.org/1999/xlink">
<a xlink:href="svg_line_polygon_polyline.html" target="_black">
<text x="10" y="15" fill="red">SVG!!!</text>
</a>
</svg>
18.9 path
绘制路径
可以绘制任意形状的图形。
属性 | 描述 |
---|---|
d | 定义绘制路径的命令 |
M | 定义绘制图形的起点坐标 |
L | 用来绘制一条直线 |
大写字母表示绝对定位,相对于屏幕坐标圆点的位置 | |
小写字母表示相对定位,相对于上一个绘制点的位置 | |
q | 用来绘制二次贝塞尔曲线。需要定义控制点和终点坐标。 |
贝塞尔曲线
<svg width="450" height="400">
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
</svg>
<svg width="450" 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>
18.10 SVG 描边属性
所有的描边属性,都可以应用于任何类型的 线条、文本和元素的轮廓。
属性 | 描述 |
---|---|
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
</g>
</svg>
18.11 SVG 模糊和阴影效果
18.11.1 模糊效果 filter
属性 | 描述 |
---|---|
filter | 元素里面包括一个或多个效果滤镜。 |
filter | 元素有一个必要的 id 属性,用于识别过滤器,图形通过这个 id 识别要使用的过滤器。 |
filter | 元素都是在 defs 中定义的。 |
<defs>
<filter id ></filter>
</defs>
模糊效果可以通过 feGaussianBulr
滤镜来创建,是一个高斯模糊效果
。定义在 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)"
/>
</svg>
18.11.2 阴影效果
阴影效果可以通过 feOffset
滤镜和 feBlend
滤镜来实现。
其原理 是将 SVG 图形图像火元素,在xy平面上做一定的偏移。
定义在 filter 标签里面。
feOffset 属性:
属性 | 描述 |
---|---|
dx | 表示阴影在 x 轴上的偏移量。 |
dy | 表示阴影在 y 轴上的偏移量。 |
in | 表示阴影图像的来源。值为: |
SourceAlpha 时表示是一个黑色的阴影。 | |
SourceGraphic 表示阴影图像的来源。 |
最后还需要在偏移图像上混合元素的图像,应用 feBlend
标签。
<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)"
/>
</svg>
18.12 SVG 线性渐变和径向渐变
渐变是一种颜色向另一种颜色的平滑过渡。几种颜色的过渡可以应用于同一个元素。
SVG 中主要有两种渐变类型:线性渐变
和 径向渐变
。
18.12.1 线性渐变
linearGradient
来定义。必须嵌套在 defs 标签中。可以实现 水平渐变、垂直渐变、角度渐变。
属性 | 描述 |
---|---|
x1 和 y1 | 用于定义线性渐变的开始位置 |
x2 和 y2 | 用于定义线性渐变的结束位置 |
当 y1 = y1,x1 ≠ x2 | 会产生水平渐变 |
当 x1 = x2,y1 ≠ y1 | 会产生垂直渐变 |
当 x1 ≠ x2,y1 ≠ y1 | 会产生角度渐变 |
线性渐变的颜色范围可以有两种或多种颜色组成。
每种颜色都用一个 stop
标签来定义:
属性 | 描述 |
---|---|
offset | 用于定义渐变颜色的开始位置和结束位置,是 一个表示相对位置的百分比。 |
stop-color | 用于定义渐变的颜色。 |
<defs>
<linearGradient>
<stop offset="10%" />
</linearGradient>
</defs>
<!-- 水平渐变 -->
<svg width="400" height="150">
<defs>
<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="#fff" font-size="45" x="150" y="86">SVG</text>
</svg>
18.12.2 径向渐变
radialGradient
来定义,也必须嵌套在 defs 标签中。
属性 | 描述 |
---|---|
id | 定义渐变的唯一名称 |
cx cy r | 定义了最外面的圆 |
fx fy | 定义了最里面的圆 |
径向渐变的颜色范围可以有两种或多种颜色组成。
每种颜色都用一个 stop
标签来定义:
属性 | 描述 |
---|---|
offset | 用于定义渐变颜色的开始位置和结束位置,是 一个表示相对位置的百分比。 |
stop-color | 用于定义渐变的颜色。 |
<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>