html5学习总结

最新推荐文章于 2022-06-02 15:17:30 发布

Nemo_XP

最新推荐文章于 2022-06-02 15:17:30 发布

阅读量1.8k

点赞数

分类专栏： html和css

本文链接：https://blog.csdn.net/spw55381155/article/details/79895902

版权

html和css 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

语言设置：
<body lang="en">
快捷键设置（使用Alt+所设字母）：
<input type="text" name="txt" value="" accesskey="G"/>
作用：使用alt+G直接跳到文本框里
Tab切换（常用登录帐密切换）：
<a href="http://www.baidu.com" accesskey="B" tabindex="2">百度</a>

Xhtml简介：
是html的升级版，与html区别不大，为了兼容。
不同点：
Xhtml必须要加上命令头DOCTYPE文档类型，第一行设置文档版本，第二行文档类型定义，dtd文件中对每一个标签每一个属性都进行了约定，浏览器就遵循这些约定进行解析。第三行是引用命名空间，

作用：由于xml允许定义自己的标记，但你定义的标记和其他人定义的标记有可能相同，但表示不同的含义。当文档交换或者共享的时候就容易产生错误。为避免这种错误产生，xml采用名字空间声明，允许你通过一个网址来识别你的标记。
XHTML是HTML向xml过度的标记语言，它需要符合xml文档规则，因此，也需要定义名字空间，又因为XHTML1.0不能自定义标识，所以，它的名字空间都相同，就是：http://www.w3.org/1999/xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Xhtml与html升级的不同点（因为向xml过渡所以符合xml即是不同点）
语法：1.必须添加文档类型和命名空间
2.标签必须闭合
3.元素和属性必须小写，值必须双引，且必须有之（html可以没有如checked或readnoly）
Html5也是html的升级，较xhtml来说，它做了很多简化，例如命令头，<!DOCTYPE html>
<html></html>
Doctype不区分大小写，不用写那么长的标示，简化只有两个单词。Html也不用必须引用固定的命名空间了。
使用html，会使浏览器按照标准模式进行解析。
Html5为了做到最大兼容，会同时兼容html的写法和自创的简化写法。例如html版本：<meta http-equiv="Content-Type" Content="text/html charset=utf-8">
Html5版本：<meta charset="utf-8">
Html版本：标签必须闭合<br />
Html5版本：兼容<br>写法，也可以省略<li></li>为<li>.部分标签可以全部省略如<head><body><html>，也兼容无值得属性，如readonly等
html5简化
Html5元素：
新增元素
Html5的新规则：
HTML5 是 W3C 与 WHATWG 合作的结果。
新规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

新标签：Video，audio

您的浏览器不支持video标签（不支持会显示这里的内容）

</video>

Control属性供添加播放，暂停和音量控制。

兼容性：

使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。

IE8不支持video，IE9将提供对使用 MPEG4 的 video 元素的支持

Dom方法属性：

Play(),pause(),load(),canPlayType

也可以这么写

Your browser does not support the video tag.

</video>

新标签：drag 拖动

<div id="div1" ondrop="drop(event)"

οndragοver="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"

οndragstart="drag(event)" width="336" height="69" />

新标签：Canvas 画布


				<canvas id="myCanvas" width="200" height="100"></canvas>

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

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

新标签：SVG 矢量图


				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

其他新元素参见w3School
Html新的表单元素
1. Email 提交表单时，会自动验证 email 域的值。
2. url 在提交表单时，会自动验证 url 域的值
3. number在提交表单时，会自动验证是否数字
4. range 滑动条
5. Date pickers (date, month, week, time, datetime, datetime-local)
6. search
7. color

datalist 下拉框
keygen 密钥对生成器
output 脚本输出结果显示

新的 form 属性：

Autocomplete 提交一次后，显示以前填过的列表
Novalidate email等控件不验证了

新的 input 属性：

autofocus load页面后，自动获得焦点
form 某个form标签外，加上form id属性，即是一同提交
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
list 是输入域的选项列表
min, max 和 step
multiple 属性规定输入域中可选择多个值
pattern (regexp) email等控件不验证了
placeholder placeholder 属性提供一种提示（hint），描述输入域所期待的值。
required 非空

例子

First name: <input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

</form>

Nemo_XP

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5学习总结

语言设置：&lt;body lang="en"&gt;快捷键设置（使用Alt+所设字母）：&lt;input type="text" name="txt" value="" accesskey="G"/&gt;作用：使用alt+G直接跳到文本框里Tab切换（常用登录帐密切换）：&lt;a href="http://www.baidu.com" acc
复制链接

扫一扫