html5入门

一，html新增加的语义化标签

• <header></header> – 头部标签
• <nav></nav> – 导航标签
• <article></article> – 内容标签
• <aside></aside> – 侧边栏标签
• <section></section> – 块级标签
• <footer></footer> – 尾部标签

原来用div来做事没有语义的，而单独的标签是语义化的

• <div class="header"></div>
• <div class="nav"></div>
• <div class="article"></div>
• <div class="aside"></div>
• <div class="section"></div>
• <div class="footer"></div>

二.新增的多媒体标签

• <video></video> – 视频标签
• <audio></audio> – 音频标签

(1) <video></video>标签

source标签可以兼容不同视频格式

<video width="800" height="">
	<source src="myvideo.mp4" type="video/mp4"></source>
	<source src="myvideo.ogv" type="video/ogg"></source>
	<source src="myvideo.webm" type="video/webm"></source>
	<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
		<param name="movie" value="myvideo.swf" />
		<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
	</object>
	当前浏览器不支持 video直接播放，点击这里下载视频: <a href="myvideo.webm">下载视频</a>
</video>

<video></video>常见的属性标签

[1 ] width : 设置视频播放器的宽度,width中设置值可以不加px

<video width="800"></video>

注意：如果width和height只给width输入值，系统则会按照视频的宽高比例进行矫正

[2 ] height : 设置视频播放器的高度,height中设置值同样也可以不加px

<video width="800" height=""></video>

[3 ] autoplay : 视频加载完成后才可以播放

<video width="800" height="" autoplay="autoplay"></video>

<video width="800" height="" autoplay></video>

两种写法皆可

[4 ] controls：向用户显示控件，比如播放按钮…

<video width="800" height="" autoplay controls="controls"></video>

<video width="800" height="" autoplay controls></video>

两种写法皆可

[5 ] loop : 当媒介文件完成播放后再次开始播放（循环播放）

<video width="800" height="" autoplay controls loop="loop"></video>

<video width="800" height="" autoplay controls loop></video>

两种写法都可以

[6 ] muted : 默认为静音播放

<video width="800" height="" autoplay controls loop muted="muted"></video>

<video width="800" height="" autoplay controls loop muted></video>

两种写法皆可

[7 ] poster ：视频正在下载时显示的图像，直到用户点击播放按钮

<video width="800" height="" controls loop poster="URL"></video>

屏幕录制 2023-09-10 134425

[8 ] preload：视频在页面加载时进行加载，并预备播放，简单来说就是边加载边播放（不常用）

注意：如果使用 “autoplay”，则忽略该属性

① 视频边加载边播放

<video width="800" height="" autoplay controls loop muted preload="auto"></video>

② 值与auto类似

<video width="800" height="" autoplay controls loop muted preload="metadata"></video>

③ 不使用

<video width="800" height="" autoplay controls loop muted preload="none"></video>

[9 ] src：要播放的视频的 URL

<video width="300" height="" autoplay controls muted perload src="222222.mp4"></video>

<video width="300" height="" autoplay controls muted perload>
	<source src="./222222.mp4" type="video/mp4">
</video>

两种写法意思一样

（2）<audio></audio> 标签

<audio src="666.mp3" type="audio/mpeg"></audio>
<audio src="666.ogg" type="audio/ogg"></audio>

audio的属性除了width,height,poster,其他都和video一样

三，input中新增的type属性

1.type=“email”

<li>邮箱：<input type="email" /></li>

2.type=“url”

<li>网址：<input type="url" /></li>

3.type=“date”

<li>日期：<input type="date" /></li>

4.type=“time”

<li>时间：<input type="time" /></li>

5.type=“number”

<li>数量：<input type="number" /></li>

6.type=“tel”

<li>手机号码：<input type="tel" /></li>

移动端点击会自动浮现出数字框

7.type=“search”

<li>搜索：<input type="search" /></li>

8.type=“color”

<li>颜色：<input type="color" /></li>

9.type=“month”(不常用)

<li>月：<input type="month" /></li>

10.type=“week”(不常用)

<li>星期：<input type="week" /></li>

四，input中新增的属性

<form action="">
	用户名：<input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off" >
	<input type="submit" value="提交">
	上传头像：<input type="file" name="" id="" multiple="multiple">
</form>

1.required：校验表单不能为空

2.placeholder：表单提示文字

3.autofocus：页面加载完成是自动聚焦

4.autocomplete：提示历史记录（一定要提交过后才会有）

5.multiple：上传多个文件

6.max，min通常与数字或日期一起使用，否则会出错

<input type="number" min="10"><input type="submit">

7.pattern：表单正则验证

<input type="text" name="fname" pattern="[A-Za-z]{3}"><input type="submit">

8.step：给默认数字类型上下箭头提供跳跃的数字

<input type="number" step="3">

9.readonly：只读属性

<input type="text" placeholder="请输入" readonly>

10.disabled：禁用属性

<input type="text" disabled>