html5基础
语法
• 内容类型(ContentType)
◦ HTML5的文件扩展符与内容类型保持不变,仍然为".html"或".htm"
• DOCTYPE声明
◦ 不区分大小写
• 指定字符集编码
•
• 可省略标记的元素
◦ 不允许写结束标记的元素:br、col、embed、hr、img、input、、
link、meta
• 可以省略结束标记的元素:
◦ li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
• 可以省略全部标记的元素:html、head、body、colgroup、tbody
• 属性值可以使用双引号,也可以使用单引号。
语义化标签
在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没
• section元素 表示页面中的一个区块
• article元素 表示一块与上下文无关的独立的内容
• aside元素 在article之外的,与article内容相关的辅助信息
• header元素 表示页面中一个内容区块或整个页面的标题
• footer元素 表示页面中一个内容区块或整个页面的脚注
• nav元素 表示页面中导航链接部分
• figure元素 表示一段独立的内容,使用figcaption元素为其添加标题(第一个或最后一
个子元素的位置)
• main元素 表示页面中的主要的内容(ie不兼容)
• hgroup标题的一个分组
• mark定义高亮显示的文本(span)
• time时间
• dialog标记定义一个对话框(会话框)类似微信
• embed 标记定义外部的可交互的内容或插件 比如flash
音视频标签:
video: 视频标签
audio: 音频标签
属性:
src="文件地址"
controls="显示控件"
autoplay="自动播放" 谷歌屏蔽了
loop="循环播放"
muted="静音"
poster="图片地址" 显示为第一帧图片,直到用户点击播放按钮
source标签: 定义媒介资源 (备份文件)
type="文件类型"
文件类型:
视频:
video/ogg
video/webm
video/mp4
音频:
audio/ogg
audio/mpeg
audio/wav
主流的音频文件格式mp3 ogg wav
input 中新增加的type类型
type=“email” 请输入邮箱地址
type=“url” 请输入网址
type=“range” 滑块
type=“number” 请输入数字
type=“search” 搜索表单
type=“color” 生成颜色表单
作为了解
type=“time” 限制用户必须输入时间类型
type=“month” 限制用户必须输入月类型
type=“week” 限制用户必须输入周类型
type=“datetime-local” 选取本地时间
type=”date” 年月日
新增加的表单属性:
required 检测是否为空(必填字段)
step 步长,确定一个值-4 0 4 8
min 限定最小值
max 限定最大值
autoplete="是否自动关联提示信息"
on 默认值 关联
off 不关联
placeholder="文本框的提示信息"
autofocus 自动聚焦,光标的初始位置,一个页面只有一个
pattern="正则表达式" 可以自己指定合法的格式
//手机号正则表达式: ^1[3|5|8]\d{9}$
novalidate="取消验证"
multiple 多选
list 结合 datalist标签的id属性才有效
新增加的标签:
<input type="text" list="aa" />
<datalist id="aa">
<option value="http://www.baidu.com"></option>
<option value="http://www.vip.com"></option>
<option value="http://www.mao.com"></option>
<option value="http://www.taobao.com"></option>
</datalist>
output 输出标签,用于计算结果的输出或者是脚本的输出