HTML学习之路-第二天

2017-08-19  本文已影响0人  白尾巴的猫

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标签

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

        -格式:<h1>...</h1>

        -H标签一共有6种,<h1>...<h6>,如图所示:

图2-1 H标签

         -在企业开发中,一个页面只能有一个<h1>标签

         -属性align:<h1 align="...">...</h1>,align可以为left(居左)、center(居中)、right(居右)(不推荐使用)

(2)P标签

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

         -格式:<p>...</p>

         -具体呈现,如图所示:

图2-2 P标签

(3)Hr标签

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

         -格式:<hr/>,如图所示:

图2-3 Hr标签

3.注释

(1)格式:<!--这里是注释-->

(2)作用:方便阅读代码

(3)WebStorm中的快捷键:ctrl+/  快捷加入注释

4.img标签

(1)作用:告诉浏览器要显示一张图片

(2)格式:<img src="图片路径">

(3)img标签不会独占一行

(4)属性:

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

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

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

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

5.br标签

(1)作用:换行

(2)格式:<br>

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

6.路径

(1)相对路径:在“.html”文件所在的文件夹开始查找

(2)绝对路径:每次都从指定的盘符查找(不建议使用)

7.a标签

(1)作用:用于控制页面之间的跳转

(2)格式:<a href="指定要跳转的页面">展现给用户的内容</a>,如图所示:

图2-4 a标签

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

(4)使用相对路径可以跳转本地页面

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

(6)title属性:跟img标签中的title属性一样,当鼠标悬停在图片上时,显示的文本

8.base标签

(1)作用:统一制定所有超链接(a标签)新建选项卡打开

(2)格式:在<head>...</head>中添加 <base target="_blank">

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

9.假链接

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

(2)格式:

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

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

10.锚点

(1)作用:跳转到当前页面的指定位置,常用于目录制作

(2)通过a标签跳转,且给目标位置绑定id属性

(3)格式:

                    <a href="#center">...</a>

                    <h2 id="center">..</h2>

上一篇下一篇

猜你喜欢

热点阅读