一·开发工具
介绍几款常用的开发工具
1.记事本
2.Dreamwaver：更偏向于设计
3.Sublime：轻量级，自带功能不太全，但是插件十分丰富。
4.Webstorm：重量级，自带功能全面。
Webstorm的安装和使用
调整界面颜色
调整字体
汉化包
…
二·基础标签的学习
1.H系列标签
作用：给文本条件标题语义
格式：<h1>xxxx</h1>
注意点：
1.H1-H6，只有六个，h1最大，h6最小
2.在企业开发中慎重H系列标签，特别是H1标签，在企业开发中一般情况下一个界面中只能出现一个H1标签（和SEO有关）
2.P标签
作用：
告诉浏览器哪些文字是一个段落
格式
<p>xxx</p>
注意点：
1.在浏览器中会单独占一行。
3.Hr标签
在浏览器上显示一条分割线
格式：
<hr>
注意点：
单独占据一行
如何在在Ws中利用快捷键创建一个新的.html文件？
同时按下键盘上的ctrl+Alt+Insert
三.标签综合练习（掌握）
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>self-introduction</title>
<H1>Self-introduction</H1>
<HR>
<P>Hello,everyone,very glad to be here .</P>
<P>My name is Amy ,and i am 27 years old.Now iam a programmer.</P>
<P>My favourite activity is photography,and i like sports very much . Photography brings lots of fun to my life ,and sports makes me happy.Ilike this sentence"nothing is impossible".</P>
</html>
注意点：<hr/>xhtml规范 <hr> html规范
以后开发按照高级开发工具自动生成为主。
注释（掌握）
作用：帮助理解代码内容。
格式<!- -xxx- ->
4.img标签（掌握）
作用：
告诉浏览器我们需要显示一张图片
格式：
<img src = “”>
src是source的缩写
所以img标签中的src就是用来告诉img标签中需要显示的图片名称。
img标签的属性
width属性
用于告诉浏览器显示图片的宽度。
height属性
用于告诉浏览器，显示图片的高度。
title属性
用于告诉浏览器，当鼠标悬停时，需要弹出的描述框中显示的内容。
alt属性
当图片不存在时，用于显示图片找不到的内容。
注意点：
1.img标签和h标签不一样,img标签不会独占一行。
2.在img标签中，width/height属性要来显示图片的宽高，在img标签中如果没有指定所需要的宽高，那么系统会按照图片默认的宽高来显示，如果img标签指定了宽高，那么系统会按照指定的宽高来显示。
3.如果我们手动指定了图片宽高，有可能导致图片变形，我们可以指定宽度和高度中的一个值，来保证图片等比变化，不变形。
路径问题（理解）
其实想给src属性赋值
1.相对路径赋值
每次都从.html文件所在的文件夹开始查找
1.1同级：图片和.html文件存储在同一个文件夹中。
格式：src=“Qrcode.jpg”
含义：在html文件所在的文件夹中查找名称叫做QRcode.jpg的图片。
1.2下级：存储图片的文件夹和.html文件在同一个文件夹中。
格式：src=“images/QRCode.jpg”
1.3上级:存储图片的位置和存储代码的文件在同一个文件夹中。
格式：src=“../QRCode.jpg”
含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹，然后再在上一级文件夹中找到名称叫做QRCode.jpg。
2.绝对路径赋值
每次都从指定的盘符开始找
格式：src=“c：\useers\...\...\”
注意：
1.路径中不要出现中文，否则可能出现未知问题。
2.如果通过相对路径来指定，那么.html文件和jpg文件存储不能跨盘符。（但是不垮盘符的.html文件和jpg文件，通过相对路径来指定的话，可移植性强。）
路径练习（理解）
注意点：
1.以后企业开发中如果需要编写路径，统一使用反斜杠/，不要使用正斜杠\，因为将来我们开发的程序，可能会部署到其他操作系统的服务器上，而其他操作系统中的路径都是反斜杠/，所以如果尼写的不是反斜杠/，可能会引发问题。
2.在企业开发中一般不会使用绝对路径，因为可移植性不好，也就是说将你写好的代码拷贝给别人，别人可能就不能运行了。
5.br标签
作用：
如何在html中换行
格式：
<br>
注意点：
1.多个br标签可以连续使用，使用了多少个br标签，就可以换多少行。
2.由于html的作用就是给我们的文本添加语义，而br标签的语义是不另起一个段落换行，而在企业开发中一般情况下，需要换行都是因为需要另起一个段落，所以在企业开发中很少使用br标签。（p标签也能换行，p标签是指另起一个段落要换行）
6.a标签的基本使用（掌握）
作用：a标签的作用是用于页面和页面之间的跳转。
格式：<a href=“指定需要跳转的目标界面地址”>需要展示给用户查看的内容</a>
注意点：
1.不仅可以让文字可点击，还可以让图片可点击。
2.一个a标签必须有一个herf属性，否则a标签不知道要跳转到什么地方。
3.如果通过a标签的herf属性指定一个URL地址，那么必须在地址前面加上http://或https://
4.a标签的herf除了可以指定一个网络地址以外，还可以指定一个本地地址。
5.利用a标签来跳转有两种形式：
target属性：
专门用于控制如何跳转
_self 用于在当前选显卡跳转
_blank 用于在新的选项卡中跳转
a标签中的title属性
和img标签中的title属性一样，都是用来控制鼠标悬浮时显示的提示文本的。
7.base标签
作用：就是用来统一的指定所有的超链接（a标签）需要如何打开
注意点：
1.必须写在head的开始标签和结束标签之间。
2.如果既在base标签中指定了target，又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行。
8.假链接（掌握）
作用：就是点击之后不会跳转的链接
存在意义：在企业开发的前期，其他界面都没有写出来，那么我们不知道应该跳转到什么地方，所以就只能使用假链接来代替，当项目后期其他界面都已经完成时，再将假链接替换成真链接
格式：
1.# 会自动回到网页顶部。
2.javascript: 不会自动回到网页顶部。
9.锚点（掌握）
要想通过a标签跳转到指定位置，必须告诉a标签一个独一无二的身份证号码，这样a标签才能在当前界面中找到需要跳转到目标位置。
1.给目标位置标签，添加一个id属性，然后指定一个独一无二的值。
2.告诉a标签，你需要跳转到目标标签对应的独一无二的值是多少。
格式：
<a href=“#center”>跳转到中部<a>
<h2 id=“center”>我是中部<h2>
注意点：
1.通过a标签跳转到指定位置，是没有过度动画的，是直接一下子跳转到指定位置。
2.a标签也能直接跳转到其他界面的指定位置的。
<a href=“新界面地址#center”>跳转到中部<a>
<h2 id=“center”>我是中部<h2>
快捷键：
复制光标所在行ctrl+d
删除光标所在行ctrl+x
自动在一段内容前后加标签ctrl+alt+t
在ws中让光标移到到当前行的末尾 end
在ws中让光标移动到当前行的开头 home
在ws中让光标在多行中闪烁
按住Alt不放，然后按住鼠标的左键不放，然后拖动鼠标即可。
注释：ctrl+/
网友评论