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

最新推荐文章于 2024-09-05 22:58:10 发布

staringOrz

最新推荐文章于 2024-09-05 22:58:10 发布

阅读量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);//判断是否在区域内

staringOrz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html,css,javascrip,canvas快速查询列表

//HTML 基本文档文档标题可见文本...//基本标签（Basic Tags）最大的标题 . . . . . . . . . . . . 最小的标题这是一个段落。（换行）（水平线）//文本格式化（Formatting）粗体文本计算机代码强调文本斜体文本键盘输入预格式化文本更小的文本重要的文本（缩写）（联系信息）
复制链接

扫一扫

专栏目录