整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
调查了身边五六年经验以上的几个前端同学和同事，尽然发现绝大部分人都不知道，当然，在看到这个文章之前，我也不知道这个，平时虽然都一直在做web前端开发，但真没涉及到这块，或者说涉及到了，也解决了，但是还真没探究过这个问题，你是否躺枪了呢？
这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
下面是一个实例演示代码，你可以调整容器的宽度，但你会发现，黄块块的padding-bottom的距离也会随之宽度而变大或变小。
HTML代码
<div class="wrapper" id="w">
<div class="box" id="b"></div>
</div>
<input type="range" min="120" max="400" value="400" class="range" id="r">
<output>宽度是: <span id="op">400px</span></output>
<output>黄块块的Padding bottom是:<br><span id="op2">10%</span></output>
CSS代码
body {
font-family: Arial, sans-serif;
padding-top: 30px;
text-align: center;
}
.wrapper {
width: 400px;
margin: 0 auto;
border: solid 1px black;
}
.box {
width: 100px;
height: 100px;
background: gold;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
padding-bottom: 10%;
margin-bottom: 5%;
}
.range {
display: block;
margin: 20px auto;
}
output {
text-align: center;
display: block;
font-weight: bold;
padding-bottom: 20px;
}
output span {
font-weight: normal;
}
上面的代码中，我们对内部子元素声明了3个竖向的距离，都是百分比形式。当移动滑块时，我们的js代码只需修改了容器的宽度。但是，这个这三个属性高度都跟随着变化，可以看出，它们的百分比计算是基于容器的宽度，而不是高度的。
切图网致力于web前端技术开发，关注用户体验，关注移动web前端，响应式，微场景等技术，如果你对此感兴趣请加公众微信账号：qietuwang
程序开发过程中，我们始终要谨记的一点就是：程序是写给人看的，不是写给机器看的。任何项目开发，都必须要考虑到人员迭代，我们不能让下一个接手你代码的人，在看到你写的代码时会说出这样的话，“这个代码是人写出来的吗？可读性太差了”。因此，我们必须遵循一定的规范，让代码的可读性更强。
今天，我们就一起来看下前端开发过程所能涉及到的跟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规范问题，相信大家也或多或少遇到过，希望这篇文章能加深大家的认识。
ideo元素与audio元素所具有的属性大致相同，
下面来看一下这两个元素都具有哪些属性。
src属性和autoplay属性
src属性用于指定媒体数据的URL地址。
autoplay属性用于指定媒体是否在页面加载后自动播放，使用方法如下。
<video src="sample.mov" autoplay="autoplay"></video>
在文件中创建多媒体元素<video>，并在元素的src属性中，
设置播放的视频文件的URL地址，并设置页面加载完成后自动播放这个文件。代码如下。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>使用多媒体元素播放文件</title>
</head>
<body>
<video id="vdoMain" src="../Video/2.ogv" autoplay="true">
你的浏览器不支持视频
</video>
</body>
</html>
perload属性
perload属性用于指定视频或音频数据是否预加载。如果使用预加载，
则浏览器会预先将视频或音频数据进行缓冲，这样可以加快播放速度，
因为播放时数据已经预先缓冲完毕。
该属性有3个可选值，分别是none、metadata和auto，其默认值为auto。
none值表示不进行预加载。
metadata表示只预加载媒体的元数据（媒体字节数、第一帧、播放列表、持续时间等）。
auto表示预加载全部视频或音频。
该属性的使用方法如下。
<video src="sample.mov" preload="auto"></video>
poster（video元素独有属性）和loop属性
当视频不可用时，可以使用该元素向用户展示一幅替代用的图片。当视频不可用时，
最好使用poster属性，以免展示视频的区域中出现一片空白。
该属性的使用方法如下。
<video src="sample.mov" psoter="cannotuse.jpg"></video>
在文件中创建一个video元素，为video元素设置poster属性，并选取一幅图片作为该属性的值。代码如下。
<html>
<head>
<meta charset="utf-8" />
<title>设置video 元素的poster 属性</title>
</head>
<body>
<video id="vdoMain" src="../Video/2.ogv" controls="true" poster="../Images/1.jpg">
你的浏览器不支持视频
</video>
</body>
</html>
运行实例，在播放视频文件之前，在视频播放区域中首先将显示poster属性指定的图片，
loop属性用于指定是否循环播放视频或音频，
其使用方法如下。
<video src="sample.mov" autoplay="autoplay" loop="loop"></video>
controls属性、width属性和height属性（后两个是video元素独有属性）
controls属性指定是否为视频或音频添加浏览器自带的播放用的控制条。
控制条中具有播放、暂停等按钮。其使用方法如下。
<video src="sample.mov" controls="controls"></video>
说明
开发者也可以在脚本中自定义控制条，而不使用浏览器默认的控制条。
width属性与height属性用于指定视频的宽度与高度（以像素为单位），
使用方法如下。
<video src="sample.mov" width="500" height="500"></video>
在文件中创建一个video元素，首先在元素的src属性中设置需要播放的视频文件，
然后分别设置video元素的宽度与高度。代码如下。
<html>
<head>
<meta charset="utf-8" />
<title>设置video 元素的大小</title>
</head>
<body>
<video id="vdoMain" src="../Video/2.ogv" autoplay="true" width="360" height="220">
你的浏览器不支持视频
</video>
</body>
</html>
error属性
在读取、使用媒体数据的过程中，正常情况下该属性为null，
但是任何时候只要出现错误，该属性将返回一个MediaError对象，
该对象的code属性返回对应的错误状态码，其可能的值如下。
MEDIA_ERR_ABORTED（数值1）：媒体数据的下载过程由于用户的操作而被终止。
MEDIA_ERR_NETWORK（数值2）：确认媒体资源可用，但是在下载时出现网络错误，媒体数据的下载过程被终止。
MEDIA_ERR_DECODE(数值3）：确认媒体资源可用，但是解码时发生错误。
MEDIA_ERR_SRC_NOT_SUPPORTED（数值4）：媒体资源不可用，媒体格式不被支持。
error属性为只读属性。
networkState属性
该属性在媒体数据加载过程中读取当前网络的状态，其值如下。
NETWORK_EMPTY（数值0）：元素处于初始状态。
NETWORK_IDLE（数值1）：浏览器已选择好用什么编码格式来播放媒体，但尚未建立网络连接。
NETWORK_LOADING（数值2）：媒体数据加载中。
NETWORK_NO_SOURCE（数值3）：没有支持的编码格式，不执行加载。
networkState属性为只读属性，读取网络状态的实例代码如下。
currentSrc属性、buffered属性
可以用currentSrc属性来读取播放中的媒体数据的URL地址，该属性为只读属性。
最靠谱的WEB前端教程——整整140集，全程干货无废话，学完变大佬！
*请认真填写需求信息，我们会在24小时内与您取得联系。
