HTML5新标签与特性

HTML5新标签与特性

文档类型设定

---

• document

  • HTML：sublime输入html:4s
  • XHTML：sublime输入html:xt
  • HTML5：sublime输入html:5

字符设定

---

• ：HTML与XHTML中建议这样去写
• ：HTML5的标签中建议这样去写

常用新标签

---

w3c 手册中文官网 : http://w3school.com.cn/

• header：定义文档的页眉 头部
• nav：定义导航链接的部分
• footer：定义文档或节的页脚 底部
• article：定义文章。
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容 侧边

<header>语义 :定义页面的头部 页眉<header>
<nav>语义 :定义导航栏 <nav>
<footer> 语义: 定义 页面底部 页脚<footer>
<article>语义: 定义文章<article>
<section>语义： 定义区域<section>
<aside> 语义： 定义其所处内容之外的内容 侧边<aside>

• datalist 标签定义选项列表。请与 input 元素配合使用该元素

<input type="text" value="输入" list="star"/>
<datalist id="star">
	<option>1</option>
	<option>2</option>
	<option>3</option>
</datalist>

• fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldest>
	<legend>用户登录</legend>标题
	用户名:<input type="text"><br/>
	密码：<input type="password">
</fieldset>

新增的input type属性值：

---

邮　箱:<input type="email"><br/>
手机号:<input type="tel" oninput="value=value.replace(/[^\d]/g,'')"  /><br/>
URL:<input  type="url" /><br/>
数字:<input type="number"  />
搜索框:<input type="search"  />
自定滑动:<input type="range" />
小时分钟:<input type="time" />
年月日:<input type="date"  />
时间:<input type="datetime-local" />
月年:<input type="month"  />
星期年:<input type="week"  />

常用新属性

---

### placeholder 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回

用户名:<input type="text"  placeholder="请输入用户名" />

autofocus

规定当页面加载时input 元素应该自动获得焦点

用户名:<input type="text"  placeholder="请输入用户名" autofocus >

multiple

选择文件 未选择任何文件 多文件上传

文件上传:<input type="file" multiple  />

autocomplete

规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值

1. autocomplete 首先需要提交按钮
2. 这个表单您必须给他名字

<form action="test.html" method="post" name="a">
 用户名:<input type="text"  placeholder="请输入用户名" autofocus   autocomplete="on"   /><br/>
 密　码:<input type="password" placeholder="请输入密码" autofocus  autocomplete="off" /><br/>
 年　龄:<input type="text"  accesskey="u"/>
 <input  type="submit" value="提交"/>
</form>

required

必填项 内容不能为空

用户名:<input type="text"  placeholder="请输入用户名" autofocus   autocomplete="on"  required/>

accesskey

规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式

用户名:<input type="text"  placeholder="请输入用户名" autofocus   autocomplete="on"  required  accesskey="u"/>

多媒体标签

audio：播放音频

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放 loop = 2 就是循环2次 loop 或者loop = “-1” 无限循环

<!--  audio：播放音频   -->
    <audio controls autoplay>
        <source src="../mp3/新宝岛.mp3" />
    </audio>

video：播放视频

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

<!-- video：播放视频  -->
    <video controls autoplay loop="-1">
        <source src="../mp4/LOL.mp4"  />
    </video>