HTML 基本概念梳理——涉及HTML简要发展史、基本标签

本文原产于个人有道云笔记，迁移CSDN时部分图片未上传，格式未调整。望阅读的人海量。

1.HTML基础——基本概念

1.1什么是浏览器

浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已。功能主要有两个：将网页渲染出来给用户查看，能够让用户通过浏览器和网页交互。

• 浏览器市场份额-国内统计
• 浏览器市场份额-国外统计

不同的浏览器有不同的浏览器内核， 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现

• IE内核 Trident
• 谷歌内核 WebKit / Blink
• 火狐内核 Gecko
• Safarri内核 WebKit
• 欧朋内核 Presto

前期上课以谷歌浏览器为主，后面将专门详细介绍浏览器兼容问题。国内浏览器基本同上面的这些内核，一帮子皮包公司。

360：IE/谷歌内核

 

1.2什么是服务器

服务器也是电脑，只不过是比我们的电脑配置更高的电脑，并且24小时不断电，不关机的计算机

服务器是专门用于存储数据电脑， 访问者可以访问服务器获得服务器上存储的资源

服务器一旦关机，访问者就无法访问

1.3访问网页原理

1.3.1浏览器请求数据的原理

1.第一次打开IE6，发现系统自动给我们生成了一个文件夹LisectIE6，所以我们可以得出这个文件夹必然和IE6有一定的关系，

2.先删除Internet Cache下的所有文件夹，然后通过IE6打开百度的首页，之后发现被删除的文件夹又回来了。

3.再次删除这些文件夹，发现不能删除，提示被其他应用程序打开。当关闭IE6浏览器之后，又发现可以删除了

所有综合2、3，得出结论：这些系统自动创建文件夹和当前被打开的网页有一定的关系。

通过观察发现这些文件夹中存储的内容和网页上的内容有对应关系，这些文件夹是什么文件夹呢？其实这些文件夹我们称之为缓存文件夹 ，专门用于存储网页数据的文件夹。

结论：1.当利用浏览器访问网页时，其实是有真实的物理文件传输的。浏览器会将网页上的内容缓存到本地文件夹中，再渲染出来，呈献给用户查看。

2.平时我们在上网时会感觉到第二次访问网页会比第一次访问网页快，是因为第一次访问时已经将这个网页的信息缓存到了本地。

3.缓存文件夹中除了缓存图片外，还缓存了.js/.css/.html等，所以可以得出一个网页不是一个文件，而是一堆文件。网页越复杂，组成网页的文件就越多。

1.3.2浏览器请求数据的过程

请求报文：请求行+请求头+空行+请求体（服务器端开发时介绍）

响应报文：响应行+响应头+响应体（服务器端开发时介绍）

验证请求报文：打开google，F12打开开发者工具。

network：网络，监听浏览器访问网页时，网络上发生的事情

headers：

general：普通的，

response headers：响应头

view parsed

响应头

响应行

request headers：请求头

response：响应体

 

 

1.4什么是URL

我们在地址栏中输入的地址就是一个URL，

URL格式：

http://127.0.01/index.html（浏览器会自动添加 :80）

http://127.0.0.1:80/index.html（完整的格式）

URL拆分：

http://: URL协议类型（1.5详细介绍）

127.0.0.1：服务器 IP地址（IP地址相当于现实生活中的地址）

:80：服务器的端口号（端口号相当于现实生活中的门牌号。）

index.html：需要访问的资源名称

URL拆分后每个部分的作用：

IP地址和端口号作用：IP地址相当于现实生活中的地址。端口号相当于现实生活中的门牌号。

只要将地址和门牌号码结合在一起就可以得到一个详细地址，只要我们拿到了一个详细地址，是不是就可以根据这个地址找到相对应的位置。

所以服务器IP地址和端口号的作用就是告诉浏览器我们需要访问的服务器详细地址。

index.html：当我们通过IP地址和端口号找到对应的服务器之后，需要通过资源名称告诉服务器，我们需要获取哪个资源。

补充：URL全称Uniform Resource Locator（统一资源定位符），互联网上的每个资源都有一个唯一的URL地址。由于IP地址全都是数字，没有任何的含义，比较难以记忆。所以在访问网页时最常见的不是IP地址而是“域名”（一串有含义的字母OR数字）

1.5什么是HTTP协议

-HTTP是Hypertext Transfer Protocol的缩写。超文本传输协议。

-什么是协议？

在现实生活中有很多的协议，如：买卖协议、离婚协议等。无论是什么协议他们都有一个共同点，就是用来规范/约束某一类事物。

