lt;h2 id="title1">开发工具(工欲善其事必先利其器)</h2>

• 为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用每天编写很多没有意义的重复代码, 提升大家的开发效率今后的课程中我们统一采用最高级高发工具来编写网页

<h3 id="title2">常见的前端开发工具</h3>

• 记事本: 提示功能较差

• editplus/nodepad++: 提示功能较差

• Dreamwaver: 更偏向设计

• Sublime: 轻量级,自带功能不太全, 但是插件十分丰富

• WebStorm: 重量级, 自带功能全面

• 其它ide(zend studio、netbean等)

• 为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 今后的课程中我们统一采用最牛逼最高级的高发工具WebStorm

<h3 id="title3">WebStorm安装和使用</h3>

• 安装软件

1.png

2.png

3.png

4.jpg

5.jpg

6.png

7.jpg

8.png

• 破解软件

9.png

10.png

11.jpg

12.jpg

13.png

14.png

• 汉化软件

15.png

16.jpg

• 设置模版

• 创建文件

17.png

18.jpg

关注微信订阅号：网页设计轻松学 有更多内容

19.png

• WebStorm常见快捷键

• 如何在WebStorm中利用快捷键创建一个新的.html的文件

• 同时按下键盘上的Ctrl + Alt + Insert

• 如何在WebStorm中让光标移动到当前行的末尾

• 按下键盘上的End键即可

• 如何在WebStorm中让光标移动到当前行的最前面

• 按下键盘上的Home键即可

• 如何在WebStorm中让光标在多行中闪烁

• 按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可

• 如何在WebStorm中快速的复制光标所在的那一行

• 按下键盘上的Ctrl + D

• 如何在WebStorm中快速的删除光标所在的那一行

• 按下键盘上的Ctrl + X

• 如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签

• 按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可

<h2 id="title4">基础标签学习</h2>

<h3 id="title5">H系列标签(Header 1~Header 6)</h3>

• 作用:

• 用于给文本添加标题语义

• 格式:

• <h1>xxxxxx</h1>

• 注意点:

• H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的

• H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效

• 被H系列标签包裹的内容会独占一行

• 在H系列的标签中, H1最大, H6最小

• 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)

<h3 id="title6">P标签(Paragraph)</h3>

• 作用:

• 告诉浏览器哪些文字是一个段落

• 格式:

• <p>xxxxxxxx</p>

• 注意点:

• 在浏览器中会单独占一行

<h3 id="title7">Hr标签(Horizontal Rule)</h3>

• 作用:

• 在浏览器上显示一条分割线

• 格式:

• <hr />

• 注意点:

• 在浏览器中会单独占一行

• 通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.

• 由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做

<h2 id="title8">HTML注释(Annotation)</h2>

• 什么是注释?

• 注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思

• 注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流

• 为什么要使用注释?

• 适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的

• 注释格式

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

• 注意点:

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

• 注释不能嵌套使用

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

• 快捷键: ctrl + /

<h3 id="title9">img标签(image)</h3>

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

• 格式: ![](图片路径)

• 标签的属性

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

• 注意点:

• img标签添加的图片默认不是占一整行空间

• 如果想让图片等比拉伸, 只写高度或者宽度即可

关注微信订阅号：网页设计轻松学 有更多内容

<h3 id="title10">br标签(Break)</h3>

• 作用:

• 让内容换行

• 格式:

• <br/>

• 注意点:

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

<h3 id="title11">相对路径和绝对路径</h3>

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

• 绝对路径

• 从电脑的具体盘符开始寻找我们需要的资源

• ![](F:/lnj/girl.png)

• 以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片

• 相对路径

• 一个文件相对于另外一个文件的位置寻找我们需要的资源

• ![](girl.png)

• 假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片

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

• 可以移植性太差.

• 什么是可移植性?

• 可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行

• 为什么绝对路径可移植性差?

• 假如我编写的html文件放在我电脑的 F:/lnj 目录下, html文件中用到的图片放在F:/lnj/images目录下, 我给src指定的绝对路为F:/lnj/images/girl.png. 那么将来我将整个lnj文件夹拷贝给你, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片

• 例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png, 而src会去F盘找, 所以不会显示

• 你只有将lnj文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好

• Q群；162542073
  

• 为什么相对路径可移植性好?

• 同上, 如果src指定的路径为images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示

• 相对路径几种查找方式

• ../代表访问上级目录

• 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png

• 因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png

• 直接编写, 例如abc/girl.png

• 加上./ 编写, 例如./abc/girl.png

• 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png

• 直接编写, 例如: girl.png

• 加上./ 编写, 例如./girl.png

• ./代表当前目录, ./girl.png代表在当前目录下查找

• 同级

• 下级

• 上级

