Html5学习第一天

一依不舍
212 阅读4分钟

这是我参与8月更文挑战的第13天，活动详情查看：更文挑战

html5概述

概述

HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念：

① 它是一个新的 HTML 语言版本包含了新的元素，属性和行为

② 同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术 

html5的改变：

● 语义：能够让你更恰当地描述你的内容是什么。

● 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。

● 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。

● 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。

● 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。

● 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。

● 设备访问 Device Access：能够处理各种输入和输出设备。

● 样式设计: 让作者们来创作更加复杂的主题吧！

HTML5的改变，涵盖了CSS3和JS的一些新特性，这些东西统称HTML5技术。

我们之前学习的是HTML4.01（XHTML1.0）。2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。

兼容性

我的浏览器支持情况:

图片1.png

桌面浏览器支持情况：

图片2.png

pc使用html5新的属性需要稍微注意，但是移动端使用内核（webkit）支持情况非常，移动端可以大胆使用各种html5.

官方HTML5浏览器性能评分网址详情查看

html5新的骨架和语义化标签

html5骨架

DTD：书写骨架第一步就是书写ＤＴＤ

<!DOCTYPE html>

这种DTD书写不要加5，因为表示书写网页对于不支持html5新特性的浏览器采用标准模式解析。就是对于不认识的属性或者标签，直接静默处理不报错，对于支持的html5新特性直接显示。

还需要设置字符集

<meta charset=”UTF-8”>

新的特性

  • 自封闭标签（单标签）不写关闭符号也是合法的。（可以使用） <img src="images/0.jpg" alt="">

  • 属性值不写双引号也是合法的。（别使用） <img src=images/12.jpg alt=图片加载失败>

  • 标签大小写都合法。（别使用）

<div class="box">文字</div>
<!-- 标签可以书写大写字母，不建议使用 -->
<Div>文字</Div>
<DIV>文字</DIV>
  • 所有的type属性不写也是合法的。（可以使用）
<style></style>
<link href=””>
<script></script>

新的语义化标签

HTML就是负责页面语义的，HTML4.01中，div负责的任务太多，具体的语义没有拆分。

HTML5中，就是把div拆分为了更多的标签：

<section>, <article>, <nav>, <header>, <footer>, <aside>

这些标签都和div一样，是容器级标签，可以互相嵌套，放什么都行，放自己也行。都是block-level，标准流中是块级元素。

其他的语义化标签：

一组：figure和figcaption。

<!-- 图片解释说明 -->
<figure>
<!-- 标题figcaption -->
<figcaption>图片标题</figcaption>
<img src="images/0.jpg" alt="" width="200">
</figure>

time标签，时间语义化标签。是行内元素。

<p>现在是<time>9点</time></p>

mark，有强调的语义。

<p>学习<mark>练习</mark></p>

一组：details和summary。有总结含义的标签。

<details>
<summary>学习</summary>
<p>html基础</p>
</details>

html5表单

form标签

form标签是功能性标签用于表单提交，将所有的 表单元素书写在form标签内部。

通过form标签id属性和其他表单元素form属性产生绑定用于提交。

html5表单元素可以不书写在form标签内部，使用属性产生绑定

<form action="" id="biaodan"></form>
<input type="text" value="请输入用户名" form="biaodan">

label标签

label标签可以直接将要控制的表单书写在label标签内部，省略不写for属性

<label>
  <input type="radio" name="sex">男
</label>

placeholder属性

占位符：

用户名：<input type="text" placeholder="请输入用户名">

autofocus属性

focus焦点

自动获取焦点（提高用户体验）

<input type="text" placeholder="请输入用户名" autofocus>

required属性

昵称：<input type="text" required>

自动感应

datalist自动感应的标签

通过其他表单元素list属性和datalist标签id属性产生绑定

<input type="text" list="ganying">
<datalist id="ganying">
  <option value="html">网页制作</option>
</datalist>

新的输入表单元素

搜索框： search

<p>
  搜索框：<input type="search" placeholder="占位符">
</p>

插入视频

传统方法插入视频

通过将视频先上传到视频网站通过分享将视频引入网页中

缺点：

必须本地计算机具有flash插件才可以播放

优点：不占用本地服务器资源。

<embed src="http://player.video.iqiyi.com/dcfe2560305b62cf0bd202da7db584b7/0/0/v_19rqznigdc.swf-albumId=1286930700-tvId=1286930700-isPurchase=0-cnId=7" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

html5插入视频

html5有插入视频标签

video：标签

src: 视频路径

controls: 控制条

loop：循环播放

autoplay: 自动播放

优点：不需要借助flash，不会有广告

缺点：占用服务器资源

<video src="video/1.mp4" controls autoplay loop></video>

source标签可以引入视频路径

<video controls>
   <source src="video/2.mp4">
</video>

插入音频

audio:插入音频

src:路径

controls: 控制条

autoplay:自动播放

Loop:循环播放

avatar
文章
阅读
粉丝