HTML5新标签与特性

HTML5新标签与特性

常用新标签

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

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

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

<input type="text" name="" id="" placeholder="清选择你想要的装备" list="PUBG">
<datalist id="PUBG">
    <option value="肾上腺素"></option>
    <option value="三级头"></option>
    <option value="三级甲"></option>
    <option value="AWM"></option>
    <option value="马格南20发"></option>
    <option value="吉利服"></option>
</datalist>

效果

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

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

效果

新增的input type属性值

1. email - 邮箱输入格式
   提交表单时不符合邮箱规范不能提交
   

2. tel - 输入手机号码格式‘’
   这种写法在电脑版网页中不会使用，因为这个type是为触屏网页开发服务的。在触屏端点击type为tel的输入框时，跳出的虚拟键盘为电话键盘（1-9、*、#）。

3. url - 输入url格式
   输入完整的网页后可以提交表单
   

4. number - 输入数字格式
   只能输入数字
   

5. search - 搜索框（体现语义化）
   

6. range - 自由拖动滑块
   

7. time - 小时分钟
   

8. date - 年/月/日
   

9. datetime - 时间(年/月/日 时/分)
   

10. month - 年/月
    

11. week - 星期/年
    

input常用的新属性

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

    <form action="test.html" method="post">
        用户名：<input type="text" name="" placeholder="请输入用户名"><br>
        密　码：<input type="password" name="" placeholder="请输入密码"><br>
        <input type="submit" value="提交">
    </form>

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

• multiple(使用multiple的时候，type必须是file)
  多文件上传

<form action="test.html" method="post">
    <input type="file" multiple><br>
    <input type="submit" value="提交">
</form>

• autocomplete
  规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值
  1.autocomplete 首先需要提交按钮
  2.这个表单您必须给他名字

• required
  必填项 内容不能为空

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

多媒体标签

• autoplay 自动播放
• controls 是否显不默认播放控件
• loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环

多媒体 audio

    <audio controls autoplay>
        <source src="../mp3/%5B竈門炭治郎のうた%5D.mp3" />
    </audio>

多媒体 video

• width 设置播放窗口宽度
• height 设置播放窗口的高度

<video controls>
    <source src="../video/Alan%20Walker%20-%20The%20Spectre.mp4">
</video>