HTML学习笔记

最新推荐文章于 2024-10-09 23:02:44 发布

ぃ咔哇依°ヽ

最新推荐文章于 2024-10-09 23:02:44 发布

阅读量150

点赞数

分类专栏：乱七八糟文章标签： html 学习笔记

本文链接：https://blog.csdn.net/qq_44887198/article/details/132034522

版权

乱七八糟专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、常见状态码

200 ：成功。
400 ：客户端请求有语法错误，服务器端不能理解。
401 ：该请求可能未经过授权。
403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。
404 ：该资源没找到。
500 ：服务器端发生了一个不可预知的错误。
503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常。

2、注释

<!-- 在此处写注释 -->

3、HTML常见的标签

<!-- 双标签 -->

<h1></h1> <!-- 标题标签有六种 h1，h2，h3，h4，h5，h6 -->

<title></title>

<p></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 type="circle">
  <li>空心圆列表项1</li>
  <li>空心圆列表项2</li>
</ul>

<p>有序列表</p>
<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

<!-- 
<ul> 标签的 type 属性：
  值	       备注
disc（默认）   实心圆
circle	      空心圆
square	      小方块 
-->

<!-- 
<ol> 标签的 type 属性：
值	                备注
1（默认）	数字表示（1，2，3...)
A	        大写字母表示（A,B,C...)
a	        小写字母表示（a,b,c...)
I	        大写罗马数字表示(I,II,III…)
i	        小写罗马数字表示(i,ii,iii…) 
-->

<!-- 自定义列表（dl）语法格式 -->
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  ...
</dl>

5、HTML样式

<html>
  <body>
    <p style="background-color:red">实验楼</p>
  </body>
</html>

<!-- 通过对 "background-color" 属性值的设置来给背景设置颜色。 -->
<!-- 通过对 font-family 属性值的设置来设置字体。 -->
<!-- 通过对 color 属性值的设置来设置颜色。 -->
<!-- 通过对 font-size 属性值的设计来设计字体大小。 -->
<!-- 通过对 text-align 属性值的设计来设计字体大小。 -->

6、表格

<table border="1" width="300px" height="150px" cellspacing="0px" cellpadding="20px">
    <!-- 表格标题 -->
    <caption>
        支出表
    </caption>
    <!-- 每个表格均有若干行（由 <tr> 标签定义） -->
    <tr>
    <!-- 表格的表头使用 <th> 标签进行定义 -->
        <th>支出</th>
        <th>备注</th>
        <th rowspan="3">合并该列上的三个单元格</th>
    </tr>
    <tr>
    <!-- 每行被分割为若干单元格（由 <td> 标签定义） -->
        <td>32</td>
        <td>买苹果</td>
    </tr>
    <tr>
        <td>24</td>
        <td>买饮料</td>
    </tr>
    <tr>
        <td colspan="3">合并该行上的三个单元格</td>
    </tr>
</table>

<!-- cellspacing：设置单元格与单元格之间的距离，默认为2px -->
<!-- cellpadding：设置文字与单元格之间的距离，默认为1px -->
<!-- width：设置表格的宽度 -->
<!-- height：设置表格的高度 -->
<!-- bgcolor：设置背景颜色 -->
<!-- border：设置表格的边框 -->

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 button</button>

  <!--or-->

  <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 button</button>

  <!--or-->

  <input type="reset" value="This is a reset button" />
</form>

<!-- 匿名按钮（button） -->
<button type="button">This a anonymous button</button>

<!--or-->
<button>This a anonymous button</button>

<!--or-->
<input type="button" value="This is a anonymous button" />

<!-- 下拉菜单 -->
<form name="formBox" method="post" action="">
  <select name="select"> <!-- size="2" 表示一次显示 2 条数据。 -->
    <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>
<!-- cols 代表列数，rows 代表行数。 -->

8、插入图像

<img
  src="https://labfile.oss.aliyuncs.com/courses/1236/coder.jpg"
  alt="程序员"
  title="你好啊"
  width="700px"
  height="600px"