沟通问题？——沟通最常见的问题就是语言不通，如：中国人中文和美国人英文沟通，会出现沟通问题。想解决沟通问题要拟定协议，两个人都说中文，或者两个人都说英文，或请翻译。

-HTTP协议是用来规范/约束浏览器和服务器之间沟通。

 

1.6其他知识储备

在windows系统中如何查看文件的扩展名，默认情况下Windows不显示文件扩展名。

电脑上的文件是可以同时被多个软件打开的，不同的软件打开可能有不同的效果。

什么是纯文本文件？

Windows电脑上有一款默认安装好的软件叫做记事本，这款软件就是专门用来打开纯文本文件的，所以只要能够被记事本打开，并且能够正常显示的文件。.html可以被记事本打开，并正常显示。所有.HTML是纯文本文件。

纯文本文件不知道文字的语义，都是同级别的。解决办法：使用HTML。

2.HTML基础——认识HTML

2.1.什么是HTML

HTML（HyperText Markup Language）的缩写，超文本标记语言。

HTML文件的扩展名是html，hml。

2.2.HTML的作用

给纯文本文件添加语义。告诉浏览器纯文本文件中那几个字是什么含义（标题，段落等），并且不会在浏览器中显示，超级牛逼（超文本）。叫标签。

-首先利用记事本保存了一个标题和两段描述，然后修改纯文本文件的扩展名为.html，然后再利用浏览器打开

-打开后发现显示的格式不对，是因为在纯文本文件中所有的文字都是同级别的。浏览器不知道哪些文字代表什么意思，也就是浏览器不知道哪些文字是标题，哪些文字是段落。所以导致显示格式不正确

-因此，HTML应用而生，HTML就只有一个作用，是专门用来描述文本的语义的，也就是说我们利用HTML来告诉浏览器哪些是标题，哪些是段落

-这些用于描述其他文本语义的文本，称之为标签，并且这些用于描述其他文本语义的标签将来在浏览器中是不会被显示出来的。

-所以因为HTML这些标签是专门用来描述其他文本语义的，并且在浏览器中不会被显示出来，所以我们称这些文本为“超文本”，而这些文本又叫做标签，所以HTML被称之为“超文本标记语言”。

——注意：虽然利用

描述一段文本之后，这段文本在浏览器中显示出来会被放大和加粗，看上去我们是利用HTML的标签修改了被描述的文本样式，但是HTML的作用只有一个，它是专门用来给文本添加语义的，而不是用来修改文本样式的。

 

-h1标签作用是什么？

-错误：H1标签可以用来修改文字的大小，并且还可以将文字加粗

-正确：H1标签的作用是用来告诉浏览器，哪些文字是标题，也就是H1标签是专门用于给指定文字添加标题语义的。

 

2.3.HTML的发展史

IETF简介：

• IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是"互联网工程任务组"。
• IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等

W3C简介

• W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
• W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
• W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

 

1993年发布时，HTML没有任何标准。1995年HTML2.0才有了真正的标准

XHTML1.0较HTML而言更加严谨。但发布后引发了不满，因为以前能用的网站到XHTML就不能用了，XHTML想发布2.0的时候，五大浏览器联合抵制2.0的标准，搞了WHATWG组织，继续推广HTML标准，并在2004年发布HTML5草案。W3C害怕了，也为了HTML的发展。就跟WHATWG开会，结果W3C放弃XHTML标准，并同WHATWG一起制定HTML5标准。于2008发布正式HTML5的标准

 

 

2.4.网页的固定格式

编写网页和写信一样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式

写信基本结构

 

编写网页的步骤:

1.新建一个文本文档

英文或拼音命名文件

2.利用记事本打开

3.编写THML代码

4.保存并且修改纯文本文档的扩展名为.html

5.利用浏览器打开编写好的文件

网页基本结构

通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

2.4.1.HTML标签

-作用：告诉浏览器这是一个网页，告诉浏览器这是一个HTML文档

-注意：其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

2.4.2.head标签

-作用：用于给网站添加一些配置信息

例如:

• • • • 指定网站的标题 / 指定网站的小图片
      • 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
      • 外挂一些外部的css/js文件
      • 添加一些浏览器适配相关的内容

-注意：一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到（是给浏览器看的）

 

2.4.3.body标签

-作用：专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)

-注意：虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中

一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

 

2.4.4.title 标签

-作用：专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题

-注意：title标签必须写在head标签里面

2.5.html内部标签

1.meta标签

-作用：指定当前网页的字符集

-为什么会有乱码现象？

因为我们在编写网页的时候哦没有指定字符集

-如何解决乱码现象?

在head标签中添加, 指定字符集

