整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
程序开发过程中，我们始终要谨记的一点就是：程序是写给人看的，不是写给机器看的。任何项目开发，都必须要考虑到人员迭代，我们不能让下一个接手你代码的人，在看到你写的代码时会说出这样的话，“这个代码是人写出来的吗？可读性太差了”。因此，我们必须遵循一定的规范，让代码的可读性更强。
今天，我们就一起来看下前端开发过程所能涉及到的跟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规范问题，相信大家也或多或少遇到过，希望这篇文章能加深大家的认识。
lt;h2 id="title1">开发工具(工欲善其事必先利其器)</h2>
为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用每天编写很多没有意义的重复代码, 提升大家的开发效率今后的课程中我们统一采用最高级高发工具来编写网页
<h3 id="title2">常见的前端开发工具</h3>
记事本: 提示功能较差
editplus/nodepad++: 提示功能较差
Dreamwaver: 更偏向设计
Sublime: 轻量级,自带功能不太全, 但是插件十分丰富
WebStorm: 重量级, 自带功能全面
其它ide(zend studio、netbean等)
为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 今后的课程中我们统一采用最牛逼最高级的高发工具WebStorm
<h3 id="title3">WebStorm安装和使用</h3>
安装软件
1.png
2.png
3.png
4.jpg
5.jpg
6.png
7.jpg
8.png
破解软件
9.png
10.png
11.jpg
12.jpg
13.png
14.png
汉化软件
15.png
16.jpg
设置模版
创建文件
17.png
18.jpg
关注微信订阅号：网页设计轻松学 有更多内容
19.png
WebStorm常见快捷键
如何在WebStorm中利用快捷键创建一个新的.html的文件
同时按下键盘上的Ctrl + Alt + Insert
如何在WebStorm中让光标移动到当前行的末尾
按下键盘上的End键即可
如何在WebStorm中让光标移动到当前行的最前面
按下键盘上的Home键即可
如何在WebStorm中让光标在多行中闪烁
按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可
如何在WebStorm中快速的复制光标所在的那一行
按下键盘上的Ctrl + D
如何在WebStorm中快速的删除光标所在的那一行
按下键盘上的Ctrl + X
如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签
按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可
<h2 id="title4">基础标签学习</h2>
<h3 id="title5">H系列标签(Header 1~Header 6)</h3>
作用:
用于给文本添加标题语义
格式:
<h1>xxxxxx</h1>
注意点:
H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
被H系列标签包裹的内容会独占一行
在H系列的标签中, H1最大, H6最小
在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)
<h3 id="title6">P标签(Paragraph)</h3>
作用:
告诉浏览器哪些文字是一个段落
格式:
<p>xxxxxxxx</p>
注意点:
在浏览器中会单独占一行
<h3 id="title7">Hr标签(Horizontal Rule)</h3>
作用:
在浏览器上显示一条分割线
格式:
<hr />
注意点:
在浏览器中会单独占一行
通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做
<h2 id="title8">HTML注释(Annotation)</h2>
什么是注释?
注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思
注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流
为什么要使用注释?
适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的
注释格式
<!--被注释的内容-->
注意点:
被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
注释不能嵌套使用
<!--<!--被注释的内容-->-->
快捷键: ctrl + /
<h3 id="title9">img标签(image)</h3>
作用: 在网页上插入一张图片
格式: 
标签的属性
写在标签中K="V"这种格式的文本我们称之为标签属性
| 属性名称 | 作用 |
|---|---|
| src(source) | 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片 |
| alt(alternate) | 规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本 |
| title | 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示) |
| height | 设置图片显示的高度 |
| width | 设置图片显示的宽度 |
注意点:
img标签添加的图片默认不是占一整行空间
如果想让图片等比拉伸, 只写高度或者宽度即可
关注微信订阅号：网页设计轻松学 有更多内容
<h3 id="title10">br标签(Break)</h3>
作用:
让内容换行
格式:
<br/>
注意点:
br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做
<h3 id="title11">相对路径和绝对路径</h3>
图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径
绝对路径
从电脑的具体盘符开始寻找我们需要的资源
以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片
相对路径
一个文件相对于另外一个文件的位置寻找我们需要的资源
假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片
为什么没人使用绝对路径?
可以移植性太差.
什么是可移植性?
可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行
为什么绝对路径可移植性差?
假如我编写的html文件放在我电脑的 F:/lnj 目录下, html文件中用到的图片放在F:/lnj/images目录下, 我给src指定的绝对路为F:/lnj/images/girl.png. 那么将来我将整个lnj文件夹拷贝给你, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片
例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png, 而src会去F盘找, 所以不会显示
你只有将lnj文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好
Q群；162542073
为什么相对路径可移植性好?
同上, 如果src指定的路径为images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示
相对路径几种查找方式
../代表访问上级目录
假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
直接编写, 例如abc/girl.png
加上./ 编写, 例如./abc/girl.png
相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
直接编写, 例如: girl.png
加上./ 编写, 例如./girl.png
./代表当前目录, ./girl.png代表在当前目录下查找
同级
下级
上级
注意事项:
相对路径不会出现这种格式aaa/../bbb/girl.png
虽然可以显示, 但是企业开发中千万不要这么写
<h3 id="title12">a标签(anchor)</h3>
格式: <a href="http://www.it666.com">江哥博客</a>
作用: 用于从一个页面链接到另一个页面
注意事项:
在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
a标签也叫做超级链接或超链接
a标签的属性
| 属性名称 | 作用 |
|---|---|
| href(hypertext reference) | 指定跳转的目标地址 |
| target | 告诉浏览器是否保留原始界面, _blank保留, _self不保留 |
| title | 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示) |
base标签和a标签结合使用
如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
格式: <base target="_blank" />
注意事项:
base必须嵌套在head标签里面
如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
a标签其它用法
例如<a href="girl.zip">下载福利资源<a/>
格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
只需要在01-锚点链接.html页面添加一个id位置即可
2.1.格式<a href="#location">跳转到指定位置</a>
2.2.在页面的指定位置给任意标签添加一个id属性
例如 <p id="location">这个是目标</p>
格式<a href="#">江哥博客</a>
格式<a href="javascript：">江哥博客</a>
假链接(本质是跳转到当前页面)
跳转到当前页面指定位置(锚点链接)
跳转到指定页面的指定位置
下载(极力不推荐使用)
章摘要：
锚点（anchor），超链接等内容是我们在建设网站时经常会遇到的，但是很多网页设计新手在看到这些内容时可能会迷茫，这其实是很正常的事情，毕竟大家都是从新手走过来的。那么今天这篇文章就会告诉你关于锚点和超链接的相关知识。
锚点，英文称作anchor，是制作网页时要用到的超链接中的一种，通俗的来讲，它就像网页中的定位器，帮助网页浏览者快速跳转至某个节点，也就是说我们在网站中设置锚点就可以让浏览者快速地跳转至另一个页面。既然说到了锚点是超链接的一种，那么再讲讲超链接的内容，以便于你更好地理解。
超链接（英语：Hyperlink）简单来讲，就是指按内容链接。具体是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
看完了上述介绍，相信你已经对于锚点和超链接有一定的了解了，那么接下来再为大家讲述锚点的具体应用。
在网页设计中，你需要重视SEO，也就是搜寻引擎优化。SEO是为了让我们的网站在搜寻引擎中获得更多的曝光率，这样就有利于我们的网站浏览量持续增长，获得更多客户。而让锚点文字显示在搜索的网页中，就有助于SEO优化。锚点文字一般情况下在网页上显示为蓝色字体，但是也可以通过HTML或CSS来更改链接的样式。在设置锚点文字时，应注意以下几点：
（1）避免重复
避免重复主要是指两种情况：一是避免同样的链接关键字过度使用，因为搜索引擎对于好的关键字认定是自然且合乎逻辑的，如果是重复过多，搜索引擎可能会认为网站是垃圾网站，或者认为你的网站是通过堆砌关键词来作弊的，结果就是网站排名可能反而不好。
（2）指向明确
因为搜寻引擎需要通过一个网站的资讯来源来为网站派送流量，而锚点文字是网站的重要内容，也是一种重要的资讯来源，所以锚点文字是影响网站排名的一种重要元素。在设置时，锚点文字需要指向明确，要与网站的内容有关，且相关度要高，比如说锚点文字是“自助建站”，然后链接到像是「上线了」这种自助建站平台，相关度就很高。
本展示页所提供的模板及元素仅供展示功能效果，未经授权不得应用于其他用途
（3）具有特色
当我们设置锚点文字时，一般可能会设置为“点击这里、跳转”等字眼跳转到网页链接，这样做虽然很方便，但是一来与内容的相关性不是很高，二来是没什么特色，可能会降低浏览者的点击欲望，也会使网站看起来缺乏个性。针对这种情况，我们可以让锚点文字更具特色，通过修改锚点文字的颜色、格式、字体等方式就可以使浏览者识别到这是一个超链接，这是一种较为简单的办法。
综上，你已经了解了锚点文字的相关知识了，那就可以自己动手设置一下。新手该如何操作嗯？你可以用「上线了」快速建立一个网站，在网页中添加超链接，不需要懂任何技术知识。接下来，就为大家简单地示范一下如何在网站中添加锚点。
首先，在「上线了」模板库中任意找一个模板，在后台编辑页面中，我们可以给任意一个文本或图片添加链接，可链接至其他网站、电子信箱、网页中的其他版块等，而且链接到的网站也可以勾选“在新标签页打开”，当然也可以取消勾选，非常方便。
你也可以添加自己需要的功能版块，包括标题、相册、商城、博客、自定义表单、产品展示、轮播图等等……版块可自由拖拽并修改，一个网页就是由不同的版块组成的。做好后点击左下角“上线”即可。通过这样的方式，小白也能很快搭建一个网站。
总之，不管是建站还是设置锚点，都非常简单，个人也能很快做好。
*请认真填写需求信息，我们会在24小时内与您取得联系。
