html前端基础知识（你应该要知道的）
html前端基础知识（你应该要知道的）我们所说的语义化指的是使用具有语义化的标签，在H5中添加了类似于header nav article section aside footer等标签，从单词的意思上我们也很容易看出标签的含义。stockChangeFilter首先是在文件的命名上，应当采用驼峰式命名，首字母小写，后面每个单词首字母大写，而且对于具体的文件应当具有语义化，能够给人一种直观的感受这个文件的作用是什么。现在前端开发开发过程中都讲求模块化开发，甚至是组件化开发，在文件命名时更应该以模块名或者组件名来命名。stockManageCtrlstockChangeService
前言程序开发过程中，我们始终要谨记的一点就是：程序是写给人看的，不是写给机器看的。任何项目开发，都必须要考虑到人员迭代，我们不能让下一个接手你代码的人，在看到你写的代码时会说出这样的话，“这个代码是人写出来的吗？可读性太差了”。因此，我们必须遵循一定的规范，让代码的可读性更强。
今天，我们就一起来看下前端开发过程所能涉及到的跟HTML有关的规范问题。
HTML5
文档类型在HTML文件中，推荐使用支持HTML5特性的文档声明，<!DOCTYPE html>。
命名规范首先是在文件的命名上，应当采用驼峰式命名，首字母小写，后面每个单词首字母大写，而且对于具体的文件应当具有语义化，能够给人一种直观的感受这个文件的作用是什么。现在前端开发开发过程中都讲求模块化开发，甚至是组件化开发，在文件命名时更应该以模块名或者组件名来命名。
stockManageCtrl
stockChangeService
stockChangeFilter
我们所说的语义化指的是使用具有语义化的标签，在H5中添加了类似于header nav article section aside footer等标签，从单词的意思上我们也很容易看出标签的含义。
我们不推荐使用只有div标签的页面，例如
不推荐使用
而是应该使用以下这种带有语义化的标签。
推荐使用
img标签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和锚点合理使用ID和锚点可以非常方便的实现当前页面间的跳转，现在越来越多的教程网页由于是单页面，经常会用到锚点跳转。
对锚点知识还不了解的，可以看看我写的这篇文章《神奇的html锚点，让你的网页在内部自由的跳转》。
总结今天这篇文章主要总结了前端开发过程中的HTML规范问题，相信大家也或多或少遇到过，希望这篇文章能加深大家的认识。
