HTML5的一些新特性

一、学习内容

1.HTML5新增语义化标签

1.1 section标签

​ 表示页面中的一个内容区块

1.2 header标签

​ 表示整个页面的标题,或者某个区块的标题

1.3 footer标签

​ 表示整个页面的尾部,或者某个区块的尾部

1.4 nav标签

​ 表示页面中的导航链接部分

1.5 article标签

​ 表示一块与上下文无关的独立的内容

1.6 aside标签

​ 在article之外,但与article内容相关的辅助信息

1.7 figure标签

​ 表示一段独立的流内容,可以使用figcaption标签为其添加标题

1.8 main标签

​ 表示页面中的主要内容,IE不兼容

​ 兼容低版本浏览器:

1.9 dialog标签

​ 定义对话框或者窗口

​ 属性open规定 dialog 元素是活动的,用户可与之交互。

1.10 canvas标签

​ HTML5 canvas 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成

​ canvas 标签只是图形容器,您必须使用脚本来绘制图形。

​ 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

2. 表单新增内容

2.1 input标签新增内容

<!--拖动条-->
<input type="range" name="" id="" value="20"><br>
<!--选择颜色-->
<input type="color" name="" id=""><br>
<!--选择年月日-->
<input type="date" name="" id=""><br>
<!--选择年月日时分-->
<input type="datetime-local" name="" id=""><br>
<!--邮箱-->
<input type="email" name="" id=""><br>
<!--选择文件-->
<input type="file" name="" id=""><br>
<!--定义图像作为提交按钮-->
<input type="image" src="images/Ak1.png" alt=""><br>
<!--数字-->
<input type="number" name="" id=""><br>
<!--搜索-->
<input type="search" name="" id=""><br>
<!--手机号-->
<input type="tel" name="" id=""><br>
<!--时分-->
<input type="time" name="" id=""><br>
<!--年和第几周-->
<input type="week" name="" id=""><br>
<!--定义用于 URL 的文本字段。-->
<input type="url" name="" id=""><br>
<!--年和第几个月-->
<input type="month" name="" id=""><br>

2.2 表单新增属性

  1. placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。

  2. autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得焦点,一个页面只能有一个。

  3. required属性:验证输入不能为空

  4. autocomplete属性:输入富足和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。属性值:on/off。on可是显示指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中显示:

  5. novalidate取消验证 可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证partten

  6. Multiple:可以输入一个或多个值,每个值之间用逗号分开 例: 还可以应用于file

  7. pattern属性pattern用于验证表单输入的内容,通常HTML5的type属性,比如email、tel、number、data类、url等,已经自带了简单的数据格式验证功能了,加上pattern后,前端部分的验证更加简单高效了。显而易见,pattern的属性值要用正则表达式。

  8. output:定义不同类型的输出,如计算结果的输出,或脚本的输出。

    注:必须从属于某个表单。即,必须将它书写在表单内部

  9. Datalist :数据列表

    例:

    提示:option 元素永远都要设置 value 属性。
    list属性:结合datalist元素使用

3. video和audio

video元素 定义视频
<video src="movie.ogg" controls="controls">Video元素</video>

audio元素 定义音频
<audio src="someaduio.wav">Audio元素</audio>

controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。
autoplay属性:如果出现该属性,则视频在就绪后马上播放。
loop属性:重复播放属性。
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<video controls>
       <source src="../mv/movie.ogg" type="video/ogg">
       <source src="../mv/web.mp4" type="video/mp4">
</video>

Type属性值: 用于视频:video/ogg   video/mp4     video/webm 用于音频:audio/ogg   audio/mpeg   audio/mp3
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