HTML学习笔记
1、常见状态码
200 ：成功。
400 ：客户端请求有语法错误，服务器端不能理解。
401 ：该请求可能未经过授权。
403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。
404 ：该资源没找到。
500 ：服务器端发生了一个不可预知的错误。
503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常。
2、注释
3、HTML常见的标签
<h1>h1>
<title>title>
<p>p>
<div>div>
<span>span>
<a>a>
<ul>ul>
<br />
<hr />
<meta />
<img />
4、HTML列表
<p>无序列表p>
<ul type="circle">
<li>空心圆列表项1li>
<li>空心圆列表项2li>
ul>
<p>有序列表p>
<ol type="A">
<li>列表项1li>
<li>列表项2li>
ol>
<dl>
<dt>名词1dt>
<dd>名词1解释1dd>
...
<dt>名词2dt>
<dd>名词2解释1dd>
...
dl>
5、HTML样式
<html>
<body>
<p style="background-color:red">实验楼p>
body>
html>
6、表格
<table border="1" width="300px" height="150px" cellspacing="0px" cellpadding="20px">
<caption>
支出表
caption>
<tr>
<th>支出th>
<th>备注th>
<th rowspan="3">合并该列上的三个单元格th>
tr>
<tr>
<td>32td>
<td>买苹果td>
tr>
<tr>
<td>24td>
<td>买饮料td>
tr>
<tr>
<td colspan="3">合并该行上的三个单元格td>
tr>
table>
7、表单
<form> 标签用于创建 HTML 表单，常见的表单格式为：
<form name="" method="" action="">form>
name：定义表单的名字。
method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。
action：发送数据要去的地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action="#"，则数据将被发送到包含表单的页面的 URL。
<input
type="text"
name="控件名称"
value="文字字段的默认取值"
size="控件的长度"
maxlength="最长字符数"
/>
<input type="password" name="pwd" />
<form name="formBox" method="post" action="">
<input type="radio" name="sex" value="male" checked />男<br />
<input type="radio" name="sex" value="female" />女
form>
<form name="formBox" method="post" action="">
<input type="checkbox" name="music" checked />音乐<br />
<input type="checkbox" name="art" />美术<br />
<input type="checkbox" name="math" />数学<br />
form>
<form name="formBox" method="post" action="">
<input type="text" value="输入的内容" />
<button type="submit">This a submit buttonbutton>
<input type="submit" value="This is a submit button" />
form>
<form name="formBox" method="post" action="">
<input type="text" />
<button type="reset">This a reset buttonbutton>
<input type="reset" value="This is a reset button" />
form>
<button type="button">This a anonymous buttonbutton>
<button>This a anonymous buttonbutton>
<input type="button" value="This is a anonymous button" />
<form name="formBox" method="post" action="">
<select name="select">
<option value="成都">成都option>
<option value="广州">广州option>
<option value="四川">四川option>
<option value="上海">上海option>
select>
form>
<form name="formBox" method="post" action="">
留下您的联系方式：
<textarea name="textarea" cols="35" rows="5">textarea>
form>
8、插入图像
<img
src="https://labfile.oss.aliyuncs.com/courses/1236/coder.jpg"
alt="程序员"
title="你好啊"
width="700px"
height="600px"
/>
9、HTML5表单元素
doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<label for="myColor">What's your favorite color?label>
<input type="text" name="myColor" id="myColor" list="mySuggestion" />
<datalist id="mySuggestion">
<option>blackoption>
<option>blueoption>
<option>greenoption>
<option>redoption>
<option>whiteoption>
<option>yellowoption>
datalist>
body>
html>
doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<label for="myColor">What's your favorite color?label>
<input type="text" name="myColor" id="myColor" list="mySuggestion" />
<datalist id="mySuggestion">
<option value="black">option>
<option value="blue">option>
<option value="green">option>
<option value="red">option>
<option value="white">option>
<option value="yellow">option>
datalist>
body>
html>
10、HTML5 表单新增的属性
<body>
<form action="#" method="get" autocomplete="on">
Name:<input type="text" name="name" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get">
Name：<input type="text" name="user_name" autofocus="autofocus" /><br />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" value="提交" />
form>
<p>
下面的输入域在 form 元素之外，但仍然是表单的一部分， 也就是说提交按钮会把
first name 和 last name的值都提交。
p>
Last name: <input type="text" name="lname" form="user_form" />
body>
<body>
<form action="#" method="get" id="user_form">
选择文件: <input type="file" name="file" multiple="multiple" />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get" id="user_form" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get">
Name:
<input type="text" name="name" pattern="[A-z]{4}" title="请输入四个字母" />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get">
<input type="search" name="user_search" placeholder="实验楼" />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get">
<input type="search" name="user_search" required="required" />
<input type="submit" value="提交" />
form>
body>
11、HTML5 输入类型
<body>
<form action="#" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get">
Url: <input type="url" name="user_url" /><br />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get">
number：<input
type="number"
name="points"
min="0"
max="10"
step="2"
value="2"
/><br />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get">
range:
<input
type="range"
name="points"
min="1"
max="10"
value="2"
step="2"
/><br />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get">
Date: <input type="date" name="user_date" /><br />
<input type="submit" value="提交" />
<br /><br />
Month: <input type="month" name="user_month" /><br />
<input type="submit" value="提交" />
form>
body>
<body>
<form action="#" method="get">
<input type="color" name="colordemo" />
<input type="submit" value="提交" />
form>
body>
12、HTML5 Canvas API
doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>title>
head>
<body>
<canvas id="mycanvas" style="width:200;height:100">
对不起，你的浏览器不支持canvas
canvas>
<script type="text/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>
<html>
<head>
<meta charset="UTF-8" />
<title>title>
head>
<body>
<canvas id="mycanvas" width="520px" height="1314px">
对不起，你的浏览器不支持canvas
canvas>
<script type="text/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 表示要使用的图像的高度，（伸展或缩小图像）。可选值。