WebStorm安装
- 略
基础标签
H系列标签(Header1~Header6)
-
作用:
- 用于给文本添加标题语义
-
格式:
<h1>XXXX</h1>
-
注意点:
- H标签是用来给文本添加语义的,不是用来修改文本样式的
- H标签一共有6个 独占一行
- 在企业开发中,一定要慎用H系列标签,特别是H1标签(和SEO有关).一个界面中只能用一个H1标签,用来标记非常非常重要的内容
- 用Alt键把光标同时定位到多行
- 居中 align属性(不推荐)
P标签
- 作用:
- 分段
- 格式:
<p>XXXXXXX</p>
- 注意点:
- 单独占一行
Hr标签(Horizontal Rule)
- 作用:
- 分割线
- 格式:
-
<hr/>单标签
-
- 注意点:
- 单独占一行
-
<hr />和<hr>都对
WebStrom快捷键
- Ctrl + D 快速复制光标行
- Ctrl + X 快速删除光标行
- Ctrl + Alt + Insert 快速创建文件
- 选中文本 ->Ctrl + Alt + T ->回车 ->输入新标签
注释
- 格式 ``````
- 快捷键 Ctrl + /
img标签
- 作用: 图片标签 img=image
- 格式:
<img src="">src=source - 注意点:
- 与/p标签不一样,不会独占一行
- 手动指定宽高有可能变形
- 仅打指定宽或仅指定高,系统会自动等比缩放
- 属性:
- width: 宽
- height: 高
- title: 鼠标悬停描述
- alt: alternate替换,当图片找不到时替换内容
br标签
- 作用: 换行
- 格式:
<br> - 注意点:
- br标签可以连续使用,多次换行
- br标签的主义是另起一行,而不是另起一段.在企业开发中一般换行即另起一段,所以很少用br标签而用p标签
路径问题
- src属性赋值有两种方式
- 相对路径: 从html文件所在位置开始查找
- 同级:
<img src="QRCode.jpg"> - 下级:
<img src="images/QRCode.jpg">- 上级:
<img src="../QRCode.jpg">../代表上级文件夹
- 上级:
- 同级:
- 绝对路径:从打指定盘符开始
- 格式:
<img src="c:\...\...\QRCode.jpg">
- 格式:
- 相对路径: 从html文件所在位置开始查找
- 注意:
- 路径中不要出现英文
- 相对路径不能跨盘符
- 路径统一用反斜杠/,方便部署其它服务器
- 开发中不会使用绝对路径,可移植性差
a标签
作用:页面间跳转
格式:
<a href="指定跳转的目标或页面">展现的文字或图片</a>-
注意点:
- a标签可作用于文字和图片
- 一个a标签必须有一个href属性
- 如果href属性为URL,必须加上http://
- href属性也可以是本地地址
-
a标签的其它属性
- target属性:如何跳转
- _seft 当前页面跳转
- _blank 新建页面跳转
- title属性: 鼠标悬停提示文本,跟img标签的title一样
- target属性:如何跳转
