html,css,javascrip,canvas快速查询列表

最新推荐文章于 2024-09-22 10:46:41 发布

staringOrz

最新推荐文章于 2024-09-22 10:46:41 发布

阅读量1k

点赞数 1

分类专栏：前端基础知识文章标签： html css canvas

本文链接：https://blog.csdn.net/dengxijian/article/details/53011455

版权

前端基础知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

//HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

//基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

//文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

//链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

//图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">

//样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

//无序列表
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

//有序列表
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

//定义列表
<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

//表格（Tables）
<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

//框架（Iframe）
<iframe src="demo_iframe.htm"></iframe>

//表单（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

//实体（Entities）
< 等同于 <
> 等同于 >
© 等同于 ?

                                          css
1.css语法
selector{color:blue;font-size:12px;}
selector(选择器){属性:值;属性:值;};
2.CSS 注释
以 "/*" 开始, 以 "*/" 结束.
3.CSS Id 和 Class
如果你要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
如：#para1{text-align:center;color:red;}
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
如：.center {text-align:center;}
4.CSS 创建(如何插入样式表 外部样式表 内部样式表 内联样式)
//外部样式表
每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
//内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
//内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
5.CSS 背景
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
背景颜色
body {background-color:#b0c4de;}
背景图像（background-image 属性描述了元素的背景图像.默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.）
body {background-image:url('paper.gif');}
背景图像 - 水平或垂直平铺
body{background-image:url('gradient2.png');}
背景图像- 设置定位与不平铺
body{background-image:url('img_tree.png');background-repeat:no-repeat;}
背景- 简写属性
body {background:#ffffff url('img_tree.png') no-repeat right top;}
6.CSS 文本格式
//Text Color
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
//文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
//文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
a {text-decoration:none;}
//文本转换//用于所有字句变成大写或小写字母，或每个单词的首字母大写
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
//文本缩进
p {text-indent:50px;}
7.CSS 字体
//字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
p{font-family:"Times New Roman", Times, serif;}
字体样式（正常 - 正常显示文本 斜体 - 以斜体字显示的文字 倾斜的文字 - 文字向一边倾斜）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
设置字体大小像素
h1 {font-size:40px;}
用em来设置字体大小
h1 {font-size:2.5em;} /* 40px/16=2.5em */
使用百分比和EM组合
body {font-size:100%;}
h1 {font-size:2.5em;}
8.CSS 链接
链接样式
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:#FF0000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
链接样式文本修饰
text-decoration 属性主要用于删除链接中的下划线：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
链接样式背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
8.CSS 列表
不同的列表项标记
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
作为列表项标记的图像
ul{list-style-image: url('sqpurple.gif');}
列表 -缩写属性
ul{list-style: square url("sqpurple.gif");}
9.CSS 表格
表格边框
table, th, td{border: 1px solid black;}
折叠边框（border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：）
table{border-collapse:collapse;}
table,th, td{border: 1px solid black;}
表格宽度和高度
table {width:100%;}
th{height:50px;}
表格文字对齐（text-align属性设置水平对齐方式，像左，右，或中心）
td{text-align:right;}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
td{height:50px;vertical-align:bottom;}
表格填充（如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：）
td{padding:15px;}
表格颜色
table, td, th{border:1px solid green;}
th{background-color:green;color:white;}
10.CSS 盒子模型(Box Model)
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
边框宽度
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。
p.one{border-style:solid;border-width:5px;}
p.two{border-style:solid;border-width:medium;}
边框颜色
p.one{border-style:solid;border-color:red;}
边框-单独设置各边
p{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;}
边框-简写属性
border:5px solid red;
11.CSS Outlines
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定了样式，颜色和外边框的宽度。
12.CSS Margin(外边距)
Margin - 单边外边距属性
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
13.CSS Padding（填充）
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
14.CSS Display(显示) 与 Visibility（可见性）（display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。）
隐藏元素 - display:none或visibility:hidden
h1.hidden {visibility:hidden;}
如何改变一个元素显示
li {display:inline;}
span {display:block;}
15.CSS Positioning(定位)
Static 定位
Fixed 定位
Relative 定位
Absolute 定位
16.CSS Float(浮动)
img{float:right;}
清除浮动 - 使用 clear
.text_line{clear:both;}
CSS 组合选择符
div p{ background-color:yellow;}
子元素选择器
div>p
{
  background-color:yellow;
}
相邻兄弟选择器
div+p{background-color:yellow;}
普通相邻兄弟选择器
div~p{background-color:yellow;}

                                         《附加canvas方面内容》
//1.添加canvas
<body>
<canvas id="canvas">
</body>
//2.获取canvas对象
var canvas=document.getElementById("canvas");
//3.获取画笔（2d环境)
var context=canvas.getContext("2d");
//4.绘制矩形相关函数
rect(x.y.width,height);//绘制矩形
fillRect(x.y.width,height);//绘制填充矩形
strokeRect(x,y,width,height);//绘制矩形边框
//5.线条属性
linewidth//s设置线条宽度
linecap="butt"//默认值//设置线条末端形状
       ="round"//末端为圆形 
       ="square"//末端为方形
lineJoin="miter"//默认//两线条衔接的样式
        ="bevel"//衔接末端水平
        ="round"//衔接末端圆形
miterlimit(参数)//用于设置miter的样式，超过该范围默认用"bevel"样式衔接
//5（5）绘制五角星函数
function drawstar(cxt,r,R,x,y)
    {
        cxt.beginPath(cxt,r,R,x,y);
        for(var i=0;i<5;i++)
        {
            cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+x,
                    -Math.sin((18+i*72)/180*Math.PI)*R+y);
            cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,
                    -Math.sin((54+i*72)/180*Math.PI)*r+y);
        }
        cxt.closePath();
        cxt.stroke();
    }
