目录
1.webstorm快捷键
2.HTML基本框架
3.H标签和P标签
4.HR标签
5.IMG标签
6.IMG图片路径问题
webstorm快捷键使用
- 同样适用于idea
1.新建html文件
ctrl+alt+insert
2.添加html标签（例如h1）
h1+tab
3.添加注释
ctrl+/
4.光标移动
-移动到行首：fn+home（←）
-移动到行尾：fn+end （→）
-移动到整个代码的最前：fn+pgup（↑）
-移动到整个代码的最后：fn+pgdn（↓）
5.给一段文字的前后加标签（例如<h1> </h1>）
鼠标选住需要加标签的段落之后ctrl+alt+t
6.使连续的一列空间输入的值相同：
alt按住之后鼠标纵向按住下滑直到不需要输入相同内容的位置
image.png
7.快速复制光标所在的一行
ctrl+D
8.快速删除光标所在的一行
ctrl+X
html基本框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=-8">
<title> </title>
</head>
<body>
</body>
</html>
H标签和P标签
1.H标签（h1~h6）
-作用
给文本添加标题语义而不是用来修改文本样式的
-独占一行
-超过6个h标签则无效变为普通文本
-H1最大H6最小
-企业开发中慎用h标签，一般一个网页只能存在一个h1标签
2.P标签
-作用
高速浏览器那些文字为一个段落
-独占一行
3.HR标签
-作用
在浏览器中显示一条分割线
分割线.png
-格式
或<hr />具体根据编译器tab键自动生成来定
IMG标签
1.格式
<img src="图片名" （height= width= title= alt= ）>
-height width
1.控制图片的长宽 可全写也可不写
2.不写按照图片默认的高度和宽幅
3.如果想要按照比例缩放或者扩大则可以只写其中一个
-title
当鼠标悬停在图片上时显示的文字
-alt
当图片找不到时需要显示的内容
alt.png
2.性质
不会独占一行
BR标签
1.作用
换行
2.格式
br.png
3.注意点
企业开发中很少使用
经常使用的是P标签
img图片路径问题
-注意：
写路径时要使用正斜杠/
1.相对路径赋值（常用）
-每次都会从.html所在的文件夹下开始查找
1.1同级
-图片和.html文件在一个文件夹中
-格式：
src="图片名.类型"
1.2下级（使用频率最高）
-存储图片的文件夹和.html文件在同一文件夹中
-格式：
src="图片所在的文件夹名称/图片名称.类型"
1.3上级
-图片和存储.html的文件夹在同一个文件夹中
-格式：
src=".../图片名.类型"
-"../"含义
从当前文件夹找到上一级文件夹
（一个../找上一级两个../即"../../"找到上两级文件夹）
-注意
刷新不能显示图片，需要重新点开.html文件
2.绝对路径
每次从指定的盘符开始查找
-格式
src="C:\Users\Administrator\Desktop\新建文件夹.idea\图片1.jpg"
-含义
在C盘中找到users文件在中澳Administrator文件再找。。。最后找到图片1.jpg
-注意
不可跨盘符
路径中不要出现中文，否则会出现未知问题
网友评论