HTML学习之路-第二天

1.安装HTML编辑器-WebStorm

（1）常用的前端开发工具：Dreamwaver，Sublime，WebStorm

（2）可以直接百度搜索WebStorm，因为是收费软件，如果是为了学习，我们可以下载破解版，如果你已经工作，有一定收入，我希望你能支持正版，而且官网下载的免费使用三十天，官网地址：http://www.jetbrains.com/webstorm/

（3）安装WebStorm后，打开软件，在激活页面选择“License server”，在下方输入“http://idea.iteblog.com/key.php”即可破解

（4）可以下载汉化包，将汉化包放入安装目录的lib文件夹中

（5）新建html文件：ctrl+alt+insert，然后选择“HTML File”

2.H标签、P标签和Hr标签

（1）H标签

        -作用：用于给文本添加标题，不是用来修改文本样式的

        -格式：

...

        -H标签一共有6种，

...

，如图所示：

图2-1 H标签

         -在企业开发中，一个页面只能有一个

标签

         -属性align：

...

，align可以为left（居左）、center（居中）、right（居右）（不推荐使用）

（2）P标签

         -作用：告诉浏览器哪些文字是段落，会单独占据一行

         -格式：

...

         -具体呈现，如图所示：

图2-2 P标签

（3）Hr标签

         -作用：在浏览器上显示一条分割线

         -格式：

---

，如图所示：

图2-3 Hr标签

3.注释

（1）格式：

（2）作用：方便阅读代码

（3）WebStorm中的快捷键：ctrl+/  快捷加入注释

4.img标签

（1）作用：告诉浏览器要显示一张图片

（2）格式：

（3）img标签不会独占一行

（4）属性：

        -width 图片宽度，只要指定了宽度，系统会自动根据宽度计算高度

        -height 图片高度，只要指定了高度，系统会自动根据宽度计算宽度

        -title 当鼠标悬停在图片上时，显示的文本

        -alt 是alternate的缩写，用于告诉浏览器，当需要的图片找不到时显示的内容

5.br标签

（1）作用：换行

（2）格式：

（3）多个br标签可以多个使用，用多少个就换多少行，但是由于HTML的作用（给文本添加语义），所以在企业开发中很少使用br标签

6.路径

（1）相对路径：在“.html”文件所在的文件夹开始查找

（2）绝对路径：每次都从指定的盘符查找（不建议使用）

7.a标签

（1）作用：用于控制页面之间的跳转

（2）格式：展现给用户的内容，如图所示：

图2-4 a标签

（3）不仅可以用文本点击跳转，还可以用图片等，注意的是，网页链接需要加上“http://”或者“https://”

（4）使用相对路径可以跳转本地页面

（5）a标签中有一个target属性，用于控制如何跳转，值可以为“_self（在当前选项卡中跳转）”和“_blank（新建选项卡跳转）”

（6）title属性：跟img标签中的title属性一样，当鼠标悬停在图片上时，显示的文本

8.base标签

（1）作用：统一制定所有超链接（a标签）新建选项卡打开

（2）格式：在...中添加

（4）如果需要单独的某个超链接在当前窗口打开，只需要在其中单独制定即可

9.假链接

（1）作用：点击之后不会跳转的超链接，在开发过程中，其他页面没写出来时，用假链接代替

（2）格式：

        -#     点击后自动回到网页顶部（常用的是各大网站中的“回到顶部”按钮）

        -javascript:     点击后不会自动回到顶部

10.锚点

（1）作用：跳转到当前页面的指定位置，常用于目录制作

（2）通过a标签跳转，且给目标位置绑定id属性

（3）格式：

                    ...

                   

..