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

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

        -格式:<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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 6,172评论 1 8
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,675评论 1 41
  • 我奋斗,所以我快乐 下面是对HTML的知识点做一个总结(这是一个艰辛的过程,不过还是很happy)。 一、基本概念...
    姬鸟念渔阅读 4,721评论 0 2
  • 昨晚跑群约跑,今早五点半集合。看到公告,内心蠢蠢欲动。脑袋里两个小人在打架,“去吧!难得的机会,这个星期就跑了...
    寒月零星阅读 2,750评论 0 0