３－HTML的标签

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">
• 注意:
  • 路径中不要出现英文
  • 相对路径不能跨盘符
  • 路径统一用反斜杠/,方便部署其它服务器
  • 开发中不会使用绝对路径,可移植性差

a标签

• 作用:页面间跳转

• 格式: <a href="指定跳转的目标或页面">展现的文字或图片</a>

• 注意点:

  • a标签可作用于文字和图片
  • 一个a标签必须有一个href属性
  • 如果href属性为URL,必须加上http://
  • href属性也可以是本地地址

• a标签的其它属性

  • target属性:如何跳转
    • _seft 当前页面跳转
    • _blank 新建页面跳转
  • title属性: 鼠标悬停提示文本,跟img标签的title一样