图片：image

主要属性：

src：源属性的值是图像的 URL 地址。

alt：用来为图像定义一串预备的可替换的文本。

注意事项：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

表格：Table

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

<table border="1">
    <tr>//行
        <th>Header 1</th>//表头
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>//表格单元
        <td>row 1, cell 2</td>
    </tr>
</table>

列表

HTML 支持有序、无序和定义列表。

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
</dl>

区块元素：通常会以新行开始 <h1> <p> <ul> <table>

内联元素：通常不会以新行开始 <b> <td> <a> <img>

块级元素: <div>

input

属性：

• color（颜色）
• date（日期）
• datetime（日期）
• datetime-local（本地日期）
• email（邮箱）
• month（月份）
• week（周和年）
• number（数字）
• range（范围）
• search（搜索）
• tel（手机）
• time（时间）
• url

设置type为属即可。

<input type="date" name="bday">

使用下面的属性来规定对数字类型的限定：

属性	描述
disabled	规定输入字段是禁用的
max	规定允许的最大值
maxlength	规定输入字段的最大字符长度
min	规定允许的最小值
pattern	规定用于验证输入字段的模式
readonly	规定输入字段的值无法修改
required	规定输入字段的值是必需的
size	规定输入字段中的可见字符数
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值

例：

<input type="range" name="points" min="1" max="10">

表单

表单元素

1.<datalist> 下拉选择框，input设置list属性，与datalist的id相一致

<input list="listData">
<datalist id="listData">
    <option value="1">
    <option value="2">
    <option value="3">
    <option value="4">
    <option value="5">
</datalist>

2.<keygen> 元素的作用是提供一种验证用户的可靠方法，用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

 简单的来说就是在用户输入后在客户端对用户输入的内容进行加密。

<form action="demo_keygen.asp" method="get">
    <input type="text" name="usr_name">
    <keygen name="security">
    <input type="submit">
</form>

3.<output>元素用于不同类型的输出，比如计算或脚本输出。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a">+
    <input type="number" id="b">=
    <output name="x"></output>
</form>

4.form表单

输入元素：<input>的type：text password radio checkbox submit

单选框
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框
<form>
<input type="checkbox" name="vehicle" value="Bike" check="checked">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

method选择向后端传数据的方法（post get最常用）

<optgroup>定义选择组

下拉框
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat"selected>Fiat</option>
<option value="audi">Audi</option>
</select>
selected被选中，做预选

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
</select>

<fieldst>表单的边框

<legend>定义了 <fieldset> 元素的标题

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

表单属性：

<form>新属性：

• autocomplete
• novalidate

<input>新属性：

• multiple
• pattern (regexp)
• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height 与 width
• list
• min 与 max
• placeholder
• required
• step

height和width属性

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

min和max属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

placeholder

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

<input type="text" name="fname" placeholder="First name">

required

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<input type="text" name="usrname" required>

step

step 属性为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是 -3,0,3,6 等

提示： step 属性可以与 max 和 min 属性创建一个区域值.

注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

<input type="number" name="points" step="3">

mutiple

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file:

 <input type="file" name="img" multiple>

 list

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

<input list="listData">
<datalist id="listData">
    <option value="1">
    <option value="2">
    <option value="3">
    <option value="4">
    <option value="5">
</datalist>

pattern

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.

提示： 是用来全局 title 属性描述了模式.

 <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

novalidate

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

 formnovalidate

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: formnovalidate 属性与 type="submit" 一起使用

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" formnovalidate value="不验证提交">
</form>

autofocus

autofocus 属性是一个布尔属性。

autofocus 属性规定在页面加载时，域自动地获得焦点。

<input type="text" name="fname" autofocus>

form

form 属性规定输入域所属的一个或多个表单。

提示:如需引用一个以上的表单，请使用空格分隔的列表。

位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分)。

<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
 
Last name: <input type="text" name="lname" form="form1">

formaction

 formaction 属性用于描述表单提交的URL地址。formaction 属性会覆盖<form> 元素中的action属性。

注意: The formaction 属性用于 type="submit" 和 type="image"。

<form>
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

formenctype

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

主要: 该属性与 type="submit" 和 type="image" 配合使用。

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

formmethod

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 <form> 元素的 method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

formtarget

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

formtarget 属性覆盖 <form>元素的target属性.

注意: formtarget 属性与 type="submit" 和 type="image" 配合使用。

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" formtarget="_blank"
  value="提交到一个新的页面上">
</form>

Video（视频）

<video> 元素提供了 播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

Audio(音频)

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
</audio>

框架

iframe

<iframe src="URL"></iframe>

frameborder属性：定义iframe表示是否显示边框。0是移除iframe的边框

iframe 可以显示一个目标链接的页面

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

字符实体

文本格式化

<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> （上标文本

Canvas（画布）

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成，可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

<canvas> 一个画布在网页中是一个矩形框。默认情况下<canvas>元素没有边框和内容。

一个HTML页面可以使用多个<canvas>元素。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

canvas 是一个二维网格，canvas 的左上角坐标为 (0,0)。

绘制矩形

<canvas id="myCanvas" width="200" height="100" 
style="border:1px solid #c3c3c3;"></canvas>

<script>
var c=document.getElementById("myCanvas");//找到canvas元素
var ctx=c.getContext("2d");//创建context对象
ctx.fillStyle="#FF0000";//设置context的颜色
ctx.fillRect(0,0,150,75);//方法定义了矩形当前的填充方式。
</script>

效果：

绘制路径

在Canvas上画线，我们将使用以下两种方法：

• moveTo(x,y) 定义线条开始坐标
• lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

效果：

绘制圆：

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

绘制文本：

• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";//定义字体
ctx.fillText("Hello World",10,50);//绘制实心文本
</script>

渐变：

• createLinearGradient(x,y,x1,y1) - 创建线条渐变
• createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>

线性渐变效果图：

径向/圆渐变效果图：

画布：

• drawImage(image,x,y)

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

img.onload = function() {
	ctx.drawImage(img,10,10);
} 
</script>

SVG

SVG 定义为可缩放矢量图形，HTML5 支持内联 SVG，HTML <svg> 元素是 SVG 图形的容器。

SVG 有多种绘制路径、框、圆、文本和图形图像的方法。

什么是SVG？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用于定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG 是万维网联盟的标准

SVG优势：

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

• SVG 图像可通过文本编辑器来创建和修改
• SVG 图像可被搜索、索引、脚本化或压缩
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大

svg实现图形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    //圆形
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    //五角星
    <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

Canvas与SVG都能绘制图形，它们之间的区别:

Canvas	SVG
依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用

拖放（Drag和Drop）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}
 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img decoding="async" loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
 
</body>
</html>

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true">

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

代码解释：

• 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
• 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
• 被拖数据是被拖元素的 id ("drag1")
• 把被拖元素追加到放置元素（目标元素）中

来回拖动

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img src="/images/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>