HTML
2020-12-08 11:29:21 0 举报AI智能生成
登录查看完整内容
HTML内容总结
作者其他创作
大纲/内容
标签
块级标签
div
双标签，定义一个区域
div+css进行布局
h1~h6
从一级标题到六级标题，字体从大到小
P
双标签，文章段落
<p>这是一个段落</p>
hr
ol
ul
列表项目以圆点排列，li标识一个项目
去除默认样式
list-style:none;
margin:0px;
padding:0px;
li
dl
双标签， 定义列表
dt
双标签，定义标题列表项
dd
双标签，定义普通列表项
table
双标签，用于定义表格
th
双标签，用于定义表头
tr
双标签，用于定义表格行
td
双标签，用于定义单元表格
属性
colspan
用于横向合并n个单元格
rowspan
用于纵向合并n个单元格
caption
双标签，用于定义表格标题
tbody
双标签，用于定义表格主体
thead
双标签，用于定义表格头
tfoot
双标签，用于定义表格脚
form
双标签，创建表单
action
像url提交表单数据
method
提交表单的方式
get
容量小，提交的信息域会显示在地址栏中，不安全
post
容量大，提交的信息域不会显示子啊地址栏中，安全
name
表单的名称
target
在何处打开action URL
_blank
_top
_self
_parent
autocomplete
是否启用表单的自动完成功能
novalidate
如果使用该属性，则提交表单时不进行验证
子标签
input
button
label
select
textarea
fieldset
iframe
双标签，内联框架
src
显示的文档的URL
iframe的名称
width
height
scrolling
是否在iframe中显示滚动条
pre
双标签，预留文本格式
保留空格和换行，适合保存计算机代码
blockquote
双标签，相关元素，定义一段常引用的文本，经常使用缩进来表示
cite用于指定该引用文本的原地址
address
双标签，定义地址，斜体方式表示这段文字
块级元素特征
block元素会独占一行，多个block元素会另起一行
不设置宽度，会继承父级的宽度
可以正常设置margin和padding属性
兄弟关系：margin-bottom和margin-top会产生叠压
父级关系：子级的第一个元素的margin-top会传递给它的父级
可以支持所有的CSS元素
可以嵌套其他元素：div可以嵌套p，但p嵌套div会被分割
内联标签
span
双标签，一行文字
用于设置一些小的CSS样式
a
双标签，超链接
href
链接地址
绝对路径
超链接所关联的另一个资源，需要完全的网址
相对路径
通过文件名跳转到相应页面
物理路径
说明当前文件所在路径
哪一个框架装载另一个资源
自身窗口打开
新窗口打开
暂不知链接
Web Storage
localStorage
是一种没有时间限制的数据存储方式，可以将数据永久保存在客户端
sessionStorage
指的是针对一个session的数据存储，即将数据保存在session对象中，当关闭浏览器后，这些数据会被删除
支持的属性与方法
getItem(key)方法
获取指定key所存储的value值
key(index)
返回列表中对应对应索引的key值
length属性
返回key/value对列表的长度
removeItem(key)
从storage中删除一个对应的键值对
将value存储到key指定的字段
clear()
一处storage中所有key/value 对
Web SQL
openDatabase
这个方法使用现有数据库或新建数据库来创建数据库对象
transaction
这个方法允许我们执行事务处理
executeSql
这个方法用于执行SQL语句
HTML
超文本标记语言，是一种 用于创建网页的标记语言
html标签总是成对出现，由尖括号包含关键词
html标签使用小写
HTML5
新增的结构性元素
section
定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节
article
他是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关被熔块，可独立于页面其它内容使用
nav
此标签代表页面的一个部分，表示页面中导航链接的部分
aside
它用来装载非正文的内容，被视为页面里面的一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息
hgroup
hgroup标签是对网页或区段section 的标题元素（h1~h6）进行组合
footer
定义section或文档的页脚，包含了与页面、文章或是部分内容有关信息
header
定义文档的页眉，通常是一些引导和导航信息
figure
用于对元素进行组合。多用于图片与图片描述组合
新增的语义性元素
mark
定义带有记号的文本，需要突出显示文本时使用<mark>标签
progress
标签定义运行中的任务进度（进程）
time
表示时间日期值
details
此标签规定了用户可见的或者隐藏的需求的补充细节
detailist
定义选项列表。请与input元素配合使用该元素，来定义input可能的值
ruby
此标签定义ruby注释，往往与<rt>和<rp>标签一起配合使用
menu
表示菜单列表
command
command标签可以定义用户可能调用的命令（比如单选按钮、复选框或按钮）
新增的input输入类型
email
定义用于email地址的字段
url
定义用于输入URL的字段
number
定义用于输入数字的字段
range
定义用于精确值不重要的输入数字的控件
Date Pickers
date：定义date控件。month：定义month和year控件（不带时区）。week：定义week和year控件。time：定义用于输入时间的控件。datemate：定义date和time控件，基于UTC时区。datetime-local：定义date和time控件，不带时区。
search
定义用于输入搜索字符串的文本字段
tel
定义用于输入电话号码的字段
color
定义拾色器
新增的input属性
规定<input>元素输入字段是否启用自动完成功能
autofocus
规定当前页面加载<input>元素应该自动获得焦点
规定<input>元素所属的一个或多个表单
新增的表单重写属性
formaction
规定当表单那提交时处理输入控件的文件的URL
formenctype
规定当表单数据提交到服务器时如何编码
formmethod
定义发送表单数据到actionURL的HTTP方法
formnovalidate
formnovalidate属性覆盖<form>元素的novalidate属性
formtarget
规定表示提交表单后在哪里显示接收到响应的名称或关键词
除了formnovalidate属性，其他属性都是只针对type=\"submit\"和type=\"image\"
新增的height和width属性
规定<input>元素的高度和宽度。（只针对type=\"image\")
list
属性引用<datalist>元素，其中包含<input>元素的预定义选项
新增min、max和step属性
min：规定输入框输入的最小值max：规定输入框输入的最大值step：为输入框规定合法的数字间隔
multiple
属性规定允许用户输入到<input>元素的多个值
pattern
规定用于验证<input>元素的值的正则表达式
placeholder
规定可描述输入<input>字段预期值的简短的提示信息
required
规定必须在提交表单之前填写输入字段
新增的form元素
datalist
datalist元素用于为输入提供一个可选列表，用户可以直接选择列表中的某一项，从而免去了输入的麻烦
keygen
keygen元素是秘钥对生成器，能够使用户验证更为可靠。用户提交表单时会生成两个键，一个私钥，一个公钥，私钥保存客户端而公钥会发送到服务端
output
output元素用于浏览器中显示计算结果式脚本输出，包含完整的开始和结束标签。语法：<output name=\"\">text</output>
新增的form属性
此属性用于form元素时，所有从属于该form的元素都具备自动完成功能。如果要使用个别元素关闭自动完成功能，则单独为该元素指定autocomplete=“off”即可
此属性用于提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效检查。如果只取消表单中较少部分内容的验证而不妨碍提交的大部分内容，则可以将此属性单独用于表单中的这些元素
Canvas
canvas是HTML5新增的专门用来绘制图形的元素，通过canvas技术，用户可以在Web中绘制各种图形
绘制步骤
添加canvas元素，定义id属性以便使用
使用id寻找canvas元素
通过canvas元素的getContext方法获取上下文（context）创建Context对象，以获取允许进行绘制的2D环境
使用JavaScript脚本进行绘制
绘制直线
beginPath()
ding一了一个新的路径绘制动作的开始
moveTo()
为指定点创建了一个新的子路径，这个点就变成的新的上下文点。我们就可以把moveTo()方法看成用来定位我们的绘图鼠标用的
lineTo()
以上下文为起点，到方法参数中指定的点之间画一条直线
stroke()
为所画的线赋予颜色，并使其可见。默认黑色
相关属性
linewidth
直线宽度
strokeStyle
直线颜色
直线端点样式
绘制弧线和曲线
arcTo()
arcTo()方法在画布上创建介于两个切线之间的弧/曲线
quardraticCurveTo()
绘制二次曲线，每条二次曲线要由上下文点、一个控制点和一个终止点来定义
bezierCurveTo()
绘制贝塞尔曲线使用此方法。每条贝塞尔曲线需要由上下文点、两个控制点和一个终止点来确定
线条的连接方式
miter
棱角连接
round
圆角
bevel
切角
绘制矩形
绘制圆
arc() 起始角度为0，终止角度为2*PI
图形颜色的填充
要填充图形，需要用fillStyle属性设置填充图形用的颜色，然后使用fill()方法完成对图形的填充。默认为黑色。
绘制阴影
shadowColor
shadowBlur
阴影模糊度
shadowOffsetX
设置或返回阴影与形状的水平距离
shadowoffsetY
设置或返回阴影与形状的垂直距离
绘制透明度
globaAlpha属性设置或返回绘图的当前透明值。属性值必须是介于0.0（完全透明）与1.0（不透明）之间的数字
绘制线性渐变
绘制径向渐变
绘制图案填充
绘制图像的方法
此方法许哟啊一个图像对象和一个起始点坐标作为参数，其中起始点坐标是相对于canvas的左上角的位置
drawImage方法还可以接受width和height两个参数用来以任意指定的尺寸显示图像
drawImage方法，还可以增加另六个参数来实现对图像的裁剪。这六个参数是，sourceX，sourceY，sourceWidth，sourceHeight，destWidth，destHeight
绘制文本
设置文本的字体、大小和样式
normal、italic、bold
设置文本颜色
fillStyle
描绘文本边缘
使用strokeText()方法替代fillText()
绘制文本对齐
textAlign属性start、end、left、center、right
文本度量
使用measureText()方法此方法需要一个文本字符串组作为参数，并返回一个尺度度量。尺度对象中的数据是基于所提供的字符串参数和当前文本字体信息而来的
文本换行
需要创建一个用户自定义函数，此函数需要canvas上下文对象、一个文本字符串、一个位置、一个最大宽度和行高信息。函数将使用measure Text（）计算何时换行
图形的变换
移动坐标空间
旋转坐标空间
旋转canvas用的方法是rotate()。此方法接受一个以弧度为单位的旋转参数，整个canvas将以坐标原点，也就是由translate()所确定的原点为圆心进行旋转
缩放图形
缩放操作使用scale()方法，参数x，y分别代表横向与纵向的缩放比例，两个参数都是浮点数，1，0表示不缩放，小于1.0表示缩小，大于1.0表示放大
保存与恢复canvas状态
使用save()和restore()方法可以实现对坐标变换状态的保存与恢复
图形的组合与裁切
图形的组合
globalCompositeOperation属性设置或返回如何将一个源（新的）图形会知道目标（已有的）的图像上
clip()方法从原始画布中剪切任意形状和尺寸
音频/视频
音频<audio>....</audio>
视频<video>....</video>
用于指定媒体资源的URL地址
autoplay
该属性可以实现页面加载音频后一旦就绪即开始自动播放
controls
可为媒体文件提供用于播放的控制条
loop
loop属性设置或返回音频/视频是否应该在结束时重新播放
音频视频相关方法
canPlayType()
检测浏览器是否能播放指定的音频/视频类型。惨Play Type（）方法可返回下列值之一：“probably”--浏览器最可能支持该音频/视频类型“maybe”--浏览器也许支持该音频/视频类型“ ”--（空字符串）浏览器不支持该音频/视频类型
load()
重新加载音频/视频元素。load()方法用于在更改来源或其他设置后对音频/视频元素进行更新
pause()
停止（暂停）当前播放的音频或视频
play()
从play()方法开始播放当前的音频或视频。所有主流浏览器都支持play()方法。
0 条评论
回复 删除
下一页
