<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\"大众这种格式的文本我们称之为标签属性
插入的图片路径, 以便于浏览器到该路径下找到须要插入的图片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标签的属性
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>
假链接(实质是跳转到当前页面)
跳转到当前页面指定位置(锚点链接)
跳转到指定页面的指定位置
下载(极力不推举利用)
