初识H5（笔记二）

    前一篇文章 初识H5（笔记一） 中简单的总结了下  HTML 的作用、历史、基本架构规范、几个基本的标签、字符集和DTD文档声明；那么这篇文章继续研究探讨 HTML 的知识。在之前我们编写html文件都是使用文本编辑器，效率低不说还很不方便，那么在企业开发中，使用编写网页的工具主要有三种 : Dreamweaver（偏向于设计） / Sublime（轻量级、自带功能不足、但插件很强大） / WebStrom（重量级、功能强大、对JS支持很好）。一下我们主要使用 WebStrom 辅助学习网页开发。

    首先先来看看 H系列标签、p标签、Hr标签 :

        1. H系列标签分为6个 从H1~H6 ，最多到6，超过6则无效 如 : <h1>标题</h1>；

                  + 被H标签包裹的内容会独占一行

                  + 在H系列标签中H1最大，H6最小

                  + 在企业开发中要慎用H系列标签，特别是H1标签，一般情况下一个界面只能出现一个H1标签（跟SEO有关）

                  + H系列标签只是给文本添加语义，而没有修改文本的样式

         2. p标签，作用是告诉浏览器哪些文本是一个段落，段落标签；

                   +  段落标签包裹的内容独占一行

         3. Hr标签， 作用是在浏览器中添加一行分割线

                   + <hr /> 是单标签，而且独占一行

                   + <hr /> 和 <hr> 这两种写法在H5的版本规范中都可以，<hr />写法是在XHTML中的规范要求，必须闭合，但是H5得规范对HTML和XHTML的规范是向下兼容。

    在编写HTML时的注释格式

                                              <!--这里是注释的内容-->   快捷方式（Mac）command + /

     图片标签

                 图片标签的基本格式 :<img src="图片名" alt="替代图片的文本" width=“图片的宽” height="图片的高" title="当鼠标悬停在这个图片上时，显示这段文字">

                          注意 : 01.同时设置图片的宽高时可能图片会被拉伸，也可以单独只设置宽或高，那么图片的高或宽会按照图片原本款高比推算出来

                                    02.img标签不会独占一行

     <br>标签 : 同一语义段落换行使用（企业开发用到的地方较少，一般换行时，说明不是一段语义时才换行。注意点 : 添加N个<br>标签就换N行）

    img标签获得图片的相对 / 绝对路径

                                                                    + 相对路径 : 每次从html文件所在的文件夹开始查找（资源图片与HTML文件的关系分为三类:01.同级、02.下级、03.上级）。

                                                                + 绝对路径 : 每次从根目录（Mac）/ 指定的一个盘符开始查找。

                                                                + 注意点 : 路径中尽量不要有中文，可能会发生未知错误；绝对路径不要跨盘符查找，找不到。

     <a>标签 : 用于控制两个页面相互跳转    

<!--a标签的基本格式-->
    <a href="想要跳转的网页地址">显示给用户看的内容</a>

      注意 : a标签不仅可以使点击文字具有跳转页面作用，也可以使图片具有页面跳转作用

                a标签必须具有href属性，不然使用a标签不知跳转到何处

                a标签中跳转的URL地址必须包含协议头 如 : http://  or https://

                a标签不仅可以跳转远程服务器网页，也可以跳转本地网页

 <a href="想要跳转的网页地址">

        <img src="显示的可点击图片" alt="图片显示不出来" width="200">

 </a>

      <a>标签重要的属性 : href描述要跳转的网址、title鼠标悬停显示的文字、target跳转是否开启新的选项卡
                         

     <base>标签 : 用来指定当前网页中所有超连接（a标签）需要如何打开

                           注意点 :01. base标签必须写在head标签内部

                                    02. base标签的target属性和每个a标签的target属性设置优先级为 : 就近原则

     html中的假连接 ：其实就是 a 标签，只不过href属性对应的跳转网页链接用 "#" or "javascript:"替代 致使点击链接跳转不了。

                             作用 :01. 在项目开发前期很多页面未完成时，很多超链接先使用假链接

                                                02. 实现点击某个文本弹回网页顶部功能

       "#" 和 "javascript:"区别 :"#"号点击会弹回网页顶部；"javascript:"不会

                  

     html中利用<a>标签跳转到本页特定位置 和 跳转到其他网页特定位置

                                 跳转本网页特定位置 : 与其说跳转到本网页特定位置，不如说跳转到本网页特定位置的标签。每一个标签都有一个id的属性，我们就是通过这个属性，来找到要跳转位置的标签。至于用什么方法跳转，我们还是利用<a>标签来跳转，只不过在 href 属性里加入#要跳转标签的id。

<!--点击这个a标签，跳转到下面的h1标签-->
    <a href="#flag">点我跳到本页指定位置</a>
    
    <!--跳转到的位置-->
    <h1 id="flag">要跳转的位置</h1>

                                  跳转本其他网页特定位置 : 基本原理和上面跳转本网页特定位置方法相同，不同的就是在<a>标签的 href 属性里要跳转的网页URL／文件名后面加上 #其他网页中指定位置标签的id。

   <!--点击这个a标签，跳转到特定网页中的h1标签-->
    <a href="Test.html#flag">点我跳到Test.html网页中指定位置</a>

    <!--其他网页中要跳转到的位置-->
    <h1 id="flag">要跳转的位置</h1>

WebStrom快捷方式 01. command + D 快速复制添加当前光标所在行代码

                                 02. command + X 快速删除当前光标所在行代码

                                 03. command + option + T 快速包裹一段选中文字来添加语义标签