HTML5

大大大石头
259 阅读6分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

版本进行

1993（v1.0）- 1999（v4.0.1）- 2008（html5）

简介

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

H5新变化

XHTML

可扩展文本标记语言，是一种增强了的HTML，他的可扩展性和灵活性将适应未来网络应用的更多需求

HTML5

设计目的

为了在移动设备上支持多媒体

新特性
  • 语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性、三维、图形及特效特性、性能与集成特性、CSS3特性
  • 废弃了一些元素和属性，比如font、center等等
优势
  • 提高了可用行，改进了用户体验
  • 提供语义化标签
  • 给沾点带来更多元素（音视频）
  • 可很好替代FLASH和Silverlight
  • 涉及到网站的抓取和索引的时候，对于SEO很友好
  • 被大量应用于移动应用和游戏
  • 可移植性好（多端）
劣势
  • 标准没有很好地被pc端浏览器支持
  • IE9以下浏览器或者老版本浏览器兼容性不好
  • HTML6前景趋势
  • 移动开发优先
  • 游戏开发

广义的HTML5

  • 狭义的HTML5就是指HTML5语言的第五个版本
  • 广义上HTML5指的是HTML5+CSS3+JS技术的综合

HTML5语义化标签

以前制作网页布局，基本使用div标签搭建，div对搜索引擎没有语义，不利于SEO

新增语义化标签

<header>：头部标签，包裹头部内容
<nav>：导航标签，可以用来包裹导航栏
<main>：主体标签，可以包裹主体内容
<article>：独立的内容标签，可用来包裹内容
<section>：区段标签，类似于div
<aside>：侧边栏标签，包裹侧边栏
<footer>：尾部标签，包裹底部