/>

<!-- src 的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。 -->
<!-- alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。 -->
<!-- title 设置鼠标悬停时显示的内容（一般不用设置）。 -->
<!-- 设置 width 和 height 的值来设置图片的宽和高。 -->
<!-- 上一级文件夹：../ -->
<!-- 上两级，则需要使用 ../ ../ -->

9、HTML5表单元素

<!-- 
datalist 元素用于为文本框提供一个可供选择的列表，
使用 datalist 元素来为表单小部件提供建议的、自动完成的值，
并使用一些 option 子元素来指定要显示的值。
然后使用 list 属性将数据列表绑定到一个文本域(通常是一个 <input> 元素)。 
-->

<!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>black</option>
      <option>blue</option>
      <option>green</option>
      <option>red</option>
      <option>white</option>
      <option>yellow</option>
    </datalist>
  </body>
</html>
<!-- or -->
<!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 表单新增的属性

<!-- autocomplete 属性规定表单是否应该启用自动完成功能：
自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，
浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
当 autocomplete 属性值为 on 时表示启用自动完成功能，为 off 时表示关闭。
autocomplete 属性适用于 <form>，以及下面的 <input> 类型：
text, search, url, telephone, email, password, datepickers, range 以及 color。 -->
<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>

<!-- autofocus 属性规定在页面加载时，域自动地获得焦点。适用于所有 <input> 标签的类型。 -->
<body>
  <form action="#" method="get">
    Name：<input type="text" name="user_name" autofocus="autofocus" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- form 属性规定输入域所属的一个或多个表单。
form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id。 -->
<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>

<!-- multiple 属性规定输入域中可选择多个值，适用于以下类型的 <input> 标签：email 和 file。 -->
<body>
  <form action="#" method="get" id="user_form">
    选择文件: <input type="file" name="file" multiple="multiple" />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
适用于 <form>，以及下面的 <input> 类型：
text, search, url, telephone, email, password, datepickers, range 以及 color。 -->
<body>
  <form action="#" method="get" id="user_form" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- pattern 属性规定用于验证 input 域的模式（pattern）。
模式（pattern） 是正则表达式。pattern 属性适用于以下类型的 <input> 标签：
text, search, url, telephone, email 以及 password。 -->
<body>
  <form action="#" method="get">
    Name:
    <input type="text" name="name" pattern="[A-z]{4}" title="请输入四个字母" />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- placeholder 属性提供一种提示（hint），描述输入域所期待的值。
适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。 -->
<body>
  <form action="#" method="get">
    <input type="search" name="user_search" placeholder="实验楼" />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- required 属性规定必须在提交之前填写输入域（不能为空）。
适用于以下类型的 <input> 标签：
text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 -->
<body>
  <form action="#" method="get">
    <input type="search" name="user_search" required="required" />
    <input type="submit" value="提交" />
  </form>
</body>

11、HTML5 输入类型

<!-- email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。 -->
<body>
  <form action="#" method="get">
    E-mail: <input type="email" name="user_email" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。 -->
<body>
  <form action="#" method="get">
    Url: <input type="url" name="user_url" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- number 类型用于应该包含数值的输入域。
属性 max 设定允许输入的最大值，属性 min 设定允许输入的最小值，
属性 value 设定默认值，属性 step 设定合法的数字间隔（比如 step 的值为 2，则合法的数字为 -2,0,2,4 等）。 -->
<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>

<!-- range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
同样的 range 也有 max，min，value，step 属性与上面所讲的 number 中的一致。 -->
<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>

<!-- HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）注意：此类型已被弃用，目前大多数浏览器都不再支持。
datetime-local - 选取时间、日、月、年（本地时间） -->
<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>

<!-- color 类型用于选择颜色。 -->
<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元素，设置画布的大小。默认的画布的高度是 150px，宽度是 300px。-->
    <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元素，设置画布的大小-->
    <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 表示要使用的图像的高度，（伸展或缩小图像）。可选值。