整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、响应式设计
在HTML5真的要来改变移动开发平台之前，必须要迈出极为重要的一步，那就是“响应式设计”，也就是屏幕可以由相对应的内容而自动的去调整大小。然而响应式设计也是一件特别不容易去做到的事情，因为在当今的社会，各式各样设备的出现实在让诸多开发者眼花缭乱，手足无措。
如果你想要做好响应式的设计理念，那么就必须洞悉内容与屏幕之间的不同反馈关系，响应式设计是需要完全的离开“流”，这一过程还在不断的继续着，而HTML5技术会让它最终成为可能。
二、Canvas 标记
Canvas 标记很多年前就被当作一个新的 HTML 标记成员加入到了 HTML5 标准中。在此之前，人们要想实现动态的网页应用，只能借助于第三方的插件，比如 Flash 或 Java，而引入了 Canvas 标记后，人们直接打通了通往神奇的动态应用网页的大门。本教程内容只覆盖了一小部分、但却是非常重要的 canvas 标记的应用功能图像显示和处理。
图像来源
最常见的在 canvas 上画图的方法是使用 Javascript Image 对象。所支持的来源图片格式依赖于浏览器的支持，然而，一些典型的图片格式(png，jpg，gif 等)基本上都没有问题。
图片可以从 DOM 中已经加载的元素中抓取，也可以按需即时创建。
// 抓取页面上已有的图片。
myImage=new Image ();
myImage.src=‘image.png’;
大多数支持 canvas 标记的浏览器的当前版本中，当图片还没有加载完成时，如果你要去画它，结果是什么事情都不会发生。也就是说，如果你想画一个图片，你需要等它完全加载。你可以使用图片对象的 onload 函数来进行判断。
// Create an image.
myImage=new Image ();
myImage.onload=function () {
// Draw image.
myImage.src=‘image.png’;
HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准
它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。
HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签，但有一定含义，例如 <nav>（网站导航块）和 <footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如 <audio> 和 <video> 标记。
一些过时的 HTML 4 标记将取消，其中包括纯粹用作显示效果的标记，如 <font> 和 <center>，因为它们已经被 CSS 取代。还有一些透过 DOM 的网络行为（via）。
下面我们来看一下HTML 5提供的一些新的标签用法以及和HTML 4的区别。
<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article></article>
HTML4:<div></div>
<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>
<audio> 标签定义声音，比如音乐或其他音频流。
HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
程序开发过程中，我们始终要谨记的一点就是：程序是写给人看的，不是写给机器看的。任何项目开发，都必须要考虑到人员迭代，我们不能让下一个接手你代码的人，在看到你写的代码时会说出这样的话，“这个代码是人写出来的吗？可读性太差了”。因此，我们必须遵循一定的规范，让代码的可读性更强。
今天，我们就一起来看下前端开发过程所能涉及到的跟HTML有关的规范问题。
HTML5
在HTML文件中，推荐使用支持HTML5特性的文档声明，<!DOCTYPE html>。
首先是在文件的命名上，应当采用驼峰式命名，首字母小写，后面每个单词首字母大写，而且对于具体的文件应当具有语义化，能够给人一种直观的感受这个文件的作用是什么。现在前端开发开发过程中都讲求模块化开发，甚至是组件化开发，在文件命名时更应该以模块名或者组件名来命名。
例如在写一个AngularJS应用时，由于会涉及到Controller，Service，Filter等概念，我们会分别建立一个文件，假如这个模块的名字是库存管理stockManage，我们可以这样来命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我们所说的语义化指的是使用具有语义化的标签，在H5中添加了类似于header, nav, article, section, aside, footer等标签，从单词的意思上我们也很容易看出标签的含义。
我们不推荐使用只有div标签的页面，例如
不推荐使用
而是应该使用以下这种带有语义化的标签。
推荐使用
img标签是网页用来显示照片的标签，在页面所有标签中占据的比例非常之高，但是在使用img标签时也有下面需要注意的点。
给定width和height属性
因为浏览器在加载图片的过程中，需要先下载图片，然后再解析图片的高度和宽度，如果不给img元素设定高度和宽度，这样在图片加载过程中会不断的计算，重排页面的布局，在网络不好的时候就会经常出现元素出现不规律移动的情况。因此给img元素设定width和height属性是必要的。
alt属性
img标签的alt属性表示的是在图片无法显示时，使用文字来代替显示，它可以用在以下几个场景中：
网路延迟太大
src属性指定路径出错
浏览器禁用图像
由于其有良好的信息提示效果，并且有助于网页SEO效果，强烈建议在img标签中使用alt属性。
而且很重要的一点是img标签的引入是需要呈现出与页面相关的内容，其他情况应该使用CSS样式实现。例如我们不推荐下面这种情况。
不推荐
而推荐使用下面这种情况
推荐使用
前端文件主要包括HTML页面文件，CSS样式文件和Javascript脚本文件。我们应该让三者各司其职，在HTML中不应该出现CSS和JS表达式；在JS文件中，不应该出现大量的HTML和CSS代码。在HTML文档中应当尽量少的引入CSS和JS文件。为了保证文件的纯净，我们应当遵循下面的原则。
一个HTML文件应该只引入一个CSS文件
合理运用JS合并技术（Gulp, Webpack插件），保证引入JS文件不多于两个
不使用行内脚本元素（<script>alert('Hello World')</script>）
不在标签上使用style内联样式
不要使用style属性
脚本加载在网页加载过程中是一个很耗性能的过程，如果把JS文件放在head标签里，它的加载会一直阻塞DOM的解析，造成页面延迟。
因此现在讲求的是脚本的异步加载过程，我们会使用到async关键字，考虑到浏览器的兼容性，我们推荐使用下面的方式加载脚本。
推荐方式
合理使用ID和锚点可以非常方便的实现当前页面间的跳转，现在越来越多的教程网页由于是单页面，经常会用到锚点跳转。
对锚点知识还不了解的，可以看看我写的这篇文章《神奇的html锚点，让你的网页在内部自由的跳转》。
今天这篇文章主要总结了前端开发过程中的HTML规范问题，相信大家也或多或少遇到过，希望这篇文章能加深大家的认识。
天，小编带大家学习了一些基本的标签和文件路径，今天继续给大家分享一些标签，是每个网页必备的的标签，要认真看哦!
一个完整的网页就想一本书，有头部，中间内容部分，最后的脚本；在HTML中，有这么一些结构化标签，它来区分各个部分是什么的，使得开发人员一眼看过去就知道文档的结构是怎么怎么样的，同时要想改一些代码，结构化标签能更快速的找到要修改的位置，这就是“语义化”；话不多说，我们先来了解下结构化标签；<header><nav><section><article><footer><aside>以下是详解这些标签：
1.<header>：就是用作于网页的头部，可能包含的内容比如网页标题、导航信息之类，<header>可以出现多次；语法规范：<header>这部分内容</header>，实际上<header></header>等价于<div id="header"></div>
2.<nav>：就是用作于导航，语法规范：<nav></nav>，实际上<nav></nav>等价于<div id="nav"></div>
3.<section>：就是用于标识网页某一具体部分，举个栗子购物网站分为母婴类、零食类、水果类等等其他分类，那么就可以用<section>这个标签要划分各个区域；
4.<article>：就是一些文章，评论类；语法规范：<article>这部分内容</article>
5.<footer>：就是网页最底端的脚部，一般用于定义一些联系方式、合作伙伴、版权之类的；语法规范：<footer>这部分内容</footer>同理，等价于<div id="footer"></div>
6.<aside>：就是侧边栏，用于定义一些内容以外的部分
运用这些结构化标签是不是很直观的看出这个网页的结构呢，小编建议在网页中尽量运用这些结构化标签，不仅仅自己能明白，后期维护小伙伴也能明白；
分享一些其他标签：
1.浮动标签<iframe>，这个标签可以让你的页面里插入不同的多页页面，规范语法：<iframe src="网页路径" width="" height="" frameborder=""></iframe>，他需要一些属性来实现，src属性、width属性、height属性、frameborder属性，其中src属性就是你网页的路径（路径在上一篇文章中有分享，不清楚的可以去看看哦）；width属性就是宽度，height属性就是高度，frameborder属性就是边框；
！！！注意：在实际开发中尽量不要使用这个标签，不利于SEO，搜索引擎；破不得那还得使用。
2.摘要与细节标签<details><summary>，这2个标签需要一起使用，就是一部分的内容进行缩进或者展开；规范语法：<details>
<summary>
标题
</summary>
<details>
3.度量元素标签<meter>；它需要一些属性来实现效果；min属性、max属性、value属性，其中min属性表示进度条最小值，max属性表示进度条最大值，value属性表示当前的进度的值，语法规范：<meter min="" max="" value=""></meter>
4.时间元素标签<time>：表示具体的时间，语法规范：<time datetime="具体时间值"></time>
5.分组标签<fieldset><legend>：这2个标签需要一起使用；语法规范：<fieldset><legend>分组标题</legend>内容</fieldset>
6.文本高亮标签<mark></mark>：就是特别突出一些文本，效果就是背景是黄色的文字
以上是一些网页中使用的标签，小编建议多多打代码，不会的就是模仿的写；有不懂的可以私信小编，小编乐意解答！
预告：下一篇 带你玩转前端之HTML(四) 主要内容为：form表单的分享
*请认真填写需求信息，我们会在24小时内与您取得联系。