注意事项：

  • 语义化标准针对于搜索引擎，如果需要搜索引擎优化可以使用
  • 可以在页面中使用多次
  • IE9中，需要把这些元素转成块级元素才能加载
  • 移动端更喜欢使用这些标签
  • HTML5还有其他的语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position:absolute</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }
        header {
            height: 100px;
            width: 800px;
            background: #cccccc;
            margin: 0 auto;
        }
        nav {
            height: 50px;
            width: 800px;
            background: #cccccc;
            margin: 10px auto 0;
        }
        main {
            height: 500px;
            width: 800px;
            background: #cccccc;
            margin: 10px auto 0;
        }
        main aside {
            float: left;
            width: 100px;
            height: 300px;
            margin-right: 20px;
            background-color: aliceblue;
        }
        main article {
            float: right;
            width: 680px;
            height: 480px;
            background-color: aliceblue;
        }
        main article section {
            height: 100px;
            margin-bottom: 10px;
            background:  skyblue;
        }
        footer {
            height: 100px;
            width: 800px;
            background: #cccccc;
            margin: 10px auto 0;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <nav>导航栏</nav>
    <main>主体内容
        <aside>侧边栏</aside>
        <article>内容区域
            <section>区段</section>
            <section>区段</section>
            <section>区段</section>
        </article>
    </main>
    <footer>底部</footer>
</body>
</html>

HTML5新增多媒体标签

音频audio和视频video标签，使用他们可以方便的在页面中嵌入音频和视频文件，不再需要使用落后的flash和其他插件

音频标签audio

在不使用插件的情况下可是使用原生的支持音频格式文件的播放，但是支持格式是有限的（不同流览器支持的格式不同）

书写方法：

<!-- 在HTML5中如果属性名和属性值相同的话，可以不写属性值 -->
<audio src="./snow.mp3" controls autoplay loop preload ></audio>
属性值描述
autoplayautoplay音频就绪后立即自动播放（谷歌浏览器禁止自动播放，其他浏览器可用）
controlscontrols向用户显示控件，比如播放按钮
looploop循环重复播放
preloadpreload预加载，如果使用了sutoplay则可以忽略这条属性
srcurl（）音频的路径

兼容写法：audio内部添加资源标签，在资源标签内部添加src属性，后面添加type属性

<!-- 
兼容写法 
浏览器读取数据的时候回从前往后读取，先读取mp3，如果没有再读取ogg，如果都没有则会显示提示信息
-->
<audio controls>
  <source src="./snow.mp3" type="audio/mpeg" >
  <source src="./snow.ogg" type="audio/ogg" >
  您的浏览器版本过低，不支持音频播放
</audio>

视频标签video

和音频一样，可以添加浏览器默认支持的视频标签用来播放视频文件，当然还是有一些兼容性问题的

书写方法：

<!-- video写法 -->
<video src="./video.mp4" controls autoplay loop width="200px" height="200px" poster="" muted></video>
属性值描述
autoplayautoplay视频就绪后立即自动播放（谷歌浏览器需要添加muted解决不能自动播放的问题）
controlscontrols向用户显示控件，比如播放按钮
looploop循环重复播放
preloadauto（预加载）/none（不预加载）是否预加载，如果使用了autoplay则可以忽略这条属性
srcurl（）视频的路径
widthpx值宽度
heightpx值高度
posterimg-url加载期间等待的画面图片
mutedmuted静音播放

兼容写法：

<!-- 兼容写法，和音频类似-->
  <video controls width="200px">
  <source src="./video.mp4" type="video/mp4">
  <source src="./video.ogg" type="video/ogg">
  您的浏览器版本过低，不支持视频播放
</video>

音视频总结

  • 音视频标签书写使用方法基本相同
  • 浏览器支持情况不同，所以一般情况下应该写一些兼容写法
  • 视频标签可以设置静音播放解决谷歌浏览器问题，音频不可以
  • 视频标签是重点，我们经常设置自动播放，循环和大小，一般情况下，我们很少使用controls控件，因为在不同浏览器中效果可能不同

HTML5新增input表单类型

属性值描述
type="email"限制用户输入必须为Email类型
type="url"限制用户输入必须为URL类型
type="date"限制用户输入必须为日期类型
type="time"限制用户输入必须为时间类型
type="month"限制用户输入必须为月类型
type="week"限制用户输入必须为周类型
type="number"限制用户输入必须为数字类型
type="range"滑动条
type="tel"手机号码
type="color"生成一个颜色选择表单
type="search"搜索框
<form action="">
  只能输入电子邮箱地址
  <input type="email"><br>
  只能输入url链接
  <input type="url"><br>
  只能输入日期
  <input type="date"><br>
  只能输入时间
  <input type="time"><br>
  只能输入年和月
  <input type="month"><br>
  只能输入年和周
  <input type="week"><br>
  只能输入数字，max和min代表最大最小值，step代表每次点击步进，value是默认值
  <input type="number" max="100" min="0" step="1" value="0"><br>
  滑块，，max和min代表最大最小值，step代表每次点击步进，value是默认值
  <input type="range" max="100" min="0" step="1" value="0"><br>
  只能输入手机号码
  <input type="tel"><br>
  颜色选择器
  <input type="color"><br>
  搜索框
  <input type="search"><br>
  <input type="submit">
</form>

HTML5新增表单datalist

  • 规定了input标签可能的选项列表，当用户输入触发了定义选项后，会展示出来，用户可点击选择
  • datalist包含了一组potion标签，定义预定可选值，在input标签输入过程中能够自动响应option的值
  • 绑定input和datalist需要给input添加一个list属性，属性值为datalist标签的id值
<form action="">
  <!-- 使用list属性和datalist标签id值绑定 -->
  <input type="text" list="list1">
  <!-- 新建datalist标签 -->
  <datalist id="list1">
    <!-- 内部包含预定值 -->
    <option value="上海">sh</option>
    <option value="北京">bj</option>
    <option value="乌鲁木齐">wlmq</option>
    <!-- 单标签也可以 -->
    <option value="深圳">
  </datalist>
</form>

HTML5新增表单属性

属性值描述
requiredrequired设置必填，表示其内容不能为空，否则无法提交
placeholder提示文本表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单,一般页面中放1个
autocompleteoff/on提供用户曾经输入并成功提交过过的内容，默认值为on, 需要放在表单内同时加上name属性（属性值无所谓）
multiplemultiple可以多选文件提交
<form action="">
  <!-- 设置必填required，如果是空无法提交，关联历史记录，自动提示功能 -->
  <input type="text" required placeholder="我是提示文本，当用户输入内容后会自动消失" name="wusuowei">
  <!-- 自动聚焦到我身上 -->
  <input type="search" autofocus>
  <!-- 多选文件 -->
  <input type="file" multiple>
  <input type="submit">
</form>
avatar
文章
阅读
粉丝