这篇博客详细介绍了HTML的基础知识，包括HTML的初识、页面结构、基础标签、元素、属性、链接、图像、表格、列表、表单、框架、颜色、脚本、字符和URL等内容。同时，深入探讨了HTML5的新特性，如canvas绘图、SVG矢量图、WebSocket通信、拖放功能、Server-Sent事件、多媒体支持以及新的表单元素等。此外，还提到了HTML5在浏览器支持、Web存储、Web Workers、离线存储等方面的应用。
以菜鸟教程为基础
html初认识
html,超文本标记语言,是一种用于创建网页的标记语言。
html,是Hyper Text Markup Language的缩写。它运行在浏览器上，由浏览器来解析。
html的后缀名有.html/.htm。
html页面结构
声明
声明有助于浏览器中正确显示为网页，不区分大小写。
html5声明，告知web浏览器页面使用了那种html版本
元素是html页面的根元素
可以插入脚本
style 定义了HTML文档的样式文件引用地址，也可以直接添加样式渲染html文档
link 定义了文档与外部资源之间的关系，通常用于连接样式表
base 定义页面中所有链接默认的连接目标地址
meta 标签提供了元数据，但是元数据不会显示在页面上，但会被浏览器解析
meta元素指定了网页的描述，关键词，作者，字符集、文件的最后修改时间等。
元数据
例子以后补
描述了网页的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
charset
目前在大部分浏览器中，直接输入中文会中文乱码，因此需要在头部将字符声明为utf-8/GBK
元素包含了可见的页面内容,定义了html文档的主体
html基础
html标签
html标签是由尖括号包围的关键词，如
html标签通常都是成对出现的，如
成对出现的标签第一个是开始标签，第二个是结束标签。它们也叫开放标签和闭合标签。
html标签也有单标签，比如
之后补，有特别多
html元素
html元素内容是开始标签和结束标签之间的内容
大多数html元素有属性
某些html元素是空内容，就是没有内容的HTML元素。在开始标签添加斜杠是关闭空元素的正确方法。如
大多数html元素可以嵌套
html标题
h1-h6
html段落
段落通过
标签定义,可以把文档划分为若干个段落
p是块级元素，浏览器会自动在段落前后添加空行
在一个段落里可以用
来换行
代替 加粗
字体变粗
代替 斜体
文本格式化标签之后补
鉴于之后一个元素会有属性，所有还是单独写好了。
html属性
html元素可以设置属性，属性可以在元素中添加附加信息
属性一般描述于开始标签
属性以名值对的形式出现。如name="value".
属性值要被包括在双引号" "内，单引号也可以。但是如果属性值本身就有双引号，就只能用单引号包括了。
class 为html元素定义了一个或多个类名
id 定义了元素的唯一id
style 规定了元素的行内样式
title 描述了元素的额外信息
之后补，有特别多
html链接
用标签设置超文本链接，超链接可以是字，词，图像，网址。
默认情况下，链接以一下形式出现在浏览器中
未访问的连接显示为蓝色字体并带有下划线
访问过的拦截显示为紫色带有下划线
点击链接时，链接显示为红色带有下划线
属性：
target :设置网页在什么地方打开。
_blank 新标签页打开
html图像
图像由标签定义，使用源属性src显示图像
alt属性 当图像无法显示时，文本信息告诉读者。
width height 设置图像的宽高，单位为像素
border 给图片设置边框
map属性不懂，之后补
html表格
表格由table定义，行由tr定义，单元格由td定义。
数据单元格可以包含文本，图片，列表，段落，表单，水平线，表格等。
border 不定义表格的边框属性，没有边框
cellspacing 值为0时取消表框间距，单元格与其边框之间的距离
cellpadding 单元格边距，单元格的大小
th 表头
caption 标题
thead 表头 tbody 主体 tfoot 表脚 通常一起使用
表格背景颜色设置 style="background-color:xx" bgcolor
表格单元格设置背景颜色 bgcolor
表格背景图片设置 background="图片"
表格单元格设置背景图片 background="图片"
colgroup col 对表格的列进行组合，让整个列应用样式
colspan 跨列 （合并列） col列
rowspan 跨行 row行
align 使用align属性排列单元格内容，值有left,right，center
表格里可以包含ul ol 表格
html列表
列表分为有序列表、无序列表、定义列表
ol 有序列表
ol定义有序列表，li定义列表项,
type属性可改变列表项符号
strat ="数值” 规定从哪个地方开始
| type属性 | 阿拉伯数字 1 2 3....默认值 |
| 小写英文字母 a b c... | |
| 大写英文字母 A B C... | |
| 小写罗马数字 i ii iii..... | |
| 大写罗马数字 ⅠⅡ Ⅲ..... |
ul 无序列表
ul定义无序列表，li定义列表项
| type属性 | disc 实心圆 默认值 |
| circle 空心圆 | |
| square 正方形 | |
| none 去掉符号 |
dl自定义列表
dl定义自定义列表，dt定义项目，dd定义解释
列表的嵌套
块级元素 行内元素 行内块元素
大多数html元素被定义为块级元素或行内元素
html可以通过div和span将元素组合起来
行内元素：相邻的行内元素不换行，设置宽高无效，margin设置左右方向有效，上下无效，padding设置上右下左都有效。
行内元素有span img a big small sub sup strong button（display:inline-block）
块级元素：独占一行，能设置宽高，margin和padding对上下左右四个方向设置都有效
块级元素有div p h1-h6 table ul ol
行内块级元素：元素排列在一行，不会自动换行，可以设置宽度和高度以及外边距和内边距的所有样式。
三者转换如下：
display:inline 转换为行内元素
display:block 转换为块级元素
display:inline-block 转换为行内块元素
html表单
表单用表单标签from设置，常用到的标签输入标签input，输入类型有属性type定义
文本框 type="text"
密码 type="password"
单选按钮 type="radio"
注意用单选按钮时，必须设置name值为一致，否则效果会出错
复选框 type="checkbox"
按钮 button
按钮一定要写value=" " ,不然按钮上面什么也没有
常见方式
剩下的以后补
下拉列表 select
select定义了下拉列表，option定义下拉列表里的选项，optgroup把相关选项组合在一起[
结构
..
......
当option哪行添加了selected时，表示默认显示哪行
文本域 textarea
textarea定义文本域，rows控制行数，cols控制列数
fleldset
fieldset可以用于表单分组
legend为分组的定义标题
datalist 预先定义的输入控件选项列表
表单基本结构
form定义表单
action 定义提交到哪里，可以不写
method 定义提交方法
提交按钮 type="submit"
html框架 iframe
iframe 作用在这个html页面引入其他网页
src="目标页面 "
可以用width height设置宽高，单位px；也可以用百分比设置宽高
frameborder属性值为0时，移除边框
html颜色
颜色是由16进制来表示红、绿、蓝（RGB）,十六进制的写法为#后跟3个或6个十六进制符
三位数表示法为#RGB,转换为6位数表示为#RRGGBB
每个颜色的最低值为0（16进制为00），最高值为255（16进制为FF）
白色 #FFFFFF rgb(255,255,255)
黑色 #000000 rgb(0,0,0)
红色 #FF0000 rgb(255,0,0)
html脚本
script 即可包含脚本语句，也可以通过src属性指向外部脚本文件
javascritp常用于图片操作、表单验证以及内容动态更新
noscript 定义了不支持脚本浏览器输出的文本
当浏览器不支持脚本或禁用脚本时，才会显示
元素的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>money</title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，Hello World!出不来是因为，你的浏览器不支持 JavaScript!</noscript>
</body>
</html>html字符
空格
< <
> >；
© 版权 ©
® 注册商标 ®
™ 商标 ™
html url
scheme 定义因特网服务的类型，常见的类型是http
http 超文本传输协议 以http://开头的普通网页
https 安全超文本传输协议 安全网页，加密所有信息交换
ftp 文本传输协议 将文件下载或上传到网站
file 你计算机上的文件
host--定义域主机
domain--定义因特网域名 eg:runoob.com
:port--定义主机上的端口号
path---定义服务器上的路径
filename--定义文档/资源的名称
url只能使用ascll字符集，url使用%加两位十六进制数替换不是ascii字符集，用+替换空格
html5
html5新特性
绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储的更好的支持
新的特殊内容元素
新的表单控件
doctype
<!DOCTYPE html>
html5浏览器支持
所有浏览器都支持
将浏览器元素定义为块元素
设置display属性为block.
为html元素添加新元素
通过js语句document.createElement('元素')； 为ie浏览器添加新的元素
还可以通过style为元素定义样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
document.createElement("myHero")
</script>
<style>
myHero{
font-size: 40px;
}
</style>
</head>
<body>
<h1>我的标题</h1>
<p>我的段落</p>
<myHero>我的新元素</myHero>
</body>
</html>shiv解决方案
之后补
html5 canvas
canvas标签定义图形，比如图表和其他图像。
canvas元素用于图形的会在，通过脚本来完成
canvas标签只是图形容器，只能用脚本来绘制图形。
在html页面中可以使用多个canvas元素
使用前提
绘图要在画布上面
绘制图像的script要写在body里
查找元素
使用getContext('2d')
定义画布
<canvas id=" " width=" " height=" " style="border: "></canvas>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="" width="100px" height="200px" style="border:1px solid orange"></canvas>
</body>
</html>用javaScript绘制图像
找到canvas元素
var c=document.getElementById("canvas");
创建对象，通过getContext得到
var ctx=c.getContext('2d'); getContext对象是内建html5对象，拥有多种绘制路径、矩形、圆形、字符、添加图像的方法
绘制图像
用fillstyle属性 设置css颜色 渐变 图案
fillRect(x,y,width,height)定义矩形当前的填充方式 x,y 横纵坐标位置 width,height 宽高，设置图像的宽高，它的绘制是从左上角开始（0,0）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
//绘制图像
ctx.fillStyle="#ff0100";
// 在画布上绘制150*175的矩形，从左上角（10,20）开始
ctx.fillRect(10,20,150,175);
</script>
</body>
</html>
canvas ---路径
在canvas上画线，使用两种方法，
moveTo(x,y)定义线条开始坐标
lineTo(x,y)定义线条结束坐标
绘制线条方法是 stroke()
注意：绘制线条必须是3个一起用，不然不会显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
//绘制线条
ctx.moveTo(10,20);
ctx.lineTo(200,300);
// 绘制线条用这个方法
ctx.stroke();
</script>
</body>
</html>绘制圆形
arc(x,y,r,strat,stop) x，y 横纵坐标 半径
还必须有stroke()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
ctx.arc(100,100,60,10,30);
ctx.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
// 目前来看，可有可无
ctx.beginPath();
ctx.arc(100,100,40,10,30);
ctx.stroke();
</script>
</body>
</html>canvas-文本
font--定义字体
fillText(text,x,y)----绘制实心的文本
strokeText（text,x,y）----绘制空心的文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<ti
最低0.47元/天 解锁文章
扫一扫
1714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