• 注意事项:

• 相对路径不会出现这种格式aaa/../bbb/girl.png

• 虽然可以显示, 但是企业开发中千万不要这么写

<h3 id="title12">a标签(anchor)</h3>

• 格式: <a href="http://www.it666.com">江哥博客</a>

• 作用: 用于从一个页面链接到另一个页面

• 注意事项:

• 在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签

• a标签也叫做超级链接或超链接

• a标签的属性

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

• 如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开

• 格式: <base target="_blank" />

• 注意事项:

• base必须嵌套在head标签里面

• 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行

• a标签其它用法

• 例如<a href="girl.zip">下载福利资源<a/>

• 格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>

• 只需要在01-锚点链接.html页面添加一个id位置即可

• 2.1.格式<a href="#location">跳转到指定位置</a>

• 2.2.在页面的指定位置给任意标签添加一个id属性

• 例如 <p id="location">这个是目标</p>

• 格式<a href="#">江哥博客</a>

• 格式<a href="javascript：">江哥博客</a>

• 假链接(本质是跳转到当前页面)

• 跳转到当前页面指定位置(锚点链接)

• 跳转到指定页面的指定位置

• 下载(极力不推荐使用)

馨提示：细读本文需要2分钟，速读仅需1分钟。

作者|李娜

*本文为「Java联盟」原创内容，转载无需授权，请保留署名来源。

前言

上一节我们讲到HTML是什么，一个网页的基本架构是怎么样子。但是往往一个网页有很多标签，分别代表不同的含义，当然如果你不懂的话何谈编辑呢？所以这一节，开始讲到HTML中的那些常见标签。

第二节 HTML 中的常见标签

首先我们先来了解一下 HTML 标签的类型:

HTML 标记标签通常被称为 HTML 标签(HTML TAG)。

1

单标签与双标签

单标签:单个标签标记名称

无属性值: 如: br / （表示换行）

有属性值: 如: hr width=80% / （表示水平线的宽占参照物的百分之八十）

双标签：两个标签，成对出现。

无属性值: 标记名称.../标记名称

如: title.../title

有属性值: 标记名称 属性=属性值.../标记名称

如:fontsize7.../font

注意：

标签的属性与属性之间以空格分隔，属性不区分先后顺序，且属性不是必需要写的。

然后我们来了解下标题标签。

2

标题标签

标题标签:hx/hx

其中“x”是1~6的数字代表字体的大小

如下就是标题标签

h1我是标题1/h1

h2我是标题2/h2

h3我是标题3/h3

h4我是标题4/h4

h5我是标题5/h5

h6我是标题6/h6

执行实际效果图如下：

一般一篇文章只会使用一个 h1 标签。

3

font标签

接下来是 font 标签，比如说font size='5' color='#ff33cc'

这是一个 font 标签/font

其中的 “ size “ 是字体的大小属性这里把大小设置为 “ 5 ” ，“ color ” 是 font的颜色属性，可以在 editplus 中选择。

font size='5' color='#ff33cc'

效果展示：

4

段落，格式标签

p标签是一个定义段落标签

pp 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。/p

功能 标记
加粗 b文本/b
倾斜 i文本/i
加强语气(加粗)strong文本/strong
加强语气(倾斜)em文本/em
下划线u文本/u
删除线 del文本/del
上标 sup文本/sup
下标 sub文本/sub

换行br/

执行效果图如下：

5

超链接标签

这一节的最后介绍一下超链接标签

a标签:我们有时候跳转页面就是a标签实现的

ahref=http://www.baidu.com百度/a

这样的话我们就可以跳转到百度页面了。

最后给大家看看本节所有的源代码以及执行效果图

源代码

执行效果图

好的这里给大家分享了常见的一些标签想要学习到更多的标签知识的小伙伴要记得关注我们的公众号 我们会持续更新有关于HTML的文章的。

有疑问？有想法？请留言！

微信搜索关注 ：java联盟

例

为您的 HTML 文档定义标题：

<html>

<head>

<meta charset="utf-8">

<title>文档标题</title>

</head>

<body>

文档内容......

</body>

</html>

浏览器支持

所有主流浏览器都支持 <title> 标签。

标签定义及使用说明

<title> 标签定义文档的标题，在所有 HTML 文档中是必需的。

<title>元素：

• 定义浏览器工具栏中的标题

• 提供页面被添加到收藏夹时的标题

• 显示在搜索引擎结果中的页面标题

提示和注释

注释：一个 HTML 文档中不能有一个以上的 <title> 元素。

提示：如果您遗漏了 <title> 标签，文档作为 HTML 是无效的。

HTML 4.01 与 HTML5之间的差异

无。

全局属性

<title> 标签支持 HTML 的全局属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！