html前端
2020-01-20 11:41:53 43 举报AI智能生成
HTML+CSS+canvas+js
作者其他创作
大纲/内容
front end
CSS
选择器
ID选择器
#id{属性名：属性；}
注意:“#”表示“id”
类选择器
.class｛color:red;｝
注意:“.”表示“类”
标签选择器
div{width:80px;}
群组选择器
如：<ul>与<div>共用一种颜色
ul ，div{color:red;}
通配符选择器
*｛margin:0;padding:0;｝
\"*\"代表全局属性 一般作用于初始化
后代选择器
#links a {color:red;}
后代选择器 顾名思义 所有#links下的<a>链接“全部”字体颜色变成red
子选择器
#links > a {color:blue;}
伪类选择器
a:link 是用在未访问的链接的选择器
a:link { font-size: 14px; text-decoration: underline; color: blue; }
a:visited 是用在已访问过的链接的选择器
a:visited { font-size: 14px; text-decoration: underline; color: orange; }
a:hover 是用在鼠标光标放在其上的链接的选择器
a:hover { text-decoration: underline; color:green; } 与 a:hover span{ color:red; }
a:active 是用在获得焦点（比如，被点击）的链接的选择器
a:ctive{text-decoration: underline; color: gray; }
CSS引入的几种样式
外部样式
<link rel=\"stylesheet(规定当前文档与链接文档之间关系)\" type=\"text/css(文件格式)\" href=\"(文件名称)\"/>
内嵌样式
<head><style=\"text/css\">样式拽写</style></head>
行内样式
<div style=\"属性：属性值;...\"></div>
CSS属性
背景属性
背景图像：background-image:url(图像路径);
设置背景图片不重复：background-repeat:no-repeat；默认重复
以上两句结合使用：background-image:url() 0 0 no-repeat;
最近使用 background-image 加其它属性 不管用了，可以把image去掉background:是简写，除URL外，后面还可以设置图片的其他属性，用空格隔开；background-image:url就只能接图片的路径这一个属性。
background-attachment 属性设置背景图像是否固定(fixed)或者随着页面的其余部分(scroll)滚动。
background-size属性用来处理一些不规则图片，实际运用比较少，图片已经处理好了
background-image: （线性渐变）linear-gradient(方向，起始颜色，过度颜色）；radial-gradient(径向渐变)
渐变线的长度可以改变，拉出的渐变线越长，色块隔得越远，渐变越自然，拉出的渐变线越短，色块隔得越近，渐变越生硬。
子主题
盒子模型
定义宽高：width，height
内边距上右下左：padding:top right bottom left;
也可以单独设定如：padding-top:50px;
外边距：margin:top right bottom left;
margin:0 auto;网页居中
边框属性
边框颜色：border-color
也可以通过上下左右规定单独风格 如：border-top-color
边框风格：border-style
风格属性值
solid实线 dashed虚线 dotted点状 double双线 none无边框
groove 3D 凹槽边框 ridge垄状边框
大部分时候我们通过简写方式：border:soild 1px red;来实现正常效果
border-radius:px与%;添加圆角边框
当然也可以单独规定border-top-left-radius
轮廓属性：outline:color style width;
向方框添加一个或多个阴影:box-shadow:0(水平) 0(垂直偏移) 0(模糊半径) 颜色;
文本也有个渲染效果text-shadow
边框宽度 与上下左右的设置 比较随心，多种多样，真正用处较少，了解即可
如：border-top-width，border-top-style.....
布局相关属性
浮动float
left 与right
清除浮动clear:both;
overflow溢出处理
hidden隐藏超出规定内容，scroll无论是否超出添加滚动条 auto超出自动添加滚动条 visible显示
display显示属性
none元素隐藏或关闭 block 生成一个块元素 inline生成一个或多个行内元素 inline-block该元素生成一个块状盒 ，随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
opacity属性 设置元素的透明度 0~1之间变化
position定位方式，没有任何继承性，只读
relative相对于其正常位置进行定位 absolute相对于第一个父元素进行定位 fixed相对于浏览器窗口进行定位
元素的位置通过 \"left\
堆叠层级通过z-index进行对比（优先级）较大的元素会覆盖较小的一个
字体与文本属性
font-family字体定义 font-size字体大小 font-style:italic(斜体) oblique(倾斜);
cursive草书字体 serif 带衬线字体 可以了解一些带有特色的字体
font-weight字体粗细 font-variant字体大写
bold(粗) bolder(更粗) inghter(更细) 700=blod 400=normal
文本修饰text-decoration:underline(下划线) line-through(删除线) ;
单词间距word-spacing 字母间距letter-spacing 行高line-height text-indent首行缩进
text-align:left，right，center;水平对齐作用块元素 vertical-align:top、middle、bottom;垂直对齐内联元素
text-overflow: ellipsis | clip ; inherit；继承
文本溢出省略号代表 和修剪
white-space:nowrap; 属性设置如何处理元素内的空白。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
列表属性
编号类型:list-style-type 定义列表项符号
编号图像:list-style-image
标记位置：list-style-position:inside(里面) onside(外面);
光标cursor
Pointer(一只手) wait(程序等候) help(问号) Move(可被移动) Crosshair(十字线) text(文本)
HTML
列表
定义列表<dl>
特殊符号
-->空格
>-->大于号，⁢-->小于号
©；-->版权符号
<aside> 的内容可用作文章的侧栏。
<dt>定义列表中的项目
<a href=\"#c\">用于跳转段落
<hr/>水平线 <br/>换行 <pre>定义预格式化的文本
<b>实体标签 <strong>逻辑标签
<dd>描述列表中的项目
<del>定义文档中已被删除的文本 替代<s>
<ins>被插入文档中的文本 替代<u>用户会把它混淆为一个超链接
强调内容<em>， <i>基于物理的斜体
有序列表
<ol><li></li></ol>
Type属性：1(默认值number)，A，a，i，I
CSS样式：list-style-type: none，upper-roman，lower-alpha 其它不支持
无序列表
<ul><li></li></ul>
type属性：disc(实心圆，默认值)，circle(空心圆)，square(正方形)，decimal(数字)
XHTML 1.0 Strict DTD与html4.01中不被支持和不赞成使用
表格由<table>定义
<tr>定义表格中若干 行
每行被分割为若干单元格由<td>定义
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格...
colspan 和 rowspan 属性可横跨的列数与行数
\u00A0valign 属性：top，bottom，baseline(与基线对齐)，middle
表格的表头使用 <th> 定义 呈现粗体居中效果
<table>属性
border表格边框的宽度
border-top-width，border-left-style 通过这两种方式可以满足大部分边框样式需求
cellpadding单元格内文字与边框的距离，cellspacing单元之间的距离
frame规定外侧边框哪个部分可见
above 显示上部的外侧边框，below显示下部的外侧边框
lhs 显示左边 \u00A0rhs显示右边
hsides\u00A0显示上部和下部\u00A0\u00A0 vsides显示左边和右边
rules规定内侧边框哪个部分可见
rows位于行\u00A0\u00A0\u00A0cols位于列之间的线条\u00A0 all位于行和列之间的线条
rules 属性无法在 Internet Explorer、Chrome 或者 Safari 中正确地显示。
大部分表格属性在html5中都不支持或不赞成使用，以上是一些的特殊方法使用，其它推荐使用css边框样式拽写
<frameset>定义框架集
rows cols 属性表示横向 与纵向分割 ，frameborder属性:是否显示框架边框 0(NO)和1(YES)两个值
<frame>与<ifrsme>标签
name属性 src属性 scrolling属性：是否显示滚动条 在html5中 不支持这两个标签了，了解就好
表单由<form>定义
<form>标签
action 属性：规定向何处提交表单的地址（URL）
method 属性：定在提交表单时所用的 HTTP 方法：（默认：GET），POST
<input> 标签的属性
不同的 type 属性，可以变化为多种形态。
button点击，submit提交 ， reset重置，image(alt)定义图像作为提交按钮 file浏览选择文件上传
checkbox(复选框) radio(单选) text(文本) password(密码遮蔽)等常用属性值。html5中增加了多种形态变化
checked(预选) size属性 src 属性 name属性在html常用
disabled属性 规定应该禁用的input ， readonly属性规定文本只读 通过js判定布尔值实现目的
input其它属性和值就不多介绍...
for属性规定 label 与哪个表单元素绑定
通过在 <label>中放入<input>来隐式地连接起来的
<textarea>定义多行的文本输入控件
可以通过 cols 和 rows 属性来规定 textarea 的尺寸
更好的办法是使用 CSS 的 height 和 width 属性
style=\"resize:none; 固定大小
<fieldset> 将表单内容的一部分打包，生成一组相关表单的字段
<legend> 标签为 fieldset 元素定义标题
name 属性是 <fieldset> 在 HTML5 中的新属性
<select>定义下拉列表
<optgroup>定义选项组
label属性必须描述text内容
<option>定义select的内容
value属性送往服务器的内容
selected属性 定义预选一个项
multiple属性 同时选择多个选项 windows：按住 Ctrl 按钮 Mac：按住 command 按钮
name属性 用于对提交到服务器后的表单数据进行标识 或引用数据 size属性：可选数目
<head></head>之间是网页头部可见内容
<meta charset=\"UTF-8\">html编码格式
php编码格式-->header(\"Content-Type:text/html; charset=utf-8\");
<title></title>网页标题
<link rel=\"stylesheet\" type=\"text/css\" href=\"\">导入css样式
<body></body>之间是页面可见内容
查看代码源
javascript: s=document.documentElement.outerHTML;document.write(\"<body></body>\");document.body.innerText=s;
粘贴到地址栏
view-source:http://网址
Canvas绘图
canvas基本用法
设置width和height属性，指定绘图区域的大小
调用getContext()并传入上下文的名字，如：2d
可使用toDataURL(MIME类型参数)，导出在元素绘制的图像
WebGL(3D上下文)
参考：http://www.hiwebgl.com/?p=42
2D上下文
填充和描边
绘制矩形
矩形是唯一一个可在2D上下文中绘制的形状
相关方法
fillRect()
4个参数：矩形的x坐标、y坐标、宽度、高度
为画布上绘制的矩形填充指定的颜色
通过fillStyle属性指定填充的颜色
strokeRect()
参数同上，单位是像素
为画布上绘制的矩形使用指定的颜色描边
通过strokeStyle属性指定描边颜色
lineWidth用于控制描边线条的宽度
clearRect()
参数同fillRect()方法
用于清除画布上的矩形区域
绘制路径
beginPath()
开始绘制新路径
绘制实际路径方法
绘制一条二次曲线
绘制矩形路径
closePath()
可创建一条连接起点的曲线
用于在路径被关闭之前确定画布上的某一点是否位于路径上
clip()
可在路径上创建一个剪切区域
可使用fill()方法填充，stroke()方法描边
绘制文本
fillText()
4个参数：要绘制的文本字符串，x坐标，y坐标，可选的最大像素宽度
属性
font
文本样式，大小及字体
textAlign
文本对齐方式
textBaseline
使用fillStyle属性绘制文本
strokeText()
参数及属性同上
使用strokeStyle属性为文本描边
measureText()
用于确定文本大小，有一个参数：要绘制的文本
TextMetrics对象
变换
通过上下文的变换(变换矩阵)，可把处理后的图像绘制到画布上
变换矩阵的方法
rotate(angle)
围绕原点旋转图像angle弧度
缩放图像
直接修改变换矩阵
将变换矩阵重置为默认状态，再调用transform()
跟踪上下文变换的方法
save()
调用save()后，可将当时的所有设置保存在栈结构中
连续调用save()，可把更多设置保存在栈结构中，然后再连续调用restore()可一级级返回
注：save()保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容
restore()
在保存设置的栈结构中向前返回一级，恢复之前的状态
绘制图像
drawImage()
将图像绘制到画布上
阴影
可根据以下属性未形状或路径绘制出阴影
shadowColor
用css颜色格式表示的阴影颜色，默认黑色
shadowOffsetX
形状或路径x轴方向的阴影偏移量，默认为0
shadowOffsetY
形状或路径y轴方向的阴影偏移量，默认为0
shadowBlur
模糊的像素数，默认为0(不模糊)
渐变
createLinearGradient()
创建一个线性渐变对象
createRadialGradient()
创建一个径向渐变对象
addColorStop()
为创建的渐变对象指定色标
2个参数：色标位置(0~1之间)和CSS颜色值
模式
模式可用来填充或描边图像
createPattern()
用来创建一个新模式
参数：一个元素，一个表示如何重复图像的字符串
使用图像数据
getImageData()
通过该方法获取原始图像数据
putImageData()
把图像数据绘制到画布上
合成
globalAlpha属性
globalCompositionOperation
表示后绘制的图形怎样与先绘制的图形结合
职业：本科
0 条评论
回复 删除
下一页
