Html5新特性-听视频教程总结

以下是听视频,所总结的一些知识点,以便之后查阅。同时与大家共讨论。

1、做html5方面东西,所需要的技术基础。

2、Html5的一些新特性,如上图所展示。(注:为了代码的浏览与管理,还是建议统一大小写,加引号等操作)

以上不过多进行描述,基本都了解的。

section:页面划分,若需要与后台交互,可加id,样式用class。

补充:nav元素,导航。

figure独立流内容(图像、图表、照片、代码等等)。figure原始的内容应与主内容相关,如果被删除,不应对文档流产生影响。

3、媒体

video

4、表单

email、url、number、range、search、color、

datepickers:date:日-月-年       month:日-月-年week:周-年
time:时间

datetime:UTC时间(选取时间,日-月-年)datetime-local:本地时间(选取时间,日-月-年)

5、新增加的标签

mark:标注,<mark>KFC</mark>此处KFC有背景色,与其他不同

progress:进度条

<progress max="100" value="83">
				<span>83</span>
			</progress>

time:时间(T:分隔符;Z:UTC时间; update:发布时间)

<time datetime="2013-10-18T09:00Z" update>

ruby:注释

<ruby>"阚"
	<rt> </rt>
	<rp>(</rp>   //不支持时展示
	XXX解释
	<rp>)</rp>
</ruby>

rt:与ruby一起使用

wbr:软换行,根据窗口大小,如果窗口小了,会自动进行换行操作。

canvas:画板

command:命令菜单,个浏览器支持不是很好

details:下拉菜单

<details open>
	<summary>点击下来</summary>
	<ul>
		<li>111111</li>
		<li>2222222</li>
		<li>33333333</li>
	</ul>
</details>

datalist:输入提示(下拉选择)

<input id="mycars" type="url" list="cars">
<datalist id="cars">
	<option value="car1"></option>
	<option value="car2"></option>
	<option value="car3"></option>
</datalist>

keygen:加密

output:对结果计算

source:资源

menu:菜单

6、新增属性

a、页面自适应

<meta name="viewport" content="width=device-width, initial-scale=1">

b、离线应用文件

<html  manifest="cache.manifest">

c、禁止浏览器缓存

<span style="font-family: Arial, Helvetica, sans-serif;"> <meta http-equiv="pragma" content="no-cache">   </span>

d、窗口小图标

<link rel="icon" href="../../images/yzlogo.png" type="image/png" sizes="16*16">

e、所有超链接,有target="_blank"的,均会加上前边的http://……

<base href="http://localhost/" target="_blank"

f、下边两个script,defer:等所有都下载后,再执行,推迟执行;async:异步执行

<script defer src="" onload="aleat(a)" ></script>
<script async src="" onload=""></script>

g、a标签中media属性设置,针对不同设备更好的进行优化

<a media="handhold" href=""></a>
            <a media="TV" href=""></a>

h、ol有序列表中倒序排列reversed

<ol start="50" reversed>
                <li></li>
                <li></li>
                <li></li>
            </ol>

i、menu的使用

<menu type="1、右键显示上下文;2、平时列表;3、工具条" label="menu">
                <li><input type="checkBox"></li>
                <li></li>
                <li></li>
            </menu>

j、iframe内嵌框架内容seamless:无边框,无边距;srcdoc:内嵌框架内容; sandbox:内嵌框架安全限制(1、禁止提交表单;2、禁止调用js;3、内嵌不相同源;4、允许……总共4个选项)

<iframe seamless="" srcdoc="<h1>hello</h1>" sandbox href=""></iframe>

k、html5中允许通过data-建属性,方便通过type进行查找

<form data-type="comment"></form>

l、label隐藏

<label hidden=""></label>

m、textarea自动纠错提示(tabindex=1,2,3,……用于标注顺便,按tab键可自动按顺序切换光标)

<textarea tabindex="2" spellcheck="true"></textarea>

n、鼠标点击可自行修改

<table contenteditable="true">
                <tr><td>shljljldjldlshlshdljlkdfslldsk</td></tr>
                <tr><td>shljljldjldlshlshdljlkdfslldsk</td></tr>
            </table>

o、内部定义css,只对内部的标签起作用

<div>
                <style type="text/css" scoped>
                    h1{}
                    p{}
                </style>
                <h1></h1>
                <p></p>
             </div>

7、js控制页面中均可修改

 <script>
                window.document.designMode = "on";
            </script

基本总结这么多,当然,其中一些还需要验证。

时间: 2024-10-23 03:56:00

Html5新特性-听视频教程总结的相关文章

HTML5新特性data_*自定义属性使用

HTML5 新特性data_*自定义属性使用HTML5规范里增加了一个自定义data属性. 这个自定义data属性的用法非常的简单,就是你可以往 HTML 标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. 使用 data-* 可以解决自定义属性混乱无管理的现状.

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据.它是通过一个网络浏览器作为客户端数据库实现的,它允许网页以键值对的形式来存储数据. 它具有以下特征: 每个原始网站/域最多可存储 5MB 的数据. 你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问. 就像 cookies,你可以选择将保持数据(维持),即使你已

Html5新特性 &lt;canvas&gt;画板画直线

 下面例子为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

Html5新特性 &amp;lt;canvas&amp;gt;画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

HTML5新特性新增功能

HTML5 现如今已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 如:绘图canvas:用于媒介回放的video和audio元素:本地存储localStorage;语义化元素:表单控件等等新增的功能,都是HTML5新特性. 下面列举HTML5新特性详细说明: 一.新的文档类型  (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

HTML5新特性,老生常谈——前端面试常见问题

找工作面试的时候有公司技术人员会问html5新特性,那这里就再复习一遍 1.新的文档类型 <!DOCTYPE html> 2.脚本和链接无需type <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/Angular.js"></script> 3.语义化的Header 和Footer 这里通俗说下什么叫做语义化,就是:明

HTML5新特性有哪些

HTML5新特性有哪些: 1.新的文档类型 2.脚本和链接无需 3.语义Header和Footer The Semantic Header and Footer 4.Hgroup 10.Autofocus 属性 Autofocus Attribute 12.Video 支持 Video Support 13.视频预载 Preload attribute in Videos element 14.显示控制条 15.正规表达式 5.标记元素 6.图形元素 8.占位符 9.必要属性

HTML5新特性小结

HTML5 新特性 新的DocType: <!DOCTYPE html> 不需要声明文档类型: 脚本和链接不需要type属性,如 lingk, script; 语义化标签,如:header, footer, hgroup, mark, figure, small, article, 属性及校验, 新的属性,如:placeholder, required, autofocus, pattern, autocomplete, data, contenteditable 自动校验,如: requir

HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " stroke="" stroke-width=""> </polyline> #points 一组坐标点 #渐变特效对象:一种特效样式(从一种颜色慢慢过滤另一种颜色效果) #渐变特效对象:(1)创建渐变对象 <defs> (2)在指定图形应用