-什么是字符集?

字符集就是字符的集合, 也就是很多字符堆在一起. 其实字符集很像我们古代的"活字印刷术", 在活字印刷术中就是将很多刻有汉字的小章放到一个盒子中, 然后需要印刷文字的时候再去盒子中取这个小章出来用, 正是因为如此, 所以导致了乱码问题

假设北方人和南方人都拥有装满小章的盒子, 但是南方人和北方人在盒子中存储小章的顺序不太一样, 那么这个时候如果北方人和南方人都需要去取"李"字, 在南方人记忆中李字在第6个盒子的第6行的第6列中(666), 在北方人的记忆中李字在第8个盒子的第8行的第8列中(888). 那么此时如果让一个南方人去北方人的盒子中取"李"字的小章, 必然找不到,, 所以就导致了乱码问题

这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中我们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子

所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子, 你应该如何去查找才能找到对应的正确的内容

-GBK(GB2312)和UTF-8区别

-GBK(GB2312.国标2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文。体积比较小

-UTF-8里面存储的世界上所有的文字，体积比较大。

-那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?

如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快。

如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8。

懒人推荐: 不管三七二十一, 一律写UTF-8即可。

 

-注意点:

在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码（Win10保存记事本默认GB2312（打开记事本文件-格式-字体查看））

所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

另存为-可更改编码方式。

 

2.6.HTML标签

2.6.1HTML标签分类

双标签

有开始标签和结束标签, 也就是由一个<>和一个组成的

单标签

只有开始标签没有结束标签, 也就是由一个<>组成的

2.6.2.HTML标签关系分类

并列关系(兄弟/平级)

嵌套关系(父子/上下级)

2.7.DTD文档声明

什么是DTD文档声明?

由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染我们的网页。

DTD文档声明格式:（企业开发只用HTML5的文档声明的格式。因为HTML的DTD文档格式是上下兼容的。）

注意事项:

• 声明必须是 HTML 文档的第一行，位于 标签之前
• 声明不是 HTML 标签，是指示Web浏览器关于页面用哪个HTML版本进行编写的指令。
• 声明没有结束标签
• 声明对大小写不敏感，不区分大小写。
• 这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制

• • 不写也能运行，但是由于W3C规定第一行必须写上DTD文档声明，所以为了遵守规定，无论怎么我们都应该在第一行写上DTD文档声明
  • H5网页里面用H4也能运行

完整格式：

其他常用文档声明

www.w3school.com.cn/tags/tag_doctype.asp中介绍了其他文档声明，分为两大类：HTML,XHTML。每一类又有三小类。

HTML	Strict (严格的)
HTML	Transitional(过度的,普通的,宽松的)
HTML	Frameset(带有框架的页面)
XHTML	Strict (严格的)
XHTML	Transitional(过度的,普通的,宽松的)
XHTML	Frameset(带有框架的页面)

 

HTML的DTD文档声明和XHTML的DTD文档声明有何区别?

XHTML 比HTML 文档声明更加严格。因为XHTML本身就比HTML严格

（相关代码F:\学习\前端\代码03.DTD文档格式2.html）

 

Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用

• 例如font标签/u标签等
• font标签可以修改一个文本的字号、颜色、字体,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而font标签是用于修改样式的,所以在Strict中是不能使用font标签
• u标签可以给一个文本加上下划线,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u标签是用于添加下划线是样式.所以在Strict中是不能使用u标签

 

Transitional表示普通的, 这种模式是没有一些别的要求

• 例如可以使用font标签、u标签等
• 但是在企业开发中不会使用这些标签,因为这违背了HTML的本质, 而是将这些标签作为css的钩子使用
•  

Frameset表示框架, 在框架的页面使用

• 后面学到框架/NodeJS 再做详细了解

 

常见的文档声明：

有这么多规范我们学习过程中到底使用哪一种比较合适呢?

• 无论是HTML还是XHTML,过去企业级开发中用的比较多的大部分都是Transitional类型的文档声明
• 但是HTML5的时代已经到来,以上6中规范仅仅作为了解, 以后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)
• 目前国内一线网站都更新到了HTML5的文档声明, 所以后续授课也是全程使用HTML5的文档声明

• • www.baidu.com (B)
  • www.taobao.com (A)
  • www.qq.com (T)
  • www.sohu.com(大奇葩)

 

2.7.1、HTML和XHTML、HTML5区别

简而言之：严格和不严格的区别；功能多和功能少的区别。

HTML语法非常宽松容错性强;

XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;

HTML5功能比其他两人多。是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

