首页 > 编程知识 正文

Web全栈~03.HTML5新特性

时间:2023-05-04 05:41:25 阅读:262728 作者:1280

Web基本笔记~03.HTML5新特性 上一期 HTML5 新增 type 类型 email

       定义用于 e-mail 地址的字段(当提交表单时会自动对 email 字段的值进行验证)

E-mail: <input type="email" name="usremail"> url

       定义用于输入 URL 的字段

添加你的主页: <input type="url" name="homepage"> search

       定义搜索字段(比如站内搜索或谷歌搜索等)

Search Google: <input type="search" name="googlesearch"> tel

       定义用于输入电话号码的字段

电话号码: <input type="tel" name="usrtel"> color

       从拾色器中选取颜色

选择你喜欢的颜色: <input type="color" name="favcolor"> number

       定义用于输入数字的字段(您可以设置可接受数字的限制)

       max - 规定允许的最大值。 min - 规定允许的最小值。 step - 规定合法数字间隔。 value - 规定默认值。

数量 ( 1 到 10 之间): <input type="number" name="quantity" min="1" max="10"> range

       定义用于精确值不重要的输入数字的控件(比如 slider 控件)。您也可以设置可接受 数字的限制

<input type="range" name="points" min="1" max="10"> date

       定义 date 控件

生日: <input type="date" name="bday"> month

       定义 month 和 year 控件(不带时区)

生日 ( 月和年 ): <input type="month" name="bdaymonth"> week

       定义 week 和 year 控件(不带时区)

选择周: <input type="week" name="week_year">
HTML5 新增属性 autofocus 属性

       autofocus 属性规定在页面加载时,域自动地获得焦点。注释:autofocus 属性适用于所有 < input > 标签的类型。

User name: <input type="text" name="user_name" autofocus /> multiple 属性

       multiple 属性规定输入域中可选择多个值。 注释:multiple 属性适用于以下类型的 < input > 标签:email 和 file。

Email: <input type="email" multiple /> placeholder 属性

       placeholder 属性提供一种提示(hint),描述输入域所期待的值。

<input type="search" name="user_search" placeholder="Search W3School" /> required 属性

       required 属性规定必须在提交之前填写输入域(不能为空)。

Name: <input type="text" name="usr_name" required />
HTML5新增元素 HTML5 新增布局标签

       < header >...< /header > 头部

       < nav >...< /nav > 导航

       < section >...< /section >定义文档中的节。比如章节、页眉、页脚或文档中的其它部分

       < aside >...< /aside > 侧边栏

       < footer >...< /footer > 页脚

       < article >...< /article >代表一个独立的、完整的相关内容块,可独立于页面其它内容使用。例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">/*页面顶部 header*/header{height:150px;background-color:#5500ff;}/*页面中间 div*/div{margin-top:15px;height:200px;}section{height:150px;background-color:#00ffff;width:45%;float:left;}article{background-color:#55aaff;width:350px;text-align:center;margin:0px auto;}aside{height:360px;background-color:#ffaa7f;width:35%;float:right;}/*页面底部*/footer{height:100px;background-color:#ff557f;clear:both;margin-top:10px;}</style></head><body><header>定义一个页面或是区域的头部</header><div><section>定义一个区域</section><aside>定义页面内容的侧边框部分</aside></div><footer>定义一个页面或是区域的底部</footer></body></html> 视频和音频

       HTML5 未出来之前,在线的音频和视频都是借助 Flash 或者第三方工具实现的,现在HTML5 也支持了这方面的功能。在一个支持 HTML5 的浏览器中,不需要安装任何插件就能播放音频和视频。原生的支持音频和视频。

视频和音乐

       Video 标签定义视频,比如电影片段或其他视频流

       audio 标签定义声音,比如音乐或其他音频流。

<body><video src="./vedio/动漫原声-めぐる季節(标清).mp4" autoplay="autoplay">动漫原声</video><audio src="./music/井上杏美%20(井上あずみ)%20-%20めぐる季節%20(更替的四季).mp3" autoplay="autoplay"></audio></body>

source

       < source > 标签为媒介元素(比如 < video > 和 < audio >)定义媒介资源。

       < source > 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。