玩转HTML5+跨平台开发[2] HTML基础标签

常见的前端开发工具

• 记事本: 提示功能较差
• editplus/nodepad++: 提示功能较差
• Dreamwaver: 更偏向设计
• Sublime: 轻量级,自带功能不太全, 但是插件十分丰富
• WebStorm: 重量级, 自带功能全面 ★★★★
• 其它ide(zend studio、netbean等)

  WebStorm安装和使用

• 安装软件

  参考：WebStorm安装和使用 

• 设置模版

  在WebStorm菜单打开 [File]->[Setttings]，然后选择 [Editor]->[Colors&Fonts]，

  1）首先，在【Scheme】中选择一个主题，如Darcula，点击【Apply】应用。

  2）点击【Save As…】创建一个自定义模板，名称任意，之后在[Editor]->[Colors&Fonts]->[Font]中设置字体大小等。

  

   

• 设置WebStorm的默认编码

  在WebStorm菜单打开 [File]->[Setttings]，然后选择 [Editor]->[File Encodings]在其中配置IDE、Project、*.properties文件的编码。

  

   

• WebStorm常见快捷键

  1）Ctrl + Alt + Insert：创建一个新的.html的文件

  2）多行编辑：按住【Alt】键不放, 然后再按住鼠标的左键不放, 拖动鼠标，让光标在多行中闪烁，进行多行编辑

  3）Ctrl + D：复制光标所在的那一行

  4）Ctrl + X：删除光标所在的那一行

  5）Ctrl + Alt + T：选中某段内容，按Ctrl + Alt + T，然后按下回车，输入对应的标签，可以让标签包裹一段内容, 也就是自动在一段内容前后加上标签

  基础标签学习

  H系列标签(Header 1~Header 6)

• 作用: 用于给文本添加标题语义
• 格式:  <h1>xxxxxx</h1>
• 注意点:
  - H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
  - H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
  - 被H系列标签包裹的内容会独占一行
  - 在H系列的标签中, H1最大, H6最小
  - 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)

  P标签(Paragraph)

• 作用: 告诉浏览器哪些文字是一个段落
• 格式: <p>xxxxxxxx</p>
• 注意点: 在浏览器中会单独占一行 (通过浏览器开发者工具，在Elements中选中p标签包裹的内容时，在浏览器中会看到p标签中的内容被换色和蓝色包裹，占据一整行。黄色和蓝色内容CSS中介绍)

  Hr标签(Horizontal Rule)

• 作用: 在浏览器上显示一条分割线
• 格式: <hr />
• 注意点:
  - 在浏览器中会单独占一行
  - HR标签可以写/也可以不写/， 如果不写/那么就是按照HTML的规范来编写， 如果写上/那么就是按照XHTML的规范来编写。但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以。那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
  - 由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做

  HTML注释(Annotation)

• 注释格式： <!--被注释的内容—>
• 注意点:

      - 被注释的内容不会在浏览器中显示, 注释是写给我们自己看的

     - 注释不能嵌套使用

  <!--<!--被注释的内容-->—>

  • 快捷键: ctrl + /

  img标签(image)

  • 作用: 在网页上插入一张图片

  • 格式: <img src="图片路径" />

  • 标签的属性： 写在标签中K="V"这种格式的文本我们称之为标签属性

  属性名称	作用
  src(source)	告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
  alt(alternate)	规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本
  title	悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
  height	设置图片显示的高度
  width	设置图片显示的宽度

  • 注意点:

    • img标签添加的图片默认不是占一整行空间
    • 如果想让图片等比拉伸, 只写高度或者宽度即可

  br标签(Break)

  • 作用: 让内容换行

  • 格式: <br/>

  • 注意点: br的意思是不另起一个段落进行换行，而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p标签来做

  相对路径和绝对路径

  图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径。

  • 绝对路径

    • 从电脑的具体盘符开始寻找我们需要的资源
    • <img src="F:/lnj/girl.png" />
    • 以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片

     

  • 相对路径

    • 一个文件相对于另外一个文件的位置寻找我们需要的资源
    • <img src="girl.png" />
    • 假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片

     

  • 为什么没人使用绝对路径?

    • 可以移植性太差.

  • 相对路径几种查找方式

    • 同级
      • 直接编写, 例如: girl.png
      • 加上./ 编写, 例如./girl.png
      • ./代表当前目录, ./girl.png代表在当前目录下查找
    • 下级
      • 直接编写, 例如abc/girl.png
      • 加上./ 编写, 例如./abc/girl.png
      • 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
    • 上级
      • ../代表访问上级目录
      • 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
      • 因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
  • 注意事项:
    • 相对路径不会出现这种格式aaa/../bbb/girl.png
    • 虽然可以显示, 但是企业开发中千万不要这么写

  a标签(anchor)

  • 格式: <a href="http://www.it666.com">江哥博客</a>
  • 作用: 用于从一个页面链接到另一个页面

  • 注意事项:

    • 在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
    • a标签也叫做超级链接或超链接

     

  • a标签的属性

  属性名称	作用
  href(hypertext reference)	指定跳转的目标地址
  target	告诉浏览器是否保留原始界面, _blank保留, _self不保留
  title	悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

  base标签

• base标签和a标签结合使用

  • 如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
  • 格式: <base target="_blank" />
    • 注意事项:
    • base必须嵌套在head标签里面
    • 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行

  a标签其它用法

  • 假链接(本质是跳转到当前页面)
    • 格式<a href="#">江哥博客</a>
    • 格式<a href="javascript:">江哥博客</a>
      • 跳转到当前页面指定位置(锚点链接)
      • 2.1.格式<a href="#location">跳转到指定位置</a>
      • 2.2.在页面的指定位置给任意标签添加一个id属性
        • 例如 <p id="location">这个是目标</p>
  • 跳转到指定页面的指定位置
    • 格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
    • 只需要在01-锚点链接.html页面添加一个id位置即可
  • 下载(极力不推荐使用)
    • 例如<a href="girl.zip">下载福利资源<a/>