HTML5
笔记来自拉勾教育大前端就业集训班
一、梦想是前进的动力--坚持的基础
- 在讲这个话题之前呢，给我的感觉就是不配，梦想应该是只有成功的人才有的，否则那只能叫白日梦。人生很短，及时行乐这句话可能是你放弃梦想最好的安慰方式，而坚持梦想，可能就是在黑夜的一刻，看到了光，在那一瞬间，让我看到了梦想的样子，并以此去追逐！
二、坚持就是胜利--高效的学习方式
- 梦想是一方面，但是学习又是一方面，难道考不上好大学的都是不学习的吗？高效的学习方式才是最重要的，记笔记就是其中一方面，我现在依稀记得初中读书好好记笔记，才考出了自己想不到的好成绩，高效的学习方法就更重要了，关于看视频学习，也就是自学，我一直都挺有经验的，跟着拉勾的老师边敲代码，边学习边记笔记，虽然时间上会很慢，但是满足感和知识掌握的那种奇妙感觉还是非常满足的
三、html5简介
- 它是万维网的核心语言、标准通用标记语言的下一个应用标记语言的第五次重大修改所以叫html5
- html5设计的目的为了在移动设备上支持多媒体
html5优势
- 提高可用性和改进用户的友好体验
- 更好的语义化标签
- 可以给站点带来更多的多媒体元素
- 可以很好的替代FLASH和silverlight
- 设计到网站抓取和索引时，对于seo很友好
广义的html5
- html5+css3+javascript技术的综合
语义化标签
- <header>: 头部标签
- <nav>：导航标签
- <main>：主体标签
- <article>：独立的内容标签
- <section>：区段标签
- <aside>：侧边栏标签
- <footer>: 尾部标签
新增多媒体标签
- 使用他们可以很方便在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件
<audio>音频
- HTML5在不使用插件的情况下也可以原生支持音频文件
- 常见的音频格式：ogg、mp3、wav
<audio src="文件地址" controls="controlss"></audio> autoplay="autoplay" 音频在就绪后马上播放 controls="controls" 用户显示控件，根据控件播放 loop="loop" 音频结束时，重新开始播放 preload="preload" 页面加载时预备播放，如果使用autoplay，则忽略该属性 src="url" 要播放音频的URL - 多种音频兼容写法
<audio controls="controls"> <source src="media.show.mp3" type="audio.mpeg"> <source src="media.show.ogg" type="audio.ogg"> 您的浏览器版本过低，不支持音频播放 </audio>
<video>视频
- 常见的视频格式：ogg、MP4、webm
autoplay="autoplay" 视频就绪自动播放 controls="controls" 向用户显示播放控件 loop="loop" 循环播放 preload="auto/none" 是否预加载 src="url" 视频地址 width="pixels" 设置播放器的宽度 height="pixels" 设置播放器的高度 poster="imgurl" 加载等待的画面图片 muted="muted" 静音播放 -
<video controls="controls" width="300"> <source src="move.ogg" type="video/ogg"> <source src="move.mp4" type="video/mp4"> 您的浏览器暂不支持video视频 </video>
- 兼容写法
新增的表单标签
输入标签
- h5新增<input>表单类型
属性名 | 属性值 |
type="email" | 输入email类型 |
type="url" | 输入URL类型 |
type="date" | 输入日期类型 |
type="time" | 输入时间类型 |
type="month" | 输入月类型 |
type="week" | 输入周类型 |
type="number" | 输入数字类型 |
type="range" | 滑动条 |
type="tel" | 手机号码 |
type="search" | 搜索框 |
type="color" | 生成颜色选择表单 |
<datalist>标签
- <datalist>规定了<input元素可能的选项列表>
<input type="text" list="city-list"> <datalist id="city-list"> <option value=""广州>gz</option> <option value=""北京>bj</option> <option value=""上海>sh</option> </datalist>
表单属性
- 新增的表单属性
required="required" 表单内容不能为空 placeholder="提示文本" 表单的提示信息，存在默认值不显示 autofocus="autofocus" 自动聚焦属性 autocomplete="off/on" 当用户键入时，浏览器在之前键入过的值显示出现字段的选项，补全 multiple="multiple" 可以多选文件提交
