网站安全维护公司,wordpress 阅读全文代码,南沙建设网站,律师论坛网站模板1、常见状态码
200 #xff1a;成功。 400 #xff1a;客户端请求有语法错误#xff0c;服务器端不能理解。 401 #xff1a;该请求可能未经过授权。 403 #xff1a;服务器端收到该请求#xff0c;但是拒绝为它提供服务#xff0c;可能是没有权限等等。 404 #xff…1、常见状态码
200 成功。 400 客户端请求有语法错误服务器端不能理解。 401 该请求可能未经过授权。 403 服务器端收到该请求但是拒绝为它提供服务可能是没有权限等等。 404 该资源没找到。 500 服务器端发生了一个不可预知的错误。 503 服务器端当前还不能处理客户端的这个请求可能过段时间之后才能恢复正常。
2、注释
!-- 在此处写注释 --3、HTML常见的标签
!-- 双标签 --h1/h1 !-- 标题标签有六种 h1h2h3h4h5h6 --title/titlep/p !-- 段落标签 --div/div !-- 块级元素浏览器会自动在 div 和 /div 所标记的区域前后自动放置一个换行符。 --span/span !-- 内联元素默认显示在同一行。 --a/a !-- 超链接标签 --ul/ul!-- 单标签 --br / !--换行--hr / !--水平分隔线--meta /img / !-- 图片标签 --!-- 空格字符nbsp; --4、HTML列表
!-- HTML 列表分为有序列表ol无序列表ul以及自定义列表dl。 --p无序列表/p
ul typecircleli空心圆列表项1/lili空心圆列表项2/li
/ulp有序列表/p
ol typeAli列表项1/lili列表项2/li
/ol!--
ul 标签的 type 属性值 备注
disc默认 实心圆
circle 空心圆
square 小方块
--!--
ol 标签的 type 属性
值 备注
1默认 数字表示123...)
A 大写字母表示A,B,C...)
a 小写字母表示a,b,c...)
I 大写罗马数字表示(I,II,III…)
i 小写罗马数字表示(i,ii,iii…)
--!-- 自定义列表dl语法格式 --
dldt名词1/dtdd名词1解释1/dd...dt名词2/dtdd名词2解释1/dd...
/dl5、HTML样式
htmlbodyp stylebackground-color:red实验楼/p/body
/html!-- 通过对 background-color 属性值的设置来给背景设置颜色。 --
!-- 通过对 font-family 属性值的设置来设置字体。 --
!-- 通过对 color 属性值的设置来设置颜色。 --
!-- 通过对 font-size 属性值的设计来设计字体大小。 --
!-- 通过对 text-align 属性值的设计来设计字体大小。 --6、表格
table border1 width300px height150px cellspacing0px cellpadding20px!-- 表格标题 --caption支出表/caption!-- 每个表格均有若干行由 tr 标签定义 --tr!-- 表格的表头使用 th 标签进行定义 --th支出/thth备注/thth rowspan3合并该列上的三个单元格/th/trtr!-- 每行被分割为若干单元格由 td 标签定义 --td32/tdtd买苹果/td/trtrtd24/tdtd买饮料/td/trtrtd colspan3合并该行上的三个单元格/td/tr
/table!-- cellspacing设置单元格与单元格之间的距离默认为2px --
!-- cellpadding设置文字与单元格之间的距离默认为1px --
!-- width设置表格的宽度 --
!-- height设置表格的高度 --
!-- bgcolor设置背景颜色 --
!-- border设置表格的边框 --7、表单
form 标签用于创建 HTML 表单常见的表单格式为form name method action/formname定义表单的名字。
method定义表单结果从浏览器传送到服务器的方式默认参数为get 。post 安全性更高因此常用作传输密码等而 get 安全性较低一般用于查询数据。
action发送数据要去的地址。它的值必须是一个有效的 URL可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action#则数据将被发送到包含表单的页面的 URL。!-- 文字字段 --
inputtypetextname控件名称value文字字段的默认取值size控件的长度maxlength最长字符数
/!-- 密码输入框 --
input typepassword namepwd /!-- 单选按钮 --
form nameformBox methodpost actioninput typeradio namesex valuemale checked /男br /input typeradio namesex valuefemale /女
/form!-- 复选框 --
form nameformBox methodpost actioninput typecheckbox namemusic checked /音乐br /input typecheckbox nameart /美术br /input typecheckbox namemath /数学br /
/form!-- 提交按钮用于发送表单数据给服务器。 --
form nameformBox methodpost actioninput typetext value输入的内容 /button typesubmitThis a submit button/button!--or--input typesubmit valueThis is a submit button /
/form!-- 重置按钮用来清除用户在页面中输入的信息。 --
form nameformBox methodpost actioninput typetext /button typeresetThis a reset button/button!--or--input typereset valueThis is a reset button /
/form!-- 匿名按钮button --
button typebuttonThis a anonymous button/button!--or--
buttonThis a anonymous button/button!--or--
input typebutton valueThis is a anonymous button /!-- 下拉菜单 --
form nameformBox methodpost actionselect nameselect !-- size2 表示一次显示 2 条数据。 --option value成都成都/optionoption value广州广州/optionoption value四川四川/optionoption value上海上海/option/select
/form!-- 文本域 --
form nameformBox methodpost action留下您的联系方式textarea nametextarea cols35 rows5/textarea
/form
!-- cols 代表列数rows 代表行数。 --8、插入图像
imgsrchttps://labfile.oss.aliyuncs.com/courses/1236/coder.jpgalt程序员title你好啊width700pxheight600px
/!-- src 的值是图像文件的 URL也就是引用该图像的文件的的绝对路径或相对路径。 --
!-- alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。 --
!-- title 设置鼠标悬停时显示的内容一般不用设置。 --
!-- 设置 width 和 height 的值来设置图片的宽和高。 --
!-- 上一级文件夹../ --
!-- 上两级则需要使用 ../ ../ --9、HTML5表单元素
!--
datalist 元素用于为文本框提供一个可供选择的列表
使用 datalist 元素来为表单小部件提供建议的、自动完成的值
并使用一些 option 子元素来指定要显示的值。
然后使用 list 属性将数据列表绑定到一个文本域(通常是一个 input 元素)。
--!doctype html
htmlheadmeta charsetutf-8 /title/title/headbodylabel formyColorWhats your favorite color?/labelinput typetext namemyColor idmyColor listmySuggestion /datalist idmySuggestionoptionblack/optionoptionblue/optionoptiongreen/optionoptionred/optionoptionwhite/optionoptionyellow/option/datalist/body
/html
!-- or --
!doctype html
htmlheadmeta charsetutf-8 /title/title/headbodylabel formyColorWhats your favorite color?/labelinput typetext namemyColor idmyColor listmySuggestion /datalist idmySuggestionoption valueblack/optionoption valueblue/optionoption valuegreen/optionoption valuered/optionoption valuewhite/optionoption valueyellow/option/datalist/body
/html10、HTML5 表单新增的属性
!-- autocomplete 属性规定表单是否应该启用自动完成功能
自动完成允许浏览器预测对字段的输入当用户在字段开始键入时
浏览器基于之前键入过的值应该显示出在字段中填写的选项。
当 autocomplete 属性值为 on 时表示启用自动完成功能为 off 时表示关闭。
autocomplete 属性适用于 form以及下面的 input 类型
text, search, url, telephone, email, password, datepickers, range 以及 color。 --
bodyform action# methodget autocompleteonName:input typetext namename /br /E-mail: input typeemail nameemail autocompleteoff /br /input typesubmit value提交 //form
/body!-- autofocus 属性规定在页面加载时域自动地获得焦点。适用于所有 input 标签的类型。 --
bodyform action# methodgetNameinput typetext nameuser_name autofocusautofocus /br /input typesubmit value提交 //form
/body!-- form 属性规定输入域所属的一个或多个表单。
form 属性适用于所有 input 标签的类型。
form 属性必须引用所属表单的 id。 --
bodyform action# methodget iduser_formFirst name:input typetext namefname /input typesubmit value提交 //formp下面的输入域在 form 元素之外但仍然是表单的一部分 也就是说提交按钮会把first name 和 last name的值都提交。/pLast name: input typetext namelname formuser_form /
/body!-- multiple 属性规定输入域中可选择多个值适用于以下类型的 input 标签email 和 file。 --
bodyform action# methodget iduser_form选择文件: input typefile namefile multiplemultiple /input typesubmit value提交 //form
/body!-- novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
适用于 form以及下面的 input 类型
text, search, url, telephone, email, password, datepickers, range 以及 color。 --
bodyform action# methodget iduser_form novalidatetrueE-mail: input typeemail nameuser_email /input typesubmit value提交 //form
/body!-- pattern 属性规定用于验证 input 域的模式pattern。
模式pattern 是正则表达式。pattern 属性适用于以下类型的 input 标签
text, search, url, telephone, email 以及 password。 --
bodyform action# methodgetName:input typetext namename pattern[A-z]{4} title请输入四个字母 /input typesubmit value提交 //form
/body!-- placeholder 属性提供一种提示hint描述输入域所期待的值。
适用于以下类型的 input 标签text, search, url, telephone, email 以及 password。
提示hint会在输入域为空时显示出现会在输入域获得焦点时消失。 --
bodyform action# methodgetinput typesearch nameuser_search placeholder实验楼 /input typesubmit value提交 //form
/body!-- required 属性规定必须在提交之前填写输入域不能为空。
适用于以下类型的 input 标签
text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 --
bodyform action# methodgetinput typesearch nameuser_search requiredrequired /input typesubmit value提交 //form
/body11、HTML5 输入类型
!-- email 类型用于应该包含 e-mail 地址的输入域。在提交表单时会自动验证 email 域的值。 --
bodyform action# methodgetE-mail: input typeemail nameuser_email /br /input typesubmit value提交 //form
/body!-- url 类型用于应该包含 URL 地址的输入域。在提交表单时会自动验证 url 域的值。 --
bodyform action# methodgetUrl: input typeurl nameuser_url /br /input typesubmit value提交 //form
/body!-- number 类型用于应该包含数值的输入域。
属性 max 设定允许输入的最大值属性 min 设定允许输入的最小值
属性 value 设定默认值属性 step 设定合法的数字间隔比如 step 的值为 2则合法的数字为 -2,0,2,4 等。 --
bodyform action# methodgetnumberinputtypenumbernamepointsmin0max10step2value2/br /input typesubmit value提交 //form
/body!-- range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
同样的 range 也有 maxminvaluestep 属性与上面所讲的 number 中的一致。 --
bodyform action# methodgetrange:inputtyperangenamepointsmin1max10value2step2/br /input typesubmit value提交 //form
/body!-- HTML5 拥有多个可供选取日期和时间的新输入类型
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间小时和分钟
datetime - 选取时间、日、月、年UTC 时间注意此类型已被弃用目前大多数浏览器都不再支持。
datetime-local - 选取时间、日、月、年本地时间 --
bodyform action# methodgetDate: input typedate nameuser_date /br /input typesubmit value提交 /br /br /Month: input typemonth nameuser_month /br /input typesubmit value提交 //form
/body!-- color 类型用于选择颜色。 --
bodyform action# methodgetinput typecolor namecolordemo /input typesubmit value提交 //form
/body12、HTML5 Canvas API
!doctype html
htmlheadmeta charsetUTF-8 /title/title/headbody!--添加canvas元素设置画布的大小。默认的画布的高度是 150px宽度是 300px。--canvas idmycanvas stylewidth:200;height:100对不起你的浏览器不支持canvas/canvasscript typetext/javascript// 通过document.getElementById来找到id为myCanvas的元素var myCanvas document.getElementById(mycanvas);// 获取允许进行绘制的 2D 环境。var ctx myCanvas.getContext(2d);//设置颜色ctx.fillStyle red;//设置矩形的位置和尺寸位置从 左上角原点坐标开始尺寸为100*100的矩形ctx.fillRect(0, 0, 100, 100);/script/body
/html注意进行绘制时需要指定确定的坐标位置坐标原点(0,0)位于 canvas 的左上角
x 轴水平方向向右延伸y 轴垂直向下延伸。strokeStyle设置或返回笔的颜色、渐变或模式。默认值为#000000。lineWidth设置或返回当前的线条宽度 以像素计。beginPath()起始一条路径或重置当前路径。closePath()创建从当前点回到起始点的路径。moveTo()把路径移动到画布中的指定点不创建线条。lineTo()添加一个新点然后在画布中创建从该点到最后指定点的线条。stroke()绘制已定义的路径。使用 rect() 方法创建矩形。语法为
ctx.rect(x,y,width,height);
参数说明
x 表示矩形左上角的 x 坐标。
y 表示矩形左上角的 y 坐标。
width 表示矩形的宽度以像素计。
height 表示矩形的高度以像素计。
注使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
!doctype html
htmlheadmeta charsetUTF-8 /title/title/headbody!--添加canvas元素设置画布的大小--canvas idmycanvas width520px height1314px对不起你的浏览器不支持canvas/canvasscript typetext/javascript//获取canvas元素var myCanvas document.getElementById(mycanvas);//获取Context上下文var ctx myCanvas.getContext(2d);//绘制矩形ctx.rect(10, 10, 100, 200);//绘制已定义的路径ctx.stroke();/script/body
/html使用 strokeRect() 方法绘制矩形不填色。笔触的默认颜色是黑色。语法为
ctx.strokeRect(x, y, width, height);
注参数与 rect() 方法一致唯一的区别是这里不需要再加一句 stroke() 或 fill() 方法。无法填色。使用 fillRect() 方法创建实心矩形。语法为
ctx.fillRect(x, y, width, height);
注参数说明与前面一致默认的填充颜色为黑色可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。使用 clearRect() 方法清空给定矩形内的指定像素。语法为
ctx.clearRect(x, y, width, height);
注参数说明与前面一致。使用 arc() 方法绘制圆或者椭圆。语法为
ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);
参数说明
x 表示圆的中心的 x 坐标。
y 表示圆的中心的 y 坐标。
r 表示圆的半径。
sAngle 表示起始角以弧度计特别需要注意的是弧的圆形的三点钟位置是 0 度而不是常规以为的 90 度。
eAngle 表示结束角以弧度计。
counterclockwise 表示绘制圆的方向值为 false 表示顺时针为 true 表示逆时针。是一个可选值默认值是 false。使用 fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。语法为
ctx.fillStyle color | gradient | pattern;
参数说明
color 表示绘图填充的颜色。默认值是 #000000。
gradient 表示用于填充绘图的渐变对象线性或放射性。
pattern 表示用于填充绘图的 pattern 对象。使用 createLinearGradient() 方法创建线性渐变。语法为
ctx.createLinearGradient(x0, y0, x1, y1);
参数说明
x0 表示渐变开始点的 x 坐标。
y0 表示渐变开始点的 y 坐标。
x1 表示渐变结束点的 x 坐标。
y1 表示渐变结束点的 y 坐标。使用 addColorStop() 方法规定渐变对象中的颜色和停止位置。语法为
gradient.addColorStop(stop, color);
参数说明
stop 表示渐变中开始与结束之间的位置。是介于 0.0 与 1.0 之间的值。
color 表示在结束位置显示的 CSS 颜色值。使用 createRadialGradient() 方法创建放射状/环形的渐变。语法为
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
参数说明
x0 表示渐变的开始圆的 x 坐标。
y0 表示渐变的开始圆的 y 坐标。
r0 表示开始圆的半径。
x1 表示渐变的结束圆的 x 坐标。
y1 表示渐变的结束圆的 y 坐标。
r1 表示结束圆的半径。使用 fill() 方法填充当前的图像路径。默认颜色是黑色。填充另一种颜色/渐变使用 fillStyle 属性。
语法为
ctx.fill();
注如果路径未关闭那么 fill() 方法会从路径结束点到开始点之间添加一条线以关闭该路径然后填充该路径。使用 fillText() 方法在在画布上绘制实心文本。语法为
ctx.fillText(text, x, y, maxWidth);
参数说明
text 规定在画布上输出的文本。
x 表示开始绘制文本的 x 坐标位置相对于画布。
y 表示开始绘制文本的 y 坐标位置相对于画布。
maxWidth 表示允许的最大文本宽度以像素计。可选。使用 strokeText() 方法在画布上绘制空心文本。语法为
ctx.strokeText(text, x, y, maxWidth);
注参数说明与 fillText() 方法一致。使用 font 属性设置或返回画布上文本内容的当前字体属性。font 属性使用的语法与 CSS font 属性相同。使用 textAlign 属性设置或返回文本内容的当前对齐方式。语法为
ctx.textAlign center|end|left|right|start;
参数说明
start 默认值表示文本在指定的位置开始。
center 表示文本的中心被放置在指定的位置。
end 表示文本在指定的位置结束。
left 表示文本左对齐。
right 表示文本右对齐。textBaseline 属性设置或返回在绘制文本时的当前文本基线。语法为
ctx.textBaseline alphabetic|top|hanging|middle|ideographic|bottom;
参数说明
alphabetic 表示文本基线是普通的字母基线。默认值。
top 表示文本基线是 em 方框的顶端。
hanging 表示文本基线是悬挂基线。
middle 表示文本基线是 em 方框的正中。
ideographic 表示文本基线是表意基线。
bottom 表示文本基线是 em 方框的底端。使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分或增加或减少图像的尺寸。
canvas 绘制图片的基本格式为
//创建一个图片对象
var image new Image();
//设置图片的路径
image.src xxx;
//当图片加载完成后
image.onload function () {//绘制图片ctx.drawImage();
};语法 1在画布上定位图像
ctx.drawImage(img, x, y);语法 2在画布上定位图像并规定图像的宽度和高度
ctx.drawImage(img, x, y, width, height);语法 3剪切图像并在画布上定位被剪切的部分
ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
参数说明
img 规定要使用的图像、画布或视频。
sx 表示开始剪切的 x 坐标位置。可选值。
sy 表示开始剪切的 y 坐标位置。可选值。
swidth 表示被剪切图像的宽度。可选值。
sheight 表示被剪切图像的高度。可选值。
x 表示在画布上放置图像的 x 坐标位置。
y 表示在画布上放置图像的 y 坐标位置。
width 表示要使用的图像的宽度伸展或缩小图像。可选值。
height 表示要使用的图像的高度伸展或缩小图像。可选值。
