HTML5基础

99 阅读2分钟

一、语义化标签

  1. <section></section>表示页面中的一个区块
  2. <article></article>表示一块与上下文无关的独立内容
  3. <aside></aside>表示在article之外的,与article内容相关的辅助信息
  4. <header></header>表示在页面中一个内容区或者整个页面的标题
  5. <footer></footer>表示在页面中一个内容区或者整个页面的脚注
  6. <nav></nav>表示页面中导航链接部分
  7. <figure></figure>表示一段独立的内容,使用figcaption为其添加标题(只能在第一个或者最后一个子元素的位置)
  8. <main></main>表示页面中的主要内容(ie不兼容)
  9. <mark></mark>高亮

二、多媒体标签

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

2.1 videoaudio的部分属性:

  • src="文件地址"
  • width="宽度"
  • height="高度"
  • controls="显示控件"
  • muted="静音"
  • loop="循环播放"
  • poster="第一帧图像地址"

2.2 <source></source>媒介标签

source的部分属性:

  • src="文件地址"
  • type="video/视频文件类型"
  • 视频文件类型:ogg, mp4, webm
  • type="audio/音频文件类型"
  • 音频文件类型:ogg, mpeg

【注】<video></video><audio></audio>均允许有多个scource元素,scource元素可以连接不同的视频/音频文件,浏览器将使用第一个可识别的格式进行播放

三、HTML5新增表单相关属性

3.1 <input>标签type属性新增属性值

  1. <input type="email"> 限制用户必须输入email类型

  2. <input type="url"> 限制用户必须输入url类型(必须包含http://)

  3. <input type="range"> 产生一个滑动条表单

  4. <input type="number"> 限制用户必须输入数字

  5. <input type="search"> 产生一个搜索意义的表单

  6. <input type="color"> 生成一个颜色选择的表单

  7. <input type="time"> 限制用户必须输入时间类型(时分)

  8. <input type="month"> 限制用户必须输入月类型(年月)

  9. <input type="week"> 限制用户必须输入周类型(年周)

  10. <input type="datetime-local"> 选取本地时间(年月日时分)

  11. <input type="date"> 日期(年月日)

2_FV7{EW`8A4B38M{MJOT69.png

3.2 表单新增属性

  1. equired="equired" 监测是否为空

  2. min="1" 最小值(只能输入数字,包含小数点)

  3. max="10" 最大值(只能输入数字,包含小数点)

  4. step="5" 步幅(确定一个法定值,可以为负数,-1、0、1...)

  5. list="" 必须结合datalist标签,绑定datalistid名称

  6. autocomplete="on"是否自动提示信息/自动完成。属性值on,off

    【注】使用autocomplete必须满足2个条件:

    1.必须成功提交过;

    2.当前添加autocomplete属性的元素必须有name属性

  7. placeholder="请输入内容" 文本框的提示信息

  8. autofocus="autofocus" 自动聚焦。(一个页面只能有一个,写多个也只有第一个生效)

  9. pattern="/xxx/" 后面的属性值是一个正则表达式。

  10. required="required" 必须输入,若没有输入则会阻止当前提交数据

  11. novalidate="novalidate" 取消验证

  12. multiple="multiple" 选择多个文件上传(上传file需要按住ctrl键,写多个email中间用逗号隔开)

3.2 表单新增标签

<output></output>标签

<datalist></datalist>标签

QQ图片20230318103212.jpg