1+x web前端认证---html5(3)

本文详细介绍了HTML5的新特性,包括更简洁的语法、语义化的标签如<header>,<nav>,<article>等,以及表单的新属性如required和placeholder。此外,还讲解了audio和video标签用于音频和视频播放的功能,以及embed和object标签的使用。同时提到了marquee标签用于文字滚动的效果。
摘要由CSDN通过智能技术生成

这个章节常考选择题,多选题,一个都不能错

因为多选题比较变态,多选不得分,少选不得分,选错不得分,你们懂的。。。。

html5的新特点

1.语法更简单

a) 头部声明

<!doctype html>

b) 简化了字符集声明

<meta charset="utf-8">

2.语法更宽松

a) 可以省略结束符的标签

li、dt、dd、p、optgroup、option、tr、td、th

b) 可以完全省略的标签

html、head、body

3.标签语义化

增加了很多标签,在作页面的时候更加具有语义(定义了一些原本没有语义的div模块为有鲜明结构的语义模块)

a) <header>标记定义一个页面或一个区域的头部

b) <nav>标记定义导航链接

c) <article>标记定义一篇文章内容

d) <section>标记定义网页中一块区域

e) <aside>标记定义页面内容部分的侧边栏

f) <footer>标记定义一个页面或一个区域的底部

4.表单新增常用属性

required:必填

placeholder:输入内容提示

autofocus:自动获取焦点-----自动帮我们将光标点进去

<form method="post"action="http://www.baidu.com">

<!-- required 必填,必须的 -->

<!-- 自动获取焦点----自动将光标定位到表单中 -->

<inputtype="text"placeholder="请输入用户名"autofocus="autofocus"required="required"/>

<inputtype="submit"/>

</form>

5.input新增type属性值

a) type="email",文本框中只能输入email地址

b) type="date",日期控件

c) type="time"

d) type="month"

e) type="week"

f) type="number",唤醒数字键盘

g) type="range",滑块

h) type="color"

多媒体标签

以下章节常考选择题,多选题,操作题


1.embed标签

不是h5独有,h4就有,用来播放音频和视屏

<embed src="邓紫棋-喜欢你.mp3"></embed>

<embed src="邓紫棋_喜欢你.webm"></embed>

说明:embed可以用来插入各种多媒体,格式可以是 Midi、Wav、flac、AIFF、AU、MP3、MP4等等,Netscape及新版的IE 都支持。

多学一招:embed标签有属性可以控制播放状态

autostart=true/false --用来控制音频或视频文件是否在下载完之后就自动播放(IE可用)

loop=正整数/true/false --用来控制音频或视屏文件在播放结束之后是否循环播放或循环播放的次数

hidden=true/no --用来设置多媒体的控制面板是否隐藏

2.audio标签

h5专门用来播放音频的,支持的格式有MP3、OGG、WAV

<audiosrc="邓紫棋-喜欢你.mp3"controlsautoplay="autoplay"></audio>

controls="controls"用来显示控制面板

autoplay="autoplay"用来控制自动播放

loop="loop"用来设置循环播放

多学一招:为了兼容,通常会写多个资源,第一个不能播放就播放第二个,原因是不同的浏览器支持的格式不一样,所以出现了一种兼容写法(前提是准备三种格式的视频文件)

<audiocontrolsautoplay>

<sourcesrc="music/music.mp3">

<sourcesrc="music/music.ogg">

</audio>

浏览器会从上到下依次去读,在这个过程中,只要读到自己识别的视频文件就直接播放这个视频文件,并且不会再往后继续读取

3.video标签

h5专门用来播放视屏的,可以写单个,也可以写多个,支持格式有MP4、WebM、OGG

<videocontrolsautoplayloop>

<sourcesrc="邓紫棋_喜欢你.mkv">

<sourcesrc="邓紫棋_喜欢你.webm">

</video>

文字滚动

<html>

<head>

<title>我的第一个页面</title>

</head>

<body>

<marquee behavior="scroll" direction="up" height="30" style="overflow:hidden;" scrollamount="1" width="300" onMouseOver="stop()" onMouseOut="start()">

雷电黄色预警!<br />

大雨黄色预警!<br />

</marquee>

</body>

</html>

direction:方向

up:上 down:下 left:左 right:右

scrollamount:滚动速度-----------------scroll:滚动 amount:数值

width:宽度 height:高度

onmouseover:当鼠标移上去

onmouseout:当鼠标离开

stop():停止

start():开始

behavior:

scroll 循环滚动

alternate 来回滚动

slide 滚动一次停止

object标签

<object type="application/x-shockwave-flash" data="line.swf" width="500" height="500"></object>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值