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

最新推荐文章于 2020-09-28 20:20:05 发布

原创最新推荐文章于 2020-09-28 20:20:05 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #jquery mobile

Html5+jQM 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML5的新特性，包括新增的标签如section、nav、figure等，并讲解了媒体播放、表单改进等方面的内容。此外，还介绍了HTML5新增的属性，例如页面自适应、离线应用文件等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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