本文摘要：
h2 id="title1"开发工具(工欲善其事必先利其器)/h2为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用天天编写许多没有意义的重复代码, 提升大家的开发效率以后的课程中我们统一接纳最高级高发工具来编写网页h3 id="title2"常见的前端开发工具/h3记事本: 提示功效较差editplus/nodepad++: 提示功效较差Dreamwaver: 更偏向设计Sublime: 轻量级,自带功效不太全, 可是插件十分富厚WebStorm: 重
<h2 id="title1">开发工具(工欲善其事必先利其器)</h2>为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用天天编写许多没有意义的重复代码, 提升大家的开发效率以后的课程中我们统一接纳最高级高发工具来编写网页<h3 id="title2">常见的前端开发工具</h3>记事本: 提示功效较差editplus/nodepad++: 提示功效较差Dreamwaver: 更偏向设计Sublime: 轻量级,自带功效不太全, 可是插件十分富厚WebStorm: 重量级, 自带功效全面其它ide(zend studio、netbean等)为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 以后的课程中我们统一接纳最牛逼最高级的高发工具WebStorm<h3 id="title3">WebStorm安装和使用</h3>安装软件1.png2.png3.png4.jpg5.jpg6.png7.jpg8.png破解软件9.png10.png11.jpg12.jpg13.png14.png汉化软件15.png16.jpg设置模版建立文件17.png18.jpg关注微信订阅号：网页设计轻松学 有更多内容19.pngWebStorm常见快捷键如何在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>假链接(本质是跳转到当前页面)跳转到当前页面指定位置(锚点链接)跳转到指定页面的指定位置下载(尽力不推荐使用)
本文关键词：HTML,基础,标签,title1,开发工具,工欲善其事,华体会官网
本文来源：华体会-www.cxtfjx.com
