HTML5

笔记来自拉勾教育大前端就业集训班

一、梦想是前进的动力--坚持的基础

• 在讲这个话题之前呢，给我的感觉就是不配，梦想应该是只有成功的人才有的，否则那只能叫白日梦。人生很短，及时行乐这句话可能是你放弃梦想最好的安慰方式，而坚持梦想，可能就是在黑夜的一刻，看到了光，在那一瞬间，让我看到了梦想的样子，并以此去追逐！

二、坚持就是胜利--高效的学习方式

• 梦想是一方面，但是学习又是一方面，难道考不上好大学的都是不学习的吗？高效的学习方式才是最重要的，记笔记就是其中一方面，我现在依稀记得初中读书好好记笔记，才考出了自己想不到的好成绩，高效的学习方法就更重要了，关于看视频学习，也就是自学，我一直都挺有经验的，跟着拉勾的老师边敲代码，边学习边记笔记，虽然时间上会很慢，但是满足感和知识掌握的那种奇妙感觉还是非常满足的

三、html5简介

• 它是万维网的核心语言、标准通用标记语言的下一个应用标记语言的第五次重大修改所以叫html5
• html5设计的目的为了在移动设备上支持多媒体

html5优势

• 提高可用性和改进用户的友好体验
• 更好的语义化标签
• 可以给站点带来更多的多媒体元素
• 可以很好的替代FLASH和silverlight
• 设计到网站抓取和索引时，对于seo很友好

广义的html5

• html5+css3+javascript技术的综合

语义化标签

1. <header>: 头部标签
2. <nav>：导航标签
3. <main>：主体标签
4. <article>：独立的内容标签
5. <section>：区段标签
6. <aside>：侧边栏标签
7. <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"   可以多选文件提交
  

下一篇文章：CSS核心样式https://www.jianshu.com/p/f0e23dbb4f6f