在HTML的早期发展中，大部分标准都是所谓的retro-spec，即先有实现后有标准。在这种情况下，HTML标准不是很规范，浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面

html语言本身有一些缺陷（例如： 内容和形式不能分离；标签单一；数据不能复用等等），随着xml的兴起人们希望xml来弥补html的不足，但是目前有成千上万的网页都是用html编写的，所以完全使用xml来替代html还为时过早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是实现从html向xml的过度

为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的标签，只是按照XML的要求来规范HTML，并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查，如果页面有HTML错误，就要显示错误信息。但是由于已有的web页面中已经有了大量的错误，很多开发者拒绝使用新的MIME type。W3C不得已，在XHTML 1.0的标准之后增加了一个附录C，允许开发者使用XHTML语法来写页面，同时使用旧的MIME type，application/html，来分发页面

W3C随后在XHTML 1.1中取消了附录C，即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用

有了XHTML的教训，W3C在制定下一代HTML标准时（HTML5），就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性，但是它最重要的一个特性是，不会break已有的网页。你可以将任何已有的网页的第一行改成，它就成也一个HTML5页面，并且可以照样在浏览器里正常的展示。

 

2.7.2、.htm 和.html 扩展名区别

DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm

但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的

所以htm是为了兼容过去的DOS命名格式存在的

 

3. HTML基础——基础标签

3.1、常见开发工具——企业要求使用，就用哪个

• 记事本: 提示功能较差
• editplus/nodepad++: 提示功能较差
• Dreamwaver: 更偏向设计
• Sublime: 轻量级,自带功能不太全, 但是插件十分丰富
• WebStorm: 重量级, 自带功能全面，对JS的支持非常好

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

3.2、WebStorm安装

傻瓜式安装，不赘述。付费软件，建议工作后购买正版

设置背景：file-》settings-》editor-》color and font-》scheme（主题模板）

设置字体：file-》settings-》editor-》 font

设置过长文字换行：file-》settings-》editor-》 general-》soft wraps（包裹）

汉化问题不做说明

编辑文件是自动保存的

webstrom快捷键

直接写h1按Tab键自动补全

 

创建一个新的.html的文件——Ctrl + Alt + Insert

 

让光标移动到当前行的末尾——End键

光标移动到当前行的最前面——Home键

 

让光标在多行中闪烁——按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可（

~标签内写相同内容时使用）

 

快速的复制光标所在的那一行——Ctrl + D

 

删除光标所在的那一行——Ctrl + X

 

让标签包裹一段内容, 也就是自动在一段内容前后加上标签——Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可

 

注释快捷键：ctrl + /

 

快捷键写ul，li格式的方法：

ul > li + tab（ul中包含一个li）

ul > li + tab * 2（ul中包含两个li）

 

快速移动选中的代码, 上下移动

往上移动 Ctrl + shift + ↑(方向键上)

往下移动 Ctrl + shift + ↓(方向键下)

 

快速合并和展开代码(合并和展开的是某一个标签)

合并: Ctrl + -

展开: Ctrl + +

 

快速合并和展开代码(合并和展开选中的所有标签)

合并: Ctrl + shift + -

展开: Ctrl + shift + +

 

快速新启一行：shift + enter

 

编辑器超出窗口部分自动另起一行：File——>Settings——>Editor——>General——>Soft Wraps——>勾选”Use soft wraps in editor“

 

注释快捷键: ctrl + /

3.3H系列标签

作用:

用于给文本添加标题语义

格式:

xxxxxx

注意点:

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

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

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

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

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

h标签有可选属性：align（left、center、right、justify）,但是不推荐使用。企业开发中一定不要用。

 

 

3.4、P标签

作用:

告诉浏览器哪些文字是一个段落。hr标签用来在网页页面当中输出一条横线,用于表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）

格式:

xxxxxxxx

注意点:

在浏览器中会单独占一行作用:

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

 

3.5Hr标签（单标签）

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

格式:

---

注意点:

在浏览器中会单独占一行

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

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

 

3.6、HTML注释（Annotation）

什么是注释？

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

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

浏览器会忽略的内容称之为注释。注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。合理地使用注释可以对未来的代码编辑工作产生帮助

为什么要使用注释?

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

注释格式

注意点:

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

注释不能嵌套使用

-->

快捷键: ctrl + /

3.7、img标签（image）

作用: 在网页上插入一张图片，告诉浏览器我们需要显示一张图片

格式:

标签的属性

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

属性名称	作用
src(source)	告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
alt(alternate)	规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本
title	悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
height	设置图片显示的高度，如果img标签没有知识宽高，系统会按照图片的默认宽高来显示，若指定宽高，则用指定显示
width	设置图片显示的宽度