//6.图形变换
save();restore();//用于保存和回复当前图形的变换，方便下一次从初始状态进行变换
translate(x,y）;//用于平移原点位置（位移操作）
rotate(deg);//旋转操作
scale(sx,sy);//缩放操作
tansform(a,b,c,d,e,f);//从先前状态变换，a,d分别为原点水平和垂直平移
                      //b,d分别为水平和垂直倾斜度变换，c,f分别为对x,y进行缩放倍数
setTransform(a,b,c,d,e,f)//与前者的区别在于，该变换是严格从初始状态开始变换
//7.渐变色（fillStyle）
Linear Gradient
var grd=context.createLinearGradient(xstart,ystart,xend.yend);//线性渐变
Radial Gradient
var grd=context.ctrateRadialGradient(x0,y0,r0,x1,y1,r1);//径向渐变
grd.addColorstop(stop,color);//添加渐变颜色
//8.填充
reatePattern(img,repeat-style)//填充图片
reatePattern(canvas,repeat-style)//填充canvas创建的画布
reatePattern(video,repeat-style)//填充video
repeat-ttyle:no-repeat//没有重复
             repeat-x //x方向重复
             repreat-y//y方向重复
             repeat   //x,y方向上重复
//9.曲线绘制
context.arc(centerx,centery,radius,startingAngle,endindAngle,anticlockwise=false);
context,arcTo(x1,y1,x2,y2,radius)//以这两条线问哦切线绘制一个圆弧
//绘制贝塞尔曲线
context.quadraticCurveTo(x1,y1,x2,y2)//x1,y1,为控制点，x2,y2为结束点（二次贝塞尔曲线）
context.bezeirCurveTo(x1,y1,x2,y2,x3,y3)//x1,y1,x2,y2为控制点，x3,y3结束点（三次贝塞尔曲线）
//10.文字渲染
context.font="bold 40px Arial"//参数分别为字体样式，字体大小，什么字体
context.fillText(string,x,y)//分别为书写的字符串和书写的位置
context.fillText(string,x,y，[maxlen])//加入了设置字体宽度（单位为像素）
context.strokeText(string,x,y,[maxlen])//描绘字体边框，其他同上
//11，字体的绘制
默认值：“20px sans-serif”
context.font=""
里面可以填
font-style:normal(默认)/italic(斜体字)/oblique(倾斜字体)
font-variant:normal(默认)/small-caps(小写字母变成小号的大写字母)
font-weight:lighter(细体)/normal(默认)/bold(粗体)/bolder(更粗)
font-size;20px/2em/150%(字号大小的三种方法设置)
font-family:(字体)
//12.文本的对齐
context.rextAlign=left/center/right//分别为左对齐，居中右对齐
context.textBaseline="top"/"middle"/"bottom"
//13.文本的度量
context.measureText(string).width//测量字符串宽度
//14.绘制阴影
context.shadowcolor="颜色"，阴影颜色
context.shadowOffsetX= //阴影x方向上的位移
context.shadowOffsetY= //阴影y方向上的位移
context.shadowBlur=数值 //阴影模糊程度（数值越大越模糊）
context.globalAlpha=数值 //数值为0到1，越小就越模糊
//14.剪辑区域
context.clip();
//15.非零环绕原则
//16.ispointInPath
context.isPointInPath(x,y);//判断是否在区域内