前端学习内容-html

html

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、标签（简单易记）

标签	解释
p	段落
href	链接
link	链接到样式表（定义文档和外部信息）
img	图像
table	表格（tr 行,td 单元格）
ul	无序列表
ol	有序列表
div	块级元素（以新行开始）
span	内联元素(行内)
form	表单
iframe	框架
新
canvas	图形
新多媒体
audio	音频
video	视频
source	多媒体资源（video，audio）
embed	嵌入内容（插件）
track	为多媒体资源规定外部轨道
新表单
datalist	选项列表
keygen	表单对密钥生成器字段
output	不通雷星的输出
新的语义和结构元素

(1)img src =“” alt=“” (alt 可替换文本)
表单
/<form ation=” “>
/<input type = " “,>
,input type =” ",(输入类型,定义输入域), text 文本，password 密码 ，radio 单选， checkbox 多选, submit 提交，
label , select 下拉选项列表，option 下拉选项列表选项，
button 点击按钮, datalist 预先定义的输入控件选项表，
submit 提交（post 表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据.
get ，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符 ,https://www.runoob.com/?page=1，），
框架

/<iframe src= " ", >

空格 &nbsp;

< 小于号 &lt;

> 大于号 &gt;

& 和号 &amp;

" 引号 &quot;

属性	值
class	类
id	唯一id
style	样式
title	标题(额外信息)

如何将 HTML 转换为 XHTML
添加一个 XHTML <!DOCTYPE> 到你的网页中
添加 xmlns 属性添加到每个页面的html元素中。
改变所有的元素为小写
关闭所有的空元素
修改所有的属性名称为小写
所有属性值添加引号

canvas
1.路径
move to(x,y) 线条开始坐标
line To(x,y) 结束坐标
stroke()
2.文本
fillText（text,x,y） 实心
stroke text(text,x,y) 空心
3.渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
4,图像
图像放置到画布上, 使用以下方法:
drawImage(image,x,y)
svg
可伸缩矢量图形

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

拖放（Drag 和 Drop）

Geolocation（地理定位）

Video(视频)
<video width=“320” height=“240” controls>
<source src=“movie.mp4” type=“video/mp4”>
</video>

Audio(音频)

color
date
datetime
datetime-local
email
month
number
range	用于应该包含一定范围内数字值的输入域,类型显示为滑动条。
search
tel
time
url
week

表单属性

autocomplete	自动填充
novalidate	提交表单时不应该验证 form 或 input 域。
autofocus	规定在页面加载时，域自动地获得焦点。
formaction	用于描述表单提交的URL地址.
formmethod	覆盖了 元素的 method 属性。
multiple	属性规定 元素中可选择多个值。

语义元素

header
nav	导航
section	文档中章节、页眉、页脚或文档中的其他部分。
article	独立的内容
aside	侧边栏
figcaption	定义 元素的标题.
figure	规定独立的流内容（图像、图表、照片、代码）
footer

Web SQL 数据库

规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

openDatabase() 方法对应的五个参数说明：

数据库名称
版本号
描述文本
数据库大小
创建回调
第五个参数，创建回调会在创建数据库后被调用。

执行查询操作
database.transaction() 函数：

插入数据
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知

var source=new EventSource(“demo_sse.php”);
source.onmessage=function(event)
{
document.getElementById(“result”).innerHTML+=event.data + “
”;
};

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 “demo_sse.php”）
每接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 “result” 的元素中

** WebSocket API**

浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

元素
所有主流浏览器都支持 标签。

元素定义了在 HTML 文档中嵌入的对象。

该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。