欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

第十课html5 新增标签及属性 html5学习5

程序员文章站 2023-08-18 20:07:24
一、常用新增标签 1、header:定义页面的页眉头部 2、nav:定义导航栏 3、footer:定义页面底部,页脚 4、article:定义文章 5、section:定义区域 6、aside:定义侧边 7、datalist: 定义选项列表 与input搭配使用

一、常用新增标签

1、header:定义页面的页眉头部

2、nav:定义导航栏

3、footer:定义页面底部,页脚

4、article:定义文章

5、section:定义区域

6、aside:定义侧边

7、datalist: 定义选项列表 与input搭配使用

<input type="text" value="请输入明星" list="star"/> input里面用list

<datalist id="star"> datalist 里面用id 来实现和input连接

  <option>刘德华</option>

  <option>刘青云</option>

  <option>刘亦菲</option>

  <option>张学友</option>

</datalist>

8、fieldset: 将表单内的相关元素分组打包 与legend搭配使用

<fieldset>

  <legend>用户登陆</legend>

  用户名:<input type="text"/>

</fieldset>

 

二、新增的input type属性值

1、email:邮箱 <input type="email" />

2、tel:手机

3、number:数字

4、url:网址格式

5、search:搜索框

6、range: 区域 滑块 滑动条

7、time:小时分钟

8、date:年月日

9、dtaetime:时间

10、month:月年

11、week:星期

12、color:颜色

 

 

三、input 新增属性

1、placeholder:占位符 提示文本

2、autofocus:自动获得焦点

3、multiple:多文件上传 <input type="file" multiple />

4、autocomplete:自动记录 on开启 off关闭 注:首先需要提交按钮 还需要设置input的name值

5、required:内容不能为空 必填项

6、accesskey:规定激活(使元素获得焦点)元素快捷键 采用alt+字母的形式

如:accesskey="s"

 

四、多媒体标签

embed:标签定义嵌入内容

audio:音频

video:视频

 

1、<audio src=""></audio>

 

属性: autoplay 自动播放

controls 显示控件

loop 循环播放 loop="2" 魂环播放两遍 loop或loop="-1" 无线循环播放

 

 

为了浏览器兼容,需要准备3种格式的音频文件

<audio controls autoplay>

  <source src="music.mp3" />

  <source src="music.ogg" />

  <source src="music.wav" />

  您的浏览器不支持音频播放

</audio>

2、video

支持三种视频格式:ogg,mp4,webm

 

<video src=""></video>

 

属性: autolay 自动播放

controls 显示控件

loop 循环播放 loop="2" 魂环播放两遍 loop或loop="-1" 无线循环播放

width

height

 

为了浏览器兼容,需要准备3种格式的视频文件

<video controls autoplay>

  <source src="movie.mp3" />

  <source src="movie.ogg" />

  <source src="music.webm" />

  您的浏览器不支持音频播放

</video>