HTML5

HTML5 简介

它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。

H5 新变化

XHTML 可扩展超文本标记语言

  • XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。

HTML5

  • HTML5的设计目的是为了在移动设备上支持多媒体。
  • 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性， CSS3特性。
  • 废弃一些元素和属性比如 font 、 center 等..

HTML5优势、劣势

HTML5 优势

  • 提高可用性和改进用户的友好体验
  • 更好的语义化标签
  • 可以给站点带来更多的多媒体元素(视频和音频)
  • 可以很好的替代FLASH和Silverlight
  • 当涉及到网站的抓取和索引的时候，对于SEO很友好；
  • 将被大量应用于移动应用程序和游戏
  • 可移植性好

HTML5 劣势

  • 该标准并未能很好的被PC端浏览器所支持
  • IE9以下的浏览器几乎都不兼容

HTML5前景趋势

  • 移动开发
  • 游戏开发

广义的HTML5

  • 狭义：指 HTML 语言的第 5 个版本。
  • 广义： HTML5本身 + CSS3 + JavaScript 技术的综合

语义化标签

标签语义化

以前制作网页布局，我们基本用div 来做。 div就是一个普通的块级标签， 对于搜索引擎来说，是没有语义的。

标签 说明
<header> 头部标签
<nav> 导航标签
<main> 主体标签
<article> 独立的内容标签
<section> 区段标签
<aside> 侧边栏标签
<footer> 尾部标签

注意事项

  • 语义化标准主要针对搜索引擎的
  • 新标签页面可以使用多次
  • 在IE9中，需要把这些元素转换为块级元素
  • 更多在移动端使用

新增多媒体标签

多媒体标签

多媒体标签包含两个，具体如下：

  • 音频： <audio>
  • 视频： <video>

可以方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件。

<audio> 音频标签

HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，不过支持格式有限。

格式 MIME-type IE9 Firefox3.5 Opera10.5 Chrome3.0 Safari3.0
Ogg audio/ogg 支持 支持 支持
MP3 audio/mpeg 支持 支持 支持
Wav audio/wav 支持 支持 支持

<audio> 音频标签语法格式

<audio src="01.mp3" controls="controls"></audio>

兼容写法

<audio controls>
    <source src="01.mp3" type="audio/mpeg"> 
    <source src="01.ogg" type="audio/ogg"> 
    您的浏览器版本过低，不支持音频播放
  </audio>

<audio> 音频标签常见属性

属性 值 描述
autopla y autopla y 音频就绪后马上播放。
controls controls 向用户显示控件，比如播放按钮。
loop loop 当音频结束时重新开始播放。
preload preload 音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src url 音频的 URL。

<video> 视频标签

HTML5 在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是有限的。

格式 MIME-type IE Firefox Opera Chrome Safari
Ogg video/ogg × 3.5+ 10.5+ 5.0+ ×
MP4 video/mp4 9.0+ × × 5.0+ 3.0+
WebM video/webm × 4.0+ 10.6+ 6.0+ ×

<video> 视频标签语法格式

<video src="01.mp4" controls="controls"></video>

兼容写法

  <video controls>
    <source src="01.mp4" type="video/mp4">
    <source src="01.ogg" type="video/ogg">
    您的浏览器版本过低，不支持 video 视频标签
  </video>

<audio> 视频标签常见属性

属性 值 描述
autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls controls 向用户显示播放控件
loop loop 循环播放
preload auto（预先加载视频） none（不应加载视频） 规定是否预加载视频(如果有了autoplay 就忽略该属性）
src url 视频url地址
width pixels(像素) 设置播放器宽度
height pixels(像素) 设置播放器高度
poster Imgurl 加载等待的画面图片
muted muted 静音播放

总结

  • 音频标签和视频标签使用基本一致
  • 浏览器支持情况不同
  • 视频标签添加 muted 属性进行自动静音播放视频，音频不可以
  • 视频标签是重点，设置自动播放，循环和设置大小属性，不使用 controls 控件。

新增表单标签

新增<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> 元素可能的选项列表。
  • 在<datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值。
  • 绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值
<form action="">
    姓名： <input type="text"><br>
    邮箱: <input type="email"><br>
    个人网站：<input type="url"><br>
    生日：<input type="date"><br>
    时间：<input type="time"><br>
    月份：<input type="month"><br>
    周：<input type="week"><br>
    年龄：<input type="number" max="100" min="0" step="4" value="4"><br>
    年龄范围：<input type="range" max="100" min="0" step="4" value="4"><br>
    手机： <input type="tel"><br>
    搜索框： <input type="search"><br>
    颜色: <input type="color"><br>
    城市：<input type="text" list="list01">
    <!-- 预定义一些选项 -->
    <datalist id="list01">
      <option value="广州">gz</option>
      <option value="深圳">sz</option>
      <option value="北京">bj</option>
      <option value="上海">
    </datalist>
    <input type="submit" value="提交">
    
  </form>

新增表单属性

属性 值 描述
required required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本 表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页 面中放1个
autocomplet e off / on 当用户在字段开始键入时，浏览器基于之前键入过的值，应 该显示出在字段中填写的选项。 默认已经打开，如 autocomplete=” on “ 关闭 autocomplete =” off” -需要放在表单内同时加上name属性 -同时成功提交
multiple multiple 可以多选文件提交 
<form action="">
    姓名： <input type="text" required="required" placeholder="请填入用户名" value="比如：zhangsan"><br>    
    年龄：<input type="number" max="100" min="0" step="4" value="4"><br>
    搜索框： <input type="search" autofocus="autofocus" autocomplete="on" name="sousuo"><br>
    城市：<input type="text" list="list01">
    <!-- 预定义一些选项 -->
    <datalist id="list01">
      <option value="广州">gz</option>
      <option value="深圳">sz</option>
      <option value="北京">bj</option>
      <option value="上海">
    </datalist>
    文件： <input type="file" multiple="multiple">
    <input type="submit" value="提交">
    
  </form>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。