HTML-HTML5新内容

HTML-HTML5新内容

1 语义化标签

都当成盒子div即可

元素===标签

1.1 头部标签

(<header></header>)

1.2 导航标签

(<nav></nav>)

1.3 区间、小节标签

(<section></section>)

1.4 侧边栏标签

(<aside></aside>)

1.5 文章标签

(<article><article>)

1.6 尾部标签

(<footer></footer>)

1.7 进度条标签

(<progress ><progress>)

max=“400” (总长度)

value=“200”(进度条拖动长度)

2 表单元素和属性

2.1 选择框

注意:输入框的list属性值与datalist的id值保持一致，才能绑定

<span>请选择你最喜欢玩的英雄：</span>
<input type="text" list="list-1">
<datalist id="list-1">
        <option value="影流之主"></option>
        <option value="神枪游侠"></option>
        <option value="山隐之焰"></option>
        <option value="赏金猎人"></option>
        <option value="曙光女神"></option>
</datalist>

2.2 按钮

<button>我也是普通的按钮</button>

2.3 input属性

<input type="text" id="user" name="user" size="20" placeholder="请输入你的姓名" required autofocus autocomplete="on">

1、 placeholder：提示信息

2、maxlength :最大长度

3、minlength:最小长度

4、required:强制输入，不能为空

5、autofocus:页面加载完，自动获取焦点

6、autocomplete:off 自动完成关闭

2.4 type属性值

1、邮箱 email
2、地址 url
3、拾色器 color 会显示一个拾色器
4、搜索框 search 在最后边显示一个叉号，单击可以清除搜索框的内容
5、时间：time
6、日期：date
8、星期：week

3 视频和音频

3.1 音频

音频标签：audio
控件: controls-
循环播放：loop
默认静音：muted

<audio src="media/yang.mp3" controls loop="loop" muted="muted"></audio>
<audio controls loop>
    <source src="media/yang.mp3">
</audio>

3.2 视频

视频标签：video
宽高属性:width height

<video src="media/test.mp4" controls loop="loop" muted="muted" width="200" height="300"></video>
<video controls>
    <source src="media/test.mp4">
</video>