html5基础学习

1.html5基础

新增语义化标签

section元素 （ 类似div ）

header元素 （嵌套常用） 头部

nav元素（ 导航元素 可嵌套 li 等类型） 可做导航

article 元素 （ 类似做内容的盒子） 其实 div 都可做 表示一块与上下文无关的独立内容

aside 元素 在article之外 用来辅助的盒子 类似跳转内容辅助栏

footer元素 表示页面中一个内容区块 一般可拿来做整个页面的页脚

figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题（ 第一个或者最后一个元素的位置）

main元素 类似C语言里的主函数 页面中的主要内容

dialog元素 定义对话框或窗口 类似用户条例 必须翻到最下才能触发（

这是打开的对话窗口 ）

2.音视频标签的使用

video元素 定义视频

Video元素

audio元素 定义音频

Audio元素

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。

autoplay属性：如果出现该属性，则视频在就绪后马上播放。

loop属性：重复播放属性。 muted属性：静音属性。

poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

3.只能表单的应用

Type=“email” 限制用户必须输入email类型

Type=“number” 限制用户必须输入数字类型 数字: step 每次跳动的节数

Type=“url” 限制用户必须输入url类型

Type=“range” 产生一个滑动条表单

Type=“search” 产生一个搜索意义的表单

Type=“color” 生成一个颜色选择的表单

Type=“time” 限制用户必须输入时间类型

Type=“date” 限制用户必须输入时间类型

Type=“month” 限制用户必须输入月类型

Type=“week” 限制用户必须输入周类型

Type=“datetime-local” 选取本地时间

—新增属性 placeholder ： 文本框输入文字时的提示文本 点击输入后会消失—更改内部文字时需要固定设置样式——>input2::-webkit-input-placeholder

—autofocus属性： 给文本框、选择框、或者按钮控件加上该属性 当打开页面时、会自动跳转获得焦点 也就是光标 提醒用户输入—

—autocomplate属性： 输入富足和所用的自动完成功能 ，是一个节省输入时间，同时也十分方便的功能。属性值 on/off

相当于时qq的账号存储 输入账号的时候会弹出历史输入记录—

正阶表达式

验证qq账号输入

—pattern属性， 用于验证表单输入的内容，通常html5的 type 属性，比如 email tell number等等 以及url类等

当已经自带简单的数据格式验证功能了，加上pattern后、前端部分的验证更加高效了

显而易见 、 pattern的属性值要用正则表达式—

实例

Datalist：选项列表

基础的为 select

两个属性必须下接上 option

格式 将 list = “box”写入行内 可将选择器放入框内