注意点:

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

若指定了img标签显示的图片的宽度和高度，有可能导致图片变形了。如果想指定宽度和高度，又不想图片变形，可以指定高度和宽度中的一个值即可。只要制定了宽度，系统会自动计算出高度，是等比变形的

 

3.8、br标签（Break）

作用：让内容换行

格式：

注意点:

br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做。所以在企业开发中很少使用br标签。

多个br标签可以连续使用，使用了多少个br标签就会换多少行

3.9相对路径和绝对路径

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

绝对路径

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

格式：src="F:\学习\前端\代码\1.jpg"

含义：在 F盘下找到学习文件夹，以此类推

[图片上传失败...(image-272290-1522164219949)]

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

相对路径

每次都从.html文件所在的文件夹开始查找。称为相对路径。

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

[图片上传失败...(image-2aceec-1522164219949)]

假设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盘根目录下时图片才会正常运行, 这就叫做可移植性不好

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

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

相对路径几种查找方式

同级：图片和.html文件储存在同一个文件夹中

格式：src="1.jpg"

含义：在.html文件所在的文件夹中查找名称叫做1.jpg的图片。

直接编写, 例如: girl.png

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

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

下级：存储图片的文件夹和.html文件在同一个文件夹中，

格式：src="images/1.jpg"

含义：在.html文件所在的文件夹中查找名称叫做images的文件夹，然后再images文件夹中找到名称叫做1.jpg的图片

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

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

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

上级：就是存储图片的位置和存储代码的文件夹在同一个文件夹中

格式：src="../1.jpg"

含义：在.html文件夹所在的文件夹中找到这个文件夹的上一级文件夹，然后再上一级文件夹中找到名称叫做1.jpg （../表示从当前的位置找到上一级文件夹）

../代表访问上级目录

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

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

注意事项:

路径中不要出现中文

如果是通过相对路径来指定，不能跨盘符

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

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

练习：

注意：以后企业开发中如果需要编写路径，统一使用正斜杠/，不要使用反斜杠\。

因为将来我们开发程序可能会部署到其他操作系统的服务器上，而在其它操作系统中路径都是/，如果你写的不是/，可能会引发问题

3.10、a标签

1.格式: 显示的内容

2.作用: 控制页面与页面之间的跳转。用于从一个页面链接到另一个页面

注意事项:

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

2、a标签也叫做超级链接或超链接

3、a标签不仅可以让文字可以点击, 还可以让图片也能够被点击

4、一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方

5、如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://

6、a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址

3.a标签的属性

属性名称	作用
href(hypertext reference)	指定跳转的目标地址
target	告诉浏览器是否保留原始界面, _blank（打开新的选项卡）保留, _self（当前选项卡中跳转）不保留，为默认值
title	同image的title属性。悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

4.base标签和a标签结合使用

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

格式: ，写在head标签中。

base标签：专门用来统一的指定当前网页中所有的超链接（a标签）需要如何打开

注意事项:

base必须嵌套在head标签里面

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

5.a标签其它用法

什么是假链接？

就是点击之后不会跳转的链接我们称之为假链接

 

假链接存在的意义：

企业开发前期，首页上的链接都没写出来，我们就不知道应该跳转到什么地方，就用假链接代替，使得a标签点击不跳转，等二级页面写完了，再做跳转。

 

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

格式江哥博客

格式江哥博客

两者区别：#的加链接会自动回到网页的顶部，而JavaScript:的假链接不会自动回到顶部，回到顶部的功能都是用假链接做的。

 

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

格式跳转到指定位置

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

例如

这个是目标

要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，这样a标签才能在当前界面中找到需要跳转到的目标位置。

 

所以要想实现通过a标签跳转到指定的位置分为两步

1、给目标位置的标签添加一个id属性，然后制定一个独一无二的值

2、告诉a标签你需要跳转到的目标标签对应的第一无二的身份证号码是多少

 

跳转到其他页面指定位置

格式: 跳转到锚点测试界面

我是锚点测试3

只需要在锚点链接页面添加一个id位置即可

注意点：

1、通过我们的a标签跳转到指定的位置，是没有过度动画的，是直接一下子跳转到了指定位置。要做有过度动画的，不可以用a标签做。

2、a标签除了可以跳转到当前界面的指定位置以外，还可以再跳转到其他界面的时候直接跳转到其他界面的指定位置。

下载(极力不推荐使用)

例如下载福利资源

 

3.11.列表标签

1.什么是列表标签？

列表标签的作用：给一堆数据添加列表语义，告诉搜索引擎这一堆数据是一个整体