Web全栈~03.HTML5新特性

柔光的暖阳◎ 2022-11-19 15:59 30阅读 0赞

# Web基本笔记~03.HTML5新特性 #

### [上一期][Link 1] ###

## 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 控件）。您也可以设置可接受 数字的限制

### 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），描述输入域所期待的值。

### 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 标签定义声音，比如音乐或其他音频流。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]

### source ###

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

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

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112184137
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]: /images/20221119/5c9ad5a039f24c8ca6ad72ada399ac70